:root{--header-bg: #ffffff;--header-text: #333333;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--text-primary: #fdf9f9;--text-secondary: #f7f3f3;--border-color: #e0e0e0;--card-bg: #ffffff;--button-bg: #8a4baf;--button-hover: #732f94;--accent-color: #8a4baf;--shadow: rgba(0, 0, 0, .1)}.dark{--header-bg: #191414;--header-text: #ffffff;--bg-primary: #2c2c2c;--bg-secondary: #241f1f;--text-primary: #ffffff;--text-secondary: #b3b3b3;--border-color: #2a2a2a;--card-bg: #f5f3f3;--button-bg: #1DB954;--button-hover: #1ed760;--accent-color: #1DB954;--shadow: rgba(0, 0, 0, .3)}body{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}.common-btn{background-color:var(--button-bg);color:#fff;padding:10px 20px;border:none;border-radius:5px;font-size:18px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;margin-top:10px}.common-btn:hover{background-color:var(--button-hover);transform:translateY(-2px)}@media (max-width: 768px){.common-btn{font-size:16px}}.card{background-color:#242323;color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;padding:1rem;box-shadow:0 2px 4px var(--shadow)}.card:hover{box-shadow:0 4px 8px var(--shadow);transform:translateY(-2px)}input,textarea,select{background-color:#ececec;color:#131212;border:1px solid var(--border-color);border-radius:4px;padding:.5rem}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #8a4baf33}a{color:var(--text-primary);text-decoration:none}a:hover{color:var(--accent-color)}h1,h2,h3,h4,h5,h6,p,.form-label{color:var(--text-primary)}.dark::-webkit-scrollbar{width:8px}.dark::-webkit-scrollbar-track{background:var(--bg-secondary)}.dark::-webkit-scrollbar-thumb{background:#028a32;border-radius:4px}.dark::-webkit-scrollbar-thumb:hover{background:#1ed760}.loading-spinner{border-color:var(--border-color);border-top-color:var(--accent-color)}.modal{background-color:var(--card-bg);color:var(--text-primary);border:1px solid var(--border-color)}.form-group{margin-bottom:1rem}table{background-color:var(--card-bg);color:var(--text-primary);border-collapse:collapse;width:100%}th,td{border:2px solid var(--border-color);padding:.75rem;text-align:left;color:var(--text-primary)}th{background-color:var(--bg-secondary);font-weight:600}.alert{background-color:var(--card-bg);color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;padding:1rem;margin:1rem 0}.alert-success{border-color:var(--accent-color);background-color:#8a4baf1a}footer{background-color:var(--header-bg);color:var(--text-primary);border-top:1px solid var(--border-color)}.page,[class*=page],main,.container,.content,#root>*,[data-page],.app-content,.route-container{animation:pageEnter .5s ease-out forwards}@keyframes pageEnter{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.home{background-image:url(https://t3.ftcdn.net/jpg/04/12/12/98/360_F_412129819_HaLS1MLvkJBPaBPMagPUOYm1SfAcaT7h.jpg);background-size:cover;padding:100px 0;text-align:center}.home .home-content{max-width:800px;margin:0 auto}.home .home-content h1{font-size:36px;margin-bottom:20px}@media (max-width: 768px){.home .home-content h1{font-size:28px}}.home .home-content p{font-size:18px;color:#666;margin-bottom:40px}@media (max-width: 768px){.home .home-content p{font-size:16px}}.home .home-content button{padding:12px 24px}.testimonials{padding:80px 0;text-align:center}.testimonials h2{font-size:32px;color:#8a4baf;margin-bottom:30px}.testimonials .testmonials-cards{display:flex;justify-content:center;gap:30px;overflow-x:auto}.testimonials .testmonials-cards .testimonial-card{background-color:#fff;box-shadow:0 2px 4px #0003;padding:20px;border-radius:10px;width:300px;text-align:left;display:flex;flex-direction:column;align-items:center}@media (max-width: 768px){.testimonials .testmonials-cards .testimonial-card{width:80%;text-align:center}}.testimonials .testmonials-cards .testimonial-card .student-image img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:10px}.testimonials .testmonials-cards .testimonial-card .message{font-size:16px;color:#333;margin-bottom:10px}.testimonials .testmonials-cards .testimonial-card .info{text-align:center}.testimonials .testmonials-cards .testimonial-card .name{font-size:18px;font-weight:700;color:#8a4baf;margin-bottom:5px}.testimonials .testmonials-cards .testimonial-card .position{font-size:14px;color:#666}header{display:flex;justify-content:space-between;align-items:center;padding:20px;background-color:var(--header-bg);box-shadow:0 2px 4px #0000001a;position:relative;transition:background-color .3s ease}header .logo{font-size:26px;font-weight:600;color:var(--accent-color)}@media (max-width: 768px){header .logo{font-size:18px}}header .link{display:flex;gap:2rem}@media (max-width: 768px){header .link{gap:.5rem}}header .link a{text-decoration:none;color:var(--text-primary);transition:.3s}header .link a:hover{color:var(--accent-color)}header .header-actions{display:flex;align-items:center;gap:1rem}@media (max-width: 768px){header .header-actions{gap:.5rem}}:root{--header-bg: #ffffff;--header-text: #333333;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--text-primary: #333;--text-secondary: #666666;--border-color: #e0e0e0;--card-bg: #ffffff;--button-bg: #1DB954;--button-hover: #1ed760;--accent-color: #7715af}.dark{--header-bg: #353333;--header-text: #ffffff;--bg-primary: #121212;--bg-secondary: #191414;--text-primary: #ffffff;--text-secondary: #b3b3b3;--border-color: #2a2a2a;--card-bg: #181818;--button-bg: #1DB954;--button-hover: #1ed760;--accent-color: #1DB954}body{background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}.dark-mode-toggle{position:relative;width:60px;height:30px;border:none;border-radius:15px;background-color:var(--toggle-bg);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003}.dark-mode-toggle:hover{transform:scale(1.05);box-shadow:0 0 10px #1db9544d}.toggle-slider{font-size:18px;transition:all .3s ease}:root{--toggle-bg: #e0e0e0}.dark .dark-mode-toggle{--toggle-bg: #1DB954}.dark .dark-mode-toggle:hover{box-shadow:0 0 15px #1db95480}.auth-page{display:flex;align-items:center;justify-content:center;height:80vh;background-color:var(--bg-primary)}.auth-page .auth-form{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 4px #00000080;text-align:center;width:300px}.auth-page .auth-form h2{font-size:24px;color:#8a4baf;margin-bottom:15px}.auth-page .auth-form form{text-align:left}.auth-page .auth-form form label{display:block;margin-bottom:5px;font-size:14px;color:#333}.auth-page .auth-form form input{width:92%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:5px}.auth-page .auth-form p{color:#333}.auth-page .auth-form p a{color:#8a4baf}.auth-page .auth-form p a:hover{color:#550583}footer{background-color:#8a5baf;color:#fdfdfd;padding:25px 0 20px}footer .footer-content{max-width:1200px;margin:0 auto;padding:0 10px}footer .footer-content .footer-top{display:flex;justify-content:space-between;gap:60px;margin-bottom:5px}@media (max-width: 768px){footer .footer-content .footer-top{flex-direction:column;gap:40px}}footer .footer-content .footer-top .footer-brand{flex:1;max-width:300px}footer .footer-content .footer-top .footer-brand .logo{display:flex;align-items:center;gap:8px;margin-bottom:20px}footer .footer-content .footer-top .footer-brand .logo .logo-icon{color:#0c0c0c}footer .footer-content .footer-top .footer-brand .logo .logo-text{font-size:24px;font-weight:700;color:#131313}footer .footer-content .footer-top .footer-brand .brand-description{font-size:15px;line-height:1.6;color:#fcfafa;margin:0}footer .footer-content .footer-top .footer-links{display:flex;gap:80px;flex:2;padding-left:50px}@media (max-width: 768px){footer .footer-content .footer-top .footer-links{flex-direction:column;gap:30px}}footer .footer-content .footer-top .footer-links .link-column h4{font-size:16px;font-weight:600;color:#131313;margin-bottom:20px;margin-top:0}footer .footer-content .footer-top .footer-links .link-column ul{list-style:none;padding:0;margin:0}footer .footer-content .footer-top .footer-links .link-column ul li{margin-bottom:12px}footer .footer-content .footer-top .footer-links .link-column ul li a{color:#e2dfdf;text-decoration:none;font-size:14px;transition:color .3s ease}footer .footer-content .footer-top .footer-links .link-column ul li a:hover{color:#3f3e3f}footer .footer-content .footer-bottom .footer-divider{border:none;height:1px;background-color:#e2dfdf;margin:0 0 20px}footer .footer-content .footer-bottom .copyright{text-align:center;font-size:14px;color:#f8f6f6;margin:0}footer .footer-content .footer-bottom .copyright a{color:#f8f6f6}.about{padding:30px 0;text-align:center;min-height:55vh}.about-content{max-width:800px;margin:0 auto}.about-content h2{font-size:32px;color:#8a4baf;margin-bottom:20px}.about-content p{font-size:16px;color:var(--text-primary);line-height:1.6;margin-bottom:20px}.about-list{list-style:none;padding:0;margin:20px auto;max-width:500px}.about-list li{display:flex;align-items:center;font-size:1.05rem;margin:10px 0;gap:10px;border-left:3px solid #8a4baf;background-color:#f7f0ff;color:#1d1d1d;border-radius:5px;padding:10px;justify-content:start;text-align:left}.profile{background-color:#e0dfdf;padding:20px;border-radius:10px;box-shadow:0 2px 4px #00000080;width:30%;margin:120px auto 185px}@media (max-width: 768px){.profile{padding:10px;width:80%;margin:90px auto}}.profile h2{color:#000}.profile .profile-info{text-align:left;margin-top:15px}.profile .profile-info p{margin-bottom:10px;color:#333}.profile .profile-info p strong{color:#8a4baf}.loading-page{display:flex;align-items:center;justify-content:center;height:80vh}.loader{border:5px solid #f3f3f3;border-top:5px solid #8a4baf;border-radius:50%;width:50px;height:50px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.courses{padding:40px 0;text-align:center;min-height:60vh}.courses h2{font-size:32px;color:#8a4baf;margin-bottom:30px}.search-container{max-width:600px;margin:0 auto 30px;padding:0 20px}.search-wrapper{position:relative;background:#fff!important;border-radius:25px;box-shadow:0 4px 15px #0000001a;border:2px solid #e2e8f0;display:flex;align-items:center}.search-wrapper:focus-within{border-color:#8a4baf}.search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8a4baf}.search-input{width:100%;padding:14px 50px 14px 45px;border:none;outline:none;border-radius:25px;font-size:16px}.search-input::placeholder{color:#94a3b8}.clear-search{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:#f1f5f9;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;color:#64748b}.clear-search:hover{background:#e2e8f0}.search-results-info{margin-top:10px;font-size:14px;color:#64748b}.course-container{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}.no-results,.no-courses{width:100%;text-align:center;padding:40px 20px;background:#fff;border-radius:15px;box-shadow:0 4px 15px #00000014;margin:20px auto;max-width:400px;color:#333}.no-results h3,.no-courses h3{color:#333;margin-bottom:10px}.no-results p,.no-courses p{color:#666}.no-results-icon{margin-bottom:15px;color:#94a3b8}.clear-search-btn{background:#8a4baf;color:#fff;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;margin-top:15px}.clear-search-btn:hover{background:#764ba2}@media (max-width: 768px){.search-container{max-width:90%;padding:0 10px}.search-input{padding:12px 45px 12px 40px;font-size:14px}.course-container{gap:20px}.courses h2{margin-bottom:5px}}.course-card{background-color:#fff;box-shadow:0 2px 4px #0000001a;padding:20px;border-radius:10px;text-align:center;width:250px;transition:.5s}.course-card:hover{box-shadow:0 2px 4px #0006}.course-card .course-image{width:100%;height:150px;object-fit:cover;border-radius:10px;margin-bottom:10px}.course-card h3{font-size:18px;color:#333;margin-bottom:10px}.course-card p{font-size:14px;color:#666;margin-bottom:5px}.course-description{padding:80px 0;text-align:center;min-height:55vh}.course-description .course-header{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:40px}.course-description .course-header .course-image{width:200px;height:150px;object-fit:cover;border-radius:10px}.course-description .course-header .course-info{text-align:left}.course-description .course-header .course-info h2{font-size:24px;color:var(--text-primary);padding-left:20px}.course-description .course-header .course-info p{font-size:14px;color:var(--text-primary);margin:5px 0}.course-description .course-header p{font-size:16px;color:#333;text-align:center;max-width:800px;margin:0 auto}.course-description p{padding:0 20px}.payment-success-page{display:flex;align-items:center;justify-content:center;height:75vh;background-color:#f5f5f5}.payment-success-page .success-message{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 4px #0000001a;text-align:center;width:300px}.payment-success-page h2{font-size:24px;color:#8a4baf;margin-bottom:15px}.payment-success-page p{font-size:16px;color:#8a4baf;margin-bottom:20px}.payment-success-page a{text-decoration:none}.student-dashboard{padding:80px 0;text-align:center;min-height:55vh}.student-dashboard .dashboard-content{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;margin-top:40px}.course-study-page{padding:2rem;background:var(--card-bg);display:flex;flex-direction:column;align-items:center;max-width:600px;margin:2rem auto;box-shadow:0 8px 32px var(--shadow);border-radius:16px;border:1px solid var(--border-color);gap:1.5rem;position:relative;overflow:hidden;animation:pageEnter .6s ease-out}.course-study-page:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#8a4baf,var(--button-hover));border-radius:16px 16px 0 0}.course-study-page img{border-radius:12px;width:100%;max-width:350px;height:auto;box-shadow:0 12px 24px #00000026;transition:transform .3s ease,box-shadow .3s ease;object-fit:cover}.course-study-page img:hover{transform:scale(1.02);box-shadow:0 16px 32px #0003}.course-study-page h1{font-size:2.2rem;font-weight:700;color:var(--text-primary);margin:0;text-align:center}.course-study-page h4{font-size:1.1rem;font-weight:530;color:var(--text-secondary);margin:0;text-align:center;max-width:500px}.course-study-page h5{font-size:.95rem;color:var(--text-secondary);margin:0;text-align:center}.course-study-page h5:first-of-type:before{content:"👨‍🏫 "}.course-study-page h5:last-of-type:before{content:"⏱️ "}.course-study-page a{display:inline-block;text-decoration:none;background:var(--button-bg);color:#fff;padding:.875rem 2rem;border-radius:25px;font-size:1.1rem;font-weight:600;transition:all .3s ease;margin-top:1rem;box-shadow:0 4px 12px #8a4baf4d}.course-study-page a:hover{background:var(--button-hover);transform:translateY(-2px);box-shadow:0 6px 16px #8a4baf66}.course-study-page a h2{margin:0;font-size:1.1rem;font-weight:600;color:inherit}@media (max-width: 768px){.course-study-page{margin:1rem;padding:1.5rem;max-width:calc(100% - 2rem)}.course-study-page h1{font-size:1.8rem}}.lecture-page{display:flex;justify-content:space-between;min-height:80vh}@media (max-width: 768px){.lecture-page{flex-direction:column;justify-content:center;align-items:center}}.lecture-page .left{width:70%;padding:10px;align-items:center}@media (max-width: 768px){.lecture-page .left{width:90%}}.lecture-page .right{width:30%}.lecture-page .right .lecture-form{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0,2px,4px,#0000001a;text-align:center;width:auto}.lecture-page .right .lecture-form h2{font-size:24px;color:#8a4baf;margin-bottom:15px}.lecture-page .right .lecture-form form{text-align:left}.lecture-page .right .lecture-form form label{display:block;margin-bottom:5px;font-size:14px;color:#333}.lecture-page .right .lecture-form form input{width:92%;padding:10px;margin-bottom:15px;border:1px solid black;border-radius:5px}@media (max-width: 768px){.lecture-page .right{width:80%;margin-bottom:10px}}.lecture-page .right .lecture-number{background-color:#fff;padding:10px;color:#000;border:1px solid black;margin-top:10px;border-radius:5px;text-align:center;cursor:pointer}.lecture-page .right .lecture-number:hover,.lecture-page .right .active{background-color:#8a4baf;color:#fff}.progress{width:20%;background-color:#333;padding:6px;border-radius:5px;margin:10px auto 3px;text-align:center;color:#fff}.sidebar{width:200px;height:100%;left:0;color:#fff;border-right:1px solid gray}@media (max-width: 768px){.sidebar{width:30px}}.sidebar ul{list-style:none;padding:0}.sidebar ul li{margin-bottom:10px;cursor:pointer;padding:12px}@media (max-width: 768px){.sidebar ul li{padding:7px}}.sidebar ul li:hover{background-color:#c2bfbf}.sidebar ul li a{display:flex;text-decoration:none;counter-reset:blueviolet}.sidebar ul li a span{margin-left:15px}@media (max-width: 768px){.sidebar ul li a span{display:none}}.dashboard-admin{display:flex;min-height:80vh;margin-top:20px}.main-content{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-left:230px}.main-content .box{width:120px;margin-left:20px;background-color:#8a4baf;padding:5px;border-radius:5px;text-align:center;margin-top:5px;color:#fff}.main-content .box p{color:#fff}.main-content .box:hover{background-color:#532470}.admin-courses{display:flex;justify-content:center;gap:1rem;margin-bottom:10px}@media (max-width: 768px){.admin-courses{flex-wrap:wrap}}.admin-courses .left .dashboard-content{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;margin-top:40px;margin-left:5px}.admin-courses .left h1{text-align:center}.admin-courses .right .course-form{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 4px #0000001a;text-align:center;width:300px}.admin-courses .right .course-form h2{font-size:24px;color:#8a4baf;margin-bottom:15px}.admin-courses .right .course-form form{text-align:left}.admin-courses .right .course-form form label{display:block;margin-bottom:5px;font-size:15px;color:#333}.admin-courses .right .course-form form input,.admin-courses .right .course-form form select{width:92%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:5px}.users{width:700px;justify-content:center;text-align:center;overflow-x:auto;white-space:nowrap;margin:20px auto 20px 200px;min-height:80vh;border:solid gray 1px;box-shadow:0 2px 4px #00000080}.users table{margin-left:20px;border:solid gray 1px}