@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --blue:#1a56db;--blue-d:#1237a0;--blue-l:#3b82f6;--blue-glow:rgba(26,86,219,.2);
  --electric:#60a5fa;--midnight:#050e1f;--navy:#0a1628;--navy-m:#0d1f3c;--navy-l:#162447;
  --gold:#f59e0b;--gold-l:#fbbf24;--emerald:#10b981;--rose:#f43f5e;
  --white:#fff;--off:#f8faff;--g100:#f1f5f9;--g200:#e2e8f0;--g300:#cbd5e1;--g400:#94a3b8;--g600:#475569;--g800:#1e293b;
  --text:#1e293b;--muted:#64748b;
  --grad-hero:linear-gradient(135deg,#050e1f 0%,#0a1628 40%,#0d2050 70%,#1237a0 100%);
  --grad-blue:linear-gradient(135deg,#1a56db,#3b82f6);
  --grad-gold:linear-gradient(135deg,#f59e0b,#f97316);
  --grad-em:linear-gradient(135deg,#059669,#10b981);
  --sh-sm:0 2px 8px rgba(0,0,0,.07);--sh-md:0 4px 20px rgba(0,0,0,.11);--sh-lg:0 8px 40px rgba(0,0,0,.16);
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:32px;--r-full:999px;
  --fd:'Syne',sans-serif;--fb:'Plus Jakarta Sans',sans-serif;
  --trans:.3s cubic-bezier(.4,0,.2,1);--tf:.15s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--text);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--fd);font-weight:700;line-height:1.2;color:var(--g800)}
.text-gradient{background:var(--grad-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gold-g{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:820px;margin:0 auto;padding:0 1.5rem}
.container-xs{max-width:520px;margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}.section-sm{padding:3rem 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.1rem 0;transition:var(--trans)}
.navbar.scrolled{background:rgba(5,14,31,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 4px 30px rgba(0,0,0,.3);padding:.75rem 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.6rem}
.nav-logo-svg{height:38px}
.nav-logo-text{font-family:var(--fd);font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.nav-logo-text span{color:var(--gold-l)}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-links a{color:rgba(255,255,255,.75);font-size:.9rem;font-weight:500;transition:var(--tf)}
.nav-links a:hover{color:var(--electric)}
.nav-cta{display:flex;gap:.65rem;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.72rem 1.7rem;border-radius:var(--r-full);font-weight:600;font-size:.9rem;border:none;transition:var(--trans);cursor:pointer;white-space:nowrap;line-height:1}
.btn-primary{background:var(--grad-blue);color:#fff;box-shadow:0 4px 15px rgba(26,86,219,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(26,86,219,.5);filter:brightness(1.1)}
.btn-gold{background:var(--grad-gold);color:#fff;box-shadow:0 4px 15px rgba(245,158,11,.35)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(245,158,11,.4)}
.btn-emerald{background:var(--grad-em);color:#fff;box-shadow:0 4px 15px rgba(16,185,129,.3)}
.btn-emerald:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}
.btn-outline:hover{border-color:var(--electric);color:var(--electric);background:rgba(96,165,250,.08)}
.btn-outline-dark{background:transparent;border:2px solid var(--blue);color:var(--blue)}
.btn-outline-dark:hover{background:var(--blue);color:#fff}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15)}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-danger{background:rgba(244,63,94,.1);color:var(--rose);border:1.5px solid rgba(244,63,94,.3)}
.btn-danger:hover{background:var(--rose);color:#fff}
.btn-lg{padding:1rem 2.25rem;font-size:1rem}
.btn-sm{padding:.45rem 1.15rem;font-size:.825rem}
.btn-xs{padding:.32rem .75rem;font-size:.75rem}
.btn-full{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;filter:none!important}

/* Hero */
.hero{min-height:100vh;background:var(--grad-hero);position:relative;overflow:hidden;display:flex;align-items:center}
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding:8rem 0 5rem;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;background:rgba(26,86,219,.25);border:1px solid rgba(96,165,250,.4);color:var(--electric);padding:.35rem 1rem;border-radius:var(--r-full);font-size:.82rem;font-weight:600;margin-bottom:1.5rem;backdrop-filter:blur(10px)}
.hero h1{color:#fff;font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:800;line-height:1.12;margin-bottom:1.2rem}
.hero h1 em{color:var(--gold-l);font-style:normal}
.sub{font-size:clamp(1rem,2vw,1.18rem);color:rgba(255,255,255,.72);max-width:580px;margin:0 auto 2.5rem;line-height:1.75}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:4rem}
.hero-stats{display:flex;justify-content:center;gap:3rem;padding-top:3rem;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.stat-item{text-align:center}
.stat-num{font-family:var(--fd);font-size:2.2rem;font-weight:800;color:var(--gold-l);display:block}
.stat-label{font-size:.82rem;color:rgba(255,255,255,.55);font-weight:500}

/* Floating orbs */
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.12;animation:orbF 8s ease-in-out infinite;pointer-events:none}
.orb-1{width:550px;height:550px;background:var(--blue);top:-120px;right:-100px}
.orb-2{width:380px;height:380px;background:var(--electric);bottom:-60px;left:-60px;animation-delay:-3s}
.orb-3{width:260px;height:260px;background:var(--gold);top:35%;left:25%;animation-delay:-5s}
@keyframes orbF{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}

/* Section header */
.section-header{text-align:center;margin-bottom:3.5rem}
.section-tag{display:inline-block;background:rgba(26,86,219,.1);color:var(--blue);padding:.3rem .9rem;border-radius:var(--r-full);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem}
.section-header h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.65rem}
.section-header p{color:var(--muted);max-width:540px;margin:0 auto;line-height:1.7}

/* Feature cards */
.feature-card{padding:2rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--g200);transition:var(--trans);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-blue);transform:scaleX(0);transition:var(--trans);transform-origin:left}
.feature-card:hover::before{transform:scaleX(1)}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:rgba(26,86,219,.2)}
.feature-icon{width:54px;height:54px;border-radius:var(--r-md);background:var(--grad-blue);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.2rem;box-shadow:0 4px 15px rgba(26,86,219,.25)}
.feature-card h3{font-size:1.1rem;margin-bottom:.5rem}
.feature-card p{color:var(--muted);font-size:.9rem;line-height:1.65}

/* Course cards */
.course-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--g200);transition:var(--trans);display:flex;flex-direction:column}
.course-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(26,86,219,.15);border-color:rgba(26,86,219,.25)}
.course-thumb{height:150px;background:var(--grad-blue);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.course-thumb-emoji{font-size:3.2rem}
.course-badge-free{position:absolute;top:.6rem;right:.6rem;background:var(--emerald);color:#fff;padding:.18rem .6rem;border-radius:var(--r-full);font-size:.72rem;font-weight:700}
.course-body{padding:1.2rem;flex:1}
.course-cat{font-size:.72rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}
.course-title{font-family:var(--fd);font-size:.98rem;font-weight:700;margin-bottom:.55rem;line-height:1.4}
.course-meta{display:flex;gap:.85rem;font-size:.78rem;color:var(--muted);flex-wrap:wrap}
.course-footer{padding:.9rem 1.2rem;border-top:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between;font-size:.78rem}
.course-views{color:var(--muted)}

/* Auth pages */
.auth-page{min-height:100vh;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;overflow:hidden}
.auth-card{background:#fff;border-radius:var(--r-xl);padding:2.5rem;width:100%;max-width:480px;box-shadow:0 25px 80px rgba(0,0,0,.4);position:relative;z-index:2}
.auth-card-wide{max-width:640px}
.auth-logo{text-align:center;margin-bottom:1.75rem}
.auth-logo svg{height:48px;margin:0 auto}
.auth-logo h2{font-size:1.45rem;margin-top:.45rem}
.auth-logo p{color:var(--muted);font-size:.875rem;margin-top:.25rem}
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:1.4rem 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--g200)}
.auth-divider span{color:var(--muted);font-size:.82rem}
.auth-footer{text-align:center;margin-top:1.25rem;font-size:.875rem;color:var(--muted)}
.auth-footer a{color:var(--blue);font-weight:600}

/* Step indicator */
.step-indicator{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}
.step-dot{width:34px;height:34px;border-radius:50%;background:var(--g200);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;position:relative;z-index:1;transition:var(--trans);flex-shrink:0}
.step-dot.active{background:var(--grad-blue);color:#fff;box-shadow:0 0 0 4px var(--blue-glow)}
.step-dot.done{background:var(--emerald);color:#fff}
.step-line{flex:1;height:2px;background:var(--g200);max-width:44px;margin:0 3px;transition:var(--trans)}
.step-line.done{background:var(--emerald)}
.form-step{display:none}.form-step.active{display:block;animation:fsIn .35s ease}
@keyframes fsIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.step-title{font-family:var(--fd);font-size:1.35rem;font-weight:800;margin-bottom:.3rem}
.step-desc{color:var(--muted);font-size:.875rem;margin-bottom:1.6rem;line-height:1.5}

/* Forms */
.form-group{margin-bottom:1.1rem;position:relative}
.form-label{display:block;margin-bottom:.4rem;font-size:.85rem;font-weight:600;color:var(--g600)}
.form-label .req{color:var(--rose)}
.form-control{width:100%;padding:.78rem 1.05rem;border:2px solid var(--g200);border-radius:var(--r-md);font-size:.92rem;color:var(--text);background:#fff;transition:var(--tf);outline:none}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-glow)}
.form-control::placeholder{color:var(--g400)}
.form-control.has-error{border-color:var(--rose)}
.form-error{font-size:.78rem;color:var(--rose);margin-top:.28rem;display:none}
textarea.form-control{resize:vertical;min-height:90px}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;background-size:1.1rem;padding-right:2.4rem}
.form-hint{font-size:.78rem;color:var(--muted);margin-top:.3rem}
.input-wrap{position:relative}
.input-wrap .form-control{padding-left:2.7rem}
.input-icon{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none;font-size:.95rem}
.pw-eye{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--g400);cursor:pointer;padding:0;font-size:.95rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Alerts */
.alert{padding:.9rem 1.1rem;border-radius:var(--r-md);font-size:.875rem;margin-bottom:1.1rem;display:flex;align-items:flex-start;gap:.65rem;border:1px solid transparent;line-height:1.5}
.alert-error{background:rgba(244,63,94,.07);border-color:rgba(244,63,94,.28);color:#be123c}
.alert-success{background:rgba(16,185,129,.07);border-color:rgba(16,185,129,.28);color:#065f46}
.alert-info{background:rgba(26,86,219,.07);border-color:rgba(26,86,219,.22);color:var(--blue-d)}
.alert-warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);color:#92400e}

/* Role cards */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.5rem 0}
.role-card{padding:2rem 1.5rem;border-radius:var(--r-xl);border:2px solid var(--g200);text-align:center;cursor:pointer;transition:var(--trans);background:#fff}
.role-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 12px 35px rgba(26,86,219,.15)}
.role-card.sel{border-color:var(--blue);background:rgba(26,86,219,.04)}
.role-emoji{font-size:2.8rem;margin-bottom:.85rem}
.role-card h3{font-size:1.1rem;margin-bottom:.35rem}
.role-card p{font-size:.82rem;color:var(--muted);line-height:1.5}

/* Radio cards */
.radio-cards{display:flex;flex-direction:column;gap:.7rem}
.radio-card{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border:2px solid var(--g200);border-radius:var(--r-md);cursor:pointer;transition:var(--tf)}
.radio-card:hover{border-color:var(--blue);background:rgba(26,86,219,.02)}
.radio-card.sel{border-color:var(--blue);background:rgba(26,86,219,.05)}
.rc-icon{font-size:1.4rem}
.rc-info h4{font-size:.92rem;font-weight:700}
.rc-info p{font-size:.78rem;color:var(--muted)}
.rc-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--g400);margin-left:auto;flex-shrink:0;transition:var(--tf)}
.radio-card.sel .rc-dot{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 3px #fff}

/* Course circle selection */
.circles-page{background:var(--off);min-height:100vh}
.circles-header{background:var(--grad-hero);padding:3rem 0 2rem;text-align:center;color:#fff}
.circles-header h1{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.5rem}
.circles-header p{color:rgba(255,255,255,.72);font-size:.95rem}
.circles-body{padding:2rem 0}
.circles-grid{display:flex;flex-wrap:wrap;gap:1.35rem;justify-content:center;padding:1.5rem 0 5rem}
.c-circle{width:140px;height:140px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;cursor:pointer;border:3px solid var(--g200);transition:var(--trans);background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.09);animation:cFloat 4.5s ease-in-out infinite;position:relative;text-align:center;padding:.5rem;user-select:none}
.c-circle:nth-child(even){animation-delay:-2.2s}
.c-circle:nth-child(3n){animation-delay:-1.1s}
.c-circle:nth-child(4n){animation-delay:-3.3s}
@keyframes cFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.c-circle .c-icon{font-size:2.2rem}
.c-circle .c-name{font-size:.68rem;font-weight:700;color:var(--g600);line-height:1.25;padding:0 .3rem}
.c-circle.sel{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-glow),0 8px 28px rgba(26,86,219,.2);animation-play-state:paused;transform:translateY(-8px) scale(1.06);background:rgba(26,86,219,.04)}
.c-circle.sel .c-name{color:var(--blue)}
.c-check{position:absolute;top:-6px;right:-6px;width:26px;height:26px;background:var(--blue);border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff;font-size:.75rem;box-shadow:0 2px 8px rgba(26,86,219,.4)}
.c-circle.sel .c-check{display:flex}
.search-bar{display:flex;align-items:center;background:#fff;border:2px solid var(--g200);border-radius:var(--r-full);padding:0 1.1rem;gap:.65rem;transition:var(--tf);max-width:460px;margin:0 auto 2rem;box-shadow:var(--sh-sm)}
.search-bar:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-glow)}
.search-bar input{flex:1;border:none;outline:none;padding:.8rem 0;font-size:.9rem;font-family:inherit;background:transparent}
.sel-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--g200);padding:.9rem 1.75rem;display:flex;align-items:center;justify-content:space-between;z-index:100;box-shadow:0 -4px 18px rgba(0,0,0,.07)}
.sel-count{font-weight:600;color:var(--blue);font-size:.92rem}
.sel-count strong{font-family:var(--fd);font-size:1.25rem}

/* Dashboard layout */
.dash-layout{display:flex;min-height:100vh;background:var(--off)}
.sidebar{background:var(--navy);width:255px;position:fixed;top:0;left:0;bottom:0;z-index:200;overflow-y:auto;display:flex;flex-direction:column;transition:var(--trans)}
.sb-logo{padding:1.35rem 1.35rem .9rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.6rem}
.sb-logo-text{font-family:var(--fd);font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.2}
.sb-logo-text span{color:var(--gold-l)}
.sb-user{padding:.9rem 1.35rem;display:flex;align-items:center;gap:.7rem;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-avatar{width:38px;height:38px;border-radius:50%;background:var(--grad-blue);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;color:#fff;font-size:1rem;flex-shrink:0}
.sb-uname{color:#fff;font-size:.875rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-role{color:var(--electric);font-size:.72rem;font-weight:500}
.sb-nav{padding:.8rem .7rem;flex:1}
.sb-section-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);padding:.5rem .6rem .3rem}
.sb-link{display:flex;align-items:center;gap:.65rem;padding:.65rem .7rem;border-radius:var(--r-md);color:rgba(255,255,255,.6);font-size:.875rem;font-weight:500;transition:var(--tf);cursor:pointer;text-decoration:none;margin-bottom:2px}
.sb-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-link.active{background:rgba(26,86,219,.3);color:var(--electric);font-weight:600}
.sb-link .licon{font-size:1rem;width:18px;text-align:center}
.sb-link .lbadge{margin-left:auto;background:var(--blue);color:#fff;font-size:.68rem;padding:.12rem .45rem;border-radius:var(--r-full);font-weight:700}
.sb-footer{padding:.85rem;border-top:1px solid rgba(255,255,255,.07)}
.sb-footer a{display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.45);font-size:.825rem;padding:.45rem .6rem;border-radius:6px;transition:var(--tf)}
.sb-footer a:hover{color:#fff;background:rgba(255,255,255,.05)}
.dash-main{margin-left:255px;flex:1;display:flex;flex-direction:column}
.dash-topbar{background:#fff;padding:.9rem 1.75rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--g200);position:sticky;top:0;z-index:50;box-shadow:var(--sh-sm)}
.dash-title{font-family:var(--fd);font-size:1.2rem;font-weight:800}
.dash-topbar-right{display:flex;align-items:center;gap:.85rem}
.notif-btn{width:38px;height:38px;border-radius:50%;background:var(--g100);border:none;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;position:relative}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--rose);border:2px solid #fff}
.topbar-avatar{width:36px;height:36px;border-radius:50%;background:var(--grad-blue);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:var(--fd);font-size:.9rem;cursor:pointer}
.menu-btn{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;padding:.25rem}
.dash-content{padding:1.75rem;flex:1}
.dash-welcome{background:var(--grad-hero);border-radius:var(--r-lg);padding:2rem 2.25rem;margin-bottom:1.75rem;color:#fff;position:relative;overflow:hidden}
.dash-welcome h2{font-size:1.5rem;color:#fff;margin-bottom:.3rem}
.dash-welcome p{color:rgba(255,255,255,.75);font-size:.9rem}

/* Stat cards */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.75rem}
.stat-card{background:#fff;border-radius:var(--r-lg);padding:1.35rem;display:flex;align-items:center;gap:1.1rem;border:1px solid var(--g200);transition:var(--trans)}
.stat-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.s-icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.si-blue{background:rgba(26,86,219,.1)}.si-green{background:rgba(16,185,129,.1)}.si-gold{background:rgba(245,158,11,.1)}.si-rose{background:rgba(244,63,94,.1)}
.s-val{font-family:var(--fd);font-size:1.8rem;font-weight:800;line-height:1}
.s-lbl{font-size:.8rem;color:var(--muted);margin-top:.2rem}

/* Progress */
.progress-bar{height:8px;background:var(--g200);border-radius:var(--r-full);overflow:hidden}
.progress-fill{height:100%;background:var(--grad-blue);border-radius:var(--r-full);transition:width .8s cubic-bezier(.4,0,.2,1)}

/* Cards */
.card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--g200);overflow:hidden}
.card-header{padding:1.1rem 1.5rem;border-bottom:1px solid var(--g100);font-family:var(--fd);font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:space-between}
.card-body{padding:1.5rem}

/* My courses list */
.my-course-item{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--g100);align-items:flex-start}
.my-course-item:last-child{border-bottom:none}
.mci-icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--grad-blue);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.mci-body{flex:1;min-width:0}
.mci-title{font-weight:700;font-size:.9rem;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mci-meta{font-size:.78rem;color:var(--muted);margin-bottom:.5rem}
.mci-actions{margin-top:.5rem}

/* Learning layout */
.learn-wrap{display:flex;flex-direction:column;min-height:100vh;background:var(--g100)}
.learn-topbar{background:var(--navy);padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.learn-topbar-left{display:flex;align-items:center;gap:1rem}
.learn-topbar a{color:rgba(255,255,255,.65);font-size:.85rem;text-decoration:none;transition:var(--tf)}
.learn-topbar a:hover{color:#fff}
.learn-course-title{color:#fff;font-family:var(--fd);font-weight:700;font-size:.95rem}
.learn-body{display:grid;grid-template-columns:1fr 320px;flex:1}
.learn-main{background:#fff}
.video-wrap{background:#000;aspect-ratio:16/9;width:100%}
.video-wrap iframe{width:100%;height:100%;border:none;display:block}
.lesson-content-area{padding:2rem}
.lesson-content-area h2{font-size:1.4rem;margin-bottom:1rem}
.lesson-content-area p{color:var(--g600);line-height:1.75;margin-bottom:1rem}
.lesson-content-area pre{background:var(--g800);color:#e2e8f0;padding:1.1rem;border-radius:var(--r-md);overflow-x:auto;font-size:.85rem;margin:1rem 0}
.lesson-content-area code{background:var(--g100);padding:.15rem .4rem;border-radius:4px;font-size:.85rem;color:var(--blue-d)}
.lesson-actions{display:flex;gap:.85rem;align-items:center;padding:1.25rem 2rem;border-top:1px solid var(--g100);background:#fff}
.lesson-sidebar{background:#fff;border-left:1px solid var(--g200);overflow-y:auto;height:calc(100vh - 60px);position:sticky;top:60px}
.ls-header{padding:1.1rem 1.4rem;border-bottom:1px solid var(--g200);font-family:var(--fd);font-weight:700;font-size:.9rem}
.ls-item{display:flex;align-items:center;gap:.65rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--g100);cursor:pointer;transition:var(--tf);text-decoration:none;color:var(--text)}
.ls-item:hover{background:var(--off)}
.ls-item.active{background:rgba(26,86,219,.05);border-right:3px solid var(--blue)}
.ls-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.7rem;background:var(--g200);color:var(--muted);font-weight:700}
.ls-num.done{background:var(--emerald);color:#fff}
.ls-num.cur{background:var(--blue);color:#fff}
.ls-title{font-size:.84rem;font-weight:500;line-height:1.4;flex:1}
.ls-dur{font-size:.72rem;color:var(--muted);flex-shrink:0}

/* Quiz */
.quiz-box{background:var(--off);border-radius:var(--r-lg);padding:1.75rem;margin-top:1.5rem;border:1px solid var(--g200)}
.quiz-title{font-family:var(--fd);font-size:1.15rem;font-weight:800;margin-bottom:1.4rem;display:flex;align-items:center;gap:.5rem}
.q-block{margin-bottom:1.4rem;padding:1.25rem;background:#fff;border-radius:var(--r-md);border:1px solid var(--g200)}
.q-block:last-child{margin-bottom:0}
.q-text{font-weight:600;margin-bottom:.85rem;line-height:1.55;font-size:.92rem}
.q-num{display:inline-flex;width:22px;height:22px;background:var(--blue);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;margin-right:.4rem;vertical-align:middle;flex-shrink:0}
.q-options{display:flex;flex-direction:column;gap:.5rem}
.q-opt{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border:2px solid var(--g200);border-radius:var(--r-md);cursor:pointer;transition:var(--tf);font-size:.875rem}
.q-opt:hover{border-color:var(--blue);background:rgba(26,86,219,.025)}
.q-opt.sel{border-color:var(--blue);background:rgba(26,86,219,.05)}
.q-opt.correct{border-color:var(--emerald);background:rgba(16,185,129,.08)}
.q-opt.wrong{border-color:var(--rose);background:rgba(244,63,94,.05)}
.q-dot{width:18px;height:18px;border-radius:4px;border:2px solid var(--g300);flex-shrink:0;transition:var(--tf)}
.q-opt[data-t="single"] .q-dot{border-radius:50%}
.q-opt.sel .q-dot{background:var(--blue);border-color:var(--blue)}
.q-opt.correct .q-dot{background:var(--emerald);border-color:var(--emerald)}
.q-opt.wrong .q-dot{background:var(--rose);border-color:var(--rose)}
.q-explanation{margin-top:.65rem;padding:.65rem .9rem;background:rgba(26,86,219,.05);border-radius:var(--r-md);font-size:.825rem;color:var(--blue-d);border-left:3px solid var(--blue);display:none;line-height:1.5}
.q-explanation.show{display:block}
.q-type-label{font-size:.7rem;color:var(--muted);margin-bottom:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* AI Chat FAB */
.ai-fab{position:fixed;bottom:2rem;right:2rem;width:58px;height:58px;border-radius:50%;background:var(--grad-blue);border:none;box-shadow:0 4px 20px rgba(26,86,219,.4);color:#fff;font-size:1.4rem;cursor:pointer;z-index:500;transition:var(--trans);display:flex;align-items:center;justify-content:center}
.ai-fab:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(26,86,219,.5)}
.ai-fab-label{position:absolute;right:100%;margin-right:.75rem;background:var(--navy);color:#fff;padding:.3rem .75rem;border-radius:var(--r-full);font-size:.78rem;white-space:nowrap;opacity:0;transition:var(--tf);pointer-events:none}
.ai-fab:hover .ai-fab-label{opacity:1}
.ai-win{position:fixed;bottom:5.5rem;right:2rem;width:360px;max-height:480px;background:#fff;border-radius:var(--r-xl);box-shadow:0 20px 60px rgba(0,0,0,.2);z-index:499;display:none;flex-direction:column;overflow:hidden;border:1px solid var(--g200)}
.ai-win.open{display:flex;animation:aiOpen .3s ease}
@keyframes aiOpen{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.ai-header{background:var(--grad-blue);padding:.9rem 1.1rem;color:#fff;display:flex;align-items:center;gap:.65rem}
.ai-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.ai-header h4{font-size:.9rem;font-weight:700}
.ai-header p{font-size:.72rem;opacity:.8}
.ai-close-btn{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;font-size:1.1rem;opacity:.75;padding:0;line-height:1}
.ai-msgs{flex:1;overflow-y:auto;padding:.85rem;display:flex;flex-direction:column;gap:.65rem}
.ai-msg{max-width:84%;padding:.55rem .85rem;border-radius:var(--r-lg);font-size:.85rem;line-height:1.55}
.ai-msg.bot{background:var(--g100);color:var(--text);border-bottom-left-radius:4px;align-self:flex-start}
.ai-msg.user{background:var(--grad-blue);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.typing-dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted);animation:tDot 1.4s ease-in-out infinite;margin-right:2px}
.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tDot{0%,80%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}
.ai-input-area{padding:.65rem;border-top:1px solid var(--g200);display:flex;gap:.45rem}
.ai-text{flex:1;padding:.55rem .85rem;border:1.5px solid var(--g200);border-radius:var(--r-full);font-size:.85rem;outline:none;font-family:inherit}
.ai-text:focus{border-color:var(--blue)}
.ai-send-btn{width:36px;height:36px;border-radius:50%;background:var(--grad-blue);border:none;color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Info/success pages */
.info-page{min-height:100vh;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}
.info-card{background:#fff;border-radius:var(--r-xl);padding:3rem 2.5rem;max-width:550px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3);position:relative;z-index:2}
.info-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto 1.5rem}
.info-icon.success{background:rgba(16,185,129,.1)}
.info-icon.pending{background:rgba(245,158,11,.1)}

/* Footer */
.site-footer{background:var(--midnight);color:rgba(255,255,255,.6);padding:4rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{font-size:.875rem;line-height:1.7;max-width:270px;margin-top:.85rem}
.footer-col h4{color:#fff;font-size:.88rem;font-weight:700;margin-bottom:.9rem;font-family:var(--fd)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-col ul a{color:rgba(255,255,255,.5);font-size:.85rem;transition:var(--tf)}
.footer-col ul a:hover{color:var(--electric)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.78rem}
.footer-badges{display:flex;gap:.6rem;flex-wrap:wrap}
.footer-badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:.25rem .7rem;border-radius:var(--r-full);font-size:.72rem;color:rgba(255,255,255,.45)}

/* Badges */
.badge-free{background:rgba(16,185,129,.1);color:var(--emerald);padding:.22rem .65rem;border-radius:var(--r-full);font-weight:700;font-size:.73rem}
.badge-blue{background:rgba(26,86,219,.1);color:var(--blue);padding:.22rem .65rem;border-radius:var(--r-full);font-size:.73rem;font-weight:700}
.badge-green{background:rgba(16,185,129,.1);color:var(--emerald);padding:.22rem .65rem;border-radius:var(--r-full);font-size:.73rem;font-weight:700}
.badge-gold{background:rgba(245,158,11,.1);color:#d97706;padding:.22rem .65rem;border-radius:var(--r-full);font-size:.73rem;font-weight:700}
.badge-rose{background:rgba(244,63,94,.1);color:var(--rose);padding:.22rem .65rem;border-radius:var(--r-full);font-size:.73rem;font-weight:700}
.badge-gray{background:var(--g100);color:var(--muted);padding:.22rem .65rem;border-radius:var(--r-full);font-size:.73rem;font-weight:700}

/* "For You" page */
.foryou-course-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--g200);overflow:hidden;transition:var(--trans);cursor:pointer}
.foryou-course-card:hover{transform:translateY(-4px);box-shadow:0 12px 35px rgba(26,86,219,.13);border-color:rgba(26,86,219,.2)}
.fyc-head{padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;border-bottom:1px solid var(--g100)}
.fyc-icon{width:56px;height:56px;border-radius:var(--r-md);background:var(--grad-blue);display:flex;align-items:center;justify-content:center;font-size:1.65rem;flex-shrink:0}
.fyc-info h3{font-size:1rem;font-weight:700;margin-bottom:.25rem;line-height:1.35}
.fyc-info p{font-size:.8rem;color:var(--muted);line-height:1.5}
.fyc-meta{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.5rem}
.fyc-foot{padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;font-size:.82rem}
.fyc-stat{color:var(--muted)}
.fyc-enroll-btn{background:var(--grad-blue);color:#fff;border:none;padding:.42rem 1rem;border-radius:var(--r-full);font-size:.8rem;font-weight:700;cursor:pointer;transition:var(--tf)}
.fyc-enroll-btn:hover{filter:brightness(1.1)}
.fyc-enroll-btn.enrolled{background:var(--grad-em)}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .6s ease both}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--g100)}
::-webkit-scrollbar-thumb{background:var(--g400);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--g600)}

/* Utilities */
.text-center{text-align:center}.text-muted{color:var(--muted)}.text-blue{color:var(--blue)}.text-emerald{color:var(--emerald)}.text-gold{color:var(--gold)}
.fw-700{font-weight:700}.fw-800{font-weight:800}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.mb-5{margin-bottom:3rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.w-full{width:100%}.hidden{display:none!important}
.divider{height:1px;background:var(--g200);margin:1.25rem 0}
.glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:1.75rem;backdrop-filter:blur(10px)}
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:var(--r-full);font-size:.75rem;font-weight:600}

/* File input */
.file-inp-wrap{border:2px dashed var(--g300);border-radius:var(--r-md);padding:1.25rem;text-align:center;cursor:pointer;transition:var(--tf)}
.file-inp-wrap:hover{border-color:var(--blue);background:rgba(26,86,219,.02)}
.file-inp-wrap input{display:none}
.file-inp-icon{font-size:1.75rem;margin-bottom:.35rem}
.file-inp-label{font-size:.85rem;color:var(--muted)}
.file-inp-label span{color:var(--blue);font-weight:600}
.file-name{font-size:.8rem;color:var(--blue);margin-top:.35rem;font-weight:500}

/* Responsive */
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.learn-body{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.dash-main{margin-left:0}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.role-grid{grid-template-columns:1fr}.hero-stats{gap:1.5rem}.footer-grid{grid-template-columns:1fr;gap:2rem}.nav-links{display:none}.ai-win{right:.5rem;left:.5rem;width:auto}.circles-grid{gap:.85rem}.c-circle{width:110px;height:110px}.menu-btn{display:flex}.form-row{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.auth-card{padding:1.75rem 1.25rem}.dash-content{padding:1rem}.hero-cta{flex-direction:column;align-items:center}.c-circle{width:96px;height:96px}.stats-row{grid-template-columns:1fr}}
/* Tabs */
.tab-nav{display:flex;gap:.25rem;border-bottom:2px solid var(--g200);margin-bottom:1.5rem;flex-wrap:wrap}
.tab-btn{padding:.6rem 1.15rem;border:none;background:none;font-family:inherit;font-size:.875rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:var(--tf);border-radius:var(--r-sm) var(--r-sm) 0 0}
.tab-btn:hover{color:var(--blue);background:rgba(26,86,219,.04)}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);background:rgba(26,86,219,.05)}
.tab-pane{display:none;animation:fadeUp .3s ease}
.tab-pane.active{display:block}

/* Mobile nav toggle (hamburger) */
.nav-mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;z-index:1001}
.nav-mobile-toggle span{display:block;width:23px;height:2px;background:#fff;border-radius:2px;transition:var(--trans);transform-origin:center}
.nav-mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-mobile-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:768px){.nav-mobile-toggle{display:flex}.nav-links{display:none!important}}

/* Lesson content (alias for lesson-content-area) */
.lesson-content{padding:1.5rem 2rem}
.lesson-content h1,.lesson-content h2{font-size:1.4rem;margin-bottom:1rem}
.lesson-content p{color:var(--g600);line-height:1.8;margin-bottom:1rem}
.lesson-content pre{background:var(--g800);color:#e2e8f0;padding:1.1rem;border-radius:var(--r-md);overflow-x:auto;font-size:.85rem;margin:1rem 0}
.lesson-content code{background:var(--g100);padding:.15rem .4rem;border-radius:4px;font-size:.85rem;color:var(--blue-d)}
.lesson-content ul,.lesson-content ol{padding-left:1.5rem;margin-bottom:1rem;line-height:1.8;color:var(--g600)}
.lesson-content blockquote{border-left:4px solid var(--blue);padding:.75rem 1rem;background:rgba(26,86,219,.05);border-radius:0 var(--r-md) var(--r-md) 0;margin:1rem 0}
.lesson-content img{max-width:100%;border-radius:var(--r-md);margin:1rem 0}
.lesson-content table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
.lesson-content th,.lesson-content td{padding:.65rem .9rem;border:1px solid var(--g200);text-align:left}
.lesson-content th{background:var(--off);font-weight:700}

/* Enhanced page animations */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.anim-slide-left{animation:slideInLeft .4s ease both}
.anim-slide-right{animation:slideInRight .4s ease both}
.anim-scale-in{animation:scaleIn .35s ease both}

/* Sidebar link hover effect */
.sb-link{position:relative;overflow:hidden}
.sb-link::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--electric);border-radius:0 3px 3px 0;transition:height .2s ease}
.sb-link:hover::after,.sb-link.active::after{height:60%}

/* Card entrance animations */
.stat-card{animation:fadeUp .5s ease both}
.stat-card:nth-child(2){animation-delay:.07s}
.stat-card:nth-child(3){animation-delay:.14s}
.stat-card:nth-child(4){animation-delay:.21s}

/* Progress bar animated fill */
@keyframes fillBar{from{width:0}to{width:var(--fill)}}

/* Course card stagger */
.course-card{animation:fadeUp .5s ease both}
.grid-4 .course-card:nth-child(2){animation-delay:.06s}
.grid-4 .course-card:nth-child(3){animation-delay:.12s}
.grid-4 .course-card:nth-child(4){animation-delay:.18s}

/* Notification bell shake */
@keyframes bellShake{0%,100%{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
.notif-bell-anim{animation:bellShake .6s ease}

/* Dashboard welcome orb float */
.dash-welcome .orb{animation:orbF 6s ease-in-out infinite;opacity:.15}

/* Smooth sidebar open on mobile */
.sidebar{transition:transform .3s cubic-bezier(.4,0,.2,1)}

/* Learning page layout override - supports inline grid override */
.learn-wrap>.learn-main{flex:1}

/* Course thumb must be position:relative for absolute children */
.course-thumb{position:relative}

/* Improved AI chat window */
.ai-win{border:1px solid var(--g200);box-shadow:0 25px 60px rgba(0,0,0,.18)}
.ai-msg.bot{border:1px solid var(--g200)}
.ai-msg.user{box-shadow:0 2px 8px rgba(26,86,219,.2)}

/* Learning page mobile lesson list button */
.ls-mobile-btn{display:none;position:fixed;bottom:6rem;left:1.25rem;z-index:450;background:var(--navy);color:#fff;border:none;border-radius:var(--r-full);padding:.5rem 1rem;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);gap:.4rem;align-items:center}
@media(max-width:900px){.ls-mobile-btn{display:flex}}

/* Profile page layout improvements */
@media(max-width:640px){.profile-layout{grid-template-columns:1fr!important}}

/* =====================================================
   FLUID LIQUID BLUE WATER THEME — MIRA 2025
   ===================================================== */

/* Water shimmer keyframes */
@keyframes waterFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes liquidRipple {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes waveFloat {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  33%  { transform: translateY(-12px) rotate(1deg); }
  66%  { transform: translateY(6px) rotate(-1deg); }
}
@keyframes shimmerWave {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes bubbleRise {
  0%   { transform: translateY(0) scale(1); opacity: .6; }
  100% { transform: translateY(-80px) scale(1.3); opacity: 0; }
}

/* Update CSS variables for water palette */
:root {
  --water-deep:   #020b18;
  --water-dark:   #041830;
  --water-mid:    #063660;
  --water-bright: #0a6eb4;
  --water-light:  #2196f3;
  --water-glow:   #40c4ff;
  --water-foam:   #e3f2fd;
  --water-teal:   #00bcd4;
  --water-aurora: #00e5ff;
  --liquid-grad:  linear-gradient(135deg, #020b18 0%, #041830 25%, #063660 55%, #0a6eb4 80%, #2196f3 100%);
  --water-shimmer:linear-gradient(90deg, rgba(64,196,255,0) 0%, rgba(64,196,255,.4) 50%, rgba(64,196,255,0) 100%);
  --grad-hero:    linear-gradient(135deg, #020b18 0%, #041830 35%, #063660 65%, #1237a0 100%);
  --grad-blue:    linear-gradient(135deg, #0a6eb4, #2196f3, #40c4ff);
}

/* ── HERO: liquid water background ── */
.hero {
  background: var(--liquid-grad);
  background-size: 300% 300%;
  animation: waterFlow 12s ease infinite;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(0,188,212,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(33,150,243,.22) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(64,196,255,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,60 C180,100 360,0 540,50 C720,100 900,20 1080,55 C1260,90 1380,30 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  z-index: 3;
  pointer-events: none;
}
.hero-content { z-index: 4; }

/* ── Liquid ORBs ── */
.orb {
  filter: blur(70px);
  animation: waveFloat 9s ease-in-out infinite;
  mix-blend-mode: screen;
}
.orb-1 { background: radial-gradient(circle, #40c4ff 0%, #0a6eb4 60%, transparent 100%); animation-delay: 0s; }
.orb-2 { background: radial-gradient(circle, #00e5ff 0%, #00bcd4 60%, transparent 100%); animation-delay: -3.5s; }
.orb-3 { background: radial-gradient(circle, #2196f3 0%, #1565c0 60%, transparent 100%); animation-delay: -6s; }

/* ── NAVBAR: liquid glass ── */
.navbar {
  background: rgba(2,11,24,.0);
  backdrop-filter: blur(0px);
}
.navbar.scrolled {
  background: rgba(4,24,48,.88);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(64,196,255,.18);
  box-shadow: 0 4px 30px rgba(0,100,200,.25), inset 0 1px 0 rgba(64,196,255,.15);
}

/* ── SIDEBAR: deep water ── */
.sidebar {
  background: linear-gradient(180deg, var(--water-deep) 0%, var(--water-dark) 50%, #030f22 100%);
  border-right: 1px solid rgba(64,196,255,.12);
  box-shadow: 4px 0 30px rgba(0,50,120,.35);
}
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(33,150,243,.15) 0%, transparent 60%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(0,188,212,.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }

/* ── AUTH PAGES: water backdrop ── */
.auth-page {
  background: var(--liquid-grad);
  background-size: 300% 300%;
  animation: waterFlow 14s ease infinite;
}
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 70%, rgba(0,188,212,.2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 75% 25%, rgba(33,150,243,.18) 0%, transparent 55%);
  pointer-events: none;
}

/* ── AUTH CARD: liquid glass effect ── */
.auth-card {
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(64,196,255,.25);
  box-shadow:
    0 30px 80px rgba(0,50,150,.35),
    0 0 0 1px rgba(64,196,255,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
}

/* ── BUTTONS: liquid water shimmer ── */
.btn-primary {
  background: linear-gradient(135deg, #0a6eb4, #2196f3, #40c4ff);
  background-size: 200% 200%;
  animation: waterFlow 4s ease infinite;
  box-shadow: 0 4px 20px rgba(33,150,243,.45), inset 0 1px 0 rgba(255,255,255,.2);
  border: 1px solid rgba(64,196,255,.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(33,150,243,.6), 0 0 20px rgba(64,196,255,.3);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--water-shimmer);
  background-size: 200% 100%;
  animation: shimmerWave 2.5s ease infinite;
  border-radius: inherit;
  pointer-events: none;
}
.btn-primary { position: relative; overflow: hidden; }

/* ── CARDS: water surface glass ── */
.card {
  background: #fff;
  border: 1px solid rgba(33,150,243,.12);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 20px rgba(10,110,180,.08), 0 1px 0 rgba(64,196,255,.1);
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #40c4ff, #2196f3, #00e5ff);
  background-size: 200% 100%;
  animation: shimmerWave 3s ease infinite;
}
.card { position: relative; }

/* ── STAT CARDS: liquid blue tints ── */
.stat-card {
  background: linear-gradient(135deg, rgba(33,150,243,.06) 0%, rgba(64,196,255,.04) 100%);
  border: 1px solid rgba(33,150,243,.15);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 12px rgba(10,110,180,.08);
  transition: var(--trans);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: -10px; right: -10px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64,196,255,.2), transparent 70%);
  pointer-events: none;
}
.stat-card:hover {
  border-color: rgba(33,150,243,.35);
  box-shadow: 0 8px 25px rgba(10,110,180,.15);
  transform: translateY(-2px);
}

/* ── ICONS ── */
.s-icon { border-radius: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.si-blue  { background: linear-gradient(135deg, rgba(33,150,243,.2), rgba(64,196,255,.15)); border: 1px solid rgba(33,150,243,.25); }
.si-green { background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(0,188,212,.1));  border: 1px solid rgba(16,185,129,.2); }
.si-gold  { background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(255,193,7,.1));  border: 1px solid rgba(245,158,11,.2); }
.si-rose  { background: linear-gradient(135deg, rgba(244,63,94,.12), rgba(233,30,99,.08));  border: 1px solid rgba(244,63,94,.18); }

/* ── COURSE CARDS: water thumbnail ── */
.course-thumb { background: linear-gradient(135deg, #0a6eb4, #2196f3); }
.course-card:hover {
  border-color: rgba(33,150,243,.35);
  box-shadow: 0 12px 40px rgba(10,110,180,.18);
}

/* ── FEATURE CARDS: water glow border ── */
.feature-card:hover {
  border-color: rgba(33,150,243,.3);
  box-shadow: 0 12px 40px rgba(10,110,180,.15), 0 0 0 1px rgba(64,196,255,.1);
}
.feature-card::before { background: linear-gradient(90deg, #40c4ff, #2196f3, #00e5ff); }
.feature-icon { background: linear-gradient(135deg, #0a6eb4, #40c4ff); }

/* ── DASHBOARD TOPBAR ── */
.dash-topbar {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(33,150,243,.12);
  box-shadow: 0 2px 12px rgba(10,110,180,.07);
}

/* ── WELCOME BANNER: deep water ── */
.dash-welcome {
  background: linear-gradient(135deg, #020b18 0%, #041830 40%, #063660 70%, #0a6eb4 100%);
  background-size: 300% 300%;
  animation: waterFlow 10s ease infinite;
  border-radius: var(--r-xl);
  padding: 2rem 2.5rem;
  color: #fff;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(64,196,255,.2);
  box-shadow: 0 8px 30px rgba(0,50,120,.3);
}
.dash-welcome::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 60%; height: 160%;
  background: radial-gradient(ellipse, rgba(64,196,255,.18) 0%, transparent 70%);
  pointer-events: none;
  animation: waveFloat 7s ease-in-out infinite;
}
.dash-welcome::after {
  content: '';
  position: absolute;
  bottom: -20%; right: -5%;
  width: 40%; height: 120%;
  background: radial-gradient(ellipse, rgba(0,229,255,.12) 0%, transparent 70%);
  pointer-events: none;
  animation: waveFloat 9s ease-in-out infinite reverse;
}
.dash-welcome h2 { color: #fff; position: relative; z-index: 2; }
.dash-welcome p  { color: rgba(255,255,255,.8); position: relative; z-index: 2; }

/* ── SELECT COURSES PAGE: water backdrop ── */
.sel-page body,
body.sel-bg {
  background: linear-gradient(135deg, #020b18, #041830, #063660) !important;
}

/* ── CIRCLE SELECTION: water orbs ── */
.c-circle {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  border: 2px solid rgba(33,150,243,.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  cursor: pointer;
  transition: var(--trans);
  position: relative;
  /* NO overflow:hidden — it blocks child pointer events and click bubbling */
  box-shadow: 0 4px 16px rgba(10,110,180,.1);
  user-select: none;
  -webkit-user-select: none;
}
.c-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(64,196,255,.15), transparent 70%);
  opacity: 0;
  transition: var(--trans);
  pointer-events: none;
}
.c-circle:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(33,150,243,.5); box-shadow: 0 10px 30px rgba(10,110,180,.25); }
.c-circle:hover::before { opacity: 1; }
.c-circle.sel {
  background: linear-gradient(135deg, #0a6eb4, #2196f3);
  border-color: #40c4ff;
  box-shadow: 0 8px 25px rgba(33,150,243,.45), 0 0 0 3px rgba(64,196,255,.25);
  transform: translateY(-3px) scale(1.03);
}
.c-circle.sel .c-name { color: #fff; }
/* All children must pass clicks through to parent circle */
.c-circle * { pointer-events: none; }
.c-check { position: absolute; top: .35rem; right: .5rem; color: rgba(255,255,255,.9); font-size: .7rem; font-weight: 800; opacity: 0; transition: var(--tf); }
.c-circle.sel .c-check { opacity: 1; }
.c-icon { font-size: 2rem; transition: var(--tf); }
.c-name { font-size: .72rem; font-weight: 700; color: var(--g600); text-align: center; padding: 0 .35rem; line-height: 1.3; }

/* ── PROGRESS BAR: liquid water ── */
.progress-bar { background: rgba(33,150,243,.1); border-radius: 99px; height: 6px; overflow: hidden; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a6eb4, #2196f3, #40c4ff);
  background-size: 200% 100%;
  animation: shimmerWave 2s ease infinite;
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(33,150,243,.4);
}

/* ── FORMS: water-focused inputs ── */
.form-control:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 4px rgba(33,150,243,.15), 0 0 12px rgba(64,196,255,.12);
}

/* ── SECTION TAGS: water blue ── */
.section-tag {
  background: rgba(33,150,243,.1);
  color: #0a6eb4;
  border: 1px solid rgba(33,150,243,.2);
}

/* ── FOOTER: deep ocean ── */
.site-footer {
  background: linear-gradient(180deg, #020b18 0%, #020810 100%);
  border-top: 1px solid rgba(64,196,255,.1);
}
.footer-col ul a:hover { color: var(--water-glow); }

/* ── GLASS CARDS: water glass ── */
.glass {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(64,196,255,.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 30px rgba(0,0,0,.2);
}

/* ── LEARNING PAGE: water sidebar ── */
.lesson-sidebar {
  background: linear-gradient(180deg, #020b18 0%, #041830 100%);
  border-left: 1px solid rgba(64,196,255,.12);
}
.ls-item { color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(64,196,255,.08); }
.ls-item:hover, .ls-item.active { background: rgba(33,150,243,.15); color: #fff; }
.ls-num { background: rgba(33,150,243,.2); color: rgba(255,255,255,.8); }
.ls-num.done { background: linear-gradient(135deg, #059669, #10b981); color: #fff; }

/* ── SEL BAR: liquid button bar ── */
.sel-bar {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(33,150,243,.15);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -4px 20px rgba(10,110,180,.1);
}

/* ── SEARCH BAR ── */
.search-bar {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(33,150,243,.2);
  border-radius: var(--r-full);
  padding: .65rem 1.25rem;
  box-shadow: 0 2px 12px rgba(10,110,180,.08);
  transition: var(--trans);
}
.search-bar:focus-within {
  border-color: #2196f3;
  box-shadow: 0 4px 20px rgba(33,150,243,.2);
}
.search-bar input {
  border: none; background: none; outline: none;
  font-size: .9rem; flex: 1; color: var(--text);
}

/* ── TABS: water blue active ── */
.tab-btn.active { color: #0a6eb4; border-bottom-color: #2196f3; }
.tab-btn:hover { color: #0a6eb4; }

/* ── MODAL: water backdrop ── */
.modal-overlay { background: rgba(2,11,24,.75); backdrop-filter: blur(8px); }
.modal-card {
  border: 1px solid rgba(64,196,255,.2);
  box-shadow: 0 30px 80px rgba(0,50,150,.35);
}

/* Scrollbar: water blue */
::-webkit-scrollbar-thumb { background: rgba(33,150,243,.4); }
::-webkit-scrollbar-thumb:hover { background: rgba(33,150,243,.7); }
::-webkit-scrollbar-track { background: rgba(33,150,243,.05); }

/* ── WATER BUBBLE decorative elements ── */
.hero-badge {
  background: rgba(33,150,243,.2);
  border: 1px solid rgba(64,196,255,.4);
  color: var(--water-glow);
  backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════ */
.dark-mode{
  --text:#e2e8f0;--muted:#94a3b8;--off:#0d1117;--white:#161b22;
  --g100:#1e2633;--g200:#2d3748;--g300:#4a5568;--g400:#718096;
  --g600:#a0aec0;--g800:#e2e8f0;
}
.dark-mode body{ background:#0d1117; color:#e2e8f0; }
.dark-mode .sidebar{ background:#0a1628; border-color:#1e2633; }
.dark-mode .dash-main{ background:#0f1923; }
.dark-mode .dash-topbar,.dark-mode .lesson-sidebar,.dark-mode .learn-topbar{ background:#161b22; border-color:#2d3748; }
.dark-mode .profile-card,.dark-mode .tab-box,.dark-mode .acard{ background:#161b22; border-color:#2d3748; }
.dark-mode .quiz-box,.dark-mode .q-block{ background:#1e2633; border-color:#2d3748; }
.dark-mode .q-opt{ background:#0d1117; border-color:#2d3748; color:#e2e8f0; }
.dark-mode .q-opt:hover{ border-color:var(--blue); }
.dark-mode input,.dark-mode select,.dark-mode textarea{ background:#1e2633; border-color:#2d3748; color:#e2e8f0; }
.dark-mode .form-control,.dark-mode .fg input,.dark-mode .fg select,.dark-mode .fg textarea{ background:#1e2633; border-color:#2d3748; color:#e2e8f0; }
.dark-mode .card,.dark-mode .course-card,.dark-mode .stat-card{ background:#161b22; border-color:#2d3748; }
.dark-mode .ls-item{ color:#e2e8f0; }
.dark-mode .ls-item:hover,.dark-mode .ls-item.active{ background:#1e2633; }
.dark-mode .lesson-content > div{ background:#161b22; border-color:#2d3748; color:#e2e8f0; }
.dark-mode .navbar.scrolled{ background:rgba(10,22,40,.97); }
.dark-mode .alert{ background:#1e2633; border-color:#2d3748; }
.dark-mode h1,.dark-mode h2,.dark-mode h3,.dark-mode h4,.dark-mode h5,.dark-mode h6{ color:#e2e8f0; }
.dark-mode .notif-card{ background:#161b22; border-color:#2d3748; }
.dark-mode .video-learning-modes{ background:#161b22; border-color:#2d3748; }
.dark-mode .btn-outline-dark{ border-color:#3b82f6; color:#3b82f6; }

/* Dark mode toggle button */
#darkModeBtn{
  background:transparent;border:1.5px solid var(--g300);border-radius:var(--r-full);
  padding:.35rem .75rem;font-size:1rem;cursor:pointer;transition:var(--tf);
  color:var(--muted);
}
#darkModeBtn:hover{ background:var(--g100); }

/* ═══════════════════════════════════════════
   LEARNING MODES
═══════════════════════════════════════════ */
.learning-modes-bar{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin-bottom:1.25rem;padding:.75rem 1rem;
  background:var(--g100);border-radius:var(--r-md);
  border:1px solid var(--g200);
}
.lmode-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .9rem;border-radius:var(--r-full);font-size:.8rem;
  font-weight:600;border:1.5px solid var(--g300);background:#fff;
  color:var(--g600);cursor:pointer;transition:var(--tf);
}
.lmode-btn:hover,.lmode-btn.active{ background:var(--blue);color:#fff;border-color:var(--blue); }
.dark-mode .lmode-btn{ background:#1e2633;border-color:#2d3748;color:#94a3b8; }
.dark-mode .lmode-btn:hover,.dark-mode .lmode-btn.active{ background:var(--blue);color:#fff; }

/* Notes panel */
.lesson-notes-panel{
  background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);
  padding:1.5rem;margin-bottom:1.5rem;display:none;
}
.lesson-notes-panel.open{ display:block; }
.dark-mode .lesson-notes-panel{ background:#161b22;border-color:#2d3748; }
.notes-textarea{
  width:100%;min-height:140px;border:1px solid var(--g200);border-radius:var(--r-sm);
  padding:.75rem;font-family:var(--fb);font-size:.88rem;resize:vertical;
  color:var(--text);background:#f8faff;
}
.dark-mode .notes-textarea{ background:#0d1117;border-color:#2d3748;color:#e2e8f0; }

/* Flashcard mode */
.flashcard-container{ perspective:1000px;margin-bottom:1.5rem;display:none; }
.flashcard-container.open{ display:block; }
.flashcard{
  width:100%;min-height:200px;background:var(--grad-blue);border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;padding:2rem;text-align:center;
  transition:transform .6s;transform-style:preserve-3d;position:relative;
  box-shadow:var(--sh-lg);
}
.flashcard.flipped{ transform:rotateY(180deg); }
.fc-front,.fc-back{
  backface-visibility:hidden;position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;
}
.fc-back{ transform:rotateY(180deg);background:var(--grad-gold);border-radius:var(--r-lg); }
.fc-hint{ font-size:.75rem;opacity:.7;margin-top:1rem; }

/* Instructor suspension warning */
.policy-banner{
  background:linear-gradient(135deg,#fff7ed,#fef3c7);
  border:1.5px solid #f59e0b;border-radius:var(--r-md);
  padding:1.1rem 1.25rem;margin-bottom:1.5rem;
  display:flex;gap:.75rem;align-items:flex-start;
}
.dark-mode .policy-banner{ background:#1c1805;border-color:#b45309; }