:root{--bg-color: #f4f4f4;--text-color: #000000;--button-bg: #4CAF50;--button-text: #ffffff;--button-hover: #45a049;--profile-bg-gradient: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);--profile-border-color: rgba(138, 75, 175, .1);--profile-info-bg: rgba(138, 75, 175, .03);--profile-info-bg-hover: rgba(138, 75, 175, .08);--card-bg: aliceblue;--card-heading: #333;--card-text: #666;--card-shadow: rgba(0, 0, 0, .1);--button-hover-shadow: rgba(102, 126, 234, .5);--course-title: #2c3e50;--course-info: #555;--accent: #764ba2;--text-accent: #8a4baf;--input-border: #ddd;--danger-bg: #f44336;--danger-hover: #da190b;--text-muted: #999;--text-secondary: #666;--footer-bg: #8a5bad;--footer-text: white;--footer-link: aliceblue;--footer-hover: #f5f5f5;--bg-main: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);--bg-panel: white;--text-primary: #2c3e50;--text-placeholder: #adb5bd;--bg-input: #f8f9fa;--border-color: #e9ecef;--bg-semitrans: rgba(248, 249, 250, .5)}body.dark-mode{--bg-color: #121212;--text-color: #f0f0f0;--button-bg: #388e3c;--button-text: #ffffff;--button-hover: #2e7d32;--profile-bg-gradient: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);--profile-border-color: rgba(255, 255, 255, .08);--profile-info-bg: rgba(255, 255, 255, .03);--profile-info-bg-hover: rgba(255, 255, 255, .08);--card-bg: #1e1e1e;--card-heading: #f0f0f0;--card-text: #cccccc;--card-shadow: rgba(0, 0, 0, .6);--button-hover-shadow: rgba(76, 87, 165, .6);--course-title: #ffffff;--course-info: #bbbbbb;--accent: #9999ff;--input-border: #444;--danger-bg: #c62828;--danger-hover: #b71c1c;--text-muted: #aaa;--text-secondary: #aaa;--footer-bg: #1a1a1a;--footer-text: #e0e0e0;--footer-link: #cccccc;--footer-hover: #ffffff;--bg-main: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);--bg-panel: #2c2c2c;--text-primary: #f8f8f8;--text-placeholder: #999;--bg-input: #1e1e1e;--border-color: #444;--bg-semitrans: rgba(255, 255, 255, .05)}main,.app-wrapper{background-color:var(--bg-color);color:var(--text-color);min-height:100vh}#root{background-color:var(--bg-color);min-height:100vh}html,body{background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}.common-btn{background-color:var(--button-bg);color:var(--button-text);padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:18px;transition:background-color .3s ease}.common-btn:hover{background-color:var(--button-hover)}@media (max-width: 768px){.common-btn{font-size:16px}}.home{background-color:var(--bg-color);display:flex;justify-content:center;text-align:center}.home .home-content{width:100%;padding:20px;background-color:var(--bg-color);border-radius:8px;color:var(--text-color)}.home .home-content h1{font-size:36px;color:var(--text-color);margin-bottom:20px}@media (max-width: 768px){.home .home-content h1{font-size:28px}}.home .home-content p{font-size:18px;color:var(--text-color);line-height:1.6;margin-bottom:20px}@media (max-width: 768px){.home .home-content p{font-size:16px}}.home .home-content button{background-color:var(--button-bg);color:var(--button-text);margin-top:20px;font-size:20px;padding:12px 24px}@media (max-width: 768px){.home .home-content button{font-size:18px}}.student-testimonials{padding:0;text-align:center;background-color:var(--bg-color);color:var(--text-color)}.student-testimonials h1{font-size:36px;color:var(--text-color);margin-bottom:20px}@media (max-width: 768px){.student-testimonials h1{font-size:28px}}.testimonial{padding:80px 0;text-align:center;background-color:var(--bg-color);color:var(--text-color)}.testimonial h2{font-size:36px;color:var(--text-color);margin-bottom:40px}@media (max-width: 768px){.testimonial h2{font-size:28px}}.testimonial .testimonial-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.testimonial .testimonial-cards .testimonial-card{background-color:var(--bg-color);color:var(--text-color);box-shadow:0 2px 10px #0000001a;border-radius:8px;padding:20px;width:300px;text-align:left;flex-direction:column;align-items:center;transition:background-color .3s ease,color .3s ease}@media (max-width: 768px){.testimonial .testimonial-cards .testimonial-card{width:80%;text-align:center}}.testimonial .testimonial-cards .testimonial-card .student-image{display:flex;justify-content:center;align-items:center;margin-bottom:15px}.testimonial .testimonial-cards .testimonial-card .student-image img{width:80px;height:80px;border-radius:50%;margin-bottom:15px;object-fit:cover}.testimonial .testimonial-cards .testimonial-card .message{font-size:16px;color:var(--text-color);margin-bottom:15px;line-height:1.5}@media (max-width: 768px){.testimonial .testimonial-cards .testimonial-card .message{font-size:14px}}.testimonial .testimonial-cards .testimonial-card .info{text-align:center}.testimonial .testimonial-cards .testimonial-card .name{font-size:18px;font-weight:700;color:var(--text-color);margin-bottom:5px}@media (max-width: 768px){.testimonial .testimonial-cards .testimonial-card .name{font-size:16px}}.testimonial .testimonial-cards .testimonial-card .position{font-size:14px;color:var(--text-color)}@media (max-width: 768px){.testimonial .testimonial-cards .testimonial-card .position{font-size:12px}}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background-color:var(--bg-color);color:var(--text-color);box-shadow:0 2px 5px #0000001a;margin:.05px;position:relative}header .logo{font-size:26px;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:10px}header .logo img{width:40px;height:auto;object-fit:contain;border-radius:8px;transition:transform .3s ease}header .logo img:hover{transform:scale(1.1)}header .links{display:flex;gap:2rem;align-items:center;color:var(--text-color)}header .links a{color:var(--text-color);text-decoration:none;font-size:16px;transition:color .3s ease;padding:.5rem 1rem;border-radius:8px;position:relative;overflow:hidden}header .links a:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(141,136,193,.2),transparent);transition:left .5s ease}header .links a:hover:before{left:100%}header .links a:hover{color:#8a4baf;transform:translateY(-2px)}header .links.active{transform:translateY(0);opacity:1;visibility:visible}.common-btn{background-color:var(--button-bg);color:var(--button-text);border:none;padding:.6rem 1.2rem;font-size:16px;border-radius:8px;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.common-btn:hover{background-color:var(--button-hover);transform:translateY(-1px)}.common-btn:active{transform:scale(.95)}.card{background-color:var(--bg-color);color:var(--text-color);border:1px solid rgba(138,75,175,.1);box-shadow:0 2px 5px #0000001a;padding:1rem;border-radius:12px}.sidebar-toggle{display:none;cursor:pointer;z-index:1100}.mobile-sidebar{position:fixed;top:0;right:-250px;width:250px;height:100%;background-color:var(--bg-color);color:var(--text-color);box-shadow:-2px 0 6px #0003;padding:20px;display:flex;flex-direction:column;gap:20px;transition:right .3s ease-in-out;z-index:1000}.mobile-sidebar a{color:var(--text-color);font-size:18px;text-decoration:none;font-weight:500}.mobile-sidebar.open{right:0}@media screen and (max-width: 768px){.links{display:none!important}.sidebar-toggle{display:block}header.sidebar-active .mobile-sidebar{right:0}}.simple-toggle-btn{background:none;border:2px solid currentColor;border-radius:8px;padding:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;color:inherit}.simple-toggle-btn:hover{background:#0000001a}.simple-toggle-btn:focus{outline:none;box-shadow:0 0 0 2px #3b82f680}.mobile-dark-toggle{padding:12px 0;border-bottom:1px solid #e1e5e9;margin-bottom:16px;text-align:center}.simple-toggle-btn.mobile{margin:0 auto;font-size:14px}body.dark-mode .mobile-dark-toggle{border-bottom-color:#374151}body.dark-mode .simple-toggle-btn:hover{background:#ffffff1a}.auth-page{--auth-primary-color: #667eea;--auth-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--auth-secondary-color: #f093fb;--auth-secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--auth-success-color: #4ade80;--auth-error-color: #ef4444;--auth-warning-color: #f59e0b;--auth-input-focus: #667eea;--auth-transition: all .3s cubic-bezier(.4, 0, .2, 1);--auth-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background-color:var(--bg-color);background-image:radial-gradient(circle at 25% 25%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(240,147,251,.1) 0%,transparent 50%);position:relative;overflow:hidden;box-sizing:border-box}.auth-page:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(102,126,234,.03) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(240,147,251,.03) 50%,transparent 70%);animation:auth-float 20s ease-in-out infinite;pointer-events:none}@keyframes auth-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(1deg)}}.auth-page .auth-form{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:40px;border-radius:20px;box-shadow:var(--card-shadow),var(--auth-shadow-xl);text-align:center;width:100%;max-width:420px;position:relative;border:1px solid rgba(255,255,255,.1);transition:var(--auth-transition);animation:auth-slideInUp .6s cubic-bezier(.4,0,.2,1)}.auth-page .auth-form:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--auth-primary-gradient);border-radius:20px 20px 0 0}.auth-page .auth-form:hover{transform:translateY(-5px);box-shadow:0 25px 50px -12px #00000026}.auth-page .auth-form h2{margin-bottom:30px;font-size:28px;font-weight:700;color:var(--text-color);position:relative;background:var(--auth-primary-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}.auth-page .auth-form form{text-align:left;display:flex;flex-direction:column;gap:20px}.auth-page .auth-form label{display:block;margin-bottom:8px;color:var(--text-color);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.auth-page .auth-form input{width:100%;padding:16px 20px;border:2px solid var(--auth-border-color);border-radius:12px;font-size:16px;background-color:var(--card-bg);color:var(--text-color);transition:var(--auth-transition);outline:none;box-sizing:border-box;margin-top:5px;margin-bottom:0}.auth-page .auth-form input:focus{border-color:var(--auth-input-focus);box-shadow:0 0 0 3px #667eea1a;transform:translateY(-2px)}.auth-page .auth-form input:hover{border-color:var(--auth-input-focus)}.auth-page .auth-form input::placeholder{color:var(--auth-text-secondary);transition:var(--auth-transition)}.auth-page .auth-form input:focus::placeholder{opacity:.7;transform:translate(5px)}.auth-page .common-btn{width:100%;padding:16px 24px;background:var(--auth-primary-gradient);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:var(--auth-transition);text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden;margin-top:10px}.auth-page .common-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:var(--auth-transition)}.auth-page .common-btn:hover:before{left:100%}.auth-page .common-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea4d}.auth-page .common-btn:active{transform:translateY(0)}.auth-page .common-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;position:relative}.auth-page .common-btn:disabled:hover{box-shadow:none}.auth-page .common-btn:disabled:after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border:2px solid transparent;border-top:2px solid rgba(255,255,255,.8);border-radius:50%;animation:auth-spin 1s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-page .auth-form p{text-align:center;margin-top:25px;color:var(--auth-text-secondary);font-size:14px}.auth-page .auth-form a{color:var(--auth-primary-color);text-decoration:none;font-weight:600;position:relative;transition:var(--auth-transition)}.auth-page .auth-form a:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--auth-primary-gradient);transition:var(--auth-transition)}.auth-page .auth-form a:hover:after{width:100%}.auth-page .auth-form a:hover{color:var(--auth-primary-color);transform:translateY(-1px)}.auth-page .auth-form .g-recaptcha{margin:20px 0;display:flex;justify-content:center;transform:scale(.9);transform-origin:center}.auth-page .auth-form input:invalid:not(:focus):not(:placeholder-shown){border-color:var(--auth-error-color);box-shadow:0 0 0 3px #ef44441a}.auth-page .auth-form input:valid:not(:placeholder-shown){border-color:var(--auth-success-color);box-shadow:0 0 0 3px #4ade801a}@media (max-width: 480px){.auth-page{padding:15px}.auth-page .auth-form{padding:30px 20px;border-radius:16px}.auth-page .auth-form h2{font-size:24px;margin-bottom:25px}.auth-page .auth-form input{padding:14px 16px;font-size:16px}.auth-page .common-btn{padding:14px 20px;font-size:15px}.auth-page .auth-form .g-recaptcha{transform:scale(.8)}}@keyframes auth-slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.auth-page .common-btn:focus-visible{outline:2px solid var(--auth-primary-color);outline-offset:2px}.auth-page .auth-form input:focus-visible{outline:2px solid var(--auth-primary-color);outline-offset:2px}@media (prefers-contrast: high){.auth-page .auth-form{border:2px solid var(--auth-text-color)}.auth-page .auth-form input{border-width:2px}.auth-page .common-btn{border:2px solid transparent}}.about{padding:80px 0;text-align:center;min-height:55vh;background-color:var(--bg-primary);color:var(--text-primary)}.about .about-content{max-width:800px;margin:0 auto;padding:0 20px}.about .about-content h2{font-size:32px;color:var(--text-accent);margin-bottom:20px}.about .about-content p{font-size:16px;color:var(--text-primary);line-height:1.6}@media (max-width: 768px){.about .about-content h2{font-size:26px}.about .about-content p{font-size:15px}}@media (max-width: 480px){.about{padding:60px 0}.about .about-content{padding:0 10px}.about .about-content h2{font-size:22px}.about .about-content p{font-size:14px}}.profile{background:var(--profile-bg-gradient, linear-gradient(135deg, #fff 0%, #f8f9fa 100%));padding:10px;border-radius:20px;box-shadow:0 10px 30px #0000001a,0 4px 15px #0000000d;width:400px;max-width:90%;margin:150px auto;border:1px solid var(--profile-border-color, rgba(138, 75, 175, .1));position:relative;overflow:hidden;transition:all .3s ease}.profile:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#8a4baf,#b565d8,#8a4baf);background-size:200% 100%;animation:gradientMove 3s ease infinite}@keyframes gradientMove{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.profile:hover{transform:translateY(-5px);box-shadow:0 15px 40px #00000026,0 8px 25px #00000014}.profile h2{text-align:center;color:var(--text-color);font-size:2.2em;margin-bottom:30px;font-weight:700;position:relative;letter-spacing:-.5px}.profile h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,#8a4baf,#b565d8);border-radius:2px}.profile-info{text-align:left;margin-top:25px}.profile-info p{margin-bottom:20px;color:var(--text-color);font-size:1.1em;padding:15px 20px;background:var(--profile-info-bg, rgba(138, 75, 175, .03));border-radius:12px;border-left:4px solid #8a4baf;transition:all .3s ease;position:relative}.profile-info p:hover{background:var(--profile-info-bg-hover, rgba(138, 75, 175, .08));transform:translate(5px)}.profile-info p strong{color:#8a4baf;font-weight:600;display:inline-block;margin-right:10px;font-size:1.05em}.profile-info p strong:after{content:":";margin-left:2px}.profile .common-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:15px 30px;border-radius:50px;font-size:1.1em;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #28a7454d;margin-top:20px;width:100%;position:relative;overflow:hidden}.profile .common-btn: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}.profile .common-btn:hover:before{left:100%}.profile .common-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #28a74566;background:linear-gradient(135deg,#218838,#1dd1a1)}.profile .common-btn:active{transform:translateY(0);box-shadow:0 4px 15px #28a7454d}.profile .common-btn svg{font-size:1.3em;transition:transform .3s ease}.profile .common-btn:hover svg{transform:rotate(5deg) scale(1.1)}@media (max-width: 768px){.profile{padding:30px 20px;width:95%;margin:90px auto;border-radius:15px}.profile h2{font-size:1.8em;margin-bottom:20px}.profile-info p{font-size:1em;padding:12px 15px;margin-bottom:15px}.common-btn{padding:12px 25px;font-size:1em}}@media (max-width: 480px){.profile{padding:20px 15px;margin:60px auto}.profile h2{font-size:1.6em}.profile-info p{font-size:.95em;padding:10px 12px}.common-btn{padding:10px 20px;font-size:.95em}}footer{background-color:var(--footer-bg, #8a5bad);color:var(--footer-text, white);padding:20px 0;text-align:center;bottom:0}footer .footer-content{max-width:1200px;margin:0 auto}footer .footer-content p{margin:0;font-size:14px}footer .footer-content a{text-decoration:none;color:inherit}footer .footer-content .social-links{margin-top:12px;display:flex;justify-content:center;gap:20px}footer .footer-content .social-links a{color:var(--footer-link, aliceblue);font-size:16px;text-decoration:none;transition:color .3s ease}footer .footer-content .social-links a:hover{color:var(--footer-hover, #f5f5f5)}.loading-page{display:flex;align-items:center;justify-content:center;height:100vh;background-color:var(--bg-color)}.loader{width:60px;height:60px;border:6px solid #e0e0e0;border-top:6px solid var(--button-bg);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.courses{padding:80px 0;text-align:center;min-height:60vh;background-color:var(--bg-color)}.courses h2{font-size:32px;color:var(--text-accent);margin-bottom:30px}.courses .course-container{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}.courses .search-controls{margin-bottom:20px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.courses .search-wrapper{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.courses .search-input{padding:10px;border-radius:4px;border:1px solid var(--input-border, #ddd);background-color:var(--bg-color);color:var(--text-color);width:300px;font-size:14px;outline:none;transition:border-color .3s ease}.courses .search-input:focus{border-color:var(--text-accent);box-shadow:0 0 5px #8a4baf4d}.courses .search-select{padding:10px;border-radius:4px;border:1px solid var(--input-border, #ddd);background-color:var(--bg-color);color:var(--text-color);font-size:14px;cursor:pointer;outline:none;transition:border-color .3s ease}.courses .search-select:focus{border-color:var(--text-accent);box-shadow:0 0 5px #8a4baf4d}.courses .clear-button{padding:10px 15px;background-color:var(--danger-bg, #f44336);color:var(--button-text);border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.courses .clear-button:hover{background-color:var(--danger-hover, #da190b)}.courses .search-results-info{margin-bottom:15px;color:var(--text-secondary, #666);font-size:14px}.courses .no-results{text-align:center;margin-top:40px;color:var(--text-muted, #999);font-size:16px}.courses .no-results-subtitle{font-size:14px;margin-top:10px;color:var(--text-muted, #999)}@media (max-width: 768px){.courses .search-wrapper{flex-direction:column;gap:15px}.courses .search-input{width:100%;max-width:300px}.courses .search-select{width:100%;max-width:150px}}.course-card{background-color:var(--card-bg, aliceblue);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:var(--card-heading, #333);margin-bottom:10px}.course-card p{font-size:14px;color:var(--card-text, #666);margin-bottom:5px}.course-image{width:300px;height:200px;object-fit:cover;border-radius:12px;transition:transform .3s ease;box-shadow:0 10px 30px var(--card-shadow)}.course-image:hover{transform:scale(1.03)}.course-description{padding:40px 20px;background-color:var(--bg-color);min-height:100vh;display:flex;align-items:center;justify-content:center}.course-description .course-header{background-color:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 20px 40px var(--card-shadow);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:30px;max-width:1200px;width:100%;transition:transform .3s ease,box-shadow .3s ease}.course-description .course-header:hover{transform:translateY(-5px);box-shadow:0 30px 60px var(--card-shadow)}.course-description .course-header .course-image{box-shadow:0 10px 30px var(--card-shadow)}.course-description .course-header .course-info{flex:1;text-align:left;min-width:300px}.course-description .course-header .course-info h1{font-size:32px;color:var(--course-title);margin-bottom:20px;font-weight:700;line-height:1.3;background:linear-gradient(135deg,var(--button-bg),var(--accent));-webkit-text-fill-color:transparent}.course-description .course-header .course-info p{font-size:16px;color:var(--course-info)}.course-description .course-header .course-info p:before{color:var(--button-bg)}.course-description .course-header>p{color:var(--course-title);background:#fffc;// optionally convert to variable}.course-description .course-header>p:nth-of-type(2){background:linear-gradient(135deg,#ffeaa7,#fab1a0);color:var(--course-title)}.course-description .course-header .common-btn{background:var(--button-bg);color:var(--button-text);box-shadow:0 8px 25px var(--button-hover-shadow)}.course-description .course-header .common-btn:hover{box-shadow:0 12px 35px var(--button-hover-shadow)}.course-description .course-header .common-btn:disabled{box-shadow:0 8px 25px var(--button-hover-shadow)}@media (max-width: 768px){.course-description{padding:20px 10px;min-height:60vh}.course-description .course-header{flex-direction:column;text-align:center;padding:30px 20px;gap:20px}.course-description .course-header .course-image{width:250px;height:180px}.course-description .course-header .course-info{text-align:center;min-width:auto}.course-description .course-header .course-info h1{font-size:26px}.course-description .course-header .course-info p{justify-content:center;font-size:14px}.course-description .course-header>p{font-size:16px;padding:12px 20px}.course-description .course-header>p:nth-of-type(2){font-size:18px}}@media (max-width: 480px){.course-description .course-header{padding:20px 15px}.course-description .course-header .course-image{width:200px;height:150px}.course-description .course-header .course-info h1{font-size:22px}.course-description .course-header .course-info p{font-size:13px}.course-description .course-header>p{font-size:14px}.course-description .course-header>p:nth-of-type(2){font-size:16px}.course-description .course-header .common-btn{padding:12px 25px;font-size:14px;min-width:120px}}.payment-success-page{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:2rem;background-color:var(--bg-color);color:var(--text-color)}.success-message{text-align:center;background:var(--bg-color);padding:3rem;border-radius:10px;box-shadow:0 4px 6px #0000001a;max-width:500px;color:var(--text-color);transition:background-color .3s ease,color .3s ease}.success-icon,.success-message h2{color:#28a745;margin-bottom:1rem}.reference-number{font-weight:700;color:var(--text-color);margin:1rem 0}.action-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.common-btn.secondary{background:#6c757d;color:#fff}.common-btn.secondary:hover{background:#5a6268}.student-dashboard{padding:80px 0;text-align:center;min-height:55vh;background-color:var(--bg-color);color:var(--text-color)}.student-dashboard .dashboard-content{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;margin-top:40px}.course-study-page{max-width:800px;margin:40px auto;padding:24px;background-color:var(--bg-color);border-radius:16px;box-shadow:0 4px 20px #0000001a;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text-color)}.course-study-page img{max-width:100%;border-radius:12px;margin-bottom:24px}.course-study-page h2{font-size:28px;margin:12px 0;color:var(--text-color)}.course-study-page h4{font-size:18px;color:var(--text-color);margin-bottom:10px;line-height:1.6}.course-study-page h5{font-size:16px;color:var(--text-color);margin:4px 0}.course-study-page a{display:inline-block;margin-top:24px;padding:10px 20px;background-color:var(--button-bg);color:var(--button-text);text-decoration:none;border-radius:8px;transition:background-color .3s ease}.course-study-page a:hover{background-color:var(--button-hover)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f8f9fa}.lecture-page{display:flex;min-height:100vh;background:#f8f9fa}@media (max-width: 1024px){.lecture-page{flex-direction:column}}.lecture-page .left{flex:1;background:#000;position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem}@media (max-width: 1024px){.lecture-page .left{min-height:60vh;padding:1rem}}.lecture-page .left .lecture-form{background:#fff;padding:3rem;border-radius:16px;box-shadow:0 10px 40px #0003;max-width:500px;width:100%;margin:0}@media (max-width: 768px){.lecture-page .left .lecture-form{padding:2rem;max-width:90%}}.lecture-page .left .lecture-form h2{color:#212529;font-size:24px;font-weight:600;margin-bottom:24px;text-align:center;border-bottom:3px solid #08bd80;padding-bottom:12px}@media (max-width: 768px){.lecture-page .left .lecture-form h2{font-size:20px}}.lecture-page .left .lecture-form form{display:flex;flex-direction:column;gap:20px}.lecture-page .left .lecture-form form label{color:#495057;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.lecture-page .left .lecture-form form input{padding:16px 20px;border:2px solid #e9ecef;border-radius:8px;font-size:16px;transition:all .3s ease;background:#f8f9fa}.lecture-page .left .lecture-form form input:focus{outline:none;border-color:#08bd80;background:#fff;box-shadow:0 0 0 4px #08bd801a}.lecture-page .left .lecture-form form input[type=file]{padding:12px;cursor:pointer;background:#fff}.lecture-page .left .lecture-form form input[type=file]::file-selector-button{background:#08bd80;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;margin-right:16px;font-size:14px;font-weight:600;transition:all .2s ease}:is():hover{background:#07a572}.lecture-page .left .lecture-form form button[type=submit]{margin-top:16px;background:#08bd80;padding:16px 24px;font-size:16px;font-weight:600;border-radius:8px}.lecture-page .left .lecture-form form button[type=submit]:hover{background:#07a572;transform:translateY(-2px);box-shadow:0 4px 12px #08bd804d}.lecture-page .left video{width:100%;max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 20px #0000004d;margin-bottom:2rem}@media (max-width: 768px){.lecture-page .left video{margin-bottom:1rem}}.lecture-page .left h1{color:#fff;font-size:2.5rem;font-weight:600;margin-bottom:1rem;text-align:center;line-height:1.3}@media (max-width: 768px){.lecture-page .left h1{font-size:1.8rem}}@media (max-width: 480px){.lecture-page .left h1{font-size:1.5rem}}.lecture-page .left h3{color:#b8bcc8;font-size:1.1rem;font-weight:400;text-align:center;line-height:1.5;max-width:600px}@media (max-width: 768px){.lecture-page .left h3{font-size:1rem}}.lecture-page .left h1:only-child{color:#6c757d;font-size:1.8rem;font-weight:500}@media (max-width: 768px){.lecture-page .left h1:only-child{font-size:1.5rem}}.lecture-page .right{flex:0 0 380px;background:#fff;border-left:1px solid #e9ecef;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}@media (max-width: 1024px){.lecture-page .right{flex:none;max-height:none;border-left:none;border-top:1px solid #e9ecef}}.lecture-page .right .common-btn{background:#08bd80;color:#fff;border:none;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border-radius:6px;margin:20px 20px 0}.lecture-page .right .common-btn:hover{background:#07a572;transform:translateY(-1px)}.lecture-page .right .common-btn:active{transform:translateY(0)}.lecture-page .right .lecture-form{display:none}.lecture-page .right .lecture-number{background:#ececbd;margin-left:2px;padding:16px 24px;cursor:pointer;transition:all .2s ease;border-bottom:4px solid gray;border-radius:10px;font-size:14px;color:#3c4043;font-weight:500;display:flex;align-items:center;position:relative}.lecture-page .right .lecture-number:hover{background:#f8f9fa;padding-left:28px}.lecture-page .right .lecture-number.active{background:#e8f5e8;color:#08bd80;border-left:4px solid #08bd80;font-weight:600}.lecture-page .right .lecture-number.active:before{content:"";position:absolute;right:24px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:#08bd80;border-radius:50%}.lecture-page .right .lecture-number:last-child{border-bottom:none}.lecture-page .right button[style*="background: red"]{background:#dc3545!important;color:#fff;border:none;padding:8px 16px;font-size:12px;font-weight:500;cursor:pointer;border-radius:4px;margin:8px 24px 0;transition:all .2s ease}.lecture-page .right button[style*="background: red"]:hover{background:#c82333!important;transform:translateY(-1px)}.lecture-page .right p{text-align:center;color:#6c757d;font-size:14px;padding:40px 20px;font-style:italic}.lecture-page .right::-webkit-scrollbar{width:4px}.lecture-page .right::-webkit-scrollbar-track{background:#f1f1f1}.lecture-page .right::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}:is():hover{background:#a8a8a8}.lecture-page .left,.lecture-page .right{animation:fadeIn .3s ease-out}@media (max-width: 768px){.lecture-page .right{flex:none}.lecture-page .right .common-btn{margin:16px 16px 0;padding:10px 20px;font-size:13px}.lecture-page .right .lecture-form{margin:16px;padding:20px}.lecture-page .right .lecture-form h2{font-size:16px}.lecture-page .right .lecture-number{padding:14px 20px;font-size:13px}.lecture-page .right .lecture-number:hover{padding-left:24px}.lecture-page .right .lecture-number.active:before{right:20px}.lecture-page .right button[style*="background: red"]{margin:8px 20px 0;font-size:11px;padding:6px 12px}}.lecture-page .left{background:linear-gradient(135deg,#1a1a1a,#2d2d2d)}.lecture-page .left video::-webkit-media-controls-play-button{background-color:#08bd80cc;border-radius:50%}.lecture-page .right .common-btn:focus,.lecture-page .right .lecture-number:focus{outline:2px solid #08bd80;outline-offset:2px}.lecture-page .right .lecture-form input:focus{outline:none;border-color:#08bd80;box-shadow:0 0 0 3px #08bd801a}.progress{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;padding:24px 32px;margin:20px auto;max-width:600px;box-shadow:0 8px 32px #0000001a;border:1px solid #e9ecef;position:relative;overflow:hidden;text-align:center;color:#212529;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;font-weight:500;line-height:1.5}.progress{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;padding:24px 32px;margin:20px auto;max-width:600px;box-shadow:0 8px 32px #0000001a;border:1px solid #e9ecef;position:relative;overflow:hidden;text-align:center;color:#212529;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.progress:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(8,189,128,.1),transparent);animation:shimmer 3s infinite}@media (max-width: 768px){.progress{margin:16px;padding:20px 24px;max-width:none}}@media (max-width: 480px){.progress{padding:16px 20px}}.progress{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;padding:24px 32px;margin:20px auto;max-width:600px;box-shadow:0 8px 32px #0000001a;border:1px solid #e9ecef;position:relative;overflow:hidden;text-align:center;color:#212529;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;font-weight:500;line-height:.01}.progress:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(8,189,128,.1),transparent);animation:shimmer 3s infinite;z-index:1}.progress>*{position:relative;z-index:2}@media (max-width: 768px){.progress{margin:16px;padding:20px 24px;max-width:none;font-size:14px}}@media (max-width: 480px){.progress{padding:16px 20px;font-size:13px}}@keyframes shimmer{0%{left:-100%}to{left:100%}}.progress progress{width:100%;height:20px;margin:16px 0;border:none;border-radius:6px;overflow:hidden;background:#e9ecef;box-shadow:inset 0 2px 4px #0000001a}@media (max-width: 768px){.progress progress{height:10px;margin:12px 0}}.progress br{margin:8px 0}.progress:after{content:"";display:block;margin-top:8px;font-size:12px;color:#6c757d;font-style:italic}.main-content{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:30px;padding:40px 20px;min-height:60vh;background:linear-gradient(135deg,var(--bg-light) 0%,#c3cfe2 100%);transition:background .5s ease,color .5s ease}.main-content .box{background:var(--box-light);padding:30px 25px;border-radius:15px;text-align:center;color:#fff;min-width:200px;box-shadow:0 10px 30px #0000001a;transition:all .3s ease;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);background-size:200% 200%;animation:gradientShift 4s ease infinite}.main-content .box: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}.main-content .box:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #00000026;background:linear-gradient(135deg,#764ba2,#667eea)}.main-content .box:hover:before{left:100%}.main-content .box p:first-child{font-size:16px;font-weight:600;margin-bottom:15px;text-transform:uppercase;letter-spacing:1px;opacity:.9}.main-content .box p:last-child{font-size:36px;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-content .box:after{content:"";position:absolute;top:15px;right:15px;width:20px;height:20px;background:#fff3;border-radius:50%;opacity:.5}@media (max-width: 768px){.main-content{padding:20px 15px;gap:20px}.main-content .box{min-width:150px;padding:25px 20px}.main-content .box p:first-child{font-size:14px}.main-content .box p:last-child{font-size:28px}}@media (max-width: 480px){.main-content{flex-direction:column}.main-content .box{width:100%;max-width:300px}}.main-content .box.loading{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.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:768){.sidebar ul li{padding:7px}}.sidebar ul li:hover{background-color:gray}.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}.admin-courses{display:flex;gap:30px;padding:20px;min-height:100vh;background:linear-gradient(135deg,#f8f9fa,#e9ecef);@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}}.admin-courses .left{flex:1;background:transparent;border-radius:12px;padding:25px;box-shadow:none;border:none;transition:all .3s ease}.admin-courses .left h1{color:#2c3e50;font-size:28px;font-weight:700;margin-bottom:25px;text-align:center;position:relative}.admin-courses .left h1:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-radius:2px}.admin-courses .left .dashboard-content{display:flex;flex-wrap:wrap;gap:20px;margin-top:30px;justify-content:flex-start;width:100%;background:transparent}.admin-courses .left .dashboard-content>p{flex:1 1 100%;text-align:center;color:#6c757d;font-size:18px;font-weight:500;margin-top:50px;padding:40px 20px;background:#f8f9fa80;border-radius:8px;border:2px dashed #dee2e6}.admin-courses.form-closed .left{flex:1;width:100%}.admin-courses.form-open .left{flex:2;width:100%}.admin-courses .right{flex:1;background:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 15px #00000014;border:1px solid rgba(0,0,0,.05);height:fit-content;position:sticky;top:20px}.admin-courses .right .add-course .course-form{margin-bottom:20px;animation:slideDown .3s ease-out}.admin-courses .right .add-course .course-form h2{color:#2c3e50;font-size:24px;font-weight:600;margin-bottom:25px;text-align:center;position:relative}.admin-courses .right .add-course .course-form h2:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:40px;height:3px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-radius:2px}.admin-courses .right .add-course .course-form form{display:flex;flex-direction:column;gap:20px}.admin-courses .right .add-course .course-form form label{color:#495057;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}.admin-courses .right .add-course .course-form form input[type=text],.admin-courses .right .add-course .course-form form input[type=number],.admin-courses .right .add-course .course-form form select{padding:12px 15px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;transition:all .3s ease;background:#f8f9fa}:is(.admin-courses .right .add-course .course-form form input[type=text],.admin-courses .right .add-course .course-form form input[type=number],.admin-courses .right .add-course .course-form form select):focus{outline:none;border-color:#6c5ce7;background:#fff;box-shadow:0 0 0 3px #6c5ce71a}:is(.admin-courses .right .add-course .course-form form input[type=text],.admin-courses .right .add-course .course-form form input[type=number],.admin-courses .right .add-course .course-form form select)::placeholder{color:#adb5bd}.admin-courses .right .add-course .course-form form select{cursor:pointer}.admin-courses .right .add-course .course-form form select option{padding:10px}.admin-courses .right .add-course .course-form form input[type=file]{padding:10px;border:2px dashed #6c5ce7;border-radius:8px;background:#6c5ce70d;cursor:pointer;transition:all .3s ease}.admin-courses .right .add-course .course-form form input[type=file]:hover{border-color:#5f3dc4;background:#6c5ce71a}.admin-courses .right .add-course .course-form form input[type=file]::file-selector-button{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:500;margin-right:10px;transition:all .3s ease}:is():hover{background:linear-gradient(135deg,#5f3dc4,#9775fa)}.admin-courses .right .add-course .course-form form img{border-radius:8px;box-shadow:0 4px 15px #0000001a;border:2px solid #e9ecef;margin-top:10px;max-width:100%;height:auto}.admin-courses .right .add-course .course-form form .common-btn{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;padding:14px 20px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;margin-top:10px}.admin-courses .right .add-course .course-form form .common-btn:hover:not(:disabled){background:linear-gradient(135deg,#5f3dc4,#9775fa);transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce74d}.admin-courses .right .add-course .course-form form .common-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.admin-courses .toggle-button-container{position:fixed;bottom:30px;right:30px;z-index:1000}.admin-courses .toggle-button-container .common-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:16px 24px;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 15px #28a7454d}.admin-courses .toggle-button-container .common-btn:hover{background:linear-gradient(135deg,#218838,#1ea085);transform:translateY(-2px);box-shadow:0 8px 25px #28a74566}@media (max-width: 1024px){.admin-courses{flex-direction:column;gap:20px}.admin-courses .left{order:2;width:100%}.admin-courses .right{order:1;position:static;width:100%}}@media (max-width: 768px){.admin-courses{padding:15px}.admin-courses .left,.admin-courses .right{padding:20px;width:100%}.admin-courses .toggle-button-container{bottom:20px;right:20px}.admin-courses .toggle-button-container .common-btn{padding:14px 20px;font-size:14px}}@media (max-width: 480px){.admin-courses .left h1{font-size:24px}.admin-courses .right .add-course .course-form h2{font-size:20px}}body.dark-mode .admin-courses{background:linear-gradient(135deg,#1f1f1f,#2a2a2a)}body.dark-mode .admin-courses .left h1,body.dark-mode .admin-courses .right .add-course .course-form h2,body.dark-mode .admin-courses label{color:#e0e0e0}body.dark-mode .admin-courses .dashboard-content>p{color:#ccc;background:#21212180;border:2px dashed #444}body.dark-mode .admin-courses .right{background:#2e2e2e;border:1px solid #444;box-shadow:0 4px 15px #00000080}body.dark-mode .admin-courses input,body.dark-mode .admin-courses select{background:#1e1e1e;border:2px solid #444;color:#f0f0f0}body.dark-mode .admin-courses input:focus,body.dark-mode .admin-courses select:focus{background:#2a2a2a;border-color:#a29bfe;box-shadow:0 0 0 3px #a29bfe1a}body.dark-mode .admin-courses input::file-selector-button{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff}body.dark-mode .admin-courses .common-btn{color:#fff}body.dark-mode .admin-courses .toggle-button-container .common-btn{background:linear-gradient(135deg,#218838,#1ea085);box-shadow:0 4px 15px #2188384d}body.dark-mode select,body.dark-mode option{background-color:#2c2c2c;color:#f0f0f0;border:1px solid #444}.users{margin:20px auto;min-height:80vh;border:solid gray 1px;overflow-x:auto}@media (max-width:768px){.users{width:350px;white-space:nowrap}}td{padding:5px;color:var(--text-color);background-color:var(--bg-color);border-bottom:1px solid #ccc}th{padding:8px;background-color:#8a5bad;color:#fff;text-align:left}table{width:100%;border-collapse:collapse}tr:nth-child(2n){background-color:#f2f2f2}body.dark-mode .users{border:1px solid #555}body.dark-mode td{background-color:#1e1e1e;color:#f0f0f0;border-color:#444}body.dark-mode th{background-color:#4c2a85;color:#fff}body.dark-mode tr:nth-child(2n){background-color:#2a2a2a}.search-container{margin-bottom:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.search-input{padding:10px;border-radius:4px;border:1px solid #ddd;width:300px;font-size:14px;transition:all .3s ease}.search-input:focus{outline:none;border-color:#8a5bad;box-shadow:0 0 0 2px #8a5bad33}.clear-btn{padding:10px 15px;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:all .3s ease}.clear-btn:hover{background-color:#d32f2f;transform:translateY(-1px)}.results-count{margin-bottom:10px;color:#666;font-size:14px;font-weight:500}tr{transition:all .3s ease}tr:hover{background-color:#8a5bad0d!important;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}tr:nth-child(2n):hover{background-color:#8a5bad14!important}.index-cell{font-weight:600;color:#6c757d;text-align:center;width:80px;background:#8a5bad0d;border-radius:4px;font-size:14px}.name-cell{font-weight:500;min-width:150px}.user-name{color:var(--text-color, #2c3e50);font-size:15px;font-weight:600}.email-cell{min-width:200px}.user-email{color:var(--text-color, #5a6c7d);font-family:Courier New,monospace;font-size:13px}.role-cell{text-align:center;width:120px}.action-cell{text-align:center;width:200px}.role-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 1px 3px #0000001a;transition:all .3s ease;border:1px solid transparent}.admin-badge{background:#8a5bad;color:#fff;border-color:#8a5bad4d}.user-badge{background:#28a745;color:#fff;border-color:#28a7454d}.common-btn{background:#8a5bad;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .3s ease;box-shadow:0 2px 6px #8a5bad4d}.common-btn:hover{background:#7048a0;transform:translateY(-1px);box-shadow:0 4px 12px #8a5bad66}.no-results{text-align:center;margin-top:20px;color:#999;font-size:14px;padding:20px;background:#00000005;border-radius:8px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal-container{background:#fff;border-radius:16px;width:400px;max-width:90vw;box-shadow:0 20px 40px #0003;animation:slideUp .3s ease;overflow:hidden}.modal-header{background:#8a5bad;color:#fff;padding:16px 20px;text-align:center}.modal-title{margin:0;font-size:16px;font-weight:600}.modal-body{padding:20px;text-align:center}.warning-icon{font-size:28px;margin-bottom:12px}.modal-message{color:var(--text-color, #2c3e50);font-size:14px;line-height:1.5;margin:0}.current-role,.new-role{font-weight:600;padding:2px 6px;border-radius:4px;margin:0 4px}.admin-text{background:#8a5bad1a;color:#8a5bad}.user-text{background:#28a7451a;color:#28a745}.modal-actions{display:flex;gap:10px;padding:16px 20px;background:#f8f9fa}.modal-btn{flex:1;padding:10px 16px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease}.cancel-btn{background:#dc3545;color:#fff;box-shadow:0 2px 6px #dc35454d}.cancel-btn:hover{background:#c82333;transform:translateY(-1px);box-shadow:0 4px 12px #dc354566}.confirm-btn{background:#28a745;color:#fff;box-shadow:0 2px 6px #28a7454d}.confirm-btn:hover{background:#218838;transform:translateY(-1px);box-shadow:0 4px 12px #28a74566}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}body.dark-mode .search-input{background:#2a2a2a;border-color:#555;color:#f0f0f0}body.dark-mode .search-input:focus{border-color:#4c2a85;box-shadow:0 0 0 2px #4c2a854d}body.dark-mode .results-count{color:#b0b0b0}body.dark-mode .index-cell{background:#4c2a8533;color:#a0a0a0}body.dark-mode .user-name{color:#f0f0f0}body.dark-mode .user-email{color:#b0b0b0}body.dark-mode .admin-badge{background:#4c2a85;border-color:#4c2a8580}body.dark-mode .user-badge{background:#20a040;border-color:#20a04080}body.dark-mode .common-btn{background:#4c2a85;box-shadow:0 2px 6px #4c2a8566}body.dark-mode .common-btn:hover{background:#3d2168;box-shadow:0 4px 12px #4c2a8599}body.dark-mode .no-results{background:#ffffff0d;color:#b0b0b0}body.dark-mode .modal-container{background:#2a2a2a;color:#f0f0f0}body.dark-mode .modal-header{background:#4c2a85}body.dark-mode .modal-message{color:#f0f0f0}body.dark-mode .modal-actions{background:#333}body.dark-mode .admin-text{background:#4c2a8533;color:#9d7bc7}body.dark-mode .user-text{background:#20a04033;color:#4ade80}body.dark-mode tr:hover{background-color:#4c2a8526!important}@media (max-width: 768px){.search-container{flex-direction:column;align-items:stretch}.search-input{width:100%;margin-bottom:10px}.modal-container{width:350px;margin:0 20px}.modal-actions{flex-direction:column;gap:8px}.common-btn{font-size:11px;padding:6px 10px}.role-badge{font-size:10px;padding:3px 8px}}@media (max-width: 480px){.users{margin:10px;border:none}.modal-container{width:calc(100vw - 40px)}table{font-size:12px}th,td{padding:6px 4px}}