.header{position:fixed;top:0;left:0;right:0;width:100%;background:#fffffffa;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 2px 20px #2196f314,0 1px 3px #0000000d;z-index:9999;padding:1.25rem 0;transition:all .4s cubic-bezier(.4,0,.2,1);border-bottom:1px solid rgba(33,150,243,.1);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.header.scrolled{padding:1rem 0;box-shadow:0 4px 30px #2196f31f,0 2px 8px #00000014}.header-content{display:flex;justify-content:space-between;align-items:center;position:relative;gap:2rem;min-width:0}.header-content>*{flex-shrink:0}.header-content .nav{flex-shrink:1;min-width:0}.logo{display:flex;align-items:center;transition:all .4s cubic-bezier(.4,0,.2,1);text-decoration:none;cursor:pointer;height:40px;position:relative;z-index:1}.logo:hover{transform:translateY(-2px)}.logo-image{height:100%;max-height:40px;width:auto;object-fit:contain;transition:all .4s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 4px rgba(33,150,243,.2))}.logo:hover .logo-image{filter:drop-shadow(0 4px 8px rgba(33,150,243,.3)) brightness(1.05);transform:scale(1.03)}.nav-list{display:flex;list-style:none;gap:.5rem;align-items:center;margin:0;padding:0;flex-wrap:nowrap;flex-shrink:1;min-width:0}.nav-link{text-decoration:none;color:#2b2d42;font-weight:600;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;padding:.65rem 1.5rem;border-radius:10px;display:flex;align-items:center;gap:.4rem;white-space:nowrap;flex-shrink:0;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.nav-link:hover,.nav-link.active{color:#2196f3;transform:translateY(-1px)}.nav-item.dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;background:#fff;min-width:180px;box-shadow:0 8px 24px #0000001f;border-radius:12px;padding:.5rem 0;margin-top:.5rem;list-style:none;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000;border:1px solid rgba(33,150,243,.1)}.nav-item.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu li{margin:0;padding:0}.dropdown-link{display:block;padding:.75rem 1.5rem;color:#2b2d42;text-decoration:none;font-size:.9rem;font-weight:500;transition:all .2s ease;border-radius:0;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.dropdown-link:hover{background:linear-gradient(135deg,#2196f314,#42a5f514);color:#2196f3;padding-left:1.75rem}.auth-buttons{display:flex;align-items:center;gap:.75rem;flex-shrink:0;white-space:nowrap}.btn-login,.btn-signup{padding:.7rem 1.75rem;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);font-size:1rem;position:relative;overflow:hidden;white-space:nowrap}.btn-login{background:transparent;color:#2b2d42;border:2px solid rgba(43,45,66,.2)}.btn-login:hover{background:#2b2d420d;border-color:#2196f3;color:#2196f3;transform:translateY(-2px);box-shadow:0 4px 12px #2196f326}.btn-signup{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;box-shadow:0 4px 15px #2196f34d}.btn-signup:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 6px 20px #2196f366}.user-menu{display:flex;align-items:center;gap:1rem;position:relative}.user-name{color:#2b2d42;font-weight:600;font-size:1rem;padding:.6rem 1.25rem;background:linear-gradient(135deg,#2196f31a,#42a5f51a);border-radius:10px;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;white-space:nowrap;flex-shrink:0}.user-menu-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border-radius:12px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000014;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:all .25s cubic-bezier(.4,0,.2,1);z-index:1000;border:1px solid rgba(33,150,243,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-menu.open .user-menu-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.user-menu-dropdown .btn-profile,.user-menu-dropdown .btn-admin,.user-menu-dropdown .btn-logout{width:100%;justify-content:center;align-items:center;margin:0;padding:.65rem 1rem;font-size:.9rem;border-radius:10px;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center;display:flex;border-width:2px;border-style:solid}.user-menu-dropdown .btn-profile{border-color:#4caf50;color:#4caf50;background:#4caf500d}.user-menu-dropdown .btn-profile:hover{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #4caf504d;border-color:#4caf50}.user-menu-dropdown .btn-admin{border-color:#ff9800;color:#ff9800;background:#ff98000d}.user-menu-dropdown .btn-admin:hover{background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #ff98004d;border-color:#ff9800}.user-menu-dropdown .btn-logout{border-color:#2196f3;color:#2196f3;background:#2196f30d}.user-menu-dropdown .btn-logout:hover{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #2196f34d;border-color:#2196f3}@media (max-width: 968px){.user-menu{flex-direction:column;align-items:flex-end;gap:0}.user-menu-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border-radius:12px;box-shadow:0 8px 24px #0000001f,0 2px 8px #00000014;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:all .25s cubic-bezier(.4,0,.2,1);z-index:1000;border:1px solid rgba(33,150,243,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-menu.open .user-menu-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.user-menu-dropdown .btn-profile,.user-menu-dropdown .btn-admin,.user-menu-dropdown .btn-logout{width:100%;justify-content:center;align-items:center;margin:0;padding:.65rem 1rem;font-size:.85rem;border-radius:10px;min-height:40px;text-align:center;display:flex}}.btn-profile{padding:.75rem 1.75rem;border:2px solid #4CAF50;background:transparent;color:#4caf50;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1rem;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.btn-profile:hover{color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #4caf5040;background:linear-gradient(135deg,#4caf50,#66bb6a)}.btn-admin{padding:.75rem 1.75rem;border:2px solid #FF9800;background:transparent;color:#ff9800;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1rem;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.btn-admin:hover{color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ff980040;background:linear-gradient(135deg,#ff9800,#ffb74d);border-color:#ff9800}.btn-logout{padding:.75rem 1.75rem;border:2px solid #2196F3;background:transparent;color:#2196f3;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1rem;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.btn-logout:hover{color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #2196f340;background:linear-gradient(135deg,#2196f3,#42a5f5);border-color:#2196f3}@media (max-width: 1200px){.header-content{gap:1.5rem}.nav-link{padding:.6rem 1.2rem;font-size:.95rem}}@media (max-width: 1024px){.header-content{gap:1rem}.nav-link{padding:.6rem 1rem;font-size:.9rem}.user-name{font-size:.9rem;padding:.5rem 1rem}.btn-profile,.btn-admin,.btn-logout{padding:.65rem 1.5rem;font-size:.9rem}}.mobile-menu-toggle{display:none;background:linear-gradient(135deg,#2196f31a,#42a5f51a);border:2px solid rgba(33,150,243,.2);border-radius:10px;font-size:1.3rem;color:#2196f3;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;transition:all .3s ease}.mobile-menu-toggle:hover{background:linear-gradient(135deg,#2196f333,#42a5f533);border-color:#2196f3;transform:scale(1.05)}@media (max-width: 968px){.header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:9999!important;-webkit-transform:translateZ(0)!important;transform:translateZ(0)!important;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nav{display:none}.nav.active{display:block;position:absolute;top:100%;left:0;width:100%;background:#fff;box-shadow:0 10px 30px #00000026;padding:1rem 0;z-index:9998}.nav.active .nav-list{flex-direction:column;gap:0;padding:0}.nav.active .nav-list li{padding:0;width:100%;cursor:pointer}.nav.active .nav-list li:not(.dropdown){border-bottom:1px solid rgba(33,150,243,.1)}.nav.active .nav-list li.dropdown:not(.active){border-bottom:1px solid rgba(33,150,243,.1)}.nav.active .nav-list li.dropdown.active{border-bottom:none}.nav.active .nav-list li.dropdown.active+li{border-top:none}.nav.active .nav-link{display:block;padding:1rem 20px;width:100%;cursor:pointer;transition:all .3s ease;text-align:center}.nav.active .nav-item.dropdown.active .nav-link{background:#2196f31a;color:#1976d2;font-weight:600}.nav.active .dropdown-menu{position:static;opacity:0;visibility:hidden;max-height:0;transform:none;box-shadow:none;border:none;border-top:1px solid rgba(33,150,243,.15);border-radius:0;margin-top:0;padding:0;background:#2196f30f;overflow:hidden;transition:all .3s ease}.nav.active .nav-item.dropdown.active .dropdown-menu{opacity:1;visibility:visible;max-height:500px;padding:.5rem 0;background:#2196f30d}.nav.active .dropdown-link{padding:.75rem 20px .75rem 3rem;font-size:.9rem;color:#2b2d42;font-weight:500}.nav.active .dropdown-menu li:last-child .dropdown-link{border-bottom:1px solid rgba(33,150,243,.15)}.nav.active .dropdown-link:hover{padding-left:3.5rem;background:#2196f31f;color:#1976d2}.header-content{flex-wrap:nowrap;gap:.6rem;padding:0 12px}.auth-buttons{order:0;width:auto;justify-content:flex-end;margin-top:0;padding-top:0;border-top:none;flex-shrink:0;gap:.5rem}.mobile-menu-toggle{display:flex!important;flex-shrink:0}.logo{flex-shrink:0}}@media (max-width: 640px){.header{padding:.9rem 0;position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:9999!important;-webkit-transform:translateZ(0)!important;transform:translateZ(0)!important;-webkit-backface-visibility:hidden;backface-visibility:hidden}.header-content{gap:.6rem;flex-wrap:nowrap;justify-content:space-between;padding:0 12px}.logo{height:24px;flex-shrink:0;min-width:80px}.logo-image{max-height:24px}.auth-buttons{gap:.6rem;flex-shrink:0;margin-left:auto}.btn-login,.btn-signup{padding:.48rem .8rem;font-size:.75rem;min-width:70px;min-height:30px;width:auto;display:flex;align-items:center;justify-content:center;transition:none}.btn-signup,.btn-signup:hover{transform:none;box-shadow:0 4px 15px #2196f34d}.btn-login:hover{transform:none}.user-menu{gap:0;flex-direction:column;align-items:flex-end;flex-shrink:0;position:relative}.user-name{font-size:.75rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.6rem 1rem;min-height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.user-menu-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border-radius:10px;box-shadow:0 4px 12px #0000001a;padding:.4rem;display:flex;flex-direction:column;gap:.25rem;min-width:140px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;border:1px solid rgba(33,150,243,.1)}.user-menu.open .user-menu-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.user-menu-dropdown .btn-profile,.user-menu-dropdown .btn-admin,.user-menu-dropdown .btn-logout{padding:.75rem 1.25rem;font-size:.875rem;min-width:100%;min-height:44px;width:100%;flex-shrink:0;justify-content:center;align-items:center;border-radius:8px;text-align:center;display:flex;font-weight:500;border:none;transition:all .2s ease}.user-menu-dropdown .btn-profile{background:#2196f31a;color:#1565c0;font-weight:600}.user-menu-dropdown .btn-profile:hover{background:#2196f326;color:#0d47a1;transform:none;box-shadow:none}.user-menu-dropdown .btn-admin{background:#ff98001a;color:#e65100;font-weight:600}.user-menu-dropdown .btn-admin:hover{background:#ff980026;color:#bf360c;transform:none;box-shadow:none}.user-menu-dropdown .btn-logout{background:#f443361a;color:#c62828;font-weight:600}.user-menu-dropdown .btn-logout:hover{background:#f4433626;color:#b71c1c;transform:none;box-shadow:none}.mobile-menu-toggle{width:40px;height:40px;font-size:1.2rem;flex-shrink:0;margin-left:.5rem;min-width:40px;min-height:40px}}.hero{margin-top:80px;width:100%;position:relative;overflow:hidden}.hero-banner{width:100%;height:800px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;animation:fadeInBanner 1s ease-out}.banner-overlay-gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,0,.2) 100%),linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 25%,transparent 75%,rgba(0,0,0,.2) 100%);z-index:5;pointer-events:none;animation:gradientPulse 8s ease-in-out infinite}@keyframes gradientPulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes fadeInBanner{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.banner-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;animation:imageZoom 20s ease-in-out infinite;filter:brightness(.95) contrast(1.1)}@keyframes imageZoom{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.banner-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:12;display:flex;align-items:center;justify-content:center;animation:logoFadeIn 1.2s ease-out .3s both}@keyframes logoFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.banner-logo{width:max(420px,min(550px,45vw));height:max(210px,min(275px,22.5vw));object-fit:contain;animation:logoFloat 6s ease-in-out infinite;filter:drop-shadow(0 15px 40px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(33,150,243,.3)) brightness(1.1) contrast(1.05);position:relative;z-index:1}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.banner-top-left{position:absolute;top:-20px;left:-20px;z-index:8;display:flex;align-items:center;justify-content:center;animation:decorationFloatLeft 8s ease-in-out infinite;opacity:.7}@keyframes decorationFloatLeft{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(5px,-8px) rotate(2deg)}66%{transform:translate(-3px,5px) rotate(-1deg)}}.banner-decoration{width:300px;height:auto;object-fit:contain;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2));animation:decorationGlow 4s ease-in-out infinite}@keyframes decorationGlow{0%,to{filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}50%{filter:drop-shadow(0 8px 25px rgba(0,0,0,.3))}}.banner-bottom-right{position:absolute;bottom:-30px;right:-30px;z-index:8;display:flex;align-items:center;justify-content:center;animation:decorationFloatRight 10s ease-in-out infinite;opacity:.7}@keyframes decorationFloatRight{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(-5px,8px) rotate(-2deg)}66%{transform:translate(3px,-5px) rotate(1deg)}}.banner-decoration-bottom{width:250px;height:auto;object-fit:contain;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2));animation:decorationGlowBottom 5s ease-in-out infinite}@keyframes decorationGlowBottom{0%,to{filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}50%{filter:drop-shadow(0 8px 25px rgba(0,0,0,.3))}}.banner-social-buttons{position:absolute;bottom:50px;left:50%;transform:translate(-50%);z-index:15;display:flex;gap:1.5rem;align-items:center;justify-content:center;animation:buttonsFadeIn 1.5s ease-out .6s both}@keyframes buttonsFadeIn{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.social-btn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:.75rem;padding:0;border-radius:50px;text-decoration:none;font-weight:600;font-size:.95rem;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 20px #0003;border:2px solid transparent;position:relative;overflow:hidden;white-space:nowrap;width:150px;height:48px;min-width:150px;max-width:150px;min-height:48px;max-height:48px;box-sizing:border-box;flex-shrink:0}.social-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.social-btn:hover:before{left:100%}.social-btn i{font-size:1.3rem;transition:transform .3s ease}.social-btn:hover i{transform:scale(1.2)}.youtube-btn{background:linear-gradient(135deg,red,#c00);color:#fff;border-color:#ffffff4d}.youtube-btn:hover{background:linear-gradient(135deg,#f33,red);transform:translateY(-5px) scale(1.05);box-shadow:0 8px 30px #f006}.youtube-btn:active{transform:translateY(-2px) scale(1.02)}.instagram-btn{background:linear-gradient(135deg,#e4405f,#c13584,#833ab4);color:#fff;border-color:#ffffff4d}.instagram-btn:hover{background:linear-gradient(135deg,#f56040,#e4405f,#c13584);transform:translateY(-5px) scale(1.05);box-shadow:0 8px 30px #e4405f66}.instagram-btn:active{transform:translateY(-2px) scale(1.02)}@media (max-width: 968px){.hero-banner{height:800px}.banner-logo{width:max(420px,min(550px,45vw));height:max(210px,min(275px,22.5vw))}}@media (max-width: 640px){.hero-banner{height:670px}.banner-logo{width:450px;height:225px}.banner-top-left{top:-30px;left:-30px;opacity:.6}.banner-decoration{width:250px}.banner-bottom-right{bottom:-40px;right:-40px;opacity:.6}.banner-decoration-bottom{width:200px}.banner-social-buttons{bottom:50px;gap:1rem}.social-btn{padding:0;font-size:.85rem;width:130px;height:44px;min-width:130px;max-width:130px;min-height:44px;max-height:44px;box-sizing:border-box;flex-shrink:0}.social-btn i{font-size:1.1rem}}@media (max-width: 480px){.hero-banner{height:570px}.banner-logo{width:380px;height:190px}.banner-top-left{top:-25px;left:-25px;opacity:.5}.banner-decoration{width:200px}.banner-bottom-right{bottom:-35px;right:-35px;opacity:.5}.banner-decoration-bottom{width:180px}.banner-social-buttons{bottom:40px;gap:.75rem;flex-direction:row;flex-wrap:wrap}.social-btn{padding:0;font-size:.8rem;width:120px;height:40px;min-width:120px;max-width:120px;min-height:40px;max-height:40px;box-sizing:border-box;flex-shrink:0}.social-btn i{font-size:1rem}}.class-steps-section{padding:100px 0;background:linear-gradient(135deg,#f5f7fa,#e8f4f8,#f0f4f8);position:relative;overflow:hidden}.class-steps-section:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(33,150,243,.08) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(66,165,245,.08) 0%,transparent 50%);pointer-events:none;z-index:0}.class-steps-section:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:repeating-linear-gradient(45deg,transparent,transparent 100px,rgba(33,150,243,.02) 100px,rgba(33,150,243,.02) 200px);animation:slidePattern 20s linear infinite;pointer-events:none;z-index:0}@keyframes slidePattern{0%{transform:translate(0)}to{transform:translate(100px,100px)}}.steps-header{text-align:center;margin-bottom:50px;position:relative;z-index:1;opacity:0;transform:translateY(-30px);animation:fadeInDown 1s ease-out .3s forwards}.steps-header-icon{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;background:transparent;border-radius:0;margin-bottom:.75rem;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.steps-header-icon:before{display:none}@keyframes ripple{0%{transform:scale(1);opacity:.3}to{transform:scale(1.5);opacity:0}}.steps-header-icon-img{width:100%;height:100%;object-fit:contain;display:block}.section-heading{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:0;position:relative;animation:fadeInUp 1s ease-out .5s both}.section-heading-img{max-width:360px;width:auto;height:auto;display:block}.steps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;margin-top:3rem;position:relative;z-index:1}.step-item{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px #2196f31a;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;border:2px solid transparent;opacity:0;transform:translateY(50px) scale(.95)}.step-item.animate-in{opacity:1;transform:translateY(0) scale(1);animation:slideInUp .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.step-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#2196f30d,#42a5f50d);opacity:0;transition:opacity .5s ease;z-index:0;border-radius:20px}.step-item:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 25px 70px #2196f340;border-color:#2196f34d}.step-item:hover:before{opacity:1}.step-number{position:absolute;top:1.5rem;left:1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;padding:.5rem 1.2rem;border-radius:25px;font-size:.85rem;font-weight:700;letter-spacing:1px;z-index:3;box-shadow:0 4px 15px #2196f34d;transition:all .4s ease;animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{box-shadow:0 4px 15px #2196f34d}50%{box-shadow:0 6px 20px #2196f380}}.step-item:hover .step-number{transform:scale(1.1);box-shadow:0 8px 25px #2196f380}.step-image-wrapper{width:100%;height:280px;overflow:hidden;position:relative;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);z-index:1}.step-image-wrapper:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 0%,rgba(33,150,243,.1) 100%);opacity:0;transition:opacity .5s ease;z-index:1}.step-item:hover .step-image-wrapper:after{opacity:1}.step-image{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1),filter .5s ease;filter:brightness(1)}.step-item:hover .step-image{transform:scale(1.15);filter:brightness(1.1)}.step-content{padding:2rem;position:relative;z-index:2;background:#fff;transition:transform .4s ease}.step-item:hover .step-content{transform:translateY(-5px)}.step-title{font-size:1.5rem;font-weight:700;color:#2b2d42;margin:0 0 1rem;line-height:1.4;transition:color .3s ease;position:relative}.step-item:hover .step-title{color:#2196f3}.step-title:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:3px;background:linear-gradient(90deg,#2196f3,#42a5f5);transition:width .5s ease;border-radius:2px}.step-item:hover .step-title:after{width:60px}.step-description{font-size:1rem;color:#6c757d;line-height:1.7;margin:0;transition:color .3s ease}.step-item:hover .step-description{color:#2b2d42}@media (max-width: 640px){.class-steps-section{padding:60px 0}.steps-header{margin-bottom:2.5rem}.steps-header-icon{width:85px;height:85px;margin-bottom:1.2rem}.steps-header-icon{width:75px;height:75px;margin-bottom:.9rem}.steps-header-icon-img{width:100%;height:100%}.section-heading-img{max-width:240px;width:auto;height:auto}.steps-grid{grid-template-columns:1fr;gap:1.25rem;padding:0 .75rem}.step-item{border-radius:16px}.step-item:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 18px 50px #2196f333}.step-item:hover .step-image{transform:scale(1.1)}.step-item:hover .step-number{transform:scale(1.05)}.step-image-wrapper{height:200px}.step-content{padding:1.25rem}.step-title{font-size:1.15rem;margin-bottom:.75rem}.step-description{font-size:.875rem;line-height:1.6}.step-number{top:1rem;left:1rem;padding:.4rem 1rem;font-size:.75rem}}.testimonials-section{padding:100px 0;background:linear-gradient(135deg,#fff,#f0f8ffcc);position:relative;overflow:hidden}.testimonials-section:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(33,150,243,.08) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(66,165,245,.08) 0%,transparent 50%);pointer-events:none;z-index:0;animation:gradientShift 8s ease-in-out infinite}.testimonials-section:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(33,150,243,.02) 2px,rgba(33,150,243,.02) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(66,165,245,.02) 2px,rgba(66,165,245,.02) 4px);pointer-events:none;z-index:0;opacity:.5}@keyframes gradientShift{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.testimonials-header{text-align:center;margin-bottom:4rem;position:relative;z-index:1}@media (min-width: 641px){.testimonials-header{opacity:0;transform:translateY(-30px)}.testimonials-header.no-initial-animation{opacity:1;transform:translateY(0)}.testimonials-header.animate-in{animation:fadeInDown 1s ease-out forwards;margin-bottom:3rem}}@media (max-width: 640px){.testimonials-header{opacity:0;transform:translateY(-30px)}.testimonials-header.no-initial-animation{opacity:1;transform:translateY(0)}.testimonials-header.animate-in{animation:fadeInDown 1s ease-out forwards;margin-bottom:0}}.testimonials-icon{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;background:transparent;border-radius:0;margin-bottom:.75rem;box-shadow:none;animation:testimonialIconPulse 2s ease-in-out infinite,testimonialIconFloat 3s ease-in-out infinite;position:relative}.testimonials-icon:before{display:none}.testimonials-icon:after{display:none}.testimonials-icon-img{width:100%;height:100%;object-fit:contain;display:block}@keyframes testimonialIconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes testimonialIconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.testimonials-section .section-title{margin:0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;background:none!important;background-color:transparent!important}.section-title-img{max-width:190px;width:auto;height:auto;display:block}.testimonials-carousel-wrapper{position:relative;z-index:1;padding:0 60px}.testimonials-carousel{display:flex;gap:2rem;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-user-select:none;user-select:none;padding:1rem 0;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(135deg,#f8f8fc,#f5faffcc)}.testimonials-carousel::-webkit-scrollbar{display:none}.testimonials-carousel:active{cursor:grabbing}.testimonial-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px #2196f31a;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;border:2px solid transparent;flex:0 0 calc(33.333% - 1.33rem);min-width:350px;max-width:400px;scroll-snap-align:start;box-sizing:border-box;transform-style:preserve-3d;perspective:1000px}@media (min-width: 641px){.testimonials-section{padding-bottom:75px}.testimonials-carousel{gap:1rem}.testimonial-card{opacity:0;transform:translateY(50px) scale(.95) rotateX(10deg)}.testimonial-card.no-initial-animation{opacity:1;transform:translateY(0) scale(1) rotateX(0)}.testimonial-card.animate-in{opacity:1;transform:translateY(0) scale(1) rotateX(0);animation:testimonialSlideIn .9s cubic-bezier(.4,0,.2,1) forwards}.testimonial-card:hover{transform:translateY(0) scale(1) rotateX(0)!important;box-shadow:0 10px 40px #2196f31a!important;border-color:transparent!important}.testimonial-card:hover:before{opacity:0!important}.testimonial-card:hover .testimonial-header:before{left:-100%!important}.testimonial-card:hover .testimonial-content{background:#fff!important}}@media (max-width: 640px){.testimonial-card{opacity:0;transform:translateY(50px) scale(.95) rotateX(10deg)}.testimonial-card.no-initial-animation{opacity:1;transform:translateY(0) scale(1) rotateX(0)}.testimonial-card.animate-in{opacity:1;transform:translateY(0) scale(1) rotateX(0);animation:testimonialSlideIn .9s cubic-bezier(.4,0,.2,1) forwards}}@keyframes testimonialSlideIn{0%{opacity:0;transform:translateY(50px) scale(.95) rotateX(10deg)}to{opacity:1;transform:translateY(0) scale(1) rotateX(0)}}.testimonial-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#2196f30d,#42a5f50d);opacity:0;transition:opacity .5s ease;z-index:0;border-radius:20px}.testimonial-card:hover{transform:translateY(-15px) scale(1.03) rotateX(-2deg);box-shadow:0 30px 80px #2196f340;border-color:#2196f366}.testimonial-card:hover:before{opacity:1}.testimonial-header{background:linear-gradient(135deg,#2196f3,#42a5f5);padding:1.2rem 1.5rem;position:relative;z-index:1;overflow:hidden}.testimonial-header:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.testimonial-card:hover .testimonial-header:before{left:100%}.testimonial-school{font-size:1rem;font-weight:700;color:#fff;margin:0;line-height:1.4;text-align:center;letter-spacing:.3px}.testimonial-content{padding:2rem;background:#fff;position:relative;z-index:1;display:flex;align-items:flex-start;max-height:350px;overflow-y:auto;overflow-x:hidden;transition:all .3s ease}.testimonial-card:hover .testimonial-content{background:linear-gradient(to bottom,#fff,#fafcfffa)}.testimonial-content::-webkit-scrollbar{width:6px}.testimonial-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.testimonial-content::-webkit-scrollbar-thumb{background:#2196f3;border-radius:10px}.testimonial-content::-webkit-scrollbar-thumb:hover{background:#42a5f5}.testimonial-text{font-size:.95rem;color:#2b2d42;line-height:1.8;margin:0;text-align:left;letter-spacing:.3px}.carousel-btn{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:50px;height:50px;background:linear-gradient(135deg,#2196f3,#42a5f5);border:none;border-radius:50%;color:#fff;font-size:1.2rem;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #2196f34d;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:.9;overflow:hidden}.carousel-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.carousel-btn:hover:before{width:100%;height:100%}.carousel-btn:hover{opacity:1;transform:translateY(-50%) scale(1.15)!important;box-shadow:0 8px 25px #2196f380}.carousel-btn:active{transform:translateY(-50%) scale(.9)!important}.carousel-btn i{position:relative;z-index:1;transition:transform .3s ease}.carousel-btn:hover i{transform:scale(1.2)}.carousel-btn-prev{left:10px!important;right:auto!important}.carousel-btn-prev:hover i{transform:translate(-3px) scale(1.2)}.carousel-btn-next{left:auto!important;right:10px!important}.carousel-btn-next:hover i{transform:translate(3px) scale(1.2)}.carousel-btn:disabled{opacity:.3;cursor:not-allowed;transform:translateY(-50%)!important}.carousel-btn:disabled:hover{transform:translateY(-50%)!important;box-shadow:0 4px 15px #2196f34d}@media (max-width: 640px){.testimonials-section{padding:50px 0 33px}.testimonials-header{margin-bottom:2.5rem}.testimonials-header.animate-in{margin-bottom:0}.testimonials-icon{width:75px;height:75px;margin-bottom:.9rem}.testimonials-icon-img{width:100%;height:100%}.testimonials-icon:before,.testimonials-icon:after{display:none}.testimonials-title-wrapper{flex-direction:column;gap:.8rem}.section-title-img{max-width:130px;width:auto;height:auto}.testimonials-carousel-wrapper{padding:40px 50px 20px;width:100%;max-width:100%;box-sizing:border-box;margin:0;overflow:visible}.testimonials-carousel{gap:0;width:100%;box-sizing:border-box;padding:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overflow-y:visible}.testimonial-card{flex:0 0 100%!important;min-width:100%!important;max-width:100%!important;width:100%!important;box-sizing:border-box;margin:0;scroll-snap-align:center;scroll-snap-stop:always;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.testimonial-card:active{transform:none!important;box-shadow:0 10px 40px #2196f31a!important}.testimonial-content{padding:1.5rem;max-height:400px}.testimonial-text{font-size:.9rem;line-height:1.7}.carousel-btn{width:40px;height:40px;font-size:1rem}}.services{padding:100px 0;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);position:relative;overflow:hidden}.services-header{text-align:center;margin-bottom:4rem;position:relative;z-index:1;opacity:0;transform:translateY(-30px);width:100%;display:flex;flex-direction:column;align-items:center}.services-header.animate-in{animation:fadeInDown 1s ease-out forwards}.services-header-icon{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;background:transparent;border-radius:0;margin-bottom:.75rem;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.services-header-icon:before{display:none}.services-header-icon:after{display:none}.services-header-icon-img{width:100%;height:100%;object-fit:contain;display:block}.services-header .section-title{margin:0 auto 1.5rem;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;background:none!important;background-color:transparent!important}.services-header .section-title-img{max-width:152px;width:auto;height:auto;display:block}.services-text{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}.services-header .section-description{font-size:1.1rem;color:#6c757d;max-width:700px;margin:0 auto;line-height:1.8;text-align:center;display:block;width:100%}.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;position:relative;z-index:2}.service-card{background:#fff;padding:2.5rem;border-radius:24px;text-align:center;box-shadow:0 4px 20px #00000014;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;border:1px solid rgba(33,150,243,.1);opacity:0;transform:translateY(50px) scale(.95)}.service-card.animate-in{animation:serviceCardSlideIn .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes serviceCardSlideIn{0%{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.service-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(33,150,243,.1) 0%,transparent 70%);opacity:0;transition:opacity .5s}.service-card:hover:before{opacity:1}.service-card:hover{transform:translateY(-15px) scale(1.02) rotateY(2deg);box-shadow:0 15px 40px #2196f333;border-color:#2196f34d}.service-icon{width:90px;height:90px;margin:0 auto 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#fff;transition:all .5s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 8px 20px #2196f34d;position:relative}.service-icon:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .5s,height .5s}.service-card:hover .service-icon{transform:rotate(360deg) scale(1.1);box-shadow:0 12px 30px #2196f366}.service-card:hover .service-icon:after{width:120px;height:120px}.service-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:#2b2d42}.service-description{color:#6c757d;line-height:1.6}@media (max-width: 968px){.services-grid{grid-template-columns:1fr}}@media (max-width: 640px){.services{padding:60px 0}.services-header-icon{width:75px;height:75px;margin-bottom:.9rem}.services-header-icon-img{width:100%;height:100%}.services-header-icon:before,.services-header-icon:after{display:none}.services-header .section-title-img{max-width:97px;width:auto;height:auto}.services-header .section-description{margin:0 auto}.services-header.animate-in{margin-bottom:32px}.services-grid{grid-template-columns:repeat(2,1fr);gap:.875rem;margin-top:0;padding:0 .75rem}.service-card{padding:1.25rem;border-radius:16px}.service-icon{width:60px;height:60px;font-size:1.75rem;margin-bottom:1rem;border-radius:16px}.service-title{font-size:1.1rem;margin-bottom:.75rem}.service-description{font-size:.85rem;line-height:1.5}}.portfolio{padding:100px 0;background:#fff}.portfolio .container{text-align:center}.portfolio-header{text-align:center;margin-bottom:3.5rem;position:relative;z-index:1;opacity:0;transform:translateY(-30px)}.portfolio-header.animate-in{animation:fadeInDown 1s ease-out forwards}.portfolio-icon{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;background:transparent;border-radius:0;margin-bottom:.75rem;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.portfolio-icon:before{display:none}.portfolio-icon:after{display:none}.portfolio-icon-img{width:100%;height:100%;object-fit:contain;display:block}.portfolio .section-title{margin:0 auto 1.5rem;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;background:none!important;background-color:transparent!important}.portfolio .section-title-img{max-width:240px;width:auto;height:auto;display:block}.portfolio .section-description{font-size:1.1rem;color:#6c757d;max-width:700px;margin:0 auto 3rem;line-height:1.8}.portfolio-filters{display:flex;justify-content:center;gap:1rem;margin:3rem 0;flex-wrap:wrap}.filter-btn{padding:12px 28px;background:#fff;border:2px solid #2196F3;color:#2196f3;border-radius:30px;cursor:pointer;font-weight:600;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;z-index:1;transform:scale(1)}.filter-btn:active{transform:scale(.95)}.filter-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#2196f3;transform:translate(-50%,-50%);transition:width .6s,height .6s;z-index:-1}.filter-btn:hover:before,.filter-btn.active:before{width:300px;height:300px}.filter-btn span{position:relative;z-index:1}.filter-btn:hover,.filter-btn.active{background:#2196f3;color:#fff!important;transform:translateY(-3px) scale(1.05);box-shadow:0 8px 20px #2196f34d;border-color:#2196f3}.filter-btn.active{background:#2196f3!important;color:#fff!important}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.portfolio-item{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1;cursor:pointer;box-shadow:0 4px 20px #0000001a;transition:all .5s cubic-bezier(.175,.885,.32,1.275);background:#fff;opacity:0;transform:translateY(40px) scale(.9)}.portfolio-item.animate-in{animation:portfolioItemSlideIn .7s cubic-bezier(.4,0,.2,1) forwards}@keyframes portfolioItemSlideIn{0%{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.portfolio-item:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#2196f3,#42a5f5);opacity:0;transition:opacity .5s;z-index:1}.portfolio-item:hover{transform:translateY(-10px) scale(1.03) rotate(1deg);box-shadow:0 20px 50px #2196f34d}.portfolio-item:hover:before{opacity:.1}.portfolio-image{width:100%;height:100%;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);display:flex;align-items:center;justify-content:center;font-size:4rem;color:#2196f3;transition:all .5s ease;position:relative;z-index:0}.portfolio-item:hover .portfolio-image{transform:scale(1.1);filter:brightness(1.1)}.portfolio-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#2196f3f2,#42a5f5f2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:all .5s ease;z-index:2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-overlay h3,.portfolio-overlay p{transform:translateY(20px);transition:transform .5s ease .1s}.portfolio-item:hover .portfolio-overlay h3,.portfolio-item:hover .portfolio-overlay p{transform:translateY(0)}.portfolio-overlay h3{font-size:1.5rem;margin-bottom:.5rem}.portfolio-overlay p{font-size:1rem}@media (max-width: 968px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.portfolio{padding:60px 0}.portfolio-header{margin-bottom:2.5rem}.portfolio-icon{width:75px;height:75px;margin-bottom:.9rem}.portfolio-icon-img{width:100%;height:100%}.portfolio-icon:before,.portfolio-icon:after{display:none}.portfolio .section-title-img{max-width:180px;width:auto;height:auto}.portfolio .section-description{padding-bottom:0}.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:.875rem;padding:0 .75rem}.portfolio-item{aspect-ratio:1;border-radius:16px}.portfolio-item:hover{transform:translateY(-8px) scale(1.02) rotate(.5deg);box-shadow:0 15px 35px #2196f340}.portfolio-image{font-size:2.5rem}.portfolio-item:hover .portfolio-image{transform:scale(1.08)}.portfolio-overlay h3{font-size:1.2rem;margin-bottom:.4rem}.portfolio-overlay p{font-size:.875rem}}.youtube-section{padding:100px 0;background:#f8f9fa;position:relative;overflow:hidden}.youtube-section:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(33,150,243,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(66,165,245,.03) 0%,transparent 50%);pointer-events:none;z-index:1}.youtube-section .container{position:relative;z-index:2;text-align:center}.youtube-header{text-align:center;margin-bottom:3.5rem;position:relative;z-index:1;opacity:0;transform:translateY(-30px)}.youtube-header.animate-in{animation:fadeInDown 1s ease-out forwards}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.youtube-icon{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;background:transparent;border-radius:0;margin-bottom:.65rem;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.youtube-icon:before{display:none}.youtube-icon:after{display:none}.youtube-icon-img{width:100%;height:100%;object-fit:contain;display:block}.youtube-section .section-title{margin:0 auto 1.5rem;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;background:none!important;background-color:transparent!important}.youtube-section .section-title-img{max-width:215px;width:auto;height:auto;display:block}.youtube-section .section-description{font-size:1.1rem;color:#6c757d;max-width:700px;margin:0 auto 3rem;line-height:1.8;text-align:center}.youtube-loading,.youtube-empty{grid-column:1 / -1;text-align:center;padding:4rem 2rem;color:#64748b;font-size:1.1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.youtube-loading i,.youtube-empty i{font-size:3rem;color:#cbd5e1;margin-bottom:.5rem}.youtube-loading p,.youtube-empty p{margin:0;font-size:1.1rem;color:#64748b}.youtube-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3rem}.youtube-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 6px 24px #0000001a,0 2px 8px #2196f314;transition:all .4s cubic-bezier(.4,0,.2,1);border:2px solid rgba(33,150,243,.12);cursor:pointer;position:relative;display:flex;flex-direction:column;opacity:0;transform:translateY(40px) scale(.95);background:linear-gradient(to bottom,#fff,#fafbfc)}.youtube-card.animate-in{animation:youtubeCardSlideIn .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes youtubeCardSlideIn{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.youtube-card:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 16px 48px #2196f340,0 8px 16px #00000026;border-color:#2196f366}.youtube-thumbnail{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:16px 16px 0 0}.youtube-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.youtube-card:hover .youtube-thumbnail img{transform:scale(1.05)}.youtube-duration{position:absolute;bottom:12px;right:12px;background:#000000d9;color:#fff;padding:8px 14px;border-radius:10px;font-size:.8rem;font-weight:700;z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #0000004d;letter-spacing:.5px}.youtube-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#0003,#00000080);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease;z-index:3;border-radius:16px 16px 0 0}.youtube-card:hover .youtube-overlay{opacity:1}.youtube-play-btn{width:80px;height:80px;background:linear-gradient(135deg,red,#f44);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #f006;position:relative;overflow:hidden}.youtube-play-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease}.youtube-card:hover .youtube-play-btn:before{width:100%;height:100%}.youtube-card:hover .youtube-play-btn{transform:scale(1.15);box-shadow:0 12px 32px #ff000080}.youtube-play-btn i{margin-left:5px}.youtube-info{padding:1.8rem;text-align:left;flex:1;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#fff,#fafbfc)}.youtube-title{font-size:1.2rem;font-weight:700;color:#2b2d42;margin:0 0 1.2rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:3.6rem;transition:color .3s ease}.youtube-card:hover .youtube-title{color:#2196f3}.youtube-btn{width:100%;padding:.9rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #2196f340;position:relative;overflow:hidden}.youtube-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease}.youtube-btn:hover:before{width:300px;height:300px}.youtube-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px #2196f366;background:linear-gradient(135deg,#1976d2,#2196f3)}.youtube-btn i{transition:transform .3s ease}.youtube-btn:hover i{transform:translate(3px)}@media (max-width: 968px){.youtube-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media (max-width: 640px){.youtube-section{padding:60px 0}.youtube-header{margin-bottom:2.5rem}.youtube-icon{width:75px;height:75px;margin-bottom:.9rem}.youtube-icon-img{width:100%;height:100%}.youtube-icon:before,.youtube-icon:after{display:none}.youtube-section .section-title-img{max-width:155px;width:auto;height:auto}.youtube-grid{grid-template-columns:1fr;gap:1.25rem;margin-top:2rem;padding:0 .75rem}.youtube-card{border-radius:16px}.youtube-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 35px #2196f333,0 6px 12px #0000001f}.youtube-card:hover .youtube-thumbnail img{transform:scale(1.03)}.youtube-card:hover .youtube-play-btn{transform:scale(1.1)}.youtube-thumbnail,.youtube-overlay{border-radius:12px 12px 0 0}.youtube-info{padding:1.2rem}.youtube-title{font-size:1rem;min-height:2.5rem;margin-bottom:.8rem}.youtube-btn{padding:.6rem 1.2rem;font-size:.85rem}}.footer{background:linear-gradient(135deg,#1a237e,#283593,#303f9f);color:#fff;padding:3.5rem 0 2.5rem;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.1)}.footer:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 0%,rgba(33,150,243,.15) 0%,transparent 70%);pointer-events:none}.footer:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);pointer-events:none}.footer-content{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2.5rem;position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 2rem}.footer-logo{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding-right:2.5rem;border-right:1px solid rgba(255,255,255,.15);position:relative}.footer-logo:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:60%;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}.footer-logo-image{height:auto;max-height:35px;width:auto;object-fit:contain;transition:all .4s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}.footer-logo-image:hover{transform:translateY(-2px) scale(1.05);filter:drop-shadow(0 4px 12px rgba(33,150,243,.4))}.footer-info{text-align:left;display:flex;flex-direction:column;gap:.8rem;flex:1}.footer-text{font-size:.95rem;color:#ffffffe6;margin:0;font-weight:400;letter-spacing:.3px;line-height:1.6}.footer-contact{font-size:.9rem;color:#ffffffbf;margin:0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.footer-contact:before{content:"";width:4px;height:4px;background:#fff6;border-radius:50%;display:inline-block;margin-right:.5rem}@media (max-width: 968px){.footer-content{gap:2rem;padding:0 1.5rem}.footer-logo{padding-right:2rem}.footer-logo-image{max-height:32px}}@media (max-width: 640px){.footer{padding:2.5rem 0 2rem}.footer-content{flex-direction:column;gap:2rem;padding:0 1rem}.footer-logo{padding-right:0;padding-bottom:2rem;border-right:none;border-bottom:1px solid rgba(255,255,255,.15);width:100%;justify-content:center}.footer-logo:after{display:none}.footer-logo:before{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}.footer-logo-image{max-height:28px}.footer-info{text-align:center;width:100%}.footer-text{font-size:.85rem}.footer-contact{font-size:.8rem;justify-content:center;flex-direction:column;gap:.5rem}.footer-contact:before{display:none}}.home{width:100%;min-height:100vh}.section-title{font-size:2.5rem;font-weight:700;margin-bottom:1.5rem;color:#2b2d42;position:relative;display:inline-block}.login-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.login-container{flex:1;background-color:#f5f5f5;display:flex;justify-content:center;align-items:center;padding:2rem;padding-top:120px;padding-bottom:2rem}@media (max-width: 640px){.login-container{align-items:flex-start;padding-top:100px;padding-left:1rem;padding-right:1rem;padding-bottom:2rem;min-height:calc(100vh - 100px)}}.login-content{background:#fff;border-radius:20px;padding:3.5rem;max-width:450px;width:100%;box-shadow:0 10px 40px #0000001a,0 4px 16px #00000014}@media (max-width: 640px){.login-content{padding:1.5rem 1.25rem;border-radius:16px;margin:0 auto}.login-title{font-size:2rem;margin:0 0 .75rem}.login-description{font-size:.9rem;margin:1.25rem 0 1.5rem}.login-form{gap:.2rem}.input-icon{padding:0 .75rem;font-size:1rem}.input-wrapper input{padding:.75rem;font-size:.9rem}.submit-button{padding:.75rem 1.5rem;font-size:.95rem;margin-top:.75rem}.login-options{font-size:.85rem;margin-top:.4rem;padding:0 .5rem}.remember-me{margin-left:0}.find-links{margin-right:0}.remember-me input[type=checkbox]{width:16px;height:16px}.find-link{font-size:.85rem}.login-footer{margin-top:1.5rem}.login-footer p{font-size:.85rem}}.login-title{font-size:2.75rem;font-weight:700;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 1rem;text-align:center;letter-spacing:1px;position:relative}.login-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:4px;background:linear-gradient(90deg,#2196f3,#42a5f5);border-radius:2px}.login-description{font-size:1rem;color:#666;margin:2rem 0 2.5rem;text-align:center;line-height:1.6}.login-form{display:flex;flex-direction:column;gap:.25rem}.login-footer{margin-top:2rem;text-align:center}.login-footer p{font-size:.9rem;color:#666}.login-footer .link{color:#2196f3;text-decoration:none;cursor:pointer;font-weight:600;position:relative;transition:color .3s ease}.login-footer .link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#2196f3,#42a5f5);transition:width .3s ease}.login-footer .link:hover{color:#1976d2}.login-footer .link:hover:after{width:100%}.login-options{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-size:.9rem}.remember-me{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:#666}.remember-me input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#2196F3}.find-links{display:flex;align-items:center;gap:.5rem}.find-link{background:none;border:none;color:#2196f3;cursor:pointer;font-size:.9rem;padding:0;text-decoration:none;transition:all .3s ease;font-weight:500;position:relative}.find-link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#2196f3,#42a5f5);transition:width .3s ease}.find-link:hover{color:#1976d2}.find-link:hover:after{width:100%}.divider{color:#ccc}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem}.modal-content{background:#fff;border-radius:20px;padding:2.5rem;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d,0 8px 24px #0003;position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-header h2{font-size:1.5rem;font-weight:700;color:#000;margin:0}.modal-close{background:none;border:none;font-size:2rem;color:#999;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:color .3s ease}.modal-form{display:flex;flex-direction:column;gap:1.5rem}.modal-form .form-group{display:flex;flex-direction:column;gap:.5rem}.modal-form .form-group label{font-size:.9rem;font-weight:600;color:#333}.modal-form .form-group input{padding:.85rem 1rem;border:2px solid rgba(33,150,243,.2);border-radius:12px;font-size:1rem;background-color:#ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000000d}.modal-form .form-group input:focus{outline:none;border-color:#2196f3;background-color:#fff;box-shadow:0 4px 16px #2196f326;transform:translateY(-1px)}.modal-form .form-group input.input-error{border-color:#f44336;background-color:#f443360d}.modal-submit-button{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);margin-top:.5rem;box-shadow:0 4px 15px #2196f34d;position:relative;overflow:hidden}.modal-submit-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.modal-submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #2196f366}.modal-submit-button:hover:not(:disabled):before{left:100%}.modal-submit-button:disabled{background:#ccc;cursor:not-allowed;box-shadow:none;transform:none}@media (max-width: 600px){.login-title{font-size:2rem}.login-options{flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;font-size:.85rem;padding:0 .5rem}.remember-me{margin-left:0}.find-links{width:auto;justify-content:flex-end;margin-right:0}.modal-content{padding:1.5rem;max-width:100%;margin:1rem}.modal-header h2{font-size:1.25rem}}.signup-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.signup-container{flex:1;background-color:#f5f5f5;display:flex;justify-content:center;align-items:center;padding:2rem;padding-top:120px;padding-bottom:2rem}@media (max-width: 640px){.signup-container{align-items:flex-start;padding-top:100px;padding-left:1rem;padding-right:1rem;padding-bottom:2rem;min-height:calc(100vh - 100px)}}.signup-content{background:#fff;border-radius:20px;padding:3.5rem;max-width:550px;width:100%;box-shadow:0 10px 40px #0000001a,0 4px 16px #00000014}@media (max-width: 640px){.signup-content{padding:1.25rem .875rem;border-radius:12px;margin:0 auto;max-width:calc(100% - .5rem)}}.signup-title{font-size:2.75rem;font-weight:700;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 2.5rem;text-align:center;letter-spacing:1px;position:relative}.signup-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:4px;background:linear-gradient(90deg,#2196f3,#42a5f5);border-radius:2px}.signup-description{margin:2rem 0 2.5rem;text-align:center}.description-main{font-size:1rem;color:#666;margin:0 0 1rem;line-height:1.7}.description-example{font-size:.95rem;color:#555;margin:0;line-height:1.8;padding:1rem;background:#2196f30d;border-radius:10px;border-left:3px solid #2196F3}.description-example strong{color:#2196f3;font-weight:600}.example-text{color:#2196f3;font-weight:600;background:#2196f31a;padding:.2rem .5rem;border-radius:5px}.user-type-group{margin-bottom:0}.user-type-label{display:block;font-size:1rem;font-weight:600;color:#333;margin-bottom:1rem;text-align:center}.user-type-buttons{display:flex;gap:1rem;justify-content:center}.user-type-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1.75rem 1rem;background:#fff;border:2px solid #e0e0e0;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1rem;font-weight:600;color:#666;box-shadow:0 2px 8px #0000000d;position:relative;overflow:hidden;min-height:120px}.user-type-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.user-type-button:hover:before{left:100%}.user-type-button i{font-size:2rem;color:#999;transition:all .3s ease}.user-type-button span{font-size:1.1rem;transition:all .3s ease}.user-type-button:hover{border-color:#2196f3;background:#2196f30d;transform:translateY(-2px);box-shadow:0 4px 16px #2196f326}.user-type-button:hover i{color:#2196f3;transform:scale(1.1)}.user-type-button.active{border-color:#2196f3;background:linear-gradient(135deg,#2196f31a,#42a5f51a);color:#2196f3;box-shadow:0 4px 20px #2196f340;transform:translateY(-2px)}.user-type-button.active i{color:#2196f3;transform:scale(1.15)}.user-type-button.active span{color:#2196f3;font-weight:700}@media (max-width: 640px){.signup-title{font-size:2rem;margin:0 0 40px}.signup-description{margin:.875rem 0 1rem}.description-main{font-size:.8rem;line-height:1.5;margin:0 0 .75rem}.description-example{font-size:.75rem;padding:.625rem;line-height:1.6;margin:0}.user-type-label{font-size:.85rem;margin-bottom:.5rem}.user-type-buttons{gap:.4rem}.user-type-button{padding:1rem .5rem;gap:.4rem;min-height:80px;font-size:.85rem;border-radius:12px}.user-type-button i{font-size:1.25rem}.user-type-button span{font-size:.85rem}.signup-form{gap:.05rem}.form-group{gap:.2rem;margin-bottom:0}.input-wrapper{border-radius:10px;border-width:1.5px;width:calc(100% - .5rem);margin:0 auto}.input-icon{padding:0 .625rem;font-size:.9rem}.input-wrapper input{padding:.625rem;font-size:.85rem}.input-wrapper input::placeholder{font-size:.85rem}.error-message{font-size:.75rem;margin-left:.4rem;margin-top:.25rem}.submit-button{padding:.625rem 1.25rem;font-size:.875rem;margin-top:.625rem;border-radius:10px;width:calc(100% - .5rem);margin-left:auto;margin-right:auto}.user-type-buttons,.description-example{width:calc(100% - .5rem);margin:0 auto}}.signup-form{display:flex;flex-direction:column;gap:.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:0}.input-wrapper{position:relative;display:flex;align-items:center;border:2px solid rgba(33,150,243,.2);border-radius:12px;background-color:#ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000000d;margin-bottom:0}.input-wrapper:focus-within{border-color:#2196f3;background-color:#fff;box-shadow:0 4px 16px #2196f326;transform:translateY(-1px)}.input-icon{padding:0 1rem;color:#999;font-size:1.2rem;display:flex;align-items:center}.input-wrapper input{flex:1;border:none;outline:none;padding:1rem;font-size:1rem;background:transparent;color:#333}.input-wrapper input::placeholder{color:#999}.input-wrapper.input-error,.input-error{border-color:#f44336;background-color:#f443360d}.error-message{color:#f44336;font-size:.85rem;margin-left:.5rem;font-weight:500}.checkbox-group{margin:.5rem 0}.checkbox-label{display:flex;align-items:center;cursor:pointer;gap:.5rem}.checkbox-text{font-size:.9rem;color:#333}.privacy-link{color:#2196f3;text-decoration:none;cursor:pointer;position:relative;transition:color .3s ease;font-weight:500}.privacy-link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#2196f3,#42a5f5);transition:width .3s ease}.privacy-link:hover{color:#1976d2}.privacy-link:hover:after{width:100%}.submit-button{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);margin-top:1rem;box-shadow:0 4px 15px #2196f34d;position:relative;overflow:hidden}.submit-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #2196f366}.submit-button:hover:not(:disabled):before{left:100%}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{background:#ccc;cursor:not-allowed;box-shadow:none;transform:none}@media (max-width: 600px){.signup-title{font-size:2rem}}.agreement-box{display:flex;align-items:center;justify-content:center;padding:.875rem 1rem;background:#2196f308;border:2px solid rgba(33,150,243,.15);border-radius:12px;margin-top:.5rem;margin-bottom:0;gap:.75rem;transition:all .3s ease;flex-wrap:nowrap}.agreement-box>*{margin-bottom:0}.agreement-box:hover{border-color:#2196f34d;background:#2196f30d}.agreement-box-unified{display:flex;flex-direction:column;gap:.75rem;padding:10px 14px;background:#2196f308;border:2px solid rgba(33,150,243,.15);border-radius:12px;margin-top:.5rem;transition:all .3s ease}.agreement-box-unified:hover{border-color:#2196f34d;background:#2196f30d}.agreement-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px solid rgba(33,150,243,.1)}.agreement-item:last-child{border-bottom:none}.checkbox-label-compact{display:flex;align-items:center;justify-content:center;gap:.75rem;cursor:pointer;flex:0 1 auto;min-width:0;white-space:nowrap;margin:0!important}.checkbox-label-compact .checkbox-input{width:18px;height:18px;cursor:pointer;accent-color:#2196F3;flex-shrink:0}.checkbox-text-compact{font-size:.85rem;color:#333;line-height:1.4;display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;flex-shrink:0}.required-mark{color:#f44336;font-weight:600;flex-shrink:0;margin-left:7px}.view-detail-button{padding:.275rem .55rem;background:#fff;border:1.5px solid #2196F3;border-radius:8px;color:#2196f3;font-size:.725rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;flex-shrink:0}.view-detail-button:hover{background:#2196f3;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #2196f34d}.view-detail-button:active{transform:translateY(0)}.agreement-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:10000;padding:1rem;animation:fadeIn .3s ease}.agreement-modal-content{background:#fff;border-radius:16px;max-width:800px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.agreement-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:2px solid #f0f0f0;background:linear-gradient(135deg,#2196f30d,#42a5f50d);flex-shrink:0}.agreement-modal-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#2196f3}.agreement-modal-close{background:none;border:none;font-size:2rem;color:#999;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.agreement-modal-close:hover{background:#f443361a;color:#f44336}.agreement-modal-body{padding:2rem;overflow-y:auto;flex:1}.agreement-section{margin-bottom:2rem}.agreement-section:last-child{margin-bottom:0}.agreement-section h3{font-size:1.2rem;font-weight:700;color:#2196f3;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid rgba(33,150,243,.2)}.agreement-section p{font-size:.95rem;color:#555;line-height:1.8;margin:0 0 .75rem}.agreement-section ul{margin:.75rem 0;padding-left:1.5rem}.agreement-section li{font-size:.95rem;color:#555;line-height:1.8;margin-bottom:.5rem}.agreement-section li strong{color:#333;font-weight:600}.agreement-section li ul{margin-top:.5rem;margin-bottom:.5rem}.agreement-date{text-align:right;color:#999;font-size:.9rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e0e0e0}.agreement-modal-footer{padding:1.5rem 2rem;border-top:2px solid #f0f0f0;display:flex;justify-content:flex-end;background:#fafafa;flex-shrink:0}.agreement-modal-confirm{padding:.875rem 2rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #2196f34d}.agreement-modal-confirm:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f366}.agreement-modal-confirm:active{transform:translateY(0)}@media (max-width: 640px){.agreement-box{flex-direction:row;align-items:center;gap:.5rem;padding:.75rem .875rem}.agreement-box-unified{padding:8px 11px;gap:.625rem;width:calc(100% - .5rem);margin:0 auto}.agreement-item{gap:.35rem;padding:.4rem 0}.checkbox-label-compact{gap:.3rem;flex:1;min-width:0}.checkbox-label-compact .checkbox-input{width:16px;height:16px}.checkbox-text-compact{font-size:.775rem;flex:1;min-width:0}.required-mark{margin-left:7px}.view-detail-button{padding:.2rem .4rem;font-size:.65rem;white-space:nowrap;flex-shrink:0}}.agreement-modal-content{max-height:95vh;border-radius:12px}.agreement-modal-header{padding:1.25rem 1.5rem}.agreement-modal-header h2{font-size:1.25rem}.agreement-modal-body{padding:1.5rem}.agreement-section h3{font-size:1.1rem}.agreement-section p,.agreement-section li{font-size:.9rem}.agreement-modal-footer{padding:1.25rem 1.5rem}.agreement-modal-confirm{width:100%;padding:1rem}} .admin-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.admin-container{flex:1;padding:2rem;padding-top:120px;max-width:1400px;margin:0 auto;width:100%}.admin-content{display:flex;flex-direction:column;gap:2rem}.admin-title{font-size:2.5rem;font-weight:700;color:#000;margin:0 0 2rem;text-align:center;letter-spacing:2px}.admin-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.admin-card{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a;cursor:pointer;transition:all .3s ease;border:2px solid transparent}.admin-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px #00000026;border-color:#2196f34d}.admin-card-header{display:flex;flex-direction:column;gap:1rem}.admin-card-title{font-size:1.3rem;font-weight:600;color:#2196f3;margin:0;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.admin-card-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #4caf504d;width:100%}.admin-card-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.page-header{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:2px solid rgba(33,150,243,.1)}.page-title{font-size:2.1rem;font-weight:700;color:#2b2d42;margin:0}.btn-back{padding:.7rem 1.5rem;background:linear-gradient(135deg,#6c757d,#868e96);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #6c757d40;display:flex;align-items:center;justify-content:center;gap:.3rem}.admin-description{font-size:1.1rem;color:#666;text-align:center;margin-bottom:2rem}.courses-section,.users-section,.classes-section,.preview-courses-section{background:#fff;border-radius:16px;padding:2.5rem;box-shadow:0 2px 12px #00000014;border:1px solid rgba(0,0,0,.05)}.courses-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.courses-header-actions,.users-header-actions,.classes-header-actions,.preview-courses-header-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,#2196f308,#42a5f508);border-radius:12px;border:1px solid rgba(33,150,243,.1)}.search-container{position:relative;flex:1;max-width:400px}.search-input{width:100%;padding:.85rem 2.5rem .85rem 1.2rem;border:2px solid #e0e0e0;border-radius:10px;font-size:.95rem;transition:all .3s ease;background:#fff}.search-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 4px #2196f31f;background:#fafafa}.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#999;pointer-events:none}.no-results{text-align:center;padding:2rem;color:#999;font-style:italic}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.5rem;padding:1rem}.pagination-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.pagination-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #2196f34d}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{font-weight:600;color:#333;font-size:.95rem}.pagination-numbers{display:flex;gap:.5rem;align-items:center}.pagination-number{min-width:36px;height:36px;padding:.5rem;background:#fff;color:#2196f3;border:2px solid #2196F3;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem;display:flex;align-items:center;justify-content:center}.pagination-number:hover:not(.active){background:#2196f31a;transform:translateY(-2px)}.pagination-number.active{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border-color:#2196f3;box-shadow:0 2px 8px #2196f34d}.btn-toggle-courses{padding:.6rem 1.5rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #4caf504d}.btn-toggle-courses:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.courses-title{font-size:1.5rem;font-weight:600;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-add-course,.btn-add-user,.btn-add-class,.btn-add-preview-course{padding:.75rem 1.75rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 3px 10px #2196f340;white-space:nowrap}.btn-add-course:hover,.btn-add-user:hover,.btn-add-class:hover,.btn-add-preview-course:hover{transform:translateY(-2px);box-shadow:0 5px 15px #2196f359;background:linear-gradient(135deg,#1976d2,#2196f3)}.courses-table-container{overflow-x:auto}.courses-table,.users-table,.classes-table,.preview-courses-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background:#fff;border-radius:12px;overflow:hidden}.courses-table thead,.users-table thead,.classes-table thead,.preview-courses-table thead{background:linear-gradient(135deg,#2196f31f,#42a5f514)}.courses-table th,.users-table th,.classes-table th,.preview-courses-table th{padding:1.25rem 1rem;text-align:left;font-weight:700;color:#2b2d42;border-bottom:2px solid rgba(33,150,243,.15);font-size:.9rem;letter-spacing:.3px;text-transform:uppercase}.courses-table td,.users-table td,.classes-table td,.preview-courses-table td{padding:1.25rem 1rem;border-bottom:1px solid rgba(0,0,0,.06);color:#333;vertical-align:middle}.courses-table tbody tr:hover,.users-table tbody tr:hover,.classes-table tbody tr:hover,.preview-courses-table tbody tr:hover{background-color:#2196f30a;transition:background-color .2s ease}.courses-table tbody tr:last-child td,.users-table tbody tr:last-child td,.classes-table tbody tr:last-child td,.preview-courses-table tbody tr:last-child td{border-bottom:none}.status-badge{padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600}.status-badge.completed{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff}.status-badge.in-progress{background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff}.preview-buttons{display:flex;gap:.5rem}.preview-btn{width:32px;height:32px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;color:#666;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.preview-btn:hover{border-color:#2196f3;color:#2196f3}.preview-btn.active{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border-color:#2196f3}.management-buttons{display:flex;gap:.5rem;align-items:center}.btn-edit-course{padding:.5rem 1rem;background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #ff98004d}.btn-edit-course:hover{transform:translateY(-1px);box-shadow:0 4px 10px #ff980066}.btn-delete-course{padding:.5rem 1rem;background:linear-gradient(135deg,#f44336,#e57373);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #f443364d}.btn-delete-course:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f4433666;background:linear-gradient(135deg,#d32f2f,#ef5350)}.empty-state{text-align:center;padding:3rem;color:#666}.empty-state p{font-size:1.1rem;margin-bottom:1.5rem}.users-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.user-type-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.user-type-tab{padding:.6rem 1.5rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;color:#666;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.user-type-tab:hover{border-color:#2196f3;color:#2196f3;background:#2196f30d}.user-type-tab.active{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border-color:#2196f3;box-shadow:0 2px 8px #2196f34d}.users-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.users-title{font-size:1.5rem;font-weight:600;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-toggle-users{padding:.6rem 1.5rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #4caf504d}.btn-toggle-users:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.users-header-actions{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.btn-add-user{padding:.6rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #2196f34d}.btn-add-user:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f366}.users-table-container{overflow-x:auto;overflow-y:visible;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#fff;box-shadow:0 2px 8px #0000001a;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.users-table-container:active{cursor:grabbing}.users-table{width:100%;min-width:2000px;border-collapse:collapse;font-size:1rem;table-layout:auto}.users-table thead{background:linear-gradient(135deg,#2196f31f,#42a5f514);z-index:10;box-shadow:0 2px 4px #0000001a}.users-table th{padding:1.25rem 1.5rem;text-align:left;font-weight:700;color:#2b2d42;border-bottom:2px solid rgba(33,150,243,.2);font-size:.95rem;letter-spacing:.3px;white-space:nowrap}.users-table th:nth-child(1){min-width:180px}.users-table th:nth-child(2){min-width:150px}.users-table th:nth-child(3){min-width:140px}.users-table th:nth-child(4){min-width:180px}.users-table th:nth-child(5){min-width:140px}.users-table th:nth-child(6){min-width:200px}.users-table th:nth-child(7){min-width:500px}.users-table th:nth-child(8){min-width:400px}.users-table th:nth-child(9){min-width:120px}.users-table td{padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.06);color:#333;vertical-align:middle;white-space:nowrap;overflow:visible}.users-table td:nth-child(1){min-width:180px}.users-table td:nth-child(2){min-width:150px}.users-table td:nth-child(3){min-width:140px}.users-table td:nth-child(4){min-width:180px}.users-table td:nth-child(5){min-width:140px}.users-table td:nth-child(6){min-width:200px}.users-table td:nth-child(7){min-width:500px}.users-table td:nth-child(8){min-width:400px}.users-table td:nth-child(9){min-width:120px}.users-table tbody tr:hover{background-color:#2196f30a;transition:background-color .2s ease}.users-table tbody tr:last-child td{border-bottom:none}.user-type-badge{padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600;display:inline-block}.user-type-badge.student{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff}.user-type-badge.parent{background:linear-gradient(135deg,#9c27b0,#ba68c8);color:#fff}.user-type-badge.instructor{background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff}.admin-badge{padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600;display:inline-block}.admin-badge.yes{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff}.admin-badge.no{background:#e0e0e0;color:#666}.user-classes{display:flex;flex-wrap:wrap;gap:.5rem;max-width:100%;padding:.25rem 0}.class-badge{padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600;display:inline-block;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;white-space:nowrap;flex-shrink:0}.linked-user-info{display:flex;align-items:center;justify-content:center}.linked-user-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:8px;background:linear-gradient(135deg,#e8eaf6,#f3e5f5);color:#5c6bc0;cursor:pointer;transition:all .3s ease;border:2px solid #c5cae9;font-size:.875rem}.linked-user-badge:hover{background:linear-gradient(135deg,#5c6bc0,#7e57c2);color:#fff;border-color:#5c6bc0;transform:translateY(-2px);box-shadow:0 4px 8px #5c6bc04d}.linked-user-badge i{font-size:.9rem;flex-shrink:0}.linked-user-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.no-linked-user{color:#999;font-size:.85rem;text-align:center}.linked-users-container{display:flex;flex-direction:column;gap:.5rem;min-width:300px}.linked-user-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}.btn-add-link,.btn-remove-link{padding:.25rem .5rem;font-size:.75rem;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-add-link{background:#3498db;color:#fff;margin-top:.25rem}.btn-add-link:hover{background:#2980b9}.btn-remove-link{background:#e74c3c;color:#fff;padding:.2rem .4rem}.btn-remove-link:hover{background:#c0392b}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:10000;padding:20px}.modal-content{background:#fff;border-radius:12px;max-width:600px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e0e0e0}.modal-header h2{margin:0;font-size:1.5rem;color:#2c3e50}.modal-close{background:none;border:none;font-size:1.5rem;color:#999;cursor:pointer;padding:.25rem .5rem;transition:color .2s ease}.modal-close:hover{color:#333}.modal-description{margin-bottom:1.5rem;color:#555;line-height:1.6}.available-users-list{display:flex;flex-direction:column;gap:.75rem}.available-user-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:1px solid #e0e0e0;border-radius:8px;transition:all .2s ease}.available-user-item:hover{border-color:#3498db;background:#f8f9fa}.available-user-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.available-user-name{font-weight:600;color:#2c3e50;font-size:1rem}.available-user-id{color:#7f8c8d;font-size:.9rem}.available-user-school{color:#95a5a6;font-size:.85rem}.btn-select-link{padding:.5rem 1rem;background:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease}.btn-select-link:hover{background:#2980b9;transform:translateY(-1px)}.empty-state{text-align:center;padding:2rem;color:#7f8c8d}.no-class{color:#999;font-style:italic}.btn-edit-user{padding:.5rem 1rem;background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #ff98004d}.btn-edit-user:hover{transform:translateY(-1px);box-shadow:0 4px 10px #ff980066}.btn-delete-user{padding:.5rem 1rem;background:linear-gradient(135deg,#f44336,#e57373);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #f443364d}.btn-delete-user:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f4433666;background:linear-gradient(135deg,#d32f2f,#ef5350)}.classes-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.classes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.classes-title{font-size:1.5rem;font-weight:600;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-toggle-classes{padding:.6rem 1.5rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #4caf504d}.btn-toggle-classes:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.classes-header-actions{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.btn-add-class{padding:.6rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #2196f34d}.btn-add-class:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f366}.classes-table-container{overflow-x:auto}.classes-table{width:100%;border-collapse:collapse;font-size:.95rem}.classes-table thead{background:linear-gradient(135deg,#2196f31a,#42a5f51a)}.classes-table th{padding:1rem;text-align:left;font-weight:600;color:#2b2d42;border-bottom:2px solid rgba(33,150,243,.2)}.classes-table td{padding:1rem;border-bottom:1px solid rgba(0,0,0,.05);color:#333}.classes-table tbody tr:hover{background-color:#2196f308}.preview-courses-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.preview-courses-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.preview-courses-title{font-size:1.5rem;font-weight:600;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-toggle-preview-courses{padding:.6rem 1.5rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #4caf504d}.btn-toggle-preview-courses:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.preview-courses-header-actions{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.btn-add-preview-course{padding:.6rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #2196f34d}.btn-add-preview-course:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f366}.preview-courses-table-container{overflow-x:auto}.preview-courses-table{width:100%;border-collapse:collapse;font-size:.95rem}.preview-courses-table thead{background:linear-gradient(135deg,#2196f31a,#42a5f51a)}.preview-courses-table th{padding:1rem;text-align:left;font-weight:600;color:#2b2d42;border-bottom:2px solid rgba(33,150,243,.2)}.preview-courses-table td{padding:1rem;border-bottom:1px solid #e0e0e0;color:#555}.preview-courses-table tbody tr:hover{background:#2196f30d}.video-link{color:#2196f3;text-decoration:none;transition:color .3s ease}.video-link:hover{color:#1976d2;text-decoration:underline}.btn-edit-preview-course{padding:.5rem 1rem;background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #ff98004d;margin-right:.5rem}.btn-edit-preview-course:hover{transform:translateY(-1px);box-shadow:0 4px 10px #ff980066}.btn-delete-preview-course{padding:.5rem 1rem;background:linear-gradient(135deg,#f44336,#e57373);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #f443364d}.btn-delete-preview-course:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f4433666;background:linear-gradient(135deg,#d32f2f,#ef5350)}.grade-badge{padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600;display:inline-block;background:linear-gradient(135deg,#9c27b0,#ba68c8);color:#fff}.btn-classroom-manage,.btn-manage-class{padding:.5rem 1rem;background:linear-gradient(135deg,#9c27b0,#ba68c8);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #9c27b04d}.btn-classroom-manage:hover,.btn-manage-class:hover{transform:translateY(-1px);box-shadow:0 4px 10px #9c27b066;background:linear-gradient(135deg,#7b1fa2,#9c27b0)}.btn-edit-class{padding:.5rem 1rem;background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #ff98004d}.btn-edit-class:hover{transform:translateY(-1px);box-shadow:0 4px 10px #ff980066}.btn-delete-class{padding:.5rem 1rem;background:linear-gradient(135deg,#f44336,#e57373);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #f443364d}.btn-delete-class:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f4433666;background:linear-gradient(135deg,#d32f2f,#ef5350)}.admin-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.admin-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a;border:2px solid #e0e0e0}.admin-section h2{font-size:1.3rem;font-weight:600;color:#2b2d42;margin:0 0 .5rem}.admin-section p{font-size:.95rem;color:#666;margin:0 0 1rem}.admin-btn{width:100%;padding:.75rem 1.5rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #4caf504d}.admin-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}@media (max-width: 768px){.admin-container{padding:1rem;padding-top:100px}.admin-title{font-size:2rem}.courses-section{padding:1.5rem}.courses-header{flex-direction:column;align-items:flex-start;gap:1rem}.courses-title{font-size:1.3rem}.btn-toggle-courses,.btn-add-course{width:100%}.courses-table{font-size:.85rem}.courses-table th,.courses-table td{padding:.75rem .5rem}.admin-sections{grid-template-columns:1fr}.users-section{padding:1.5rem}.users-header{flex-direction:column;align-items:flex-start;gap:1rem}.users-title{font-size:1.3rem}.btn-toggle-users{width:100%}.users-table-container{overflow-x:auto;overflow-y:visible;min-width:100%}.users-table{font-size:.9rem;min-width:1800px}.users-table th,.users-table td{padding:1rem .75rem;white-space:nowrap}.users-table th:nth-child(1){min-width:160px}.users-table th:nth-child(2){min-width:130px}.users-table th:nth-child(3){min-width:120px}.users-table th:nth-child(4){min-width:160px}.users-table th:nth-child(5){min-width:120px}.users-table th:nth-child(6){min-width:180px}.users-table th:nth-child(7){min-width:450px}.users-table th:nth-child(8){min-width:350px}.users-table th:nth-child(9){min-width:100px}.users-table td:nth-child(1){min-width:160px}.users-table td:nth-child(2){min-width:130px}.users-table td:nth-child(3){min-width:120px}.users-table td:nth-child(4){min-width:160px}.users-table td:nth-child(5){min-width:120px}.users-table td:nth-child(6){min-width:180px}.users-table td:nth-child(7){min-width:450px}.users-table td:nth-child(8){min-width:350px}.users-table td:nth-child(9){min-width:100px}.user-type-tabs{flex-wrap:wrap;gap:.5rem}.user-type-tab{flex:1;min-width:calc(50% - .25rem);padding:.5rem 1rem;font-size:.85rem}.classes-section{padding:1.5rem}.classes-header{flex-direction:column;align-items:flex-start;gap:1rem}.classes-title{font-size:1.3rem}.btn-toggle-classes,.btn-add-class{width:100%}.classes-table{font-size:.85rem}.classes-table th,.classes-table td{padding:.75rem .5rem}.pagination{flex-wrap:wrap;gap:.5rem}.pagination-numbers{flex-wrap:wrap;gap:.3rem}.pagination-number{min-width:32px;height:32px;font-size:.85rem;padding:.4rem}.page-header{flex-direction:column;align-items:flex-start;gap:1rem;padding-bottom:1rem}.page-title{font-size:1.5rem;width:100%}.btn-back{width:100%;justify-content:center}.admin-cards-grid{grid-template-columns:1fr;gap:1.5rem}.courses-header-actions,.users-header-actions,.classes-header-actions,.preview-courses-header-actions{flex-direction:column;gap:1rem;padding:1rem}.search-container{width:100%;max-width:100%}.btn-add-course,.btn-add-user,.btn-add-class,.btn-add-preview-course{width:100%}}.profile-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.profile-container{flex:1;background-color:#f5f5f5;padding:2rem;padding-top:120px;max-width:1200px;margin:0 auto;width:100%}.profile-content{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000001a}.profile-title{font-size:2.5rem;font-weight:700;color:#000;margin:0 0 2rem;text-align:center;letter-spacing:2px}.profile-info{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}.info-section{background:#f9f9f9;border-radius:12px;padding:2rem;border:2px solid #e0e0e0}.info-section h2{font-size:1.5rem;font-weight:600;color:#2b2d42;margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.info-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.05)}.info-item:last-child{border-bottom:none}.info-label{font-weight:600;color:#666;font-size:.95rem}.info-value{color:#2b2d42;font-size:1rem;font-weight:500}.admin-badge{background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600}.profile-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.btn-edit,.btn-back{padding:.75rem 2rem;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;min-width:150px;height:60px;display:flex;align-items:center;justify-content:center;gap:.3rem;position:relative;background:transparent;color:#2196f3;border:2px solid #2196F3}.btn-back:before{content:"←";font-size:1.1rem;transition:transform .3s ease}.btn-back:hover:before{transform:translate(-3px)}.btn-edit{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;box-shadow:0 4px 15px #4caf504d}.btn-edit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066}.profile-edit-form{display:flex;flex-direction:column}.form-label{display:block;font-weight:600;color:#666;font-size:.95rem;margin-bottom:.5rem}.form-input{width:100%;padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease;background:#fff;color:#333}.error-message{display:block;color:#f44336;font-size:.85rem;margin-top:.5rem;font-weight:500}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-input{width:20px;height:20px;cursor:pointer;accent-color:#2196F3}.checkbox-text{font-weight:600;color:#2b2d42;font-size:1rem}.password-change-button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #667eea40}.password-change-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea59;background:linear-gradient(135deg,#764ba2,#667eea)}.password-change-button.active{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 2px 8px #ef444440}.password-change-button.active:hover{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 4px 12px #ef444459}.password-change-button i{font-size:.9rem}.btn-save{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;padding:1.25rem 3rem;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1.15rem;box-shadow:0 4px 15px #4caf504d;min-width:150px}.btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066}.btn-save:disabled{opacity:.6;cursor:not-allowed}.btn-cancel{background:transparent;color:#666;padding:1.25rem 3rem;border:2px solid #e0e0e0;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1.15rem;min-width:150px}.btn-cancel:hover:not(:disabled){background:#f5f5f5;border-color:#999;transform:translateY(-2px)}.profile-image-section{background:#f9f9f9;border-radius:12px;padding:2rem;border:2px solid #e0e0e0;margin-bottom:2rem}.profile-image-section h2{font-size:1.5rem;font-weight:600;color:#2b2d42;margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.profile-image-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem}.profile-image{width:200px;height:200px;border-radius:50%;object-fit:cover;border:4px solid #2196F3;box-shadow:0 4px 15px #2196f34d}.profile-image-placeholder{width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg,#e0e0e0,#f5f5f5);display:flex;justify-content:center;align-items:center;border:4px solid #e0e0e0;color:#999;font-size:4rem}.profile-image-upload{display:flex;flex-direction:column;align-items:center;gap:1rem}.profile-image-preview-container{position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:1rem}.profile-image-preview-wrapper{position:relative;display:inline-block}.profile-image-preview{width:200px;height:200px;border-radius:50%;object-fit:cover;border:4px solid #2196F3;box-shadow:0 4px 15px #2196f34d}.btn-remove-image{position:absolute;top:-10px;right:-10px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f44336,#ef5350);color:#fff;border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:.9rem;box-shadow:0 2px 8px #f4433666;transition:all .3s ease}.btn-remove-image:hover{transform:scale(1.1);box-shadow:0 4px 12px #f4433699}.btn-upload-image{padding:.75rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 4px 15px #2196f34d;display:flex;align-items:center;gap:.5rem}.btn-upload-image:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f366}.image-upload-hint{font-size:.85rem;color:#666;margin:0;text-align:center}@media (max-width: 768px){.profile-container{padding:1rem;padding-top:100px}.profile-content{padding:2rem 1.5rem}.profile-title{font-size:2rem}.info-section{padding:1.5rem}.info-item{flex-direction:column;align-items:flex-start;gap:.5rem}.info-label{font-size:.85rem}.info-value{font-size:.95rem}.profile-actions{flex-direction:column}.btn-edit,.btn-back,.btn-save,.btn-cancel{width:100%}.form-group{margin-bottom:1.25rem}.form-input{padding:.65rem .9rem;font-size:.95rem}.profile-image,.profile-image-preview,.profile-image-placeholder{width:150px;height:150px}.profile-image-placeholder{font-size:3rem}}.profile-danger-zone{margin-top:3rem;padding:2rem;background:linear-gradient(135deg,#f443360d,#ef44440d);border:2px solid rgba(244,67,54,.2);border-radius:12px}.danger-zone-title{font-size:1.3rem;font-weight:700;color:#f44336;margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}.danger-zone-title:before{content:"⚠️";font-size:1.5rem}.danger-zone-description{font-size:.95rem;color:#666;margin:0 0 1.5rem;line-height:1.6}.btn-withdraw{padding:.875rem 1.75rem;background:linear-gradient(135deg,#f44336,#ef5350);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 15px #f443364d}.btn-withdraw:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f4433666;background:linear-gradient(135deg,#ef5350,#f44336)}.btn-withdraw i{font-size:.9rem}.withdraw-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:10000;padding:1rem;animation:fadeIn .3s ease}.withdraw-modal-content{background:#fff;border-radius:16px;max-width:600px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.withdraw-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:2px solid #f0f0f0;background:linear-gradient(135deg,#f443360d,#ef44440d);flex-shrink:0}.withdraw-modal-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#f44336}.withdraw-modal-close{background:none;border:none;font-size:2rem;color:#999;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.withdraw-modal-close:hover{background:#f443361a;color:#f44336}.withdraw-modal-body{padding:2rem;overflow-y:auto;flex:1}.withdraw-warning-box{background:linear-gradient(135deg,#f443361a,#ef44441a);border:2px solid rgba(244,67,54,.3);border-radius:12px;padding:1.5rem;margin-bottom:2rem}.withdraw-warning-box h3{margin:0 0 1rem;font-size:1.1rem;font-weight:700;color:#f44336;display:flex;align-items:center;gap:.5rem}.withdraw-warning-box ul{margin:0;padding-left:1.5rem;color:#666;line-height:1.8}.withdraw-warning-box li{margin-bottom:.5rem;font-size:.95rem}.confirm-instruction{font-size:.9rem;color:#666;margin:0 0 .5rem}.confirm-instruction strong{color:#f44336;font-weight:600}.required-mark{color:#f44336;font-weight:600;margin-left:.25rem}.withdraw-modal-footer{padding:1.5rem 2rem;border-top:2px solid #f0f0f0;display:flex;justify-content:flex-end;gap:1rem;background:#fafafa;flex-shrink:0}.btn-withdraw-cancel{padding:.875rem 2rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;color:#666;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-withdraw-cancel:hover:not(:disabled){background:#f5f5f5;border-color:#999}.btn-withdraw-cancel:disabled{opacity:.6;cursor:not-allowed}.btn-withdraw-confirm{padding:.875rem 2rem;background:linear-gradient(135deg,#f44336,#ef5350);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #f443364d}.btn-withdraw-confirm:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f4433666}.btn-withdraw-confirm:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 640px){.profile-danger-zone{padding:1.5rem;margin-top:2rem}.danger-zone-title{font-size:1.1rem}.danger-zone-description{font-size:.9rem}.btn-withdraw{width:100%;justify-content:center}.withdraw-modal-content{max-height:95vh;border-radius:12px}.withdraw-modal-header{padding:1.25rem 1.5rem}.withdraw-modal-header h2{font-size:1.25rem}.withdraw-modal-body{padding:1.5rem}.withdraw-warning-box{padding:1.25rem}.withdraw-warning-box h3{font-size:1rem}.withdraw-warning-box li{font-size:.85rem}.withdraw-modal-footer{padding:1.25rem 1.5rem;flex-direction:column}.btn-withdraw-cancel,.btn-withdraw-confirm{width:100%}}.course-register-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#e8ecf1)}.course-register-container{flex:1;padding:2rem;padding-top:120px;max-width:1400px;margin:0 auto;width:100%}.course-register-content{background:#fff;border-radius:20px;padding:3.5rem 4rem;box-shadow:0 10px 40px #00000014,0 4px 16px #0000000a}.course-register-title{font-size:2.25rem;font-weight:700;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 3rem;text-align:center;letter-spacing:-.5px}.course-register-form{display:flex;flex-direction:column;gap:3rem}.form-section{background:#fff;border-radius:16px;padding:0;border:1px solid #e8ecf0;box-shadow:0 2px 12px #0000000a;transition:all .3s ease;overflow:hidden}.form-section:hover{box-shadow:0 4px 20px #0000000f}.section-title{font-size:1.4rem;font-weight:700;color:#1a1a1a;margin:0;padding:1.75rem 2.5rem;background:linear-gradient(135deg,#2196f30d,#42a5f50d);border-bottom:1px solid #e8ecf0}.form-fields-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;width:100%}.form-field-box{display:flex;flex-direction:column;gap:.625rem;padding:1.25rem;background:#fff;border:1px solid #e8ecf0;border-radius:12px;transition:all .3s ease}.form-field-box:hover{border-color:#c8d0d8;box-shadow:0 2px 8px #0000000a}.form-field-box-full{grid-column:1 / -1}.form-group{display:flex;flex-direction:column;gap:.5rem;width:100%}.form-label{font-weight:600;color:#333;font-size:.95rem;letter-spacing:-.2px;margin-bottom:.25rem}.form-input{padding:.875rem 1.25rem;border:1.5px solid #e0e4e8;border-radius:10px;font-size:1rem;transition:all .3s ease;background:#fff;color:#1a1a1a;font-weight:400;width:100%}.form-input:hover{border-color:#c8d0d8}.form-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 4px #2196f314;background:#fff}.form-input.input-error{border-color:#f44336;background-color:#f4433608}.form-input.input-error:focus{box-shadow:0 0 0 4px #f443361a}.form-input-readonly{background-color:#f8f9fa;cursor:not-allowed;color:#666}.form-input-readonly:hover{border-color:#e0e4e8}.form-textarea{resize:vertical;min-height:80px;font-family:inherit;line-height:1.5}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.tag-buttons{display:flex;gap:.875rem;flex-wrap:wrap}.tag-button{padding:.625rem 1.25rem;border:1.5px solid #e0e4e8;border-radius:10px;background:#fff;color:#666;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;letter-spacing:-.1px}.tag-button:hover{border-color:#2196f3;color:#2196f3;background:#2196f30d}.tag-button.active{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border-color:#2196f3;box-shadow:0 2px 8px #2196f333}.error-message{color:#f44336;font-size:.875rem;font-weight:500;margin-top:.25rem;padding-left:.25rem}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:3rem;padding-top:2.5rem;border-top:1.5px solid #e8ecf0}.btn-submit,.btn-cancel{padding:.875rem 2.5rem;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;letter-spacing:-.2px}.btn-submit{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;box-shadow:0 4px 16px #2196f340}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #2196f359}.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-cancel{background:#fff;color:#666;border:1.5px solid #e0e4e8}.btn-cancel:hover:not(:disabled){background:#f8f9fa;border-color:#c8d0d8;color:#333}.btn-cancel:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.course-register-container{padding:1rem;padding-top:100px}.course-register-content{padding:2rem 1.5rem;border-radius:16px}.course-register-title{font-size:1.75rem;margin-bottom:2rem}.course-register-form{gap:2rem}.form-section{padding:1.75rem;border-radius:12px}.section-title{font-size:1.25rem;margin-bottom:1.5rem}.form-fields-container{grid-template-columns:1fr;gap:1.25rem}.form-field-box{padding:1rem}.form-field-box-full{grid-column:1}.form-group{gap:.625rem}.form-label{font-size:.9rem}.form-input{padding:.75rem 1rem;font-size:.95rem}.form-actions{flex-direction:column;margin-top:2rem;padding-top:2rem}.btn-submit,.btn-cancel{width:100%;padding:.875rem 2rem}.btn-upload{width:100%;justify-content:center}.image-preview{width:100%;max-width:300px;height:200px}}.image-upload-container{display:flex;flex-direction:column;gap:1rem}.btn-upload{padding:.75rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;display:flex;align-items:center;gap:.5rem;width:fit-content;box-shadow:0 2px 8px #2196f34d}.btn-upload:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f366}.btn-upload i{font-size:1.1rem}.image-preview{position:relative;width:200px;height:200px;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a;border:2px solid #e0e0e0}.image-preview img{width:100%;height:100%;object-fit:cover}.btn-remove-image{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;border-radius:50%;background:#f44336e6;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-size:.9rem}.btn-remove-image:hover{background:#f44336;transform:scale(1.1)}.lectures-table-container{margin-bottom:1.5rem;overflow-x:auto}.lectures-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000000d}.lectures-table thead{background:linear-gradient(135deg,#2196f31a,#42a5f51a)}.lectures-table th{padding:1rem;text-align:left;font-weight:600;color:#2b2d42;border-bottom:2px solid rgba(33,150,243,.2);font-size:.95rem}.lectures-table td{padding:1rem;border-bottom:1px solid rgba(0,0,0,.05);color:#333;font-size:.9rem}.lectures-table tbody tr:hover{background-color:#2196f308}.lectures-table tbody tr:last-child td{border-bottom:none}.btn-edit-lecture,.btn-delete-lecture,.btn-move-lecture{padding:.4rem .8rem;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;margin-right:.5rem}.btn-edit-lecture{background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;box-shadow:0 2px 6px #ff98004d}.btn-edit-lecture:hover{transform:translateY(-1px);box-shadow:0 4px 10px #ff980066}.btn-delete-lecture{background:linear-gradient(135deg,#f44336,#e57373);color:#fff;box-shadow:0 2px 6px #f443364d}.btn-delete-lecture:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f4433666}.btn-move-lecture{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;box-shadow:0 2px 6px #2196f34d;min-width:50px}.btn-move-lecture:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 10px #2196f366}.btn-move-lecture:disabled{background:#ccc;cursor:not-allowed;opacity:.5}.add-lecture-button-container{display:flex;justify-content:center;margin:1.5rem 0}.btn-add-lecture{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 2px 8px #4caf504d}.btn-add-lecture:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.btn-add-lecture i{font-size:.9rem}.lecture-modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:100%;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease}.lecture-modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e0e0e0}.lecture-modal .modal-title{font-size:1.5rem;font-weight:700;color:#2b2d42;margin:0}.lecture-modal .modal-close-btn{background:transparent;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s ease;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.lecture-modal .modal-close-btn:hover{background:#f5f5f5;color:#333}.lecture-modal .modal-body{padding:1.5rem;overflow-y:auto;flex:1}.lecture-form{display:flex;flex-direction:column;gap:1.5rem}.lecture-form .form-group{display:flex;flex-direction:column;gap:.5rem}.lecture-form .form-label{font-weight:600;color:#333;font-size:.95rem}.lecture-form .form-input{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease}.lecture-form .form-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 3px #2196f31a}.lecture-modal .modal-footer{padding:1.5rem;border-top:1px solid #e0e0e0;display:flex;gap:1rem;justify-content:flex-end}.btn-save-lecture,.btn-cancel-lecture{padding:.6rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.btn-save-lecture{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;box-shadow:0 2px 8px #2196f34d}.btn-save-lecture:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f366}.btn-cancel-lecture{background:transparent;color:#666;border:2px solid #e0e0e0}.btn-cancel-lecture:hover{background:#f5f5f5;border-color:#999}@media (max-width: 768px){.lectures-table{font-size:.85rem}.lectures-table th,.lectures-table td{padding:.75rem .5rem}.btn-edit-lecture,.btn-delete-lecture,.btn-move-lecture{padding:.3rem .6rem;font-size:.8rem;margin-right:.3rem}.lecture-modal{max-width:100%;margin:0;border-radius:12px;max-height:calc(100vh - 40px)}.lecture-modal .modal-header{padding:1.25rem}.lecture-modal .modal-body{padding:1rem}.lecture-modal .modal-footer{padding:1rem;flex-direction:column}.btn-save-lecture,.btn-cancel-lecture{width:100%}}.user-edit-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.user-edit-container{flex:1;background-color:#f5f5f5;padding:2rem;padding-top:120px;max-width:1200px;margin:0 auto;width:100%}.user-edit-content{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000001a}.user-edit-title{font-size:2.5rem;font-weight:700;color:#000;margin:0 0 2rem;text-align:center;letter-spacing:2px}.user-edit-form{display:flex;flex-direction:column;gap:2rem}.section-description{font-size:.9rem;color:#666;margin:-1rem 0 1.5rem;padding-bottom:1rem}.form-input:disabled{background-color:#f5f5f5;color:#999;cursor:not-allowed}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.linked-users-list{display:flex;flex-direction:column;gap:.75rem}.link-user-section{display:flex;flex-direction:column;gap:1rem}.linked-user-display{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:linear-gradient(135deg,#e8eaf6,#f3e5f5);border:2px solid #c5cae9;border-radius:8px;gap:1rem}.linked-user-info{display:flex;align-items:center;gap:.75rem;flex:1}.linked-user-info i{font-size:1.25rem;color:#5c6bc0}.linked-user-name{font-weight:600;color:#2b2d42;font-size:1rem}.linked-user-type{padding:.25rem .5rem;background:#5c6bc0;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}.no-linked-user-display{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;gap:1rem}.no-linked-text{color:#999;font-size:.95rem}.btn-link-user,.btn-unlink-user{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.btn-link-user{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;box-shadow:0 2px 8px #4caf504d}.btn-link-user:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.btn-unlink-user{background:linear-gradient(135deg,#f44336,#e57373);color:#fff;box-shadow:0 2px 8px #f443364d}.btn-unlink-user:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f4433666}.link-user-modal{max-width:600px}.btn-link-item{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.875rem}.btn-link-item:hover{transform:scale(1.05);box-shadow:0 2px 8px #4caf5066}.modal-item-type{padding:.25rem .5rem;background:#5c6bc0;color:#fff;border-radius:4px;font-size:.75rem;font-weight:600}@media (max-width: 768px){.linked-user-display,.no-linked-user-display{flex-direction:column;align-items:flex-start}.btn-link-user,.btn-unlink-user{width:100%;justify-content:center}}@media (max-width: 768px){.user-edit-container{padding:1rem;padding-top:100px}.user-edit-content{padding:2rem 1.5rem}.user-edit-title{font-size:2rem}.form-section{padding:1.5rem}.form-row{grid-template-columns:1fr;gap:1rem}.form-actions{flex-direction:column}.btn-submit,.btn-cancel{width:100%}}.user-register-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.user-register-container{flex:1;background-color:#f5f5f5;padding:2rem;padding-top:120px;max-width:1200px;margin:0 auto;width:100%}.user-register-content{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000001a}.user-register-title{font-size:2.5rem;font-weight:700;color:#000;margin:0 0 2rem;text-align:center;letter-spacing:2px}.user-register-form{display:flex;flex-direction:column;gap:2rem}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.class-selection{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem;padding:1rem;background:#fff;border-radius:8px;border:1px solid #e0e0e0}.class-checkbox-label{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f5f5f5;border-radius:6px;cursor:pointer;transition:all .3s ease;border:2px solid transparent}.class-checkbox-label:hover{background:#e3f2fd;border-color:#2196f3}.class-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#2196F3}.class-checkbox-label input[type=checkbox]:checked+span{font-weight:600;color:#2196f3}.class-checkbox-label span{font-size:.95rem;color:#333}.class-selection-summary{display:flex;flex-direction:column;gap:1rem}.btn-select-class{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #2196f340}.btn-select-class:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f359}.btn-select-class i{font-size:.9rem}.selected-classes{display:flex;flex-wrap:wrap;gap:.5rem}.selected-class-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border-radius:20px;font-size:.9rem;font-weight:600}.remove-class-btn{background:#ffffff4d;border:none;color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;line-height:1}.remove-class-btn:hover{background:#ffffff80;transform:scale(1.1)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.class-selection-modal{background:#fff;border-radius:20px;box-shadow:0 25px 80px #00000040;max-width:650px;width:100%;max-height:85vh;display:flex;flex-direction:column;animation:slideUp .3s ease;overflow:hidden}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:2rem 2rem 1.5rem;border-bottom:1px solid #f0f0f0;background:linear-gradient(135deg,#f8f9fa,#fff)}.modal-title{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;letter-spacing:-.5px}.modal-body{padding:2rem;overflow-y:auto;flex:1;background:#fafbfc}.class-search-container{position:relative;margin-bottom:1.75rem}.class-search-input{width:100%;padding:1rem 3rem 1rem 1.25rem;border:2px solid #e8ecf0;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fff;color:#333;box-shadow:0 2px 8px #0000000a}.class-search-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 4px #2196f31f,0 4px 12px #00000014;background:#fff}.class-search-input::placeholder{color:#999}.class-search-icon{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);color:#999;font-size:1.1rem;pointer-events:none}.class-modal-list{display:flex;flex-direction:column;gap:.75rem}.class-modal-item{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border:2px solid #e8ecf0;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:#fff;position:relative;overflow:hidden}.class-modal-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:all .3s ease}.class-modal-item:hover{border-color:#2196f3;background:linear-gradient(135deg,#f8fbff,#fff);transform:translate(4px);box-shadow:0 4px 12px #2196f31a}.class-modal-item:hover:before{background:#2196f3}.class-modal-item.selected{border-color:#2196f3;background:linear-gradient(135deg,#e3f2fd,#f0f8ff);box-shadow:0 4px 16px #2196f326}.class-modal-item.selected:before{background:#2196f3}.class-modal-item input[type=checkbox]{width:22px;height:22px;cursor:pointer;accent-color:#2196F3;flex-shrink:0;margin:0}.class-modal-item-content{flex:1;display:flex;flex-direction:column;gap:.35rem}.class-name{font-size:1.05rem;font-weight:600;color:#2b2d42;letter-spacing:-.3px}.class-date{font-size:.875rem;color:#6c757d;display:flex;align-items:center;gap:.5rem}.class-date:before{content:"📅";font-size:.75rem}.modal-footer{padding:1.75rem 2rem;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end;background:#fff}.btn-modal-close{padding:.875rem 2.25rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #2196f34d;letter-spacing:-.3px}.btn-modal-close:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f366;background:linear-gradient(135deg,#1976d2,#2196f3)}.btn-modal-close:active{transform:translateY(0)}@media (max-width: 768px){.user-register-container{padding:1rem;padding-top:100px}.user-register-content{padding:2rem 1.5rem}.user-register-title{font-size:2rem}.form-section{padding:1.5rem}.form-row{grid-template-columns:1fr;gap:1rem}.form-actions{flex-direction:column}.btn-submit,.btn-cancel{width:100%}}.class-register-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.class-register-container{flex:1;background-color:#f5f5f5;padding:2rem;padding-top:120px;max-width:1200px;margin:0 auto;width:100%}.class-register-content{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000001a}.class-register-title{font-size:2.5rem;font-weight:700;color:#000;margin:0 0 2rem;text-align:center;letter-spacing:2px}.class-register-form{display:flex;flex-direction:column;gap:2rem}.form-section{background:#f9f9f9;border-radius:12px;padding:2rem;border:2px solid #e0e0e0}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:1.5rem}.form-row:last-child{margin-bottom:0}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.btn-submit,.btn-cancel{padding:.75rem 2rem;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem}.btn-submit{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;box-shadow:0 4px 15px #2196f34d}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #2196f366}.btn-cancel{background:transparent;color:#666;border:2px solid #e0e0e0}.btn-cancel:hover:not(:disabled){background:#f5f5f5;border-color:#999}.btn-cancel:disabled{opacity:.6;cursor:not-allowed}.selected-students-list{margin-top:1.5rem}.students-list-title{font-size:1.1rem;font-weight:600;color:#2b2d42;margin:0 0 1rem}.students-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.student-item{display:flex;flex-direction:column;padding:1.25rem;background:#fff;border:2px solid #e8ecf0;border-radius:12px;transition:all .3s ease;position:relative;box-shadow:0 2px 4px #0000000a}.student-item:hover{border-color:#2196f3;box-shadow:0 4px 12px #2196f326;transform:translateY(-2px)}.student-info{display:flex;flex-direction:column;gap:.5rem;flex:1;margin-bottom:1rem}.student-name{font-weight:700;color:#2b2d42;font-size:1.1rem;margin-bottom:.25rem}.student-id{font-size:.9rem;color:#666;font-weight:500}.student-school{font-size:.85rem;color:#888;font-weight:500;display:flex;align-items:center;gap:.4rem}.student-school:before{content:"🏫";font-size:.9rem}.student-type{display:inline-block;padding:.35rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;width:fit-content;margin-top:.25rem;box-shadow:0 2px 4px #2196f333}.student-type.parent-type{background:linear-gradient(135deg,#9c27b0,#ba68c8);box-shadow:0 2px 4px #9c27b033}.btn-remove-student{padding:.5rem 1rem;background:linear-gradient(135deg,#f44336,#ef5350);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem;box-shadow:0 2px 6px #f443364d;width:100%;margin-top:auto}.btn-remove-student:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f4433666;background:linear-gradient(135deg,#e53935,#d32f2f)}.empty-students-message{text-align:center;padding:2rem;color:#666;background:#f9f9f9;border-radius:8px;margin-top:1rem}.empty-students-message p{margin:0;font-size:.9rem}.selected-courses-list{margin-top:1.5rem}.courses-list-title{font-size:1.1rem;font-weight:600;color:#2b2d42;margin:0 0 1rem}.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.course-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;transition:all .3s ease}.course-item:hover{border-color:#2196f3;box-shadow:0 2px 8px #2196f31a}.course-info{display:flex;flex-direction:column;gap:.5rem;flex:1}.course-name{font-weight:600;color:#2b2d42;font-size:.95rem}.course-details{font-size:.85rem;color:#666}.course-status{display:inline-block;padding:.2rem .6rem;border-radius:12px;font-size:.75rem;font-weight:600;width:fit-content}.course-status.completed{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff}.course-status.in-progress{background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff}.btn-remove-course{padding:.4rem .8rem;background:linear-gradient(135deg,#f44336,#ef5350);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #f443364d}.btn-remove-course:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f4433666}.empty-courses-message{text-align:center;padding:2rem;color:#666;background:#f9f9f9;border-radius:8px;margin-top:1rem}.empty-courses-message p{margin:0;font-size:.9rem}@media (max-width: 768px){.class-register-container{padding:1rem;padding-top:100px}.class-register-content{padding:2rem 1.5rem}.class-register-title{font-size:2rem}.form-section{padding:1.5rem}.form-row{grid-template-columns:1fr;gap:1rem}.form-actions{flex-direction:column}.btn-submit,.btn-cancel{width:100%}.students-grid{grid-template-columns:1fr;gap:1rem}.student-item{padding:1rem}.student-info{margin-bottom:.75rem}.student-name{font-size:1rem}.btn-remove-student{width:100%;padding:.5rem 1rem}.courses-grid{grid-template-columns:1fr}.course-item{flex-direction:column;align-items:flex-start;gap:.75rem}.btn-remove-course{width:100%}}.btn-add-student,.btn-add-course{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 2px 8px #4caf504d}.btn-add-student:hover,.btn-add-course:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.btn-add-student i,.btn-add-course i{font-size:.9rem}.student-modal,.course-modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:100%;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e0e0e0}.modal-title{font-size:1.5rem;font-weight:700;color:#2b2d42;margin:0}.modal-close-btn{background:transparent;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s ease;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background:#f5f5f5;color:#333}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-search{position:relative;margin-bottom:1.5rem}.modal-search-input{width:100%;padding:.75rem 2.5rem .75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease}.modal-search-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 3px #2196f31a}.modal-search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#999;font-size:1rem}.modal-list{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto}.modal-list-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease;background:#fff}.modal-list-item:hover{border-color:#2196f3;background:#f5f9ff}.modal-list-item.selected{border-color:#4caf50;background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.modal-item-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.modal-item-name{font-size:1rem;font-weight:600;color:#333}.modal-item-id{font-size:.85rem;color:#666}.modal-item-school{font-size:.85rem;color:#999}.modal-item-date{font-size:.8rem;color:#999;margin-top:.25rem}.modal-item-details{font-size:.85rem;color:#666}.modal-item-status{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;margin-top:.25rem}.modal-item-status.completed{background:#4caf50;color:#fff}.modal-item-status.in-progress{background:#ff9800;color:#fff}.btn-add-item{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 2px 8px #4caf504d}.btn-add-item:hover{transform:scale(1.1);box-shadow:0 4px 12px #4caf5066}.modal-empty-message{text-align:center;padding:2rem;color:#999;font-size:.95rem}.modal-footer{padding:1.5rem;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end}.btn-modal-close{padding:.75rem 2rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #2196f340}.btn-modal-close:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f359}@media (max-width: 768px){.student-modal,.course-modal{max-width:100%;margin:0;border-radius:12px;max-height:calc(100vh - 40px)}.modal-header{padding:1.25rem}.modal-body,.modal-footer{padding:1rem}.modal-list{max-height:300px}.modal-list-item{padding:.75rem}.modal-item-name{font-size:.95rem}.modal-item-id,.modal-item-school,.modal-item-details{font-size:.8rem}}.my-courses-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);padding-top:100px}.my-courses-section{flex:1;padding:3rem 0;position:relative;overflow:hidden}.my-courses-container{max-width:1400px;margin:0 auto;padding:0 1rem;width:100%}.my-courses-section .page-header{text-align:center;margin-bottom:30px;padding-bottom:.75rem;position:relative;z-index:1;border-bottom:2px solid rgba(33,150,243,.2)}.my-courses-section .page-header.has-courses{border-bottom:none}.my-courses-section .page-header:after,.my-courses-section .page-header:before{display:none!important;content:none!important}.my-courses-section .page-header-icon{display:inline-flex;align-items:center;justify-content:center;width:110px;height:110px;background:transparent;border-radius:0;margin:0 auto 1rem;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.my-courses-section .page-header-icon:before{display:none}.my-courses-section .page-title{margin:0 auto .2rem;position:relative;display:flex;flex-direction:column;align-items:center;width:100%}.my-courses-section .page-title-img{max-width:130px!important;width:auto;height:auto;display:block}.my-courses-section .page-description{font-size:1.1rem;color:#6c757d;max-width:700px;margin:.5rem auto 0;margin-bottom:0;line-height:1.6;text-align:center;display:block;width:100%;border:none!important;border-bottom:none!important;border-top:none!important}.my-courses-section .page-description:after,.my-courses-section .page-description:before{display:none!important;content:none!important}.error-message{background:#ffebee;color:#c62828;padding:1rem;border-radius:8px;margin-bottom:2rem;text-align:center;border-left:4px solid #c62828}.no-courses-container{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:600px;margin-top:2rem!important;margin-left:auto;margin-right:auto;margin-bottom:0}.courses-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:2.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2);gap:.8rem}.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;position:relative;z-index:2}.course-card{background:#fff;padding:0;border-radius:16px;text-align:center;box-shadow:0 2px 12px #0000000f,0 4px 8px #0000000a;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:visible;border:none;display:flex;flex-direction:column;animation:cardFadeIn .6s ease-out forwards;opacity:0;transform:translateY(30px);z-index:1;cursor:pointer;max-height:none}.course-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 8px 24px #2196f326,0 4px 12px #00000014}.course-thumbnail{position:relative;width:100%;padding-top:50%;aspect-ratio:2 / 1;overflow:hidden;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);z-index:1;height:0;border-radius:16px 16px 0 0;flex-shrink:0}.course-thumbnail:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.1) 100%);opacity:0;transition:opacity .5s ease;z-index:1}.course-card:hover .course-thumbnail:after{opacity:1}.course-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1);z-index:0}.course-card:hover .course-thumbnail img{transform:scale(1.08)}.course-thumbnail-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e3f2fd,#bbdefb);z-index:0}.course-thumbnail-placeholder i{font-size:4rem;color:#2196f366;transition:all .3s ease}.course-card:hover .course-thumbnail-placeholder i{color:#2196f399;transform:scale(1.1)}.course-status-badge{position:absolute;top:8px;right:8px;padding:.35rem .75rem;border-radius:16px;font-size:.7rem;font-weight:700;color:#fff;box-shadow:0 2px 8px #0003,0 1px 3px #0000001f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:3;transition:all .3s ease;border:1px solid rgba(255,255,255,.25)}.course-card:hover .course-status-badge{transform:scale(1.05) translateY(-1px);box-shadow:0 6px 18px #00000059,0 3px 6px #0003}.course-status-badge.completed{background:linear-gradient(135deg,#4caf50,#66bb6a)}.course-status-badge.in-progress{background:linear-gradient(135deg,#ff9800,#ffb74d)}.course-info{padding:1.25rem;flex:1;display:flex;flex-direction:column;background:#fff;position:relative;z-index:2;border-top:none;min-height:0;overflow:visible}.course-header{margin-bottom:.75rem;flex-shrink:0;min-height:0}.course-name{font-size:1.15rem;font-weight:700;color:#2b2d42;margin-bottom:.75rem;line-height:1.4;letter-spacing:-.2px;transition:all .3s ease;position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.course-name:after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:2px;background:linear-gradient(90deg,#2196f3,#42a5f5);border-radius:2px;transition:width .3s ease}.course-card:hover .course-name{color:#2196f3;transform:translate(2px)}.course-card:hover .course-name:after{width:50px}.course-instructor{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.5rem;margin-bottom:.25rem;padding:.625rem .875rem;background:#2196f30d;border-radius:10px;flex-shrink:0;transition:all .3s ease;width:100%}.course-card:hover .course-instructor{background:#2196f314;transform:translate(2px)}.instructor-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(33,150,243,.2);box-shadow:0 1px 4px #2196f31a;transition:all .3s ease;flex-shrink:0}.course-card:hover .instructor-avatar{border-color:#2196f3;box-shadow:0 3px 12px #2196f340;transform:scale(1.1)}.instructor-name{font-size:.95rem;color:#333;font-weight:600;letter-spacing:-.2px}.course-details{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;padding-top:.25rem;border-top:1px solid rgba(33,150,243,.08);flex-shrink:0}.course-detail-item{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#555;font-weight:500;padding:.4rem .75rem;background:#2196f30f;border-radius:6px;border:1px solid rgba(33,150,243,.1);transition:all .3s ease;position:relative;overflow:hidden}.course-detail-item:hover{background:#2196f31f;transform:translateY(-2px);border-color:#2196f340;box-shadow:0 2px 8px #2196f326}.course-detail-item i{color:#2196f3;font-size:.9rem;transition:transform .3s ease}.course-detail-item:hover i{transform:scale(1.15)}.course-lectures{margin-top:auto;padding-top:.75rem;border-top:1px solid rgba(33,150,243,.08);flex-shrink:0}.lectures-count{font-size:.85rem;color:#2196f3;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:#2196f314;border-radius:6px;border:1px solid rgba(33,150,243,.12);transition:all .3s ease;cursor:pointer}.lectures-count:hover{background:#2196f326;transform:translateY(-1px);box-shadow:0 2px 8px #2196f333}.lectures-count:before{content:"🎬";font-size:1rem}.my-courses-section .login-prompt,.my-courses-container .login-prompt,.login-prompt{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:450px!important;width:450px!important;margin-top:2rem!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:0!important}.parent-message{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:550px;margin-top:2rem!important;margin-left:auto;margin-right:auto;margin-bottom:0}.parent-message-icon{width:100px;height:100px;margin:0 auto 2rem;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#ff9800;animation:serviceIconPulse 2s ease-in-out infinite,serviceIconFloat 3s ease-in-out infinite}.parent-message h2{font-size:1.8rem;font-weight:700;color:#2b2d42;margin-bottom:1rem}.parent-message p{font-size:1.1rem;color:#6c757d;margin-bottom:.5rem;line-height:1.8}.parent-message-sub{font-size:.95rem;color:#999;font-style:italic}@media (max-width: 968px){.my-courses-page{padding-top:90px}.my-courses-section{padding:2rem 0}.my-courses-section .page-header{margin-bottom:30px}.courses-grid{grid-template-columns:1fr;gap:1.5rem}.course-card{padding:0}}@media (max-width: 640px){.my-courses-page{padding-top:80px}.my-courses-section{padding:1.5rem 0}.my-courses-section .page-header{margin-bottom:10px}.my-courses-section .page-header-icon{width:85px;height:85px;margin:0 auto 1rem}.page-header-icon-img{width:100%;height:100%}.my-courses-section .page-title-img{max-width:95px!important;width:auto;height:auto}.my-courses-section .page-description{font-size:.95rem;padding:0 1rem}.login-prompt-icon,.parent-message-icon{width:60px;height:60px;font-size:2rem;margin-bottom:1rem}.no-courses-icon{width:70px!important;height:70px!important;font-size:1.95rem!important;margin-bottom:1rem!important}.login-prompt h2,.parent-message h2{font-size:1.3rem;margin-bottom:.75rem}.no-courses-container h2{font-size:1.25rem!important;margin-bottom:.75rem!important}.login-prompt p,.parent-message p{font-size:.9rem;margin-bottom:1.5rem}.no-courses-container p{font-size:.9rem!important;margin-bottom:1rem!important;line-height:1.6!important}.my-courses-section .login-prompt,.my-courses-container .login-prompt,.login-prompt,.parent-message{padding:2rem 1.5rem;max-width:95%!important;width:95%!important}.no-courses-container{padding:2rem!important;max-width:95%!important}.btn-login-prompt{padding:.875rem 2rem;font-size:1rem}.course-card{padding:0;border-radius:12px}.course-info{padding:1rem}.course-card .course-header,.my-courses-section .course-card .course-header{margin-bottom:0!important}.course-name{font-size:1rem;margin-bottom:.5rem}.course-instructor{padding:.5rem .75rem;margin-bottom:.75rem}.instructor-name{font-size:.85rem}.course-detail-item{font-size:.75rem;padding:.35rem .6rem}.lectures-count{font-size:.8rem;padding:.4rem .8rem}.courses-grid{gap:1rem;margin-bottom:3rem}.courses-count{font-size:.9rem;padding:.7rem 1.25rem}.courses-count i{font-size:1rem}}.course-detail-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#e3f2fd);padding-top:100px}.course-detail-container{flex:1;padding:3rem 1rem;max-width:1200px;margin:0 auto;width:100%}.course-detail-content{background:#fff;border-radius:24px;padding:3rem;box-shadow:0 8px 32px #0000001a,0 2px 8px #2196f314;border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.course-title-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:1.5rem;padding-bottom:1.5rem}.course-title-icon{width:80px;height:80px;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;box-shadow:0 6px 20px #2196f34d,0 2px 8px #2196f333;position:relative;animation:serviceIconPulse 2s ease-in-out infinite,serviceIconFloat 3s ease-in-out infinite}.course-title-icon:before{content:"";position:absolute;top:-5px;left:-5px;width:calc(100% + 10px);height:calc(100% + 10px);border-radius:50%;border:2px solid rgba(33,150,243,.3);animation:serviceIconRipple 2s ease-out infinite}.course-title-icon:after{content:"";position:absolute;top:-5px;left:-5px;width:calc(100% + 10px);height:calc(100% + 10px);border-radius:50%;border:2px solid rgba(33,150,243,.2);animation:serviceIconRipple 2s ease-out infinite .5s;z-index:-1}.course-title-icon i{font-size:2.5rem;color:#fff;z-index:1;position:relative;animation:serviceIconPulse 2s ease-in-out infinite,serviceIconFloat 3s ease-in-out infinite}.course-title{font-size:2rem;font-weight:700;color:#2b2d42;margin:0;line-height:1.4;letter-spacing:-.5px;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}@keyframes serviceIconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes serviceIconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes serviceIconRipple{0%{transform:scale(1);opacity:1}to{transform:scale(1.3);opacity:0}}.course-detail-content:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2196f3,#42a5f5,#2196f3);background-size:200% 100%;animation:shimmer 3s ease-in-out infinite}.loading{text-align:center;padding:4rem;font-size:1.2rem;color:#666}.error-message{background:#ffebee;color:#c62828;padding:1rem;border-radius:8px;margin-bottom:1rem;text-align:center;border-left:4px solid #c62828}.course-header-section{display:flex;gap:2rem;padding:1.5rem;background:linear-gradient(135deg,#2196f308,#42a5f508);border-radius:16px;margin-bottom:2rem;border:1px solid rgba(33,150,243,.08);box-shadow:0 2px 12px #2196f30f}.course-header-left{flex-shrink:0}.course-thumbnail-wrapper{position:relative;width:180px;height:180px;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #0000001f;margin-top:1rem}.course-thumbnail-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.course-thumbnail-wrapper:hover .course-thumbnail-image{transform:scale(1.05)}.course-header-right{flex:1;display:flex;flex-direction:column;gap:1.2rem}.course-badges{display:flex;gap:.8rem;flex-wrap:wrap}.badge{padding:.5rem 1rem;border-radius:10px;font-size:.85rem;font-weight:700;color:#fff;box-shadow:0 3px 10px #0000002e,0 1px 3px #0000001a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);transition:all .3s ease;position:relative;overflow:hidden}.badge:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);opacity:0;transition:opacity .3s ease}.badge:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #0000004d,0 3px 6px #00000026}.badge:hover:before{opacity:1}.badge-status.completed,.badge-status.in-progress{background:linear-gradient(135deg,#ff9800,#ffb74d)}.badge-textbook{background:linear-gradient(135deg,#2196f3,#42a5f5)}.badge-course-type{background:linear-gradient(135deg,#4caf50,#66bb6a)}.course-header-info{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.course-info-item{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;background:#fff;border-radius:10px;border:1px solid rgba(33,150,243,.08);transition:all .3s ease;box-shadow:0 1px 4px #0000000a}.course-info-item:hover{transform:translateY(-2px);box-shadow:0 3px 12px #2196f31f;border-color:#2196f340}.info-icon{width:36px;height:36px;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px #2196f340}.info-icon i{color:#fff;font-size:1rem}.info-content-wrapper{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:0}.course-header-info .course-info-item .info-content-wrapper{gap:0}.info-label{font-size:.8rem;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:0!important}.course-header-info .course-info-item .info-label{margin-bottom:0!important}.info-value{font-size:.95rem;color:#1a1a1a;font-weight:600;line-height:1.5;word-break:break-word}.course-tabs{display:flex;gap:.5rem;border-bottom:2px solid rgba(33,150,243,.1);margin-bottom:2rem;background:linear-gradient(to bottom,rgba(33,150,243,.02),transparent);padding:.5rem;border-radius:12px 12px 0 0}.tab-button{padding:1rem 2rem;background:transparent;border:none;font-size:1rem;font-weight:700;color:#666;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;border-radius:8px}.tab-button:hover{color:#2196f3;background:#2196f30d}.tab-button.active{color:#2196f3;background:#2196f314}.tab-content{min-height:300px}.tab-panel{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.info-card{margin:0 auto;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:20px;padding:2.5rem;max-width:1000px;width:100%;box-shadow:0 4px 16px #2196f314,0 1px 4px #2196f30f;border:1px solid rgba(33,150,243,.08);position:relative;overflow:hidden;transition:all .4s ease}.info-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f31f,0 2px 8px #2196f314}.info-header{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:2rem;position:relative}.info-card h3{font-size:1.8rem;font-weight:700;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px}.info-details{display:flex;flex-direction:column;gap:1.2rem}.info-detail-item{display:flex;align-items:center;gap:1.2rem;padding:1.5rem;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;box-shadow:0 4px 16px #2196f314,0 1px 4px #2196f30f;border:1px solid rgba(33,150,243,.1);transition:all .3s ease;position:relative;overflow:hidden}.info-detail-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(33,150,243,.05),transparent);transition:left .5s ease}.info-detail-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f326,0 2px 8px #2196f31a;border-color:#2196f333}.info-detail-item:hover:before{left:100%}.info-icon-wrapper{width:50px;height:50px;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px #2196f340;transition:all .3s ease}.info-detail-item:hover .info-icon-wrapper{transform:scale(1.1) rotate(5deg);box-shadow:0 6px 16px #2196f359}.info-icon-wrapper i{font-size:1.3rem;color:#fff}.info-detail-content{display:flex;flex-direction:column;gap:.5rem;flex:1}.info-detail-label{font-size:.8rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.3px}.info-detail-value{font-size:1rem;font-weight:600;color:#1a1a1a;line-height:1.5}.lectures-card{margin:0 auto;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:20px;padding:2.5rem;max-width:1000px;width:100%;box-shadow:0 4px 16px #2196f314,0 1px 4px #2196f30f;border:1px solid rgba(33,150,243,.08);position:relative;overflow:hidden;transition:all .4s ease}.lectures-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f31f,0 2px 8px #2196f314}.lectures-header{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:2rem;position:relative}.lectures-card h3{font-size:1.8rem;font-weight:700;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px}.lecture-info-mobile{display:none}.lectures-table-container{overflow-x:auto;margin-top:1rem;-webkit-overflow-scrolling:touch;margin-left:0;margin-right:0}.lectures-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #00000014,0 1px 4px #2196f30f;border:1px solid rgba(33,150,243,.12);table-layout:fixed}.lectures-table thead{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;position:relative}.lectures-table thead:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff4d}.lectures-table th{padding:1.2rem 1.5rem;text-align:left;font-weight:700;font-size:.95rem;letter-spacing:.3px;text-transform:uppercase}.lectures-table th:first-child{padding-left:2rem;width:60%}.lectures-table th:nth-child(2){width:15%;text-align:center}.lectures-table th:last-child{padding-right:2rem;text-align:center;width:25%}.lectures-table tbody tr{border-bottom:1px solid rgba(33,150,243,.08);transition:all .3s ease;background:#fff}.lectures-table tbody tr:nth-child(2n){background:#2196f305}.lectures-table tbody tr:hover{background:#2196f314;transform:none;box-shadow:none}.lectures-table tbody tr:last-child{border-bottom:none}.lectures-table td{padding:1.2rem 1.5rem;vertical-align:middle}.lectures-table td:first-child{padding-left:2rem;width:60%}.lectures-table td:nth-child(2){width:15%;text-align:center;padding-left:1rem;padding-right:1rem}.lectures-table td:last-child{padding-right:2rem;width:25%;text-align:center}.lecture-title{font-weight:500;color:#1a1a1a;font-size:.95rem;line-height:1.6;letter-spacing:-.1px;word-break:break-word;overflow-wrap:break-word}.lecture-duration{color:#666;font-size:.9rem;font-weight:500;white-space:nowrap}.lecture-video{text-align:center}.btn-watch{padding:.65rem 1.4rem;background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 10px #ff98004d,0 1px 3px #ff980033;position:relative;overflow:hidden;white-space:nowrap;min-width:90px}.btn-watch:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.btn-watch:hover{transform:translateY(-2px);box-shadow:0 5px 16px #ff980066,0 2px 6px #ff980040}.btn-watch:hover:before{width:300px;height:300px}.btn-watch:active{transform:translateY(0)}.empty-lectures{text-align:center;padding:4rem;color:#999}.textbook-section{display:flex;justify-content:center;padding:1rem 0}.textbook-info-card{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:20px;padding:2.5rem;max-width:1000px;width:100%;box-shadow:0 4px 16px #2196f314,0 1px 4px #2196f30f;border:1px solid rgba(33,150,243,.08);position:relative;overflow:hidden;transition:all .4s ease}.textbook-info-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f31f,0 2px 8px #2196f314}.textbook-header{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:2rem;position:relative}.textbook-info-card h3{font-size:1.8rem;font-weight:700;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px}.textbook-details{display:flex;flex-direction:column;gap:1.2rem}.textbook-detail-item{display:flex;align-items:center;gap:1.2rem;padding:1.5rem;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;box-shadow:0 4px 16px #2196f314,0 1px 4px #2196f30f;border:1px solid rgba(33,150,243,.1);transition:all .3s ease;position:relative;overflow:hidden}.textbook-detail-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(33,150,243,.05),transparent);transition:left .5s ease}.textbook-detail-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f326,0 2px 8px #2196f31a;border-color:#2196f333}.textbook-detail-item:hover:before{left:100%}.detail-icon-wrapper{width:50px;height:50px;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px #2196f340;transition:all .3s ease}.textbook-detail-item:hover .detail-icon-wrapper{transform:scale(1.1) rotate(5deg);box-shadow:0 6px 16px #2196f359}.detail-icon-wrapper i{font-size:1.3rem;color:#fff}.detail-content{display:flex;flex-direction:column;gap:.5rem;flex:1}.detail-label{font-size:.8rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.3px}.detail-value{font-size:1rem;font-weight:600;color:#1a1a1a;line-height:1.5}.videos-section{padding:10px 0}.videos-header{margin-bottom:2rem;padding-bottom:0;text-align:center}.videos-header h3{font-size:1.75rem;font-weight:700;color:#2b2d42;margin-bottom:.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}.videos-description{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;color:#64748b;font-size:.95rem;margin:0;padding:.75rem 1.25rem;background:linear-gradient(135deg,#2196f314,#42a5f514);border-radius:12px;border:1px solid rgba(33,150,243,.15);text-align:center;transition:all .3s ease}.videos-description i{color:#2196f3;font-size:1rem;flex-shrink:0}.videos-description span{font-weight:500;letter-spacing:-.2px}.videos-table-container{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;overflow:hidden;border:1px solid rgba(33,150,243,.1)}.videos-table{width:100%;border-collapse:collapse;background:#fff}.videos-table thead{background:linear-gradient(135deg,#2196f31a,#42a5f51a)}.videos-table th{padding:1.25rem 1.5rem;text-align:center;font-weight:700;font-size:1rem;color:#2b2d42;border-bottom:2px solid rgba(33,150,243,.2);letter-spacing:.3px}.video-number-header{width:120px;text-align:center}.video-title-header{width:auto;text-align:center}.video-time-header{width:120px;text-align:center}.video-icon-header{width:100px;text-align:center}.videos-table tbody tr{border-bottom:1px solid rgba(0,0,0,.05);transition:all .3s ease}.videos-table tbody tr.video-row{cursor:pointer}.videos-table tbody tr.video-row:hover{background:#2196f314;transform:translate(4px);box-shadow:0 2px 8px #2196f31a}.videos-table tbody tr:last-child{border-bottom:none}.video-number-cell{padding:1.25rem 1.5rem;text-align:center;vertical-align:middle}.video-number-badge{display:inline-block;padding:.5rem 1rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border-radius:8px;font-size:.9rem;font-weight:700;box-shadow:0 2px 8px #2196f34d;min-width:60px;text-align:center}.video-title-cell{padding:1.25rem 1.5rem;vertical-align:middle}.video-title-content{display:flex;align-items:center;gap:1rem}.video-title-text{font-size:1rem;font-weight:600;color:#2b2d42;line-height:1.5}.video-time-cell{padding:1.25rem 1.5rem;text-align:center;vertical-align:middle}.video-time-badge{display:inline-block;padding:.5rem 1rem;background:linear-gradient(135deg,#f5f5f5,#e8e8e8);color:#666;border-radius:8px;font-size:.9rem;font-weight:600;min-width:60px;text-align:center;border:1px solid #e0e0e0}.video-icon-cell{padding:1.25rem 1.5rem;text-align:center;vertical-align:middle}.video-play-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#90caf9,#64b5f6);border-radius:50%;color:#fff;font-size:1rem;transition:all .3s ease;box-shadow:0 2px 8px #2196f333;cursor:pointer}.video-play-icon i{margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.video-play-icon:hover{transform:scale(1.1);box-shadow:0 4px 12px #2196f34d;background:linear-gradient(135deg,#64b5f6,#42a5f5)}.empty-videos{text-align:center;padding:4rem;color:#999}.empty-videos p{font-size:1.1rem;margin:0}@media (max-width: 768px){.videos-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.videos-table{min-width:100%;width:100%}.videos-table th,.videos-table td{padding:.6rem .5rem;font-size:.75rem}.video-number-header{width:60px;padding:.6rem .3rem;font-size:.75rem;font-weight:700}.video-title-header{width:auto;padding:.6rem .5rem;font-size:.75rem;font-weight:700}.video-time-header{width:60px;padding:.6rem .3rem;font-size:.75rem;font-weight:700}.video-icon-header{width:50px;padding:.6rem .3rem;font-size:.75rem;font-weight:700}.video-number-cell{padding:.6rem .3rem;vertical-align:middle}.video-title-cell{padding:.6rem .5rem;vertical-align:middle}.video-time-cell,.video-icon-cell{padding:.6rem .3rem;vertical-align:middle}.video-number-badge{font-size:.7rem;padding:.3rem .6rem;min-width:45px;border-radius:6px}.video-title-text{font-size:.75rem;line-height:1.4;word-break:break-word}.video-time-badge{font-size:.7rem;padding:.3rem .6rem;min-width:45px;border-radius:6px}.video-play-icon{width:28px;height:28px;font-size:.75rem}.video-play-icon i{margin-left:1px}}.course-actions{margin-top:2.5rem;padding-top:2rem;border-top:2px solid rgba(33,150,243,.1);text-align:center}.btn-back{padding:1rem 2.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #2196f359,0 2px 6px #2196f333;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;text-align:center}.btn-back:before{content:"←";font-size:1.2rem;transition:transform .3s ease;flex-shrink:0}.btn-back:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.btn-back:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 24px #2196f373,0 4px 10px #2196f34d}.btn-back:hover:before{transform:translate(-5px)}.btn-back:hover:after{width:400px;height:400px}.btn-back:active{transform:translateY(-1px) scale(1.02)}@media (max-width: 968px){.course-detail-page{padding-top:90px}.course-detail-container{padding:2rem 1rem}.course-detail-content{padding:1.5rem;border-radius:16px}.course-title-header{margin-bottom:1.2rem;padding-bottom:1.2rem;margin-top:.8rem}.course-title-icon{width:70px;height:70px;margin-bottom:1rem}.course-title-icon i{font-size:2rem}.course-title{font-size:1.6rem}.course-header-section{flex-direction:column;gap:1.5rem;padding:1.5rem}.course-thumbnail-wrapper{width:100%;max-width:250px;height:250px;margin:0 auto;aspect-ratio:1 / 1}.course-header-info{grid-template-columns:1fr;gap:.8rem}.course-header-info{grid-template-columns:1fr}.course-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-button{padding:.8rem 1rem;font-size:.9rem;white-space:nowrap}}@media (max-width: 640px){.course-detail-page{padding-top:80px}.course-detail-container{padding:1.5rem .5rem}.course-detail-content{padding:1.5rem}.textbook-info-card,.info-card{padding:1.8rem;border-radius:16px}.info-header{margin-bottom:1.5rem}.info-card h3{font-size:1.5rem}.lectures-card{padding:1.8rem;border-radius:16px}.lectures-header{margin-bottom:1.5rem}.lectures-card h3{font-size:1.5rem}.info-detail-item{padding:1.2rem;gap:1rem}.info-icon-wrapper{width:45px;height:45px}.info-icon-wrapper i{font-size:1.1rem}.info-detail-label{font-size:.75rem}.info-detail-value{font-size:.9rem}.textbook-info-card h3{font-size:1.5rem}.textbook-detail-item{padding:1.2rem;gap:1rem}.detail-icon-wrapper{width:45px;height:45px}.detail-icon-wrapper i{font-size:1.1rem}.detail-label{font-size:.75rem}.detail-value{font-size:.9rem}.course-title-header{margin-bottom:1rem;padding-bottom:1rem;margin-top:.6rem}.course-title-icon{width:60px;height:60px;margin-bottom:.8rem}.course-title-icon i{font-size:1.8rem}.course-title{font-size:1.3rem;line-height:1.5}.course-header-section{padding-bottom:1.5rem;margin-bottom:1.5rem}.course-header-info{gap:.6rem}.course-info-item{padding:.65rem .75rem;gap:.9rem;align-items:center}.info-icon{width:32px;height:32px}.info-icon i{font-size:.85rem}.info-content-wrapper{gap:.2rem}.course-header-info .course-info-item .info-label{font-size:.65rem!important;letter-spacing:.2px!important;margin-bottom:0!important}.course-header-info .course-info-item .info-value{font-size:15px!important;line-height:1.4!important}.course-thumbnail-wrapper{width:100%;height:100%;max-width:200px;aspect-ratio:1 / 1}.course-badges{gap:.5rem}.badge{padding:.4rem .8rem;font-size:.8rem}.lectures-table{font-size:.9rem;border-radius:10px}.lectures-table th{padding:1rem .8rem;font-size:.8rem}.lectures-table th{padding:1rem;font-size:.85rem}.lectures-table thead{background:linear-gradient(135deg,#2196f3,#42a5f5)}.lectures-table thead tr{display:table-row;width:100%;background:linear-gradient(135deg,#2196f3,#42a5f5)}.lectures-table th{background:linear-gradient(135deg,#2196f3,#42a5f5)}.lecture-info-mobile{display:block;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:8px;padding:1rem 1.2rem;margin-bottom:1rem;text-align:center;font-size:.8rem;color:#1976d2;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lecture-info-mobile p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lectures-table th:first-child{padding-left:2rem;padding-right:2rem;width:60%;text-align:center}.lectures-table th:nth-child(2){width:15%;text-align:center;padding-left:1rem;padding-right:1rem}.lectures-table th:last-child{display:none}.lectures-table tbody tr{display:table-row;border-bottom:1px solid rgba(33,150,243,.08)}.lectures-table tbody tr:last-child{border-bottom:none}.lectures-table td{padding:1.2rem 1.5rem;vertical-align:middle}.lectures-table-container{overflow-x:auto;margin-top:1rem;-webkit-overflow-scrolling:touch;margin-left:0;margin-right:0}.lectures-table{width:100%;table-layout:fixed}.lectures-table td:first-child{padding-left:2rem;width:60%}.lectures-table td:nth-child(2){width:15%;text-align:center;padding-left:1rem;padding-right:1rem}.lectures-table td:last-child{display:none}.lecture-title{font-size:.85rem;line-height:1.5;word-break:break-word;cursor:pointer;transition:color .3s ease}.lecture-title:hover{color:#2196f3}.lecture-duration{font-size:.8rem;font-weight:500;white-space:nowrap}.lecture-video{text-align:center}.btn-watch{padding:.45rem .7rem;font-size:.7rem;min-width:60px;max-width:70px;width:auto;margin:0;display:inline-block;flex-shrink:0;box-sizing:border-box}.btn-back{width:100%;display:flex;justify-content:center;align-items:center;text-align:center}.videos-section{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}.videos-header{margin-bottom:15px}.videos-description{font-size:.85rem;padding:.625rem 1rem;gap:.4rem;flex-wrap:wrap}.videos-description i{font-size:.9rem}.videos-description span{font-size:.85rem}.textbook-section{padding-top:0;padding-bottom:0}}.video-player-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:10000;padding:2rem}.video-player-container{position:relative;width:100%;max-width:1200px;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #00000080}.video-player-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background:#000000b3;color:#fff;border:none;border-radius:50%;font-size:2rem;font-weight:300;cursor:pointer;z-index:10001;display:flex;justify-content:center;align-items:center;transition:all .3s ease;line-height:1}@media (max-width: 768px){.video-player-modal{padding:1rem}.video-player-container{border-radius:8px}.video-player-close{width:35px;height:35px;font-size:1.5rem;top:.5rem;right:.5rem}}.preview-courses-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#e3f2fd,#f5f5f5)!important;padding-top:100px;position:relative}.preview-courses-section{flex:1;padding:3rem 0;position:relative;overflow:hidden;background:transparent;border:none!important;outline:none!important}.preview-courses-page .course-card,.preview-courses-page .course-card *,.preview-courses-page .course-thumbnail,.preview-courses-page .course-thumbnail *,.preview-courses-page .course-info,.preview-courses-page .course-info *,.preview-courses-page .course-header,.preview-courses-page .course-header *,.preview-courses-page .course-name,.preview-courses-section,.preview-courses-section .container,.preview-courses-section .page-header,.preview-courses-section .courses-grid{border:none!important;outline:none!important}.preview-courses-section .page-header{text-align:center;margin-bottom:30px;position:relative;z-index:1}.preview-courses-section .page-header-icon{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;background:transparent;border-radius:0;margin:0 auto 1rem;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.preview-courses-section .page-header-icon:before{display:none}.preview-courses-section .page-title{margin:0 auto .2rem;position:relative;display:flex;flex-direction:column;align-items:center;width:100%}.preview-courses-section .page-title-img{max-width:225px!important;width:auto;height:auto;display:block}.preview-courses-section .page-description{font-size:1.1rem;color:#6c757d;max-width:700px;margin:0 auto;line-height:1.6;text-align:center;display:block;width:100%}.page-title-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:3rem;position:relative}.title-icon{width:80px;height:80px;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px #2196f34d;position:relative;animation:serviceIconPulse 2s ease-in-out infinite,serviceIconFloat 3s ease-in-out infinite;font-size:2.5rem;color:#fff}.title-icon:before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:50%;background:linear-gradient(135deg,#2196f3,#42a5f5);opacity:.3;z-index:-1;animation:serviceIconRipple 2s ease-out infinite}.title-icon i{z-index:1}.page-title{font-size:2.5rem;font-weight:700;color:#2b2d42;margin:0;text-align:center}.courses-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:2.5rem;gap:.8rem}.courses-count{font-size:1.1rem;color:#2b2d42;font-weight:600;display:inline-flex;align-items:center;gap:.75rem;padding:.875rem 1.75rem;background:linear-gradient(135deg,#2196f314,#42a5f51f);border-radius:16px;border:1.5px solid rgba(33,150,243,.15);box-shadow:0 2px 8px #2196f31a,0 1px 3px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.courses-count:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.courses-count:hover:before{left:100%}.courses-count:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f326,0 2px 6px #00000014;border-color:#2196f340;background:linear-gradient(135deg,#2196f31f,#42a5f529)}.courses-count i{font-size:1.2rem;color:#2196f3;transition:transform .3s ease}.courses-count:hover i{transform:scale(1.15) rotate(5deg)}.courses-count span{position:relative;z-index:1}.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;position:relative;z-index:2;border:none!important;outline:none!important}.course-card{background:#fff;padding:0;border-radius:24px;text-align:center;box-shadow:0 4px 20px #00000014;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;border:none!important;outline:none!important;display:flex;flex-direction:column;animation:cardFadeIn .6s ease-out forwards;opacity:0;transform:translateY(30px);z-index:1;cursor:pointer}.course-card:nth-child(1){animation-delay:.1s}.course-card:nth-child(2){animation-delay:.2s}.course-card:nth-child(3){animation-delay:.3s}.course-card:nth-child(4){animation-delay:.4s}.course-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(33,150,243,.1) 0%,transparent 70%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}.course-card:hover:before{opacity:1}.course-card:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 15px 40px #2196f333;border:none!important;outline:none!important}.course-thumbnail{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none!important;outline:none!important}.course-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;border:none!important;outline:none!important}.course-card:hover .course-thumbnail img{transform:scale(1.1)}.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;background:#2196f3e6;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.9;transition:all .3s ease;z-index:2}.play-overlay i{font-size:1.8rem;color:#fff;margin-left:4px}.course-card:hover .play-overlay{opacity:1;transform:translate(-50%,-50%) scale(1.1);background:#2196f3}.course-info{padding:1.5rem;position:relative;z-index:2;border:none!important;outline:none!important}.course-header{margin-bottom:1rem;border:none!important;outline:none!important}.course-name{font-size:1.3rem;font-weight:700;color:#2b2d42;margin:0 0 .5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;border:none!important;outline:none!important}.course-details{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}.course-detail-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#64748b}.course-detail-item i{color:#2196f3;font-size:.9rem}.no-courses-container{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:600px;margin:0 auto}.no-courses-icon{width:100px;height:100px;margin:0 auto 2rem;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#90caf9}.no-courses-container h2{font-size:1.8rem;font-weight:700;color:#2b2d42;margin-bottom:1rem}.no-courses-container p{font-size:1.1rem;color:#6c757d;line-height:1.8}.empty-state{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:600px;margin:0 auto}.empty-icon{width:100px;height:100px;margin:0 auto 2rem;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#90caf9}.empty-state h2{font-size:1.8rem;font-weight:700;color:#2b2d42;margin-bottom:1rem}.empty-state p{font-size:1.1rem;color:#6c757d;line-height:1.8}@media (max-width: 968px){.preview-courses-page{padding-top:90px}.preview-courses-section{padding:2rem 0}.preview-courses-section .page-header{margin-bottom:30px}.courses-grid{grid-template-columns:1fr;gap:1.5rem}.course-card{padding:0}}@media (max-width: 640px){.preview-courses-page{padding-top:80px}.preview-courses-section{padding:1.5rem 0}.preview-courses-section .page-header{margin-bottom:10px}.preview-courses-section .page-header-icon{width:75px;height:75px;margin:0 auto 1rem}.page-header-icon-img{width:100%;height:100%}.preview-courses-section .page-title-img{max-width:165px!important;width:auto;height:auto}.preview-courses-section .page-description{font-size:.95rem;padding:0 1rem}.courses-header{margin-bottom:30px}.course-card{padding:0;border-radius:16px}.course-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 12px 35px #2196f32e}.course-card:hover .course-thumbnail img{transform:scale(1.06)}.course-card:hover .play-overlay{transform:translate(-50%,-50%) scale(1.05)}.course-info{padding:1rem}.course-name{font-size:1.1rem;margin-bottom:.5rem}.course-detail-item{font-size:.8rem;padding:.4rem .6rem}.courses-grid{gap:.875rem;padding:0 .75rem;margin-bottom:3rem}.courses-count{font-size:.9rem;padding:.7rem 1.25rem}.courses-count i{font-size:1rem}}.video-player-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .3s ease}.video-player-container{position:relative;width:100%;max-width:1200px;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #00000080;margin:1rem}.video-player-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background:#000000b3;color:#fff;border:none;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10001;transition:all .3s ease}.video-player-close:hover{background:#000000e6;transform:scale(1.1)}.video-player-wrapper{width:100%;height:100%;position:relative}.video-player-iframe{width:100%;height:100%;border:none}@media (max-width: 640px){.video-player-modal{padding:1rem}.video-player-container{border-radius:8px}.video-player-close{width:35px;height:35px;font-size:1.5rem;top:.5rem;right:.5rem}}.preview-course-detail-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#e3f2fd);padding-top:100px}.preview-course-detail-container{flex:1;padding:3rem 1rem;max-width:1400px;margin:0 auto;width:100%}.preview-course-detail-content{background:#fff;border-radius:24px;padding:3rem;box-shadow:0 8px 32px #0000001a,0 2px 8px #2196f314;border:1px solid rgba(255,255,255,.8)}.video-header{margin-bottom:2rem}.btn-back{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #2196f34d}.btn-back:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2196f366}.video-player-wrapper{width:100%;margin:0 auto}.video-iframe-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;background:#000;border-radius:16px;box-shadow:0 8px 24px #0003}.video-iframe-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.error-message{text-align:center;padding:4rem 2rem;color:#64748b}.error-message p{font-size:1.2rem;color:#c33}@media (max-width: 968px){.preview-course-detail-page{padding-top:90px}.preview-course-detail-container{padding:2rem 1rem}.preview-course-detail-content{padding:2rem 1.5rem}}@media (max-width: 640px){.preview-course-detail-page{padding-top:80px}.preview-course-detail-container,.preview-course-detail-content{padding:1.5rem 1rem}.btn-back{width:100%;justify-content:center;text-align:center}}.preview-course-register-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#e3f2fd);padding-top:100px}.preview-course-register-container{flex:1;padding:3rem 1rem;max-width:900px;margin:0 auto;width:100%}.preview-course-register-content{background:#fff;border-radius:24px;padding:3rem;box-shadow:0 8px 32px #0000001a,0 2px 8px #2196f314;border:1px solid rgba(255,255,255,.8)}.page-header{margin-bottom:2.5rem;text-align:center}.page-title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 1rem}.page-description{font-size:1.1rem;color:#64748b;margin:0}.error-message{background:#fee;color:#c33;padding:1rem;border-radius:8px;margin-bottom:2rem;text-align:center;border:1px solid #fcc}.preview-course-form{display:flex;flex-direction:column;gap:2rem}.form-section,.form-label{display:flex;flex-direction:column;gap:.5rem}.label-text{font-size:1rem;font-weight:600;color:#2b2d42}.form-input{padding:.875rem 1rem;border:2px solid #e0e0e0;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fff}.form-hint{font-size:.875rem;color:#64748b;margin-top:.25rem}.thumbnail-preview-section{margin-top:1rem;padding:2rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;border:2px solid rgba(33,150,243,.1)}.preview-title{font-size:1.2rem;font-weight:700;color:#2b2d42;margin:0 0 1.5rem;text-align:center}.thumbnail-preview{position:relative;width:100%;max-width:640px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #00000026;background:#000}.thumbnail-image{width:100%;height:auto;display:block;aspect-ratio:16 / 9;object-fit:cover}.thumbnail-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:#2196f3e6;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.9;transition:all .3s ease;pointer-events:none}.thumbnail-overlay i{font-size:2.5rem;color:#fff;margin-left:4px}.thumbnail-preview:hover .thumbnail-overlay{opacity:1;transform:translate(-50%,-50%) scale(1.1);background:#2196f3}.video-id-hint{text-align:center;font-size:.875rem;color:#64748b;margin-top:1rem;font-family:monospace;background:#2196f31a;padding:.5rem 1rem;border-radius:8px;display:inline-block;width:100%}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:2rem;border-top:2px solid #e0e0e0}.btn-cancel,.btn-submit{padding:.875rem 2rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-cancel{background:#e0e0e0;color:#555}.btn-cancel:hover{background:#d0d0d0;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.btn-submit{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;box-shadow:0 4px 12px #2196f34d}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #2196f366}.loading{text-align:center;padding:4rem;font-size:1.2rem;color:#64748b}@media (max-width: 968px){.preview-course-register-page{padding-top:90px}.preview-course-register-container{padding:2rem 1rem}.preview-course-register-content{padding:2rem 1.5rem}.page-title{font-size:2rem}}@media (max-width: 640px){.preview-course-register-page{padding-top:80px}.preview-course-register-container,.preview-course-register-content{padding:1.5rem 1rem}.page-title{font-size:1.8rem}.thumbnail-preview-section{padding:1.5rem}.thumbnail-overlay{width:60px;height:60px}.thumbnail-overlay i{font-size:2rem}.form-actions{flex-direction:column}.btn-cancel,.btn-submit{width:100%}}.class-record-manage-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.class-record-manage-container{flex:1;padding:2rem;padding-top:120px;max-width:1400px;margin:0 auto;width:100%}.class-record-manage-content{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000001a}.btn-back{padding:.5rem 1rem;background:transparent;color:#2196f3;border:2px solid #2196F3;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.btn-back:hover{background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #2196f340}.page-title{font-size:2rem;font-weight:700;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.date-selector-section{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:3rem;padding:1.5rem;background:linear-gradient(135deg,#2196f30d,#42a5f50d);border-radius:8px;border:2px solid rgba(33,150,243,.2)}.date-selector-wrapper{display:flex;align-items:center;gap:1rem}.date-selector-label{font-weight:600;color:#2b2d42;font-size:1.1rem;min-width:100px}.date-selector-input{padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease;background:#fff;color:#333}.date-selector-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 3px #2196f31a}.btn-batch-save{padding:.75rem 2rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 4px 15px #4caf504d;white-space:nowrap}.btn-batch-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066}.btn-batch-save:disabled{opacity:.6;cursor:not-allowed}.batch-save-section{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;padding:1rem}.btn-batch-reset{padding:.75rem 2rem;background:linear-gradient(135deg,#f44336,#e57373);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 4px 15px #f443364d;white-space:nowrap}.btn-batch-reset:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f4433666}.btn-batch-reset:disabled{opacity:.6;cursor:not-allowed}.record-form-section,.student-records-section,.parent-records-section{margin-bottom:3rem}.section-title{font-size:1.5rem;font-weight:600;color:#2b2d42;margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(33,150,243,.2)}.record-form{display:flex;flex-direction:column;gap:1.5rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{font-weight:600;color:#666;font-size:.95rem}.form-input{padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease;background:#fff;color:#333}.form-input.input-error{border-color:#f44336;background-color:#f443360d}.error-message{color:#f44336;font-size:.85rem;font-weight:500}.video-options{display:flex;gap:1rem}.radio-label{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f5f5f5;border-radius:8px;cursor:pointer;transition:all .3s ease;border:2px solid transparent}.radio-label:hover{background:#e3f2fd;border-color:#2196f3}.radio-label input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#2196F3}.radio-label input[type=radio]:checked+span{font-weight:600;color:#2196f3}.radio-label span{font-size:1rem;color:#333}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1rem}.btn-submit{padding:.75rem 2rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 4px 15px #4caf504d}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066}.btn-delete{padding:.75rem 2rem;background:linear-gradient(135deg,#f44336,#e57373);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;box-shadow:0 4px 15px #f443364d}.btn-delete:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f4433666}.btn-delete:disabled{opacity:.6;cursor:not-allowed}.students-records-table-container{overflow-x:auto;margin-top:1.5rem}.students-records-table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}.students-records-table thead{background:linear-gradient(135deg,#2196f31a,#42a5f51a)}.students-records-table th{padding:1rem .75rem;text-align:center;font-weight:600;color:#2b2d42;border-bottom:2px solid rgba(33,150,243,.2);white-space:nowrap;vertical-align:top;position:relative}.students-records-table th:first-child,.students-records-table th:nth-child(2),.students-records-table th:nth-child(3),.students-records-table th:nth-child(4),.students-records-table th:nth-child(5){text-align:left}.students-records-table th:nth-child(1),.students-records-table td:nth-child(1){width:80px;min-width:80px}.students-records-table th:nth-child(2),.students-records-table td:nth-child(2){width:120px;min-width:120px}.students-records-table th:nth-child(3),.students-records-table td:nth-child(3){width:100px;min-width:100px}.students-records-table th:nth-child(4),.students-records-table td:nth-child(4){width:120px;min-width:120px}.students-records-table th:nth-child(5),.students-records-table td:nth-child(5){width:120px;min-width:120px}.students-records-table th:nth-child(6),.students-records-table td:nth-child(6),.students-records-table th:nth-child(7),.students-records-table td:nth-child(7),.students-records-table th:nth-child(10),.students-records-table td:nth-child(10){width:110px;min-width:110px}.students-records-table th:nth-child(8),.students-records-table td:nth-child(8),.students-records-table th:nth-child(9),.students-records-table td:nth-child(9){width:180px;min-width:180px;max-width:180px}.total-questions-input-group{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;justify-content:center}.total-questions-label{font-size:.75rem;color:#666;font-weight:500}.total-questions-input{width:60px;padding:.3rem .5rem;border:1px solid #ddd;border-radius:4px;font-size:.8rem;text-align:center}.total-questions-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f31a}.score-total{font-size:.85rem;color:#666;font-weight:500;margin-left:.25rem}.batch-select-buttons{display:flex;gap:.3rem;margin-top:.5rem;justify-content:center;flex-wrap:wrap}.batch-select-btn{padding:.3rem .6rem;font-size:.75rem;font-weight:600;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.batch-select-btn.batch-select-o{background:#e8f5e9;color:#2e7d32;border-color:#4caf50}.batch-select-btn.batch-select-o:hover{background:#4caf50;color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #4caf504d}.batch-select-btn.batch-select-x{background:#ffebee;color:#c62828;border-color:#f44336}.batch-select-btn.batch-select-x:hover{background:#f44336;color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #f443364d}.students-records-table td{padding:1rem .75rem;border-bottom:1px solid rgba(0,0,0,.05);color:#333;vertical-align:middle}.students-records-table tbody tr:hover{background-color:#2196f308}.student-name-cell{display:flex;align-items:center;gap:.5rem}.btn-student-info{padding:.25rem .75rem;background:#ffc107;color:#333;border:none;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-student-info:hover{background:#ffb300;transform:translateY(-1px)}.student-id{display:inline-block;padding:.3rem .8rem;background:#e0e0e0;border-radius:6px;font-size:.85rem;font-weight:500;color:#333}.ox-buttons{display:flex;gap:.5rem}.ox-button{width:40px;height:40px;padding:0;background:#f5f5f5;color:#666;border:2px solid #e0e0e0;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.ox-button:hover{background:#e3f2fd;border-color:#2196f3;color:#2196f3}.ox-button.active{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border-color:#4caf50;box-shadow:0 2px 6px #4caf504d}.ox-button.active:not(.active){background:#f5f5f5;color:#666;border-color:#e0e0e0}.score-input-group{display:flex;align-items:center;gap:.3rem;width:100%}.score-input{flex:1;padding:.4rem .6rem;border:2px solid #e0e0e0;border-radius:6px;font-size:.85rem;transition:all .3s ease;background:#fff;color:#333;min-width:80px;max-width:100px}.score-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f31a}.score-unit{font-size:.8rem;color:#666;white-space:nowrap}.student-actions{display:flex;gap:.5rem}.btn-save-student{padding:.5rem 1rem;background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #4caf504d}.btn-save-student:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 10px #4caf5066}.btn-save-student:disabled{opacity:.6;cursor:not-allowed}.btn-delete-student{padding:.5rem 1rem;background:linear-gradient(135deg,#f44336,#e57373);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;box-shadow:0 2px 6px #f443364d}.btn-delete-student:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 10px #f4433666}.btn-delete-student:disabled{opacity:.6;cursor:not-allowed}.empty-state{text-align:center;padding:3rem;color:#999}@media (max-width: 768px){.class-record-manage-container{padding:1rem;padding-top:100px}.class-record-manage-content{padding:2rem 1.5rem}.page-header{flex-direction:column;align-items:flex-start}.page-title{font-size:1.5rem}.date-selector-section{flex-direction:column;align-items:stretch}.date-selector-wrapper{width:100%}.batch-save-section{flex-direction:column;gap:.75rem}.btn-batch-save,.btn-batch-reset{width:100%;margin-top:0}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column}.btn-submit,.btn-delete{width:100%}.students-records-table{font-size:.8rem}.students-records-table th,.students-records-table td{padding:.75rem .5rem}.ox-button{width:35px;height:35px;font-size:.9rem}.score-input{min-width:100px;font-size:.8rem}.student-actions{flex-direction:column}.btn-save-student,.btn-delete-student{width:100%}}.my-class-status-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);padding-top:100px}.my-class-status-section{flex:1;padding:3rem 0;position:relative;overflow:hidden}.my-class-status-section .page-header{text-align:center;margin-bottom:30px;position:relative;z-index:1}.my-class-status-section .page-header-icon{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;background:transparent;border-radius:0;margin:0 auto 1rem;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.my-class-status-section .page-header-icon:before{display:none}.page-header-icon-img{width:100%;height:100%;object-fit:contain;display:block}.my-class-status-section .page-title{margin:0 auto .2rem;position:relative;display:flex;flex-direction:column;align-items:center;width:100%}.my-class-status-section .page-title-img{max-width:160px;width:auto;height:auto;display:block}.selected-student-info{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 20px;background:linear-gradient(135deg,#3498db1a,#3498db0d);border-radius:8px;border:1px solid rgba(52,152,219,.2)}.selected-student-info i{color:#3498db;font-size:18px}.selected-student-info span{flex:1;font-size:16px;font-weight:500;color:#2c3e50}.btn-change-student{padding:6px 16px;background:#3498db;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-change-student:hover{background:#2980b9;transform:translateY(-1px);box-shadow:0 2px 8px #3498db4d}.my-class-status-section .page-description{font-size:1.1rem;color:#6c757d;max-width:700px;margin:0 auto;line-height:1.6;text-align:center;display:block;width:100%}.login-prompt{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:600px;margin-top:2rem!important;margin-left:auto;margin-right:auto;margin-bottom:0}.login-prompt-icon{width:100px;height:100px;margin:0 auto 2rem;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#2196f3;animation:serviceIconPulse 2s ease-in-out infinite,serviceIconFloat 3s ease-in-out infinite}.login-prompt h2{font-size:1.8rem;font-weight:700;color:#2b2d42;margin-bottom:1rem}.login-prompt p{font-size:1.1rem;color:#6c757d;margin-bottom:2rem;line-height:1.8}.btn-login-prompt{padding:1rem 2.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #2196f34d}.btn-login-prompt:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 6px 20px #2196f366;background:linear-gradient(135deg,#1976d2,#2196f3)}.btn-login-prompt:active{transform:translateY(-1px) scale(1)}.student-only-message{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:600px;margin-top:2rem!important;margin-left:auto;margin-right:auto;margin-bottom:0}.student-only-message-icon{width:100px;height:100px;margin:0 auto 2rem;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#ff9800;animation:serviceIconPulse 2s ease-in-out infinite,serviceIconFloat 3s ease-in-out infinite}.student-only-message h2{font-size:1.8rem;font-weight:700;color:#2b2d42;margin-bottom:1rem}.student-only-message p{font-size:1.1rem;color:#6c757d;margin-bottom:.5rem;line-height:1.8}.student-only-message-sub{font-size:.95rem;color:#999;font-style:italic}.parent-only-message{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:600px;margin-top:2rem!important;margin-left:auto;margin-right:auto;margin-bottom:0}.parent-only-message-icon{width:100px;height:100px;margin:0 auto 2rem;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#ff9800;animation:serviceIconPulse 2s ease-in-out infinite,serviceIconFloat 3s ease-in-out infinite}.parent-only-message h2{font-size:1.8rem;font-weight:700;color:#2b2d42;margin-bottom:1rem}.parent-only-message p{font-size:1.1rem;color:#6c757d;margin-bottom:.5rem;line-height:1.8}.parent-only-message-sub{font-size:.95rem;color:#999;font-style:italic}.no-classes-container{text-align:center;padding:4rem 2rem;background:#fff;border-radius:24px;box-shadow:0 4px 20px #00000014;max-width:550px;margin:0 auto}.no-classes-icon{width:100px;height:100px;margin:0 auto 2rem;background:linear-gradient(135deg,#e3f2fd,#f5f5f5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#90caf9}.no-classes-container h2{font-size:1.8rem;font-weight:700;color:#2b2d42;margin-bottom:1rem}.no-classes-container p{font-size:1.1rem;color:#6c757d;line-height:1.8}.classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;position:relative;z-index:2}.class-card{background:#fff;padding:2.5rem;border-radius:24px;text-align:center;box-shadow:0 4px 20px #00000014;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;border:1px solid rgba(33,150,243,.1);display:flex;flex-direction:column;animation:cardFadeIn .6s ease-out forwards;opacity:0;transform:translateY(30px);z-index:1;cursor:pointer}.class-card:nth-child(1){animation-delay:.1s}.class-card:nth-child(2){animation-delay:.2s}.class-card:nth-child(3){animation-delay:.3s}.class-card:nth-child(4){animation-delay:.4s}@keyframes cardFadeIn{to{opacity:1;transform:translateY(0)}}.class-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(33,150,243,.1) 0%,transparent 70%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}.class-card:hover:before{opacity:1}.class-card:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 15px 40px #2196f333;border-color:#2196f34d}.class-card-header{margin-bottom:2rem;position:relative;z-index:2}.class-icon{width:90px;height:90px;margin:0 auto 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#fff;transition:all .5s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 8px 20px #2196f34d;position:relative}.class-icon:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .5s,height .5s}.class-card:hover .class-icon{transform:rotate(360deg) scale(1.1);box-shadow:0 12px 30px #2196f366}.class-card:hover .class-icon:after{width:120px;height:120px}.class-name{font-size:1.8rem;font-weight:700;color:#2b2d42;margin:0}.class-card-body{flex:1;margin-bottom:2rem;position:relative;z-index:2}.class-info-item{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1rem;background:#2196f30d;border-radius:12px;margin-bottom:1rem}.class-info-item i{font-size:1.2rem;color:#2196f3;width:24px;text-align:center}.class-info-label{font-weight:600;color:#6c757d;font-size:.95rem}.class-info-value{font-weight:700;color:#2b2d42;font-size:1rem}.class-card-footer{margin-top:auto;position:relative;z-index:2}.btn-view-status{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 15px #2196f34d;position:relative;z-index:10;pointer-events:auto}.btn-view-status:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f366;background:linear-gradient(135deg,#1976d2,#2196f3)}.btn-view-status:active{transform:translateY(0)}.btn-view-status i{transition:transform .3s ease}.btn-view-status:hover i{transform:translate(5px)}@media (max-width: 968px){.my-class-status-page{padding-top:90px}.my-class-status-section{padding:2rem 0}.my-class-status-section .page-header{margin-bottom:30px}.classes-grid{grid-template-columns:1fr;gap:1.5rem}.class-card{padding:2rem}}@media (max-width: 640px){.my-class-status-page{padding-top:80px}.my-class-status-section{padding:1.5rem 0}.my-class-status-section .page-header{margin-bottom:25px}.my-class-status-section .page-header-icon{width:90px;height:90px;margin:0 auto 1rem}.page-header-icon-img{width:100%;height:100%}.my-class-status-section .page-title-img{max-width:120px;width:auto;height:auto}.my-class-status-section .page-description{font-size:.95rem;padding:0 1rem}.login-prompt-icon,.student-only-message-icon,.parent-only-message-icon,.no-classes-icon{width:60px;height:60px;font-size:2rem;margin-bottom:1rem}.login-prompt h2,.student-only-message h2,.parent-only-message h2,.no-classes-container h2{font-size:1.3rem;margin-bottom:.75rem}.login-prompt p,.student-only-message p,.parent-only-message p,.no-classes-container p{font-size:.9rem;margin-bottom:1.5rem}.login-prompt,.student-only-message,.parent-only-message,.no-classes-container{padding:2rem 1.5rem}.btn-login-prompt{padding:.875rem 2rem;font-size:1rem}.class-card{padding:1rem;border-radius:16px}.class-card-header{margin-bottom:1rem;padding-top:15px}.class-icon{width:50px;height:50px;font-size:1.5rem;margin-bottom:.75rem;border-radius:16px}.class-card:hover .class-icon:after{width:80px;height:80px}.class-name{font-size:1.1rem}.class-card-body{margin-bottom:1rem}.class-info-item{padding:.625rem;margin-bottom:.625rem;gap:.5rem;border-radius:10px}.class-info-item i{font-size:.9rem;width:20px}.class-info-label{font-size:.8rem}.class-info-value{font-size:.85rem}.btn-view-status{padding:.75rem 1.25rem;font-size:.9rem;border-radius:10px}.classes-grid{gap:1rem}}.class-status-detail-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f0f4ff,#f8f9fa);padding-top:100px}.class-status-detail-section{flex:1;padding:3rem 0}.class-status-detail-section .container{max-width:1200px;margin:0 auto;padding:0 2rem}.page-header{margin-bottom:1rem}.page-header-content{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:1rem}.date-selector-container{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem;margin-bottom:3rem;padding:0;background:transparent;border-radius:0;box-shadow:none;border:none;position:relative}.date-nav-btn{padding:.75rem 1.25rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-width:60px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #667eea4d}.date-nav-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66;background:linear-gradient(135deg,#5568d3,#6a3d8f)}.date-nav-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #667eea4d}.date-nav-btn:disabled{opacity:.6;cursor:not-allowed;background:linear-gradient(135deg,#667eea80,#764ba280);box-shadow:0 2px 6px #667eea33}.date-arrow-btn{padding:0;min-width:48px;width:48px;height:48px;max-width:48px;max-height:48px;border-radius:50%;aspect-ratio:1 / 1;flex-shrink:0}.date-arrow-btn i{font-size:1rem}.date-display-wrapper{position:relative;display:flex;align-items:center;gap:.75rem;padding:.875rem 1.5rem;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:14px;border:2px solid rgba(102,126,234,.2);min-width:200px;max-width:300px;width:auto;flex:0 1 auto;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.date-display-wrapper:hover{border-color:#667eea;background:linear-gradient(135deg,#667eea26,#764ba226);transform:translateY(-1px);box-shadow:0 4px 12px #667eea33}.date-display-wrapper:active{transform:translateY(0)}.date-display{font-size:1.15rem;font-weight:700;color:#667eea;letter-spacing:.3px}.date-input-hidden{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;top:0;left:0}.date-dropdown-btn{background:none;border:none;color:#667eea;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease;border-radius:6px}.date-dropdown-btn:hover{background:#667eea1a;color:#5568d3;transform:rotate(180deg)}.date-dropdown-btn:hover:not(:disabled){color:#667eea}.date-dropdown-btn:disabled{opacity:.4;cursor:not-allowed}.date-dropdown-btn i{font-size:.8rem}.calendar-modal{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border-radius:15px;box-shadow:0 10px 40px #00000026;padding:1.5rem;z-index:1000;min-width:320px;border:1px solid #e0e7ff;animation:calendarSlideDown .3s ease-out}@keyframes calendarSlideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.calendar-nav-btn{background:#f8f9fa;border:1px solid #e0e7ff;border-radius:8px;padding:.5rem .75rem;cursor:pointer;transition:all .3s ease;color:#495057}.calendar-nav-btn:hover{background:#e0e7ff;color:#667eea}.calendar-month-year{font-size:1.1rem;font-weight:700;color:#2b2d42}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin-bottom:.5rem}.calendar-weekday{text-align:center;font-weight:600;font-size:.9rem;color:#6c757d;padding:.5rem}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}.calendar-day{aspect-ratio:1;border:1px solid #e0e7ff;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9rem;font-weight:500;color:#495057;display:flex;align-items:center;justify-content:center}.calendar-day.other-month{color:#adb5bd;background:#f8f9fa}.calendar-day.available{border-color:#667eea;color:#667eea}.calendar-day.available:hover{background:#f0f4ff;transform:scale(1.1)}.calendar-day.selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;font-weight:700}.calendar-day.unavailable{opacity:.3;cursor:not-allowed;border-color:#e0e7ff;color:#adb5bd}.calendar-day:disabled{cursor:not-allowed}.records-tables-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.records-table-container{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 4px 20px #00000014;overflow-x:auto;border:1px solid #e0e7ff}.table-section-title{font-size:1.5rem;font-weight:700;color:#667eea;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e0e7ff}.records-table{width:100%;border-collapse:collapse;font-size:1rem}.records-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:10px 10px 0 0;overflow:hidden}.records-table thead th{padding:1.2rem 1.5rem;text-align:left;font-weight:700;font-size:1.1rem}.records-table tbody tr{border-bottom:1px solid #e0e0e0;transition:background .2s ease}.records-table tbody tr:hover{background:#f8f9fa}.records-table tbody tr:last-child{border-bottom:none}.table-label{padding:1.2rem 1.5rem;font-weight:600;color:#495057;width:200px;vertical-align:top;background:#f8f9fa;border-right:1px solid #e0e7ff}.table-value{padding:1.2rem 1.5rem;color:#212529;font-weight:500}.test-score-detail{display:flex;flex-direction:column;gap:.5rem}.test-score-detail .my-score{font-size:1.2rem;font-weight:700;color:#667eea}.test-score-detail .class-average,.test-score-detail .class-max{font-size:.95rem;color:#6c757d;padding-left:.5rem}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;color:#2b2d42}.loading-spinner{width:50px;height:50px;border:4px solid rgba(102,126,234,.2);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@media (max-width: 968px){.class-status-detail-section{padding:2rem 0}.page-title{font-size:2rem}.date-selector-container{flex-wrap:nowrap;gap:.75rem;padding:0;background:transparent;justify-content:center;align-items:center;margin-top:1.25rem;margin-bottom:2.75rem}.date-display-wrapper{min-width:180px;max-width:250px;flex:0 1 auto;order:0;width:auto}.date-arrow-btn{width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;max-height:48px;aspect-ratio:1 / 1;flex-shrink:0;padding:0}.date-arrow-btn i{font-size:.95rem}.date-nav-btn{padding:.6rem 1rem;font-size:.95rem}.calendar-modal{min-width:280px;padding:1rem}.calendar-day{font-size:.85rem;padding:.25rem}.records-tables-container{grid-template-columns:1fr;gap:1.5rem}.records-table-container{padding:1.5rem}.table-section-title{font-size:1.3rem;margin-bottom:1.2rem}.records-table{font-size:.95rem}.records-table thead th{padding:1rem;font-size:1rem}.table-label,.table-value{padding:1rem}}@media (max-width: 640px){.class-status-detail-page{padding-top:80px}.class-status-detail-section{padding:1.5rem 0}.class-status-detail-section .container{padding:0 .75rem;max-width:100%}.page-header{margin-bottom:1.5rem;display:flex;flex-direction:column;align-items:center;width:100%}.btn-back{padding:.5rem 1rem;font-size:.85rem;margin-bottom:1rem;width:auto}.page-header-content{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:0}.page-header-icon{width:60px;height:60px;margin-bottom:1rem}.page-header-icon i{font-size:1.8rem}.page-title{font-size:1.5rem;text-align:center;width:100%}.page-description{font-size:.9rem;text-align:center}.date-selector-container{padding:0;gap:.75rem;margin-top:1rem;margin-bottom:2.5rem;width:100%;max-width:100%;justify-content:center;align-items:center;position:relative;background:transparent;display:flex}.date-nav-btn.date-arrow-btn:first-child{order:0;margin-right:0}.date-display-wrapper{flex:0 1 auto;min-width:160px;max-width:240px;width:auto;order:0;margin:0;height:auto;min-height:auto;padding:.75rem 1.25rem}.date-display{font-size:.9rem;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.date-dropdown-btn{padding:.25rem;flex-shrink:0}.date-nav-btn.date-arrow-btn:last-child{order:0;margin-left:0}.date-arrow-btn{width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;max-height:48px;aspect-ratio:1 / 1;flex-shrink:0;padding:0}.date-arrow-btn i{font-size:.95rem}.date-nav-btn{font-size:.85rem}.records-tables-container{grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem;width:100%}.records-table-container{padding:.75rem;width:100%;box-sizing:border-box}.table-section-title{font-size:1rem;padding:.7rem .75rem}.records-table{font-size:.85rem;width:100%;table-layout:auto}.records-table thead th{padding:.7rem .75rem;font-size:.9rem}.records-table tbody td{padding:.7rem .75rem;word-break:break-word}.table-label{font-size:.85rem;min-width:80px;width:auto}.table-value{font-size:.85rem}.test-score-detail{flex-direction:column;gap:.4rem;align-items:flex-start}.test-score-detail .my-score,.test-score-detail .class-average,.test-score-detail .class-max{font-size:.8rem}.records-table-container{padding:1rem}.table-section-title{font-size:1.2rem;margin-bottom:1rem;padding-bottom:.8rem}.records-table{font-size:.9rem}.records-table thead th{padding:.8rem;font-size:.95rem}.table-label{width:150px;padding:.8rem;font-size:.9rem}.table-value{padding:.8rem;font-size:.9rem}.test-score-detail .my-score{font-size:1.1rem}.test-score-detail .class-average,.test-score-detail .class-max{font-size:.85rem}}@media (max-width: 968px){.trend-chart-container{padding:1.5rem}.chart-title{font-size:1.3rem}.chart-container{min-width:500px}}@media (max-width: 640px){.trend-chart-container{padding:1rem .75rem;margin-bottom:1.5rem;width:100%;box-sizing:border-box}.chart-title{font-size:1.1rem;margin-bottom:.5rem;padding-bottom:.75rem;text-align:center}.chart-hint{display:block;font-size:.7rem;color:#6c757d;text-align:center;margin:0 0 1rem;padding:.25rem 0;line-height:1.6}.chart-hint span{display:block;margin-bottom:.2rem}.chart-hint span:last-child{margin-bottom:0}.chart-legend{gap:1rem;font-size:.8rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center}.legend-item{font-size:.8rem}.legend-color{width:12px;height:12px}.chart-wrapper{padding:.5rem 0;width:100%;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.chart-container{min-width:100%}.chart-svg-wrapper{padding:.75rem;width:100%;touch-action:pan-x;-webkit-tap-highlight-color:transparent}.chart-tooltip{min-width:160px;padding:.75rem;font-size:.8rem}.chart-tooltip-mobile{pointer-events:auto;z-index:1001}.calendar-modal{min-width:280px;padding:1rem;left:50%;transform:translate(-50%)}.calendar-weekday{font-size:.8rem;padding:.4rem}.calendar-day{font-size:.8rem}}.student-selector-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:10000;padding:20px}.student-selector-content{background:#fff;border-radius:12px;padding:30px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 4px 20px #00000026;position:relative}.student-selector-close-btn{position:absolute;top:20px;right:20px;background:none;border:none;font-size:24px;color:#7f8c8d;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:all .2s ease;z-index:1}.student-selector-close-btn:hover{background-color:#f0f0f0;color:#2c3e50}.student-selector-close-btn:active{background-color:#e0e0e0}.student-selector-content h2{font-size:24px;font-weight:600;color:#2c3e50;margin-bottom:24px;text-align:center}.students-list{display:flex;flex-direction:column;gap:16px}.student-card{border:2px solid #e0e0e0;border-radius:8px;padding:20px;cursor:pointer;transition:all .3s ease;background:#fff;position:relative}.student-card:hover{border-color:#3498db;box-shadow:0 4px 12px #3498db33;transform:translateY(-2px)}.student-card.selected{border-color:#3498db;background:linear-gradient(135deg,#3498db0d,#3498db1a)}.student-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.student-icon{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#3498db,#2980b9);display:flex;justify-content:center;align-items:center;color:#fff;font-size:20px}.student-name{font-size:20px;font-weight:600;color:#2c3e50;margin:0}.student-card-body{display:flex;flex-direction:column;gap:8px}.student-info-item{display:flex;align-items:center;gap:8px;font-size:14px}.student-info-item i{color:#7f8c8d;width:16px}.student-info-label{color:#7f8c8d;font-weight:500}.student-info-value{color:#2c3e50}.student-card-selected{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:6px;color:#27ae60;font-size:14px;font-weight:600}.student-card-selected i{font-size:18px}.no-students-message{text-align:center;padding:40px 20px}.no-students-message i{font-size:48px;color:#95a5a6;margin-bottom:16px}.no-students-message p{font-size:16px;color:#7f8c8d;margin:8px 0}.no-students-sub{font-size:14px;color:#95a5a6}.loading-container,.error-container{text-align:center;padding:40px 20px}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 640px){.student-selector-content{padding:20px;max-width:100%;margin:10px}.student-selector-close-btn{top:15px;right:15px;width:32px;height:32px;font-size:20px}.student-selector-content h2{font-size:20px;margin-bottom:20px}.student-card{padding:16px}.student-name{font-size:18px}}.monthly-statistics-detail-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f0f4ff,#f8f9fa);padding-top:100px}.monthly-statistics-detail-section{flex:1;padding:3rem 0}.monthly-statistics-detail-section .container{max-width:1400px;margin:0 auto;padding:0 2rem}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:2rem}.loading-spinner{width:50px;height:50px;border:4px solid rgba(33,150,243,.2);border-top-color:#2196f3;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.error-container p{color:#d32f2f;font-size:1.1rem}.page-header{margin-bottom:2rem}.btn-back{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#fff;color:#667eea;border:2px solid #e0e7ff;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:2rem;text-decoration:none;box-shadow:0 2px 8px #667eea1a}.btn-back:hover{background:#667eea;color:#fff;border-color:#667eea;transform:translateY(-2px);box-shadow:0 5px 15px #667eea33}.btn-back i{font-size:.9rem}.page-header-content{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:2rem}.page-header-icon{width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;animation:iconFloat 3s ease-in-out infinite;box-shadow:0 8px 20px #667eea4d}.page-header-icon i{font-size:2.5rem;color:#fff}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.page-title{font-size:2.5rem;font-weight:700;color:#2b2d42;margin-bottom:.5rem}.page-description{font-size:1.1rem;color:#6c757d;margin-bottom:2rem}.month-selector-container{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;margin-bottom:3rem;padding:0;background:transparent;border-radius:0;box-shadow:none}.month-selector-hint{display:none}.month-selector{display:flex;align-items:center;gap:.75rem;justify-content:center;flex-wrap:nowrap}.student-search-container{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:500px;margin:0 auto}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon-input{position:absolute;left:1rem;color:#667eea;font-size:1rem;pointer-events:none;z-index:1}.student-search-input{width:100%;padding:.75rem 1rem .75rem 2.75rem;border:2px solid #e0e7ff;border-radius:12px;font-size:1rem;font-weight:500;color:#2b2d42;background:#fff;transition:all .3s ease}.student-search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;background:#fafafa}.student-search-input::placeholder{color:#9ca3af}.search-clear-btn{position:absolute;right:.75rem;background:transparent;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:50%;width:24px;height:24px;transition:all .2s ease;z-index:1}.search-clear-btn:hover{background:#f3f4f6;color:#667eea}.search-result-info{font-size:.9rem;color:#667eea;font-weight:600;text-align:center;padding:.5rem;background:#667eea1a;border-radius:8px}.month-selector label{font-weight:600;color:#2b2d42;font-size:1rem}.month-select{padding:.75rem 1rem;border:2px solid rgba(102,126,234,.3);border-radius:12px;font-size:1rem;font-weight:700;color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a);cursor:pointer;transition:none;min-width:120px;max-width:150px;flex:0 1 auto;box-shadow:0 2px 8px #667eea26}.month-select:hover{border-color:#667eea;background:linear-gradient(135deg,#667eea26,#764ba226);box-shadow:0 4px 12px #667eea40}.month-select:focus{outline:none;border-color:#667eea;background:linear-gradient(135deg,#667eea33,#764ba233);box-shadow:0 0 0 3px #667eea33,0 4px 12px #667eea40}.monthly-table-container{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;overflow:hidden;margin-bottom:2rem}.admin-table-wrapper{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#667eea #e0e7ff;scroll-behavior:smooth;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:pan-x;cursor:grab;width:100%}.admin-table-wrapper:active{cursor:grabbing}.admin-table-wrapper::-webkit-scrollbar{height:8px}.admin-table-wrapper::-webkit-scrollbar-track{background:#e0e7ff;border-radius:10px}.admin-table-wrapper::-webkit-scrollbar-thumb{background:#667eea;border-radius:10px}.admin-table-wrapper::-webkit-scrollbar-thumb:hover{background:#5568d3}.monthly-table{width:100%;border-collapse:collapse;background:#fff}.monthly-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.monthly-table thead tr{border-bottom:2px solid rgba(255,255,255,.2)}.monthly-table th{padding:1.25rem 1rem;text-align:center;font-weight:700;font-size:1rem;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}.admin-monthly-table{min-width:100%;width:max-content}.admin-monthly-table th{min-width:140px;padding:1rem .75rem;font-size:.9rem;position:sticky;top:0;z-index:10}.admin-monthly-table th:first-child{position:sticky;left:0;z-index:11;background:linear-gradient(135deg,#667eea,#764ba2);min-width:120px}.admin-monthly-table td{min-width:140px;padding:.75rem .5rem;font-size:.85rem;vertical-align:top}.admin-monthly-table td:first-child{position:sticky;left:0;z-index:9;background:#fff;min-width:120px;font-weight:600;color:#667eea;padding:.75rem 1rem;text-align:left;box-shadow:2px 0 4px #0000000d}.admin-monthly-table tbody tr:hover td:first-child{background:#667eea0d}.admin-student-cell{padding:.75rem .5rem!important;min-width:150px!important}.cell-item{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;font-size:.8rem;line-height:1.4}.cell-item:last-child{margin-bottom:0}.cell-label{font-weight:600;color:#6b7280;font-size:.75rem;white-space:nowrap}.cell-value{font-weight:600;color:#2b2d42}.monthly-eval{margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.monthly-score{color:#667eea!important;font-weight:700}.class-stats-row{background:#f8f9fa!important;border-top:2px solid #667eea}.class-stats-row td{background:#f8f9fa!important;font-weight:600}.class-stats-cell{padding:.75rem .5rem!important;min-width:150px!important;background:#f8f9fa!important}.class-average{color:#42a5f5!important;font-weight:700}.class-max{color:#f59e0b!important;font-weight:700}.admin-monthly-table tfoot tr:hover{background:#f8f9fa!important}.monthly-table tbody tr{border-bottom:1px solid #e8eaf6;transition:all .2s ease}.monthly-table tbody tr:hover{background:#667eea0d}.monthly-table tbody tr.has-data{background:#fff}.monthly-table tbody tr:last-child{border-bottom:none}.monthly-table td{padding:1rem;text-align:center;font-size:.95rem;color:#2b2d42}.monthly-table td:first-child{font-weight:700;color:#667eea}.status-badge{display:inline-block;padding:.4rem .8rem;border-radius:8px;font-size:.85rem;font-weight:600;text-align:center;min-width:60px}.status-present{background:#e8f5e9;color:#2e7d32}.status-absent{background:#ffebee;color:#c62828}.status-complete{background:#e3f2fd;color:#1565c0}.status-incomplete{background:#fff3e0;color:#e65100}.score-cell{font-weight:600;color:#2b2d42}.monthly-evaluation-section{margin-top:3rem}.section-title{font-size:1.5rem;font-weight:700;color:#667eea;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e0e7ff}.trend-chart-container{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 4px 20px #00000014;margin-bottom:2rem;border:1px solid #e0e7ff}.chart-title{font-size:1.5rem;font-weight:700;color:#667eea;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e0e7ff}.chart-hint{display:none}.chart-wrapper{overflow-x:auto;overflow-y:hidden;padding:1rem 0;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#667eea #e0e7ff;scroll-behavior:smooth;position:relative}.chart-wrapper::-webkit-scrollbar{height:8px}.chart-wrapper::-webkit-scrollbar-track{background:#e0e7ff;border-radius:10px}.chart-wrapper::-webkit-scrollbar-thumb{background:#667eea;border-radius:10px}.chart-wrapper::-webkit-scrollbar-thumb:hover{background:#5568d3}.chart-container{min-width:100%;width:max-content}.chart-legend{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:#495057;font-weight:500}.legend-color{width:16px;height:16px;border-radius:4px;display:inline-block}.chart-svg-wrapper{padding:1.5rem;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:12px;width:100%;display:flex;justify-content:flex-start;position:relative;box-shadow:inset 0 2px 4px #00000005;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:pan-x;cursor:grab}.chart-svg-wrapper:active{cursor:grabbing}.chart-svg{display:block;margin:0 auto}.chart-tooltip{position:absolute;background:#fffffffa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:1rem;box-shadow:0 8px 24px #00000026;z-index:1000;pointer-events:none;min-width:180px;transform:translate(-50%);border:1px solid rgba(0,0,0,.05);animation:tooltipFadeIn .2s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-5px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.tooltip-date{font-size:.85rem;font-weight:600;color:#374151;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.tooltip-scores{display:flex;flex-direction:column;gap:.5rem}.tooltip-item{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0}.tooltip-label{font-size:.8rem;color:#6b7280;font-weight:500}.tooltip-value{font-size:.9rem;font-weight:700}.tooltip-my-score .tooltip-value{color:#ef4444}.tooltip-average .tooltip-value{color:#42a5f5}.tooltip-max .tooltip-value{color:#f59e0b}@media (max-width: 968px){.monthly-statistics-detail-page{padding-top:90px}.monthly-statistics-detail-section{padding:2rem 0}.monthly-statistics-detail-section .container{padding:0 1rem}.page-header-content{margin-bottom:1.5rem}.page-header-icon{width:70px;height:70px;font-size:2rem;margin-bottom:1rem}.page-title{font-size:2rem}.page-description{font-size:1rem}.month-selector-container{padding:0;gap:.75rem;background:transparent;border-radius:0;box-shadow:none;margin-top:1.25rem;margin-bottom:2.75rem}.month-selector{flex-direction:row;align-items:center;gap:.625rem;flex-wrap:wrap}.month-selector label{font-size:.875rem}.month-select{flex:0 1 auto;min-width:100px;max-width:130px;padding:.75rem 1rem;font-size:.95rem;font-weight:700;transition:none;background:linear-gradient(135deg,#667eea1a,#764ba21a);border:2px solid rgba(102,126,234,.3);color:#667eea;box-shadow:0 2px 8px #667eea26}.month-select:hover{border-color:#667eea;background:linear-gradient(135deg,#667eea26,#764ba226);box-shadow:0 4px 12px #667eea40}.month-select:focus{outline:none;border-color:#667eea;background:linear-gradient(135deg,#667eea33,#764ba233);box-shadow:0 0 0 3px #667eea33,0 4px 12px #667eea40}.student-search-container{max-width:100%}.student-search-input{font-size:.9rem;padding:.65rem .9rem .65rem 2.5rem}.search-icon-input{left:.75rem;font-size:.9rem}.monthly-table-container{overflow-x:auto}.monthly-table{min-width:800px}.monthly-table th,.monthly-table td{padding:.75rem .5rem;font-size:.85rem}.status-badge{padding:.3rem .6rem;font-size:.75rem;min-width:50px}}@media (max-width: 640px){.monthly-statistics-detail-page{padding-top:80px}.monthly-statistics-detail-section{padding:1.5rem 0}.page-header-icon{width:60px;height:60px;font-size:1.8rem}.page-title{font-size:1.8rem}.page-description{font-size:.95rem;padding:0 1rem}.page-header-content{margin:0}.month-selector-container{padding:0;gap:.75rem;background:transparent;border-radius:0;box-shadow:none;margin-top:1rem;margin-bottom:.5rem}.month-selector-hint{display:block;font-size:.7rem;color:#6c757d;text-align:center;margin:0;padding:.25rem 0;line-height:1.3}.month-selector{gap:.5rem;justify-content:center;flex-wrap:nowrap}.month-selector label{display:inline-block;font-size:.85rem;font-weight:600;color:#2b2d42;white-space:nowrap}.month-select{padding:.6rem .75rem;font-size:.85rem;font-weight:700;min-width:70px;max-width:90px;flex:0 1 auto;background:linear-gradient(135deg,#667eea1a,#764ba21a);border:2px solid rgba(102,126,234,.3);border-radius:12px;color:#667eea;box-shadow:0 2px 8px #667eea26;transition:none}.month-select:hover{border-color:#667eea;background:linear-gradient(135deg,#667eea26,#764ba226);box-shadow:0 4px 12px #667eea40}.month-select:focus{outline:none;border-color:#667eea;background:linear-gradient(135deg,#667eea33,#764ba233);box-shadow:0 0 0 3px #667eea33,0 4px 12px #667eea40}.student-search-container{max-width:100%}.student-search-input{font-size:.85rem;padding:.6rem .8rem .6rem 2.25rem}.search-icon-input{left:.65rem;font-size:.85rem}.search-result-info{font-size:.85rem;padding:.4rem}.monthly-table{min-width:480px}.monthly-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.monthly-table{border-collapse:collapse!important;border-spacing:0!important;border:none!important;width:100%;margin:0!important;padding:0!important;table-layout:fixed}.monthly-table *{border-spacing:0!important}.monthly-table thead{border:none}.monthly-table thead tr{border:none;border-bottom:none;border-top:none;border-left:none;border-right:none}.monthly-table th,.monthly-table thead th,.monthly-table thead tr th{padding:.75rem .25rem;font-size:.75rem;letter-spacing:.2px;position:relative;border:none!important;border-top:none!important;border-bottom:none!important;border-left:none!important;border-right:none!important;outline:none!important;margin:0!important;border-spacing:0!important}.monthly-table th:first-child,.monthly-table thead th:first-child,.monthly-table thead tr th:first-child{position:sticky;left:0;z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);padding:.75rem .35rem;min-width:60px;box-shadow:2px 0 4px #0000001a;border:none!important;border-top:none!important;border-bottom:none!important;border-left:none!important;border-right:none!important;outline:none!important;font-size:.75rem}.monthly-table tbody{border:none}.monthly-table tbody tr{border:none;border-bottom:none!important;border-top:none!important;border-left:none!important;border-right:none!important}.monthly-table td{padding:.7rem .25rem;font-size:.8rem;position:relative;border:none!important;border-top:none!important;border-bottom:none!important;border-left:none!important;border-right:none!important;margin:0!important;border-spacing:0!important}.monthly-table td:first-child{position:sticky;left:0;z-index:9;background:#fff;padding:.7rem .35rem;font-size:.8rem;min-width:60px;box-shadow:2px 0 4px #0000000d;font-weight:700;color:#667eea;border:none!important;border-top:none!important;border-bottom:none!important;border-left:none!important;border-right:none!important}.monthly-table tbody tr:hover td:first-child{background:#667eea0d}.monthly-table .status-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:.38rem .665rem!important;font-size:.715rem!important;min-width:52px!important;line-height:1!important;border-radius:8px!important;font-weight:600!important;text-align:center!important;vertical-align:middle!important}.monthly-table .score-cell{font-size:.8rem!important}.trend-chart-container{padding:1rem .75rem;margin-bottom:1.5rem;width:100%;box-sizing:border-box}.chart-title{font-size:1.1rem;margin-bottom:.5rem;padding-bottom:.75rem;text-align:center}.chart-hint{display:block;font-size:.7rem;color:#6c757d;text-align:center;margin:0 0 1rem;padding:.25rem 0;line-height:1.6}.chart-hint span{display:block;margin-bottom:.2rem}.chart-hint span:last-child{margin-bottom:0}.chart-legend{gap:1rem;font-size:.8rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center}.legend-item{font-size:.8rem}.legend-color{width:12px;height:12px}.chart-wrapper{padding:.5rem 0;width:100%;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.chart-container{min-width:100%}.chart-svg-wrapper{padding:.75rem;width:100%;touch-action:pan-x;-webkit-tap-highlight-color:transparent}.chart-tooltip{min-width:160px;padding:.75rem;font-size:.8rem}.chart-tooltip-mobile{pointer-events:auto;z-index:1001}.section-title{padding-top:5px}}@media (max-width: 968px){.trend-chart-container{padding:1.5rem}.chart-title{font-size:1.3rem}.chart-container{min-width:500px}.admin-monthly-table th{min-width:120px;padding:.75rem .5rem;font-size:.85rem}.admin-monthly-table th:first-child{min-width:100px}.admin-monthly-table td{min-width:120px;padding:.6rem .4rem;font-size:.8rem}.admin-monthly-table td:first-child{min-width:100px;padding:.6rem .75rem}.admin-student-cell{min-width:130px!important;padding:.6rem .4rem!important}.cell-item{font-size:.75rem;gap:.3rem;margin-bottom:.3rem}.cell-label{font-size:.7rem}}@media (max-width: 640px){.admin-monthly-table th{min-width:100px;padding:.6rem .4rem;font-size:.75rem}.admin-monthly-table th:first-child{min-width:80px}.admin-monthly-table td{min-width:100px;padding:.5rem .3rem;font-size:.75rem}.admin-monthly-table td:first-child{min-width:80px;padding:.5rem;font-size:.8rem}.admin-student-cell{min-width:110px!important;padding:.5rem .3rem!important}.cell-item{font-size:.7rem;gap:.25rem;margin-bottom:.25rem;flex-wrap:wrap}.cell-label{font-size:.65rem}}.notice-page{min-height:100vh;display:flex;flex-direction:column;background-color:#fff}.notice-container{flex:1;padding:2rem;padding-top:120px;max-width:1400px;margin:0 auto;width:100%}.notice-content{display:flex;flex-direction:column;gap:.75rem}.page-header-section{display:flex;flex-direction:column;gap:2.5rem;margin-bottom:.5rem;margin-top:calc(1.5rem + 5px)}.title-section{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;padding-top:1.5rem!important}.page-title,h1.page-title{margin:0!important;display:flex;flex-direction:column;align-items:center;text-align:center}.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;margin-top:1.5rem!important}.search-container{position:relative;min-width:300px;max-width:500px}.search-input{width:100%;padding:.75rem 2.5rem .75rem 1rem;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;color:#1a1a1a;background:#fff;transition:all .2s ease}.search-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-input::placeholder{color:#9ca3af}.search-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:#6b7280;font-size:.875rem;pointer-events:none}.btn-create-notice{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-create-notice:hover{background:#2563eb}.btn-create-notice i{font-size:.75rem}.notice-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px #00000014;margin-top:0}.notice-table{width:100%;border-collapse:collapse;background:#fff}.notice-table thead{background:#f8fafc;border-bottom:2px solid #e5e7eb}.notice-table th,.notice-table thead th{padding:1.125rem 1rem!important;text-align:left;font-weight:600;font-size:.8125rem;color:#374151;text-transform:uppercase;letter-spacing:.08em;border:none!important;outline:none;min-height:42px!important;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.notice-table th:first-child,.notice-table thead th:first-child{width:115px;border:none!important;outline:none;text-align:center!important;padding:1.125rem 1rem!important}.notice-table th:nth-child(2),.notice-table thead th:nth-child(2){border:none!important;outline:none;text-align:center!important;padding:1.125rem 1rem!important;max-width:calc(100% - 240px)}.notice-table th:last-child,.notice-table thead th:last-child{width:115px;border:none!important;outline:none;text-align:center;padding:1.125rem 1rem!important}.notice-table tbody tr{border-bottom:1px solid #f3f4f6;transition:all .2s ease;cursor:pointer}.notice-table tbody tr:hover{background:#f8fafc;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.notice-table tbody tr:hover td,.notice-table tbody tr:hover .notice-date,.notice-table tbody tr:hover .notice-title,.notice-table tbody tr:hover .notice-author{transition:none}.notice-table tbody tr:last-child{border-bottom:none}.notice-table td{border:none;padding:1.5rem 1rem;font-size:.9375rem;color:#111827;font-weight:400;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;transition:none}.notice-table td:first-child{text-align:center;padding:1.5rem .5rem;width:115px}.notice-table td:last-child{text-align:center;padding:1.5rem .5rem;width:115px}.notice-date{color:#6b7280;font-weight:400;white-space:nowrap;border:none!important;outline:none;text-align:center;padding:1.5rem .5rem 1.5rem .75rem!important;font-size:.875rem;letter-spacing:.01em}.notice-title{font-weight:500;color:#111827;transition:none;border:none!important;outline:none;font-size:.9375rem;letter-spacing:-.01em}.notice-table tbody tr:hover .notice-title{color:#2563eb;font-weight:600}.notice-author{color:#6b7280;font-weight:400;white-space:nowrap;border:none!important;outline:none;text-align:center;padding:1.5rem .5rem!important;font-size:.875rem;letter-spacing:.01em}.empty-state{text-align:center;padding:4rem 2rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px}.empty-icon{font-size:3rem;color:#d1d5db;margin-bottom:1rem}.empty-state h2{font-size:1.125rem;font-weight:500;color:#1a1a1a;margin:0 0 .5rem}.empty-state p{font-size:.875rem;color:#6b7280;margin:0}.error-message{text-align:center;padding:2rem;background:#fef2f2;border:1px solid #fecaca;border-radius:8px}.error-message p{color:#dc2626;font-size:.875rem;margin:0}@media (max-width: 968px){.notice-container{padding:1.5rem;padding-top:90px}.page-header-section{margin-top:1rem}.title-section{padding-top:2rem!important}.title-icon{width:75px;height:75px;margin-bottom:1rem}.title-icon-img{width:100%;height:100%}.page-title-img{max-width:120px!important;width:auto;height:auto}.header-actions{flex-direction:column;align-items:stretch}.search-container{min-width:100%;max-width:100%}.btn-create-notice{width:100%;justify-content:center}.notice-table{font-size:.8125rem}.notice-table th,.notice-table thead th{padding:.875rem .5rem!important;min-height:38px!important}.notice-table th:first-child,.notice-table thead th:first-child,.notice-table th:nth-child(2),.notice-table thead th:nth-child(2){text-align:center!important}.notice-table td{padding:.75rem .5rem}.notice-table th:first-child,.notice-date{width:90px;font-size:.75rem}.notice-table th:last-child,.notice-author{width:100px;font-size:.75rem}}@media (max-width: 640px){.notice-container{padding:1rem;padding-top:80px}.page-header-section{margin-top:.75rem}.title-section{padding-top:1rem!important}.title-icon{width:75px;height:75px;margin-bottom:1rem}.title-icon-img{width:100%;height:100%}.page-title-img{max-width:120px!important;width:auto;height:auto}.notice-table{font-size:.75rem}.notice-table th,.notice-table thead th{padding:.75rem .375rem!important;min-height:32px!important}.notice-table th:first-child,.notice-table thead th:first-child,.notice-table th:nth-child(2),.notice-table thead th:nth-child(2){text-align:center!important}.notice-table td{padding:.625rem .375rem}.notice-table th:first-child,.notice-table thead th:first-child,.notice-table td:first-child{width:80px!important}.notice-table th:last-child,.notice-table thead th:last-child{width:80px!important}.notice-table td:last-child{width:80px!important}.notice-section{margin-left:0;margin-right:auto;width:100%;max-width:100%}.notice-date{font-size:.6875rem}.notice-title{font-size:.8125rem}.notice-author{font-size:.6875rem}}.pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:3rem;margin-bottom:4rem;padding:2rem 0}@media (max-width: 640px){.pagination{gap:.25rem;padding:1.5rem 0;margin-bottom:3rem}.pagination-btn{padding:.625rem 1rem;font-size:.8125rem}.pagination-number{min-width:36px;height:36px;font-size:.8125rem;padding:0 .375rem}}.notice-create-page{min-height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.notice-create-container{flex:1;padding:2rem;padding-top:120px;max-width:1200px;margin:0 auto;width:100%}.notice-create-content{display:flex;flex-direction:column;gap:2rem}.page-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.btn-back{padding:.7rem 1.5rem;background:linear-gradient(135deg,#6c757d,#868e96);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 2px 8px #6c757d40}.btn-back:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6c757d59;background:linear-gradient(135deg,#5a6268,#6c757d)}.page-title{font-size:2.5rem;font-weight:700;color:#2b2d42;margin:0;background:linear-gradient(135deg,#2196f3,#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.notice-form{background:#fff;border-radius:16px;padding:2.5rem;box-shadow:0 4px 20px #00000014}.form-group{margin-bottom:2rem}.form-label{display:block;font-weight:600;color:#2b2d42;margin-bottom:.75rem;font-size:1rem}.required{color:#ef5350}.form-input{width:100%;padding:.85rem 1rem;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:all .3s ease;background:#fff}.form-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 3px #2196f31a}.editor-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem;background:#f8f9fa;border:2px solid #e0e0e0;border-bottom:none;border-radius:10px 10px 0 0;margin-bottom:0}.toolbar-group{display:flex;gap:.25rem;align-items:center;padding-right:.75rem;border-right:1px solid #dee2e6}.toolbar-group:last-child{border-right:none;padding-right:0}.toolbar-select{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:6px;font-size:.9rem;background:#fff;cursor:pointer;transition:all .2s ease}.toolbar-select:hover{border-color:#2196f3}.toolbar-select:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f31a}.toolbar-btn{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:6px;background:#fff;color:#495057;cursor:pointer;transition:all .2s ease;font-size:.9rem;display:flex;align-items:center;justify-content:center;min-width:36px}.toolbar-btn:hover{background:#e9ecef;border-color:#2196f3;color:#2196f3}.toolbar-btn:active{background:#dee2e6}.toolbar-color-group{position:relative}.color-picker-wrapper{position:relative;display:inline-block}.color-picker-popup{position:absolute;top:100%;left:0;margin-top:.5rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:280px}.color-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin-bottom:1rem}.color-item{width:100%;aspect-ratio:1;border:2px solid #e0e0e0;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:0;background:none}.color-item:hover{transform:scale(1.1);border-color:#2196f3;box-shadow:0 2px 8px #2196f34d}.color-item:active{transform:scale(.95)}.color-picker-custom{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid #e0e0e0}.color-picker-custom .color-input{width:50px;height:40px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:0;background:none}.color-picker-custom .color-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-custom .color-input::-webkit-color-swatch{border:none;border-radius:4px}.color-picker-custom span{font-size:.9rem;color:#495057;font-weight:500}.editor-content{min-height:400px;padding:1.5rem;border:2px solid #e0e0e0;border-top:none;border-radius:0 0 10px 10px;background:#fff;font-size:1rem;line-height:1.6;color:#2b2d42;outline:none;overflow-y:auto}.editor-content[style*="text-align: left"] .image-wrapper,.editor-content[style*="text-align: left"] .table-wrapper,.editor-content[style*="text-align: center"] .image-wrapper,.editor-content[style*="text-align: center"] .table-wrapper,.editor-content[style*="text-align: right"] .image-wrapper,.editor-content[style*="text-align: right"] .table-wrapper,.editor-content[style*="text-align: justify"] .image-wrapper,.editor-content[style*="text-align: justify"] .table-wrapper{display:inline!important}.editor-content:empty:before,.editor-content p:only-child:empty:before{content:"내용을 입력하세요...";color:#999}.editor-content:focus{border-color:#2196f3;box-shadow:0 0 0 3px #2196f31a}.editor-content .image-wrapper{position:relative;display:inline;vertical-align:baseline;margin:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto}.editor-content .image-wrapper img{max-width:100%;height:auto;display:inline;vertical-align:baseline;margin:0;cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto}.editor-content .image-wrapper img[draggable=true]{cursor:grab}.editor-content .image-wrapper img[draggable=true]:active{cursor:grabbing}.editor-content .resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;background:#2196f3;border:2px solid white;border-radius:50%;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;z-index:10;opacity:0;transition:opacity .2s;box-shadow:0 2px 4px #0003}.editor-content .image-wrapper:hover .resize-handle{opacity:1}.editor-content .resize-handle:hover{background:#1976d2;transform:scale(1.1)}.editor-content .resize-handle:active{background:#1565c0;transform:scale(.95)}.editor-content .image-wrapper:hover .image-delete-btn,.editor-content .video-wrapper:hover .video-delete-btn,.editor-content .file-wrapper:hover .file-delete-btn{opacity:1}.editor-content .image-delete-btn:hover,.editor-content .video-delete-btn:hover,.editor-content .file-delete-btn:hover{background-color:#d32f2ff2!important;transform:scale(1.1)}.editor-content .image-delete-btn:active,.editor-content .video-delete-btn:active,.editor-content .file-delete-btn:active{background-color:#c62828f2!important;transform:scale(.95)}.editor-content .video-wrapper{position:relative;display:inline-block;width:100%;max-width:100%;margin:1rem 0}.editor-content .video-wrapper iframe{margin:0}.editor-content .file-wrapper{position:relative;display:inline-block;margin:.5rem}.file-upload-section{margin-top:2rem;padding-top:2rem;border-top:2px solid #e0e0e0}.file-upload-container{display:flex;flex-direction:column;gap:.75rem}.btn-file-upload{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 3px 10px #2196f340;width:fit-content}.btn-file-upload:hover{transform:translateY(-2px);box-shadow:0 5px 15px #2196f359;background:linear-gradient(135deg,#1976d2,#2196f3)}.btn-file-upload i{font-size:1.1rem}.file-upload-hint{font-size:.9rem;color:#666;margin:0}.uploaded-files-list{margin-top:1.5rem}.files-list-title{font-size:1.1rem;font-weight:600;color:#2b2d42;margin:0 0 1rem}.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.file-item{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:10px;transition:all .2s ease;position:relative}.file-item:hover{border-color:#2196f3;background:#f0f7ff;transform:translateY(-2px);box-shadow:0 4px 12px #2196f326}.file-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2196f3,#42a5f5);border-radius:8px;color:#fff;font-size:1.2rem;flex-shrink:0}.file-info{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}.file-name{font-weight:600;color:#2b2d42;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;display:block}.file-size{font-size:.85rem;color:#666}.file-delete-btn-list{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f44336e6;border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0;font-size:.9rem;padding:0}.file-delete-btn-list:hover{background:#d32f2ff2;transform:scale(1.1)}.file-delete-btn-list:active{background:#c62828f2;transform:scale(.95)}.file-download-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#2196f3e6;border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0;font-size:.9rem;padding:0;margin-left:.5rem}.file-download-btn:hover{background:#1976d2f2;transform:scale(1.1)}.file-download-btn:active{background:#1565c0f2;transform:scale(.95)}@media (max-width: 640px){.files-grid{grid-template-columns:1fr}.file-item{padding:.75rem}}.editor-content iframe{margin:1rem 0;border-radius:8px}.editor-content a[data-attachment-id]{display:inline-block;padding:.5rem 1rem;margin:.5rem;background:#2196f3;color:#fff;border-radius:6px;text-decoration:none;transition:all .2s ease}.editor-content a[data-attachment-id]:hover{background:#1976d2;transform:translateY(-2px);box-shadow:0 4px 8px #2196f34d}.editor-content .table-wrapper{position:relative;display:inline;vertical-align:baseline;margin:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto}.editor-content .table-wrapper:hover{outline:2px dashed #FF9800;outline-offset:2px}.editor-content .editor-table{width:auto;min-width:300px;border-collapse:collapse;margin:0;background:#fff;display:inline-table;vertical-align:baseline;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.editor-content .editor-table th,.editor-content .editor-table td{border:1px solid #ddd;padding:.75rem;text-align:left;min-width:80px;min-height:40px;position:relative}.editor-content .editor-table th{background-color:#f5f5f5;font-weight:600;color:#2b2d42}.editor-content .editor-table td{background-color:#fff}.editor-content .editor-table tr:hover td{background-color:#f9f9f9}.editor-content .table-resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;background:#ff9800;border:2px solid white;border-radius:50%;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;z-index:10;opacity:0;transition:opacity .2s;box-shadow:0 2px 4px #0003}.editor-content .table-wrapper:hover .table-resize-handle{opacity:1}.editor-content .table-resize-handle:hover{background:#f57c00;transform:scale(1.1)}.editor-content .table-resize-handle:active{background:#e65100;transform:scale(.95)}.editor-content .table-wrapper:hover .table-delete-btn{opacity:1}.editor-content .table-delete-btn:hover{background-color:#d32f2ff2!important;transform:scale(1.1)}.editor-content .table-delete-btn:active{background-color:#c62828f2!important;transform:scale(.95)}.editor-content .cell-width-handle:hover,.editor-content .cell-height-handle:hover{background-color:#1976d2!important}.editor-content .cell-corner-handle:hover{background-color:#1976d2!important;transform:scale(1.1)}.editor-content .cell-corner-handle:active{background-color:#1565c0!important;transform:scale(.95)}.editor-content .cell-color-btn:hover{background-color:#1976d2!important;transform:scale(1.1)}.editor-content .cell-color-btn:active{background-color:#1565c0!important;transform:scale(.95)}.editor-content .cell-color-popup{position:absolute;top:30px;right:0;background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:200px}.editor-content hr{margin:1.5rem 0;border:none;border-top:2px solid #e0e0e0;background:none}.form-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:2px solid #e0e0e0}.btn-cancel{padding:.75rem 1.5rem;background:#fff;color:#6c757d;border:2px solid #6c757d;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.btn-cancel:hover{background:#6c757d;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #6c757d4d}.btn-submit{padding:.75rem 1.5rem;background:linear-gradient(135deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem;box-shadow:0 3px 10px #2196f340}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #2196f359;background:linear-gradient(135deg,#1976d2,#2196f3)}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.loading{text-align:center;padding:3rem;font-size:1.2rem;color:#666}@media (max-width: 968px){.notice-create-container{padding:1rem;padding-top:100px}.notice-form{padding:1.5rem}.page-title{font-size:2rem}.editor-toolbar{flex-direction:column;align-items:stretch}.toolbar-group{border-right:none;border-bottom:1px solid #dee2e6;padding-right:0;padding-bottom:.5rem;margin-bottom:.5rem}.toolbar-group:last-child{border-bottom:none;margin-bottom:0}.editor-content{min-height:300px;font-size:.95rem}.form-actions{flex-direction:column}.btn-cancel,.btn-submit{width:100%}}@media (max-width: 640px){.notice-create-container{padding:.75rem;padding-top:90px}.notice-form{padding:1rem}.page-title{font-size:1.8rem}.editor-content{min-height:250px;padding:1rem;font-size:.9rem}}.notice-detail-page{min-height:100vh;display:flex;flex-direction:column;background-color:#fff}.notice-detail-container{flex:1;padding:2.5rem;padding-top:130px;max-width:900px;margin:0 auto;width:100%}.notice-detail-content{display:flex;flex-direction:column;gap:1.25rem}.page-header{display:flex;justify-content:flex-end;align-items:center;margin-bottom:.75rem;flex-wrap:wrap;gap:.75rem}.btn-back{padding:.5rem 1rem;background:#fff;color:#4b5563;border:1px solid #e5e7eb;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.5rem}.btn-back:hover{background:#f9fafb;border-color:#d1d5db;color:#1f2937}.admin-actions{display:flex;gap:.5rem}.btn-edit,.btn-delete{padding:.625rem 1.125rem;border:none;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.btn-edit{background:#fff;color:#d97706;border:1px solid #e5e7eb}.btn-edit:hover{background:#fffbeb;border-color:#fbbf24;color:#b45309}.btn-delete{background:#fff;color:#dc2626;border:1px solid #e5e7eb}.btn-delete:hover{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}.notice-article{background:#fff;border:1px solid #f3f4f6;border-radius:12px;padding:2.5rem;box-shadow:0 1px 2px #0000000d;box-sizing:border-box;width:100%;max-width:100%;overflow-x:hidden}.notice-attachments{margin-top:2.5rem;padding-top:2rem;border-top:1px solid #f3f4f6}.attachments-title{font-size:1rem;font-weight:600;color:#111827;margin:0 0 1.25rem;display:flex;align-items:center;gap:.625rem}.attachments-title i{color:#3b82f6;font-size:.9375rem}.attachments-list{display:flex;flex-direction:column;gap:.625rem}.attachment-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 1.125rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#374151;transition:all .2s ease;font-size:.875rem}.attachment-item:hover{background:#f3f4f6;border-color:#d1d5db;color:#1f2937}.attachment-item i:first-child{color:#3b82f6;font-size:1rem}.attachment-name{flex:1;font-weight:500;word-break:break-all}.attachment-external{color:#9ca3af;font-size:.75rem}.notice-footer{margin-top:2.5rem;padding-top:2rem;border-top:1px solid #f3f4f6;display:flex;justify-content:center}.notice-header{margin-bottom:35px;padding-bottom:1.5rem;border-bottom:1px solid #f3f4f6}.notice-title{font-size:1.875rem;font-weight:700;color:#111827;margin:0 0 1rem;line-height:1.3;letter-spacing:-.025em}.notice-meta{display:flex;gap:1.75rem;flex-wrap:wrap}.notice-author,.notice-date{display:flex;align-items:center;gap:.5rem;color:#6b7280;font-size:.875rem;font-weight:400}.notice-author i,.notice-date i{color:#9ca3af;font-size:.8125rem}.notice-content{font-size:1rem;line-height:1.7;color:#374151;word-wrap:break-word;overflow-x:auto;max-width:100%;box-sizing:border-box;margin:0}.notice-content>*{margin-top:0!important;margin-bottom:0!important}.notice-content p:empty,.notice-content font:empty,.notice-content span:empty,.notice-content div:empty{display:none!important;height:0!important;width:0!important;margin:0!important;padding:0!important;line-height:0!important;font-size:0!important}.notice-content p:has(>br:only-child),.notice-content p:has(>font:only-child>br:only-child),.notice-content font:has(>br:only-child),.notice-content span:has(>br:only-child),.notice-content div:has(>br:only-child){display:none!important;height:0!important;width:0!important;margin:0!important;padding:0!important;line-height:0!important;font-size:0!important}.notice-content font[size]:empty,.notice-content font[size]:has(>br:only-child){display:none!important;height:0!important;width:0!important;margin:0!important;padding:0!important;line-height:0!important;font-size:0!important}.notice-content p[style]:has(>font:only-child>br:only-child),.notice-content p[style]:has(>br:only-child){display:none!important;height:0!important;width:0!important;margin:0!important;padding:0!important;line-height:0!important;font-size:0!important}.notice-content .resize-handle,.notice-content .table-resize-handle,.notice-content .image-delete-btn,.notice-content .table-delete-btn,.notice-content .video-delete-btn,.notice-content .cell-width-handle,.notice-content .cell-height-handle,.notice-content .cell-corner-handle,.notice-content .cell-color-btn,.notice-content .cell-color-popup{display:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important;opacity:0!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important}.notice-content p{margin:0;max-width:100%;word-wrap:break-word;overflow-wrap:break-word}.notice-content .image-wrapper{position:relative;display:inline;vertical-align:middle;margin:0;line-height:0;max-width:100%;box-sizing:border-box}.notice-content .image-wrapper img{max-width:100%;width:auto;height:auto;display:inline-block;vertical-align:middle;margin:0;border-radius:6px;max-height:500px;object-fit:contain;box-sizing:border-box}.notice-content img:not(.image-wrapper img){max-width:100%;height:auto;margin:0;border-radius:6px;display:block}.notice-content .image-wrapper.align-left{margin-left:0!important;margin-right:auto!important;display:block!important}.notice-content .image-wrapper.align-center{margin-left:auto!important;margin-right:auto!important;display:block!important}.notice-content .image-wrapper.align-right{margin-left:auto!important;margin-right:0!important;display:block!important}@media (max-width: 968px){.notice-content .image-wrapper img{max-height:350px}}@media (max-width: 640px){.notice-content .image-wrapper img{max-height:250px}}.notice-content .video-wrapper{position:relative;display:block;width:100%;max-width:100%;margin:0;box-sizing:border-box;overflow:hidden}.notice-content .video-wrapper iframe{width:100%;max-width:100%;height:auto;min-height:360px;margin:0;border-radius:8px;border:none;aspect-ratio:16 / 9;box-sizing:border-box}@media (max-width: 968px){.notice-content .video-wrapper iframe{min-height:250px}}@media (max-width: 640px){.notice-content .video-wrapper iframe{min-height:180px}}.notice-content iframe:not(.video-wrapper iframe){width:640px;max-width:100%;height:360px;margin:0;border-radius:6px;border:none;aspect-ratio:16 / 9}.notice-content a[data-attachment-id]{display:inline-block;padding:.5rem 1rem;margin:.5rem;background:#3b82f6;color:#fff;border-radius:6px;text-decoration:none;transition:all .2s ease;font-weight:500;font-size:.875rem}.notice-content a[data-attachment-id]:hover{background:#2563eb}.notice-content ul,.notice-content ol{margin:0;padding-left:2rem}.notice-content li{margin:0}.notice-content h1,.notice-content h2,.notice-content h3,.notice-content h4,.notice-content h5,.notice-content h6{margin:0;color:#111827;font-weight:700;line-height:1.3}.notice-content h1{font-size:1.875rem}.notice-content h2{font-size:1.5rem}.notice-content h3{font-size:1.25rem}.notice-content h4{font-size:1.125rem}.notice-content h5{font-size:1rem}.notice-content h6{font-size:.875rem}.notice-content blockquote{border-left:3px solid #3b82f6;padding-left:1.25rem;margin:0;color:#6b7280;font-style:italic;background:#f9fafb;padding:1rem 1.25rem;border-radius:0 6px 6px 0}.notice-content code{background:#f3f4f6;padding:.2rem .4rem;border-radius:4px;font-family:Courier New,monospace;font-size:.875em}.notice-content pre{background:#f3f4f6;padding:1rem;border-radius:6px;overflow-x:auto;margin:0}.notice-content pre code{background:none;padding:0}.notice-content .table-wrapper{position:relative;display:inline-block;vertical-align:middle;margin:0;max-width:100%;overflow-x:auto;box-sizing:border-box}.notice-content .table-wrapper table,.notice-content .editor-table{width:auto;min-width:300px;max-width:100%;border-collapse:collapse;margin:0;background:#fff;display:inline-table;vertical-align:middle;box-sizing:border-box}@media (max-width: 968px){.notice-content .table-wrapper table,.notice-content .editor-table{min-width:280px;font-size:.8rem}.notice-content .table-wrapper table th,.notice-content .table-wrapper table td,.notice-content .editor-table th,.notice-content .editor-table td{padding:.5rem;font-size:.8rem}}@media (max-width: 640px){.notice-content .table-wrapper table,.notice-content .editor-table{min-width:250px;font-size:.7rem}.notice-content .table-wrapper table th,.notice-content .table-wrapper table td,.notice-content .editor-table th,.notice-content .editor-table td{padding:.4rem;font-size:.7rem}}.notice-content table:not(.editor-table):not(.table-wrapper table){width:100%;min-width:300px;max-width:100%;border-collapse:collapse;margin:0;background:#fff;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;box-sizing:border-box}.notice-content .table-wrapper table th,.notice-content .table-wrapper table td,.notice-content .editor-table th,.notice-content .editor-table td{border:1px solid #ddd;padding:.75rem;text-align:left;min-width:80px;min-height:40px}.notice-content .table-wrapper table th,.notice-content .editor-table th{background-color:#f5f5f5;font-weight:600;color:#2b2d42}.notice-content .table-wrapper table td,.notice-content .editor-table td{background-color:#fff}.notice-content .table-wrapper table tr:hover td,.notice-content .editor-table tr:hover td{background-color:#f9f9f9}.notice-content table:not(.editor-table):not(.table-wrapper table) th,.notice-content table:not(.editor-table):not(.table-wrapper table) td{border:1px solid #e5e7eb;padding:.75rem;text-align:left}.notice-content table:not(.editor-table):not(.table-wrapper table) th{background-color:#f9fafb;font-weight:500;color:#1a1a1a;font-size:.875rem}.notice-content table:not(.editor-table):not(.table-wrapper table) td{background-color:#fff;font-size:.875rem}.notice-content table:not(.editor-table):not(.table-wrapper table) tr:hover td{background-color:#f9fafb}@media (max-width: 968px){.notice-content table:not(.editor-table):not(.table-wrapper table){min-width:280px;font-size:.8rem}.notice-content table:not(.editor-table):not(.table-wrapper table) th,.notice-content table:not(.editor-table):not(.table-wrapper table) td{padding:.5rem;font-size:.8rem}}@media (max-width: 640px){.notice-content table:not(.editor-table):not(.table-wrapper table){min-width:250px;font-size:.7rem}.notice-content table:not(.editor-table):not(.table-wrapper table) th,.notice-content table:not(.editor-table):not(.table-wrapper table) td{padding:.4rem;font-size:.7rem}}.notice-content .table-wrapper.table-align-left{margin-left:0!important;margin-right:auto!important;display:inline-block!important}.notice-content .table-wrapper.table-align-center{margin-left:auto!important;margin-right:auto!important;display:inline-block!important}.notice-content .table-wrapper.table-align-right{margin-left:auto!important;margin-right:0!important;display:inline-block!important}.notice-content hr{margin:0;border:none;border-top:1px solid #e5e7eb;background:none;width:100%;max-width:100%;box-sizing:border-box}.error-message{text-align:center;padding:3rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px;display:flex;flex-direction:column;align-items:center}.error-message p{color:#dc2626;font-size:.875rem;margin-bottom:1.5rem}.loading{text-align:center;padding:3rem;font-size:.875rem;color:#6b7280}@media (max-width: 968px){.notice-detail-container{padding:1.5rem;padding-top:110px}.notice-article{padding:2rem}.notice-title{font-size:1.625rem}.page-header{flex-direction:column;align-items:stretch}.admin-actions{width:100%}.btn-edit,.btn-delete{flex:1}.notice-content{font-size:.875rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.notice-content iframe,.notice-content .video-wrapper iframe{width:100%;max-width:100%;height:auto;min-height:200px;aspect-ratio:16 / 9}.notice-content .video-wrapper{width:100%;max-width:100%;display:block}.notice-content .image-wrapper{max-width:100%;display:inline-block;width:auto}.notice-content .image-wrapper img{max-width:100%;width:auto;height:auto;margin:0;max-height:300px}.notice-content .table-wrapper{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.notice-content .editor-table{min-width:280px;width:auto;max-width:100%;display:table;font-size:.75rem}.notice-content .editor-table th,.notice-content .editor-table td{padding:.5rem;font-size:.75rem}.attachment-item{padding:.625rem .875rem;font-size:.8125rem}}@media (max-width: 640px){.notice-detail-container{padding:1rem;padding-top:100px}.notice-article{padding:1.5rem}.notice-title{font-size:1.375rem;margin-bottom:.75rem!important}.notice-header{margin-bottom:1.5rem;padding-bottom:1.25rem}.notice-meta{flex-direction:row;flex-wrap:nowrap;gap:.75rem;margin-top:0}.notice-author,.notice-date{font-size:.75rem;white-space:nowrap}.notice-content{font-size:.8125rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.notice-content iframe,.notice-content .video-wrapper iframe{width:100%;max-width:100%;height:auto;min-height:180px;aspect-ratio:16 / 9}.notice-content .video-wrapper{width:100%;max-width:100%;display:block}.notice-content .image-wrapper{max-width:100%;display:inline-block;width:auto}.notice-content .image-wrapper img{max-width:100%;width:auto;height:auto;margin:0;max-height:250px}.notice-content .table-wrapper{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.notice-content .editor-table{min-width:250px;width:auto;max-width:100%;display:table;font-size:.7rem}.notice-content .editor-table th,.notice-content .editor-table td{padding:.4rem;font-size:.7rem}.notice-content hr{width:100%;max-width:100%}.attachments-title{font-size:.9375rem}.attachment-item{padding:.625rem .75rem;font-size:.75rem}.attachment-item i:first-child{font-size:.875rem}}.attendance-page{min-height:100vh;display:flex;flex-direction:column;background-color:#fff}.title-section{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;padding-top:0!important;margin-top:.25rem;margin-bottom:2.5rem}.title-icon{display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;background:transparent;border-radius:0;margin-bottom:0;box-shadow:none;animation:pulse 2s ease-in-out infinite,float 3s ease-in-out infinite;position:relative}.title-icon:before,.title-icon:after{display:none!important;content:none!important}.title-icon-img{width:100%;height:100%;object-fit:contain;display:block}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.page-title,h2.page-title{margin:0!important;display:flex;flex-direction:column;align-items:center;text-align:center}.page-title-img{max-width:160px!important;width:auto;height:auto;display:block}.attendance-section{flex:1;padding:2rem;padding-top:65px;background:#fcfcfc;min-height:calc(100vh - 80px)}.attendance-container{max-width:1200px;margin:0 auto;padding:0 1rem;width:100%}.attendance-hero{text-align:center;margin-bottom:3rem;padding:2rem 0}.hero-icon{font-size:3rem;margin-bottom:1rem;display:inline-block;animation:iconAnimate 4s ease-in-out infinite;transform-origin:center}@keyframes iconAnimate{0%,to{transform:translateY(0) rotate(0) scale(1);opacity:.8}25%{transform:translateY(-6px) rotate(1deg) scale(1.02);opacity:.9}50%{transform:translateY(-10px) rotate(0) scale(1.05);opacity:1}75%{transform:translateY(-6px) rotate(-1deg) scale(1.02);opacity:.9}}.hero-title{font-size:2rem;font-weight:800;color:var(--text-dark);margin-bottom:.25rem;letter-spacing:-.5px}.hero-subtitle{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:-1px}.hero-description{font-size:1rem;color:var(--text-light);font-weight:400;margin-top:.5rem}.attendance-main{max-width:1200px;margin:0 auto;padding:0 1rem}.section-header{text-align:center;margin-bottom:2rem}.section-label{font-size:.75rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:2px;margin-bottom:.5rem}.section-title{font-size:2rem;font-weight:800;color:var(--text-dark);margin-bottom:0;letter-spacing:-.5px;display:flex;align-items:center;justify-content:center;gap:.75rem;background:none;background-color:transparent}.section-icon{font-size:2rem;display:inline-flex;align-items:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.list-section{margin-top:0}.attendance-list{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 768px){.attendance-list{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.attendance-list{grid-template-columns:repeat(3,1fr)}}.attendance-item{background-color:var(--white);border:2px solid var(--bg-light);border-radius:16px;padding:2rem;box-shadow:0 4px 12px #00000014;transition:all .3s ease;animation:fadeInUp .5s ease-out;position:relative}.attendance-item:hover{border-color:var(--primary-color);box-shadow:0 8px 20px #2196f326;transform:translateY(-3px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.attendance-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.attendance-date-info{display:flex;align-items:center;gap:1rem}.date-badge{padding:.5rem 1rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border-radius:12px;font-weight:700;font-size:.875rem;letter-spacing:.5px;box-shadow:0 2px 4px #2196f34d}.attendance-status{text-align:center}.status-badge{display:inline-block;padding:.375rem .75rem;border-radius:12px;font-size:.8125rem;font-weight:700;letter-spacing:.5px;box-shadow:0 2px 4px #0000001a}.status-badge.attended{background:#d1fae5;color:#065f46}.status-badge.late{background:#fef3c7;color:#92400e}.status-badge.absent{background:#fee2e2;color:#991b1b}.attendance-content-card{position:relative;min-height:60px}.attendance-info-row{display:flex;flex-direction:column;margin-bottom:1rem}.attendance-info-row:last-child{margin-bottom:0}.info-label{font-size:.75rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:1px;margin-bottom:.375rem}.info-value{font-weight:700;font-size:1.1rem;color:var(--text-dark);letter-spacing:-.3px;line-height:1.5}.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-light);font-size:1.1rem;background-color:var(--white);border-radius:16px;border:2px dashed var(--bg-light)}.empty-state p{line-height:1.8;margin:0}.error-message{text-align:center;padding:2rem;background:#fef2f2;border:2px solid #fecaca;border-radius:16px}.error-message p{color:#dc2626;font-size:.875rem;margin:0;font-weight:500}.loading{text-align:center;padding:3rem;font-size:.875rem;color:var(--text-light)}.comment-form-section{margin-top:0;margin-bottom:3rem;padding-top:3px}.comment-form-toggle{display:flex;justify-content:center;align-items:center;padding:0;margin-top:0}.toggle-form-button{display:flex;align-items:center;gap:.625rem;padding:.875rem 1.75rem;font-size:.9375rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #2196f34d}.toggle-form-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2196f366}.toggle-form-button:active{transform:translateY(0)}.toggle-icon{font-size:1.125rem;color:#fff}.form-actions{display:flex;gap:1rem;justify-content:center;align-items:center;margin:0;padding:0;border-top:none}.cancel-button{padding:14px 28px;font-size:1rem;font-weight:600;color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;white-space:nowrap;min-width:90px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1;height:51.95px}.cancel-button:hover{background:#e5e7eb;color:#374151}.comment-form-wrapper{background-color:var(--white);border-radius:16px;padding:2rem;box-shadow:0 4px 12px #00000014;margin-top:1.5rem}.comment-form{margin-top:0}.comment-form-table{width:100%;border-collapse:collapse;border-spacing:0}.comment-form-table th{width:150px;padding:1rem;padding-bottom:0;text-align:left;font-size:.875rem;font-weight:600;color:var(--text-dark);background-color:#f9fafb;border:1px solid var(--bg-light);vertical-align:top;padding-top:1.25rem}.comment-form-table td{padding:1rem;border:1px solid var(--bg-light);vertical-align:top}.comment-form-table tr:first-child th,.comment-form-table tr:first-child td{border-top-left-radius:8px;border-top-right-radius:8px}.comment-form-table tr:last-child th,.comment-form-table tr:last-child td{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.comment-form-table select,.comment-form-table textarea{width:100%;padding:.75rem;border:2px solid var(--bg-light);border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .3s ease;background-color:#fff}.comment-form-table select:focus,.comment-form-table textarea:focus{outline:none;border-color:var(--primary-color)}.comment-form-table select:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.comment-form-table textarea{resize:vertical;min-height:100px}.comment-form-table input[type=text].lecture-input{width:100%;padding:.75rem;border:2px solid var(--bg-light);border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .3s ease;background-color:#fff}.comment-form-table input[type=text].lecture-input:focus{outline:none;border-color:var(--primary-color)}.submit-cell{text-align:center;padding:0 1rem!important;border-top:none!important}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--text-dark)}.checkbox-label input[type=checkbox]{width:auto;cursor:pointer}.submit-button{padding:14px 32px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border:1px solid transparent;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:150px;box-sizing:border-box;line-height:1;height:51.95px;display:flex;align-items:center;justify-content:center}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #2196f34d}.submit-button:disabled{opacity:.6;cursor:not-allowed}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-size:.875rem;font-weight:600;color:var(--text-dark);margin-bottom:.5rem}.form-group textarea,.form-group input[type=text],.form-group select{width:100%;padding:.75rem;border:2px solid var(--bg-light);border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .3s ease;background-color:#fff}.form-group textarea:focus,.form-group input[type=text]:focus,.form-group select:focus{outline:none;border-color:var(--primary-color)}.form-group select:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.comments-section{margin-top:3rem}.comments-table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed}.comments-table thead{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:2px solid #dee2e6;box-shadow:0 2px 4px #0000000a}.comments-table th{padding:1.25rem 1rem;font-size:.8125rem;font-weight:700;color:#212529;border-bottom:none;white-space:nowrap;letter-spacing:.03em;text-transform:uppercase}.comments-table th:first-child{width:18%;text-align:left}.comments-table th:nth-child(2){width:15%;text-align:center}.comments-table th:nth-child(3){width:22%;text-align:center}.comments-table th:nth-child(4){width:15%;text-align:center}.comments-table td{padding:1.25rem 1rem;border-bottom:1px solid #f3f4f6;font-size:.875rem;color:#374151;vertical-align:middle;background-color:#fff;transition:background-color .2s ease;overflow:hidden;text-overflow:ellipsis}.comments-table td:first-child{text-align:left}.comments-table td:nth-child(2),.comments-table td:nth-child(3),.comments-table td:nth-child(4){text-align:center}.comments-table tbody tr:last-child td{border-bottom:none}.author-cell-td{padding:1.25rem 1rem!important}.userid-cell{padding:1.25rem .75rem!important}.comments-table tbody tr.comment-row{cursor:pointer;transition:all .2s ease}.comments-table tbody tr.comment-row:hover,.comments-table tbody tr.comment-row:hover td{background-color:#f9fafb}.comments-table tbody tr.comment-row.expanded,.comments-table tbody tr.comment-row.expanded td{background-color:#f3f4f6}.comments-table tbody tr.private-row{background-color:transparent}.comments-table tbody tr.private-row:hover,.comments-table tbody tr.private-row:hover td{background-color:#f9fafb}.comments-table tbody tr.private-row.expanded,.comments-table tbody tr.private-row.expanded td{background-color:#f3f4f6}.comments-table tbody tr.comment-detail-row{background-color:#fafafa}.comments-table tbody tr.comment-detail-row:hover,.comments-table tbody tr.comment-detail-row:hover td{background-color:#f5f5f5}.author-cell{display:flex;align-items:center;gap:.5rem}.comment-author{font-weight:600;color:#374151}.private-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border-radius:4px;font-size:.65rem;margin-left:.5rem;box-shadow:0 1px 3px #00000026;flex-shrink:0}.private-badge i{font-size:.65rem;line-height:1}.userid-cell{color:#6b7280;font-size:.8125rem;padding:1.25rem 1rem!important;text-align:center}.date-cell{white-space:nowrap;color:#6b7280;font-size:.8125rem;padding:1.25rem 1rem!important;text-align:center}.reply-status-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;font-size:.75rem;font-weight:600;border-radius:8px;white-space:nowrap}.reply-status-badge.reply-completed{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 6px #10b98140,0 1px 3px #10b98126;border:1px solid rgba(5,150,105,.3)}.reply-status-badge.reply-completed:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 3px 8px #10b9814d,0 2px 4px #10b98133}.reply-status-badge.reply-pending{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 2px 6px #f59e0b40,0 1px 3px #f59e0b26;border:1px solid rgba(217,119,6,.3)}.reply-status-badge.reply-pending:hover{background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 3px 8px #f59e0b4d,0 2px 4px #f59e0b33}.reply-status-badge i{font-size:.8125rem}.reply-status-cell{padding:1.25rem 1rem!important;text-align:center}.reply-status-row-mobile{display:none}.detail-cell{padding:1.75rem!important;background:linear-gradient(to bottom,#fff,#fafbfc)}.comment-detail-content{display:flex;flex-direction:column;gap:1.625rem}.detail-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:1.75rem;background:#fff;border-radius:10px;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000f}.detail-info-item{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem;border-bottom:1px solid #f3f4f6}.detail-info-item:last-child{border-bottom:none;padding-bottom:0}.detail-label{font-size:.75rem;font-weight:600;color:#6b7280;letter-spacing:.02em;margin-bottom:.375rem}.detail-value{font-size:.9375rem;font-weight:500;color:#1f2937;word-break:break-word;line-height:1.6}.detail-value.private-value{color:#6b7280;font-weight:500;position:relative;padding-left:1.25rem}.detail-value.private-value:before{content:"🔒";position:absolute;left:0;font-size:.875rem}.detail-content-box{padding:1.75rem;background:#f9fafb;border-radius:10px;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000f;min-height:120px;position:relative}.detail-content-box:before{content:"문의사항";position:absolute;top:1rem;left:1rem;font-size:.75rem;font-weight:600;color:#6366f1;letter-spacing:.05em;text-transform:uppercase}.detail-content-box p{margin:0;margin-top:1.5rem;line-height:1.8;color:#1f2937;font-size:.9375rem;white-space:pre-wrap;word-break:break-word}.detail-content-box.restricted-content{background:#f3f4f6;border-color:#d1d5db}.detail-content-box.restricted-content:before{color:#9ca3af}.restricted-message{margin:0;line-height:1.8;color:#6b7280;font-size:.9375rem;text-align:center;padding:1rem 0}.detail-actions{display:flex;gap:.75rem;justify-content:center;padding-top:0;margin-top:0}.detail-actions .btn-edit{padding:.75rem 1.75rem;font-size:.875rem;font-weight:600;border-radius:8px;min-width:90px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border:none;box-shadow:0 2px 4px #2196f333;transition:all .2s ease;display:flex;align-items:center;justify-content:center;text-align:center}.detail-actions .btn-edit:hover{transform:translateY(-1px);box-shadow:0 4px 8px #2196f34d}.detail-actions .btn-delete{padding:.75rem 1.75rem;font-size:.875rem;font-weight:600;border-radius:8px;min-width:90px;background:#ef4444;color:#fff;border:none;box-shadow:0 2px 4px #ef444433;transition:all .2s ease;display:flex;align-items:center;justify-content:center;text-align:center}.detail-actions .btn-delete:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 8px #ef44444d}.detail-actions .btn-reply{padding:.75rem 1.75rem;font-size:.875rem;font-weight:600;border-radius:8px;min-width:90px;background:#10b981;color:#fff;border:none;box-shadow:0 2px 4px #10b98133;transition:all .2s ease;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}.detail-actions .btn-reply:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.reply-section{margin-top:0;padding:1.75rem;background:#ecfdf5;border-radius:10px;border:1px solid #a7f3d0;border-left:4px solid #10b981;box-shadow:0 2px 8px #10b98114}.reply-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #d1fae5}.reply-label{font-size:.8125rem;font-weight:600;color:#059669;letter-spacing:.02em}.reply-date{font-size:.8125rem;color:#6b7280;font-weight:500}.reply-content{padding:.5rem 0}.reply-content p{margin:0;font-size:.9375rem;line-height:1.8;color:#1f2937;white-space:pre-wrap;word-break:break-word}.reply-actions{display:flex;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #bbf7d0}.btn-edit-small,.btn-delete-small{padding:.4rem .8rem;font-size:.75rem;font-weight:600;border-radius:6px;border:none;cursor:pointer;transition:all .2s ease}.btn-edit-small{background:#3b82f6;color:#fff}.btn-edit-small:hover{background:#2563eb;transform:translateY(-1px)}.btn-delete-small{background:#ef4444;color:#fff}.btn-delete-small:hover{background:#dc2626;transform:translateY(-1px)}.reply-form-section{margin-top:1.5rem;padding:1.25rem;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.reply-form{display:flex;flex-direction:column;gap:.75rem}.reply-form textarea{width:100%;padding:.75rem;border:2px solid #e5e7eb;border-radius:8px;font-size:.875rem;font-family:inherit;resize:vertical;transition:border-color .2s ease}.reply-form textarea:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.reply-form-actions{display:flex;gap:.5rem;justify-content:flex-end}.btn-submit-reply{padding:.6rem 1.25rem;font-size:.875rem;font-weight:600;border-radius:8px;background:#10b981;color:#fff;border:none;cursor:pointer;transition:all .2s ease}.btn-submit-reply:hover:not(:disabled){background:#059669;transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.btn-submit-reply:disabled{opacity:.6;cursor:not-allowed}.btn-cancel-reply{padding:.6rem 1.25rem;font-size:.875rem;font-weight:600;border-radius:8px;background:#e5e7eb;color:#374151;border:none;cursor:pointer;transition:all .2s ease}.btn-cancel-reply:hover{background:#d1d5db}.reply-edit-form{display:flex;flex-direction:column;gap:.75rem}.reply-edit-form textarea{width:100%;padding:.75rem;border:2px solid #e5e7eb;border-radius:8px;font-size:.875rem;font-family:inherit;resize:vertical;transition:border-color .2s ease}.reply-edit-form textarea:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.reply-edit-actions{display:flex;gap:.5rem;justify-content:flex-end}.btn-edit,.btn-delete,.btn-save,.btn-cancel{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-edit{background-color:var(--primary-color);color:#fff}.btn-edit:hover{background-color:#1976d2}.btn-delete{background-color:#ef4444;color:#fff}.btn-delete:hover{background-color:#dc2626}.btn-save{background-color:#10b981;color:#fff}.btn-save:hover{background-color:#059669}.btn-cancel{background-color:var(--bg-light);color:var(--text-dark)}.btn-cancel:hover{background-color:#e5e7eb}.comment-edit-form{width:100%}.comment-edit-form .form-group{margin-bottom:1rem}.comment-edit-form .form-group label{display:block;font-size:.75rem;font-weight:600;color:var(--text-dark);margin-bottom:.5rem}.comment-edit-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem}.comment-edit-form .form-row .form-group{margin-bottom:0}.comment-edit-form .form-row select{width:100%;padding:.5rem;border:2px solid var(--bg-light);border-radius:6px;font-size:.875rem;font-family:inherit;background-color:#fff;transition:border-color .3s ease}.comment-edit-form .form-row select:focus{outline:none;border-color:var(--primary-color)}.comment-edit-form .form-row select:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.comment-edit-form textarea{width:100%;padding:.75rem;border:2px solid var(--bg-light);border-radius:8px;font-size:1rem;font-family:inherit;margin-bottom:.75rem;resize:vertical;transition:border-color .3s ease}.comment-edit-form textarea:focus{outline:none;border-color:var(--primary-color)}.edit-form-footer{display:flex;justify-content:flex-end;align-items:center;margin-top:1rem}.edit-actions{display:flex;gap:.5rem}@media (max-width: 968px){.attendance-section{padding:1.5rem;padding-top:60px}.hero-title{font-size:1.75rem}.hero-subtitle{font-size:2rem}.section-title,.section-icon{font-size:1.75rem}.title-section{padding-top:2rem!important}.title-icon{width:75px;height:75px;margin-bottom:0}.title-icon-img{width:100%;height:100%}.page-title-img{max-width:120px!important;width:auto;height:auto}.comment-form-section{padding:1.5rem}.comment-item{padding:1.25rem}}@media (max-width: 640px){.attendance-section{padding:1rem .5rem;padding-top:55px}.attendance-container{padding:0 .5rem}.hero-icon{font-size:2.5rem}.hero-title{font-size:1.5rem}.hero-subtitle{font-size:1.75rem}.hero-description{font-size:.9rem}.section-title,.section-icon{font-size:1.5rem}.title-section{padding-top:1.25rem!important}.title-icon{width:75px;height:75px;margin-bottom:0}.title-icon-img{width:100%;height:100%}.page-title-img{max-width:120px!important;width:auto;height:auto}.comment-form-section{padding:6px 1.25rem 1.25rem;margin-top:.5rem;margin-bottom:0}.pagination{margin-bottom:0;padding:1rem 0}}@media (max-width: 640px){.modal-overlay{padding-top:100px;align-items:flex-start;padding-bottom:1rem}.modal-container{max-width:100%;margin:0;border-radius:16px;max-height:calc(100vh - 120px)}.modal-header{padding:1.25rem 1.5rem}.modal-user-name-display{font-size:1rem;padding:.75rem}.modal-title{font-size:1.25rem}.modal-body{padding:10px 1.5rem 1.5rem}.toggle-form-button{padding:.875rem 1.5rem;font-size:.9375rem}.toggle-icon{font-size:1.125rem}.modal-body .form-actions{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:center;align-items:center}.modal-body .submit-button{padding:12px 16px;font-size:.875rem;min-width:auto;width:auto;flex:none;height:auto;white-space:nowrap}.modal-body .cancel-button{padding:12px 16px;font-size:.875rem;min-width:auto;width:auto;flex:none;height:auto;margin-top:0;white-space:nowrap}.comment-form-table,.comment-form-table thead,.comment-form-table tbody,.comment-form-table tr,.comment-form-table th,.comment-form-table td{display:block}.comment-form-table th{width:100%;padding:.75rem .5rem 0;background-color:transparent;border:none;border-bottom:1px solid var(--bg-light);font-size:.8125rem}.comment-form-table td{width:100%;padding:.5rem;border:none;border-bottom:1px solid var(--bg-light)}.comment-form-table tr:first-child th,.comment-form-table tr:first-child td{border-top-left-radius:0;border-top-right-radius:0}.comment-form-table tr:last-child th,.comment-form-table tr:last-child td{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.submit-cell{padding:1rem .5rem!important;border:none!important}.form-row{grid-template-columns:1fr}.comments-table{min-width:100%;font-size:.75rem;table-layout:fixed}.comments-table th{padding:.875rem .3125rem;font-size:.6875rem;font-weight:700;color:#212529;letter-spacing:.03em;text-transform:uppercase}.comments-table thead{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:2px solid #dee2e6;box-shadow:0 2px 4px #0000000a}.comments-table th:first-child{width:28%;text-align:left}.comments-table th:nth-child(2){width:25%;text-align:center}.comments-table th:nth-child(3){width:25%;text-align:center}.comments-table th:nth-child(4){width:22%;text-align:center}.comments-table td{padding:.875rem .3125rem;font-size:.75rem}.comments-table td:first-child{text-align:left}.comments-table td:nth-child(2),.comments-table td:nth-child(3),.comments-table td:nth-child(4){text-align:center}.author-cell-td{padding:.875rem .3125rem!important}.userid-cell,.date-cell{padding:.875rem .3125rem!important;font-size:.75rem;text-align:center}.reply-status-cell{padding:.875rem .3125rem!important;text-align:center}.reply-status-badge{padding:.25rem .5rem;font-size:.65rem;gap:0}.reply-status-badge i{display:none}.reply-status-cell,.comments-table th.reply-status-header{display:table-cell}.comments-table th:nth-child(2){padding:.875rem .375rem}.userid-cell{min-width:auto;flex:1}.comment-author{font-size:.8125rem}.author-cell{gap:.2rem}.private-badge{margin-left:.2rem}.detail-cell{padding:1rem .75rem!important}.detail-cell{padding:1.25rem!important}.comment-detail-content{gap:1.25rem}.detail-info-grid{grid-template-columns:repeat(2,1fr);gap:1rem;padding:1.25rem}.detail-info-item{padding-bottom:.5rem;gap:.25rem}.detail-label{font-size:.625rem;margin-bottom:.125rem}.detail-value{font-size:.875rem}.detail-info-grid{gap:.875rem;padding:1rem}.detail-content-box{padding:1.25rem;min-height:60px;background:#f9fafb;border:1px solid #e5e7eb}.detail-content-box:before{font-size:.6875rem;top:.875rem;left:.875rem}.detail-content-box p{font-size:.875rem;line-height:1.7;color:#1f2937;margin-top:1.25rem}.detail-content-box.restricted-content:before{color:#9ca3af}.reply-section{background:#ecfdf5;border:1px solid #a7f3d0;border-left:4px solid #10b981;padding:1.25rem;border-radius:8px}.reply-header{margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid #a7f3d0}.reply-label,.reply-date{font-size:.75rem}.reply-content{padding:.25rem 0}.reply-content p{font-size:.875rem;line-height:1.7}.reply-actions{margin-top:.5rem;padding-top:.5rem;border-top:1px solid #a7f3d0}.detail-actions{flex-direction:row;gap:.5rem;justify-content:center;padding-top:0;margin-top:0}.detail-actions .btn-edit,.detail-actions .btn-delete{flex:1;padding:.625rem 1rem;min-width:auto;font-size:.8125rem}.detail-actions{padding-top:0;margin-top:0;gap:.375rem}.detail-actions .btn-edit,.detail-actions .btn-delete{padding:3.4px .75rem;font-size:.8125rem;height:40px;box-sizing:border-box}.edit-form-footer{flex-direction:column;gap:.75rem;align-items:flex-start}.restricted-message{font-size:.75rem;line-height:1.5;padding:.75rem .5rem}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-container{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease;position:relative}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:10;border-radius:16px 16px 0 0}.modal-user-name-display{width:100%;padding:.75rem;border:2px solid var(--bg-light);border-radius:8px;font-size:1rem;font-family:inherit;background-color:#f3f4f6;color:var(--text-dark);box-sizing:border-box;cursor:default;-webkit-user-select:none;user-select:none}.modal-title{font-size:1.5rem;font-weight:700;color:#1a1a1a;margin:0;display:flex;align-items:center;gap:.75rem}.modal-title i{color:#3b82f6;font-size:1.375rem}.modal-close-button{background:none;border:none;font-size:1.5rem;color:#6b7280;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease;width:36px;height:36px}.modal-close-button:hover{background:#f3f4f6;color:#374151}.modal-body{padding:10px 2rem 2rem}.modal-body .cancel-button{margin-top:16px}.modal-body .form-actions{margin-bottom:10px}@media (max-width: 640px){.modal-overlay{padding-top:100px;align-items:flex-start;padding-bottom:1rem}.modal-container{max-width:100%;margin:0;border-radius:16px;max-height:calc(100vh - 120px)}.modal-header{padding:1.25rem 1.5rem}.modal-user-name-display{font-size:1rem;padding:.75rem}.modal-title{font-size:1.25rem}.modal-body{padding:10px 1.5rem 1.5rem}.modal-body .form-actions{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:center;align-items:center}.modal-body .submit-button{padding:12px 16px;font-size:.875rem;min-width:auto;width:auto;flex:none;height:auto;white-space:nowrap}.modal-body .cancel-button{padding:12px 16px;font-size:.875rem;min-width:auto;width:auto;flex:none;height:auto;margin-top:0;white-space:nowrap}}.pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:10px;margin-bottom:0;padding:2rem 0}.pagination-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:#fff;color:#4b5563;border:1px solid #e5e7eb;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.pagination-btn:hover:not(:disabled){background:#f9fafb;border-color:#3b82f6;color:#3b82f6;box-shadow:0 2px 4px #3b82f61a;transform:translateY(-1px)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed;background:#f9fafb}.pagination-btn i{font-size:.75rem}.pagination-numbers{display:flex;gap:.375rem;align-items:center}.pagination-number{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0 .5rem;background:#fff;color:#4b5563;border:1px solid #e5e7eb;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.pagination-number:hover{background:#f9fafb;border-color:#3b82f6;color:#3b82f6;box-shadow:0 2px 4px #3b82f61a;transform:translateY(-1px)}.pagination-number.active{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#3b82f6;box-shadow:0 2px 6px #3b82f64d;font-weight:600}.pagination-number.active:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:#2563eb;box-shadow:0 4px 8px #3b82f666;transform:translateY(-1px)}@media (max-width: 640px){.pagination{gap:.25rem;padding:1.5rem 0;margin-bottom:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.pagination::-webkit-scrollbar{display:none}.pagination-btn{padding:.5rem .75rem;font-size:.75rem;flex-shrink:0;min-width:auto}.pagination-btn i{font-size:.7rem}.pagination-numbers{flex-wrap:nowrap;gap:.25rem}.pagination-number{min-width:32px;height:32px;font-size:.75rem;padding:0 .25rem;flex-shrink:0}}.App{text-align:center}.App-header{background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem;color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin)}.App-header h1{margin:0 0 1rem;font-size:3rem;font-weight:700}.App-header p{margin:1rem 0;font-size:1.2rem;opacity:.9}.card{padding:2rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px #1f26875e;border:1px solid rgba(255,255,255,.18);margin-top:2rem}.card button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-bottom:1rem}.card button:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.card button:active{transform:translateY(0)}.card code{background:#0003;padding:.25rem .5rem;border-radius:4px;font-family:Courier New,monospace;font-size:.9rem}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #2196F3;--secondary-color: #42A5F5;--accent-color: #03A9F4;--text-dark: #2b2d42;--text-light: #6c757d;--bg-light: #f8f9fa;--bg-gradient: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);--white: #ffffff;--shadow: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .15)}html{scroll-behavior:smooth}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-dark);overflow-x:hidden;margin:0;padding:0}.container{max-width:1200px;margin:0 auto;padding:0 20px}#root{width:100%;min-height:100vh}