@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#06061a;--bg2:#0c0c2e;
--card:rgba(16,16,48,0.85);--card-hover:rgba(22,22,60,0.95);
--border:rgba(108,92,231,0.15);--border-hover:rgba(108,92,231,0.4);
--primary:#6c5ce7;--primary-hover:#7c6ef7;--primary-glow:rgba(108,92,231,0.3);
--secondary:#00cec9;--secondary-glow:rgba(0,206,201,0.3);
--text:#e4e4ff;--text-muted:#7878aa;
--danger:#ff6b6b;--success:#00b894;--warning:#fdcb6e;
--radius:14px;--radius-sm:8px;
--shadow:0 8px 32px rgba(0,0,0,0.4);
--transition:all .3s cubic-bezier(.4,0,.2,1);
}
body{
font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;
background-image:radial-gradient(ellipse at 20% 50%,rgba(108,92,231,.08)0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,206,201,.06)0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(108,92,231,.04)0%,transparent 50%);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:rgba(8,8,30,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav .logo{font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;letter-spacing:-.02em}
.nav-links{display:flex;gap:.5rem;align-items:center}
.nav-links a{color:var(--text-muted);text-decoration:none;font-size:.88rem;font-weight:500;padding:.5rem 1rem;border-radius:var(--radius-sm);transition:var(--transition)}
.nav-links a:hover{color:var(--text);background:rgba(108,92,231,.1)}
.hero{text-align:center;padding:5rem 2rem 2rem;position:relative}
.hero h1{font-size:3.2rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,#fff 0%,var(--primary-hover)50%,var(--secondary)100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}
.hero p{color:var(--text-muted);font-size:1.15rem;max-width:600px;margin:0 auto}
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem;padding:2rem 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;transition:var(--transition);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:0;transition:var(--transition)}
.card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:0 12px 40px rgba(108,92,231,.15)}
.card:hover::before{opacity:1}
.card h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.card p{color:var(--text-muted);font-size:.9rem;margin-bottom:1rem;line-height:1.7}
.card .price{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--secondary),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;display:block}

/* Card image (thumbnail on main page) */
.card-image{margin:-1.8rem -1.8rem 1.2rem -1.8rem;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;position:relative;max-height:200px}
.card-image img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.card:hover .card-image img{transform:scale(1.05)}
.card-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to top,var(--card),transparent);pointer-events:none}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border:none;border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none;line-height:1.4}
.btn-primary{background:linear-gradient(135deg,var(--primary),#8b7cf7);color:#fff;box-shadow:0 4px 15px var(--primary-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px var(--primary-glow)}
.btn-secondary{background:rgba(108,92,231,.15);color:var(--primary-hover);border:1px solid var(--border)}
.btn-secondary:hover{background:rgba(108,92,231,.25)}
.btn-danger{background:rgba(255,107,107,.15);color:var(--danger);border:1px solid rgba(255,107,107,.2)}
.btn-danger:hover{background:rgba(255,107,107,.25)}
.btn-success{background:rgba(0,184,148,.15);color:var(--success);border:1px solid rgba(0,184,148,.2)}
.btn-success:hover{background:rgba(0,184,148,.25)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-sm{padding:.4rem .8rem;font-size:.8rem}
.btn-block{width:100%;justify-content:center}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:.85rem;font-weight:500;color:var(--text-muted);margin-bottom:.4rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.75rem 1rem;background:rgba(10,10,30,.6);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:.9rem;transition:var(--transition);outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group select option{background:var(--bg2);color:var(--text)}
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow)}
.auth-card h2{text-align:center;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}
.auth-card .subtitle{text-align:center;color:var(--text-muted);font-size:.9rem;margin-bottom:2rem}
.auth-card .links{text-align:center;margin-top:1.5rem;font-size:.85rem;color:var(--text-muted)}
.auth-card .links a{color:var(--primary-hover);text-decoration:none}
.auth-card .links a:hover{text-decoration:underline}
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{width:240px;background:rgba(8,8,30,.95);border-right:1px solid var(--border);padding:1.5rem 0;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:50}
.admin-sidebar .logo{padding:0 1.5rem;margin-bottom:2rem;font-size:1.15rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.admin-sidebar .logo small{display:block;font-size:.7rem;font-weight:500;-webkit-text-fill-color:var(--text-muted);margin-top:.2rem}
.admin-sidebar a{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.5rem;color:var(--text-muted);text-decoration:none;font-size:.88rem;font-weight:500;transition:var(--transition);border-left:3px solid transparent}
.admin-sidebar a:hover,.admin-sidebar a.active{color:var(--text);background:rgba(108,92,231,.1);border-left-color:var(--primary)}
.admin-main{margin-left:240px;padding:2rem 2.5rem;flex:1;width:calc(100% - 240px);min-height:100vh;background:var(--bg);background-image:radial-gradient(ellipse at 50% 20%,rgba(108,92,231,.06)0%,transparent 60%)}
.admin-main h2{font-size:1.4rem;margin-bottom:1.5rem;font-weight:700}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.tbl th,.tbl td{padding:.75rem 1rem;text-align:left;font-size:.85rem}
.tbl th{background:rgba(108,92,231,.1);font-weight:600;color:var(--text-muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em}
.tbl td{border-top:1px solid var(--border)}
.tbl tr:hover td{background:rgba(108,92,231,.04)}
.toggle{position:relative;display:inline-block;width:48px;height:26px}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(40,40,80,.8);border-radius:26px;transition:var(--transition);border:1px solid var(--border)}
.toggle .slider::before{content:'';position:absolute;height:20px;width:20px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:var(--transition)}
.toggle input:checked+.slider{background:var(--primary);border-color:var(--primary)}
.toggle input:checked+.slider::before{transform:translateX(22px)}
.badge{display:inline-block;padding:.15rem .6rem;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-active{background:rgba(0,184,148,.15);color:var(--success)}
.badge-hidden{background:rgba(255,107,107,.15);color:var(--danger)}
.tg-block{background:linear-gradient(135deg,rgba(0,136,204,.12),rgba(0,136,204,.04));border:1px solid rgba(0,136,204,.25);border-radius:var(--radius);padding:1.5rem;margin-top:1rem}
.tg-block h4{color:#0aa;margin-bottom:.5rem;font-size:1rem}
.tg-block p{color:var(--text-muted);font-size:.9rem}
.msg{padding:.8rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:1rem;animation:fadeIn .3s ease}
.msg-error{background:rgba(255,107,107,.12);color:var(--danger);border:1px solid rgba(255,107,107,.2)}
.msg-success{background:rgba(0,184,148,.12);color:var(--success);border:1px solid rgba(0,184,148,.2)}
.msg-warning{background:rgba(253,203,110,.12);color:var(--warning);border:1px solid rgba(253,203,110,.2)}
.lesson-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.3rem;margin-bottom:.6rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.8rem}
.lesson-item:hover{border-color:var(--border-hover);background:var(--card-hover)}
.lesson-item.active{border-color:var(--primary);background:rgba(108,92,231,.1)}
.lesson-item .num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;background:rgba(108,92,231,.2);border-radius:50%;font-size:.8rem;font-weight:700;color:var(--primary-hover)}
.lesson-item .ltitle{font-weight:500;font-size:.92rem}
.lesson-content{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;line-height:1.85;white-space:pre-wrap;font-size:.92rem;color:var(--text)}
.lesson-content code{background:rgba(108,92,231,.15);padding:.15rem .4rem;border-radius:4px;font-size:.85rem}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:200;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:90%;max-width:520px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:fadeIn .25s ease}
.modal h3{margin-bottom:1.5rem;font-size:1.15rem;font-weight:700}
.modal-actions{display:flex;gap:.8rem;justify-content:flex-end;margin-top:1.5rem}
.course-detail{max-width:900px;margin:2rem auto;padding:0 2rem}
.course-detail h1{font-size:2rem;font-weight:800;margin-bottom:1rem}
.course-detail .desc{color:var(--text-muted);font-size:1rem;line-height:1.8;margin-bottom:1.5rem}
.course-detail .meta{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}
.buy-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;margin-bottom:2rem}
.lessons-section h2{font-size:1.3rem;font-weight:700;margin-bottom:1rem}
.course-grid-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.empty{text-align:center;padding:3rem;color:var(--text-muted);font-size:.95rem}
.settings-section{max-width:600px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.settings-row label{font-weight:500;font-size:.92rem}
.inline-form{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.inline-form .form-group{flex:1;min-width:200px;margin-bottom:0}
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn .3s ease}
.purchased-badge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(0,184,148,.15);color:var(--success);padding:.3rem .8rem;border-radius:20px;font-size:.8rem;font-weight:600}
.footer{text-align:center;padding:3rem 2rem;color:var(--text-muted);font-size:.8rem;border-top:1px solid var(--border);margin-top:4rem}

/* Course images grid in admin modal */
.course-images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.6rem;margin-bottom:.8rem}
.course-image-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);aspect-ratio:1;transition:var(--transition)}
.course-image-item:hover{border-color:var(--primary)}
.course-image-item img{width:100%;height:100%;object-fit:cover;display:block}
.course-image-delete{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(255,107,107,.9);color:#fff;border:none;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);backdrop-filter:blur(4px)}
.course-image-item:hover .course-image-delete{opacity:1}
.course-image-order{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.7);color:#fff;font-size:.65rem;padding:.1rem .4rem;border-radius:4px;font-weight:600}

/* Upload area */
.image-upload-area{margin-top:.5rem}
.upload-placeholder{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:1.2rem;text-align:center;cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:.3rem}
.upload-placeholder:hover{border-color:var(--primary);background:rgba(108,92,231,.05)}
.upload-placeholder .upload-icon{font-size:1.5rem}
.upload-placeholder span{font-size:.85rem;color:var(--text-muted)}
.upload-placeholder small{font-size:.75rem;color:var(--text-muted);opacity:.7}

/* Upload progress */
.upload-progress-bar{width:100%;height:6px;background:rgba(108,92,231,.15);border-radius:3px;overflow:hidden}
.upload-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px;transition:width .3s ease;width:0}

/* Course gallery on detail page */
.course-gallery{margin-bottom:2rem;border-radius:var(--radius);overflow:hidden}
.gallery-single{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.gallery-single img{width:100%;max-height:450px;object-fit:cover;display:block;cursor:pointer;transition:transform .3s ease}
.gallery-single img:hover{transform:scale(1.02)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:220px;gap:.8rem;grid-auto-flow:dense}
.gallery-item{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:var(--transition);position:relative;height:100%}
.gallery-item:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 24px rgba(108,92,231,.15)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item-main{grid-column:span 2;grid-row:span 1}

/* Lightbox */
.lightbox-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.92);backdrop-filter:blur(16px);z-index:500;align-items:center;justify-content:center;flex-direction:column;gap:1rem}
.lightbox-overlay.open{display:flex}
.lightbox-img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:var(--radius);animation:fadeIn .3s ease;user-select:none}
.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.4rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:510;backdrop-filter:blur(8px)}
.lightbox-close:hover{background:rgba(255,107,107,.3);border-color:var(--danger)}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:2rem;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:510;backdrop-filter:blur(8px)}
.lightbox-prev{left:1.5rem}
.lightbox-next{right:1.5rem}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(108,92,231,.3);border-color:var(--primary)}
.lightbox-counter{color:rgba(255,255,255,.6);font-size:.85rem;font-weight:500;position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);padding:.3rem 1rem;border-radius:20px;backdrop-filter:blur(8px)}

@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp .5s ease}
@media(max-width:768px){.hero h1{font-size:2rem}.grid{grid-template-columns:1fr}.admin-sidebar{width:200px}.admin-main{margin-left:200px;width:calc(100% - 200px);padding:1.5rem}.nav{padding:.8rem 1rem}.course-detail{padding:0 1rem}.gallery-item-main{grid-column:span 1}.gallery-grid{grid-auto-rows:180px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.lightbox-prev,.lightbox-next{width:40px;height:40px;font-size:1.5rem}.lightbox-prev{left:.5rem}.lightbox-next{right:.5rem}}
@media(max-width:560px){.admin-layout{flex-direction:column}.admin-sidebar{width:100%;position:relative;border-right:none;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;padding:.5rem;gap:0}.admin-sidebar .logo{display:none}.admin-sidebar a{padding:.6rem .8rem;white-space:nowrap;border-left:none;border-bottom:3px solid transparent;font-size:.8rem}.admin-sidebar a.active{border-left-color:transparent;border-bottom-color:var(--primary)}.admin-main{margin-left:0;width:100%;padding:1rem}.course-images-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.flex{display:flex}.gap-1{gap:.5rem}.gap-2{gap:1rem}.items-center{align-items:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.text-muted{color:var(--text-muted)}

/* Dynamic Footer */
.footer-dynamic{background:var(--bg2);border-top:1px solid var(--border);padding:3rem 1rem 1.5rem;font-size:.9rem;color:var(--text-muted);margin-top:auto}
.footer-container{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2.5rem}
.footer-col h4{color:#fff;margin-bottom:1rem;font-size:1.1rem;font-weight:600}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin-bottom:.5rem}
.footer-col ul li a{color:var(--text-muted);text-decoration:none;transition:var(--transition)}
.footer-col ul li a:hover{color:var(--primary)}
.footer-contacts p{margin-bottom:.5rem;line-height:1.4}
.footer-contacts a{color:var(--primary);text-decoration:none}
.footer-socials{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.social-icon{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .8rem;background:rgba(255,255,255,.05);border-radius:20px;color:#fff;text-decoration:none;font-size:.8rem;border:1px solid rgba(255,255,255,.1);transition:var(--transition);text-transform:capitalize}
.social-icon:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.footer-subscribe p{margin-bottom:1rem;font-size:.85rem}
.footer-subscribe form{display:flex;gap:.5rem}
.footer-subscribe input{flex:1;background:var(--bg);border:1px solid var(--border);color:#fff;padding:.6rem 1rem;border-radius:var(--radius-sm);outline:none}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.85rem}
.footer-legal{display:flex;gap:1.5rem;font-size:.85rem}
.footer-legal a{color:var(--text-muted);text-decoration:none;transition:var(--transition)}
.footer-legal a:hover{color:var(--primary)}
@media(max-width:768px){.footer-top{grid-template-columns:1fr;gap:2rem}.footer-bottom{flex-direction:column;text-align:center}}

/* Workflow Section */
.workflow-section { margin: 4rem auto; }
.workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; }
.workflow-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem 2rem; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.15); transition: transform 0.3s ease, border-color 0.3s ease; }
.workflow-card:hover { transform: translateY(-5px); border-color: var(--primary); }
.wf-icon { font-size: 5rem; margin-bottom: 1.5rem; line-height: 1; display: inline-block; }
.workflow-card h3 { margin-bottom: 1rem; font-size: 1.3rem; color: #fff; }
.workflow-card p { color: var(--text-muted); font-size: .95rem; line-height: 1.5; }

/* Reviews Section */
.reviews-section { margin: 4rem auto; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
.review-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); display: flex; flex-direction: column; transition: transform 0.3s ease; }
.review-card:hover { transform: translateY(-3px); }
.review-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.review-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.review-name-row { display: flex; align-items: center; gap: 0.4rem; }
.review-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #8e44ad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3); }
.review-name { font-weight: 600; font-size: 1.1rem; color: #fff; line-height: 1; }
.verified-badge { background: var(--success); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; }
.review-stars { font-size: 1.2rem; display: flex; align-items: center; gap: 0.3rem; }
.star.filled { color: #f39c12; }
.star.empty { color: rgba(255,255,255,0.1); }
/* Global Hover Preview Panel */
.course-card-wrapper { overflow: visible !important; }
.global-preview-panel { max-height: 0; opacity: 0; margin-top: 0; position: relative; z-index: 50; background: rgba(15, 15, 30, 0.95); backdrop-filter: blur(12px); border: 1px solid transparent; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(108,92,231,0.4), 0 0 0 1px rgba(108,92,231,0.1); transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.4s ease, margin-top 0.4s ease, border-color 0.4s ease; color: #fff; display: grid; grid-template-columns: 350px 1fr; gap: 2rem; overflow: hidden; pointer-events: none; }
.global-preview-panel.visible { max-height: 1000px; opacity: 1; margin-top: 2rem; pointer-events: auto; border-color: var(--primary); transition: max-height 0.8s ease-in-out, opacity 0.4s ease, margin-top 0.4s ease, border-color 0.4s ease; }
.gp-media { width: 100%; height: 100%; min-height: 200px; background: #000; }
.gp-info { padding: 2rem 2rem 2rem 0; display: flex; flex-direction: column; justify-content: center; }
.gp-info h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary); display: flex; align-items: baseline; }
.gp-info p { color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; font-size: 0.95rem; }
.gp-levels { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.diff-level { padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); }
.diff-level.active { background: rgba(108, 92, 231, 0.2); color: var(--primary); border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 92, 231, 0.2); }
@media(max-width: 768px) { .global-preview-panel { grid-template-columns: 1fr; } .gp-info { padding: 1.5rem; } }


@media(max-width: 768px) {
  .workflow-grid, .reviews-grid { grid-template-columns: 1fr; }
}