/* ═══════════════════════════════════════════════
   LearnSphere — style.css
   Theme ON  = Indigo + Teal  (#6366f1 + #14b8a6)
   Theme OFF = Emerald + Violet (#059669 + #7c3aed)
═══════════════════════════════════════════════ */

:root {
  --c1:#6366f1; --c2:#14b8a6;
  --grad:linear-gradient(135deg,#6366f1,#14b8a6);
  --bg:#0a0f1e; --bg2:#0f1629;
  --card:rgba(99,102,241,0.08);
  --border:rgba(99,102,241,0.25);
  --text:#f1f5f9; --muted:#94a3b8;
  --shadow:rgba(99,102,241,0.3);
}
[data-theme="off"] {
  --c1:#059669; --c2:#7c3aed;
  --grad:linear-gradient(135deg,#059669,#7c3aed);
  --bg:#030d07; --bg2:#060f0c;
  --card:rgba(5,150,105,0.08);
  --border:rgba(5,150,105,0.25);
  --text:#ecfdf5; --muted:#6ee7b7;
  --shadow:rgba(5,150,105,0.3);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;display:flex;flex-direction:column;
  overflow-x:hidden;font-feature-settings:"kern" 1;
}
a{color:inherit;text-decoration:none;}

/* BANGLA TEXT */
.bn{font-family:'Noto Sans Bengali','DM Sans',sans-serif !important;line-height:1.9;}

/* PAGE LOADER */
#page-loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .5s ease,visibility .5s ease;
}
#page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
#page-loader .pl-logo{
  font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
#page-loader .pl-dots{display:flex;gap:9px;}
#page-loader .pl-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--c1);animation:plB 1.2s infinite ease-in-out;
}
#page-loader .pl-dot:nth-child(1){background:var(--c1);}
#page-loader .pl-dot:nth-child(2){background:var(--c2);animation-delay:.18s;}
#page-loader .pl-dot:nth-child(3){background:var(--c1);animation-delay:.36s;}
@keyframes plB{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* SLIDE-IN */
.slide-in{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease;}
.slide-in.visible{opacity:1;transform:translateY(0);}

/* SECTION LABEL */
.section-label{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--grad);color:#fff;
  font-family:'Syne',sans-serif;font-size:0.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;
  padding:4px 14px;border-radius:50px;margin-bottom:10px;
}

/* HEADER */
header{
  position:sticky;top:0;z-index:200;height:62px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;
  border-bottom:2px solid transparent;
  backdrop-filter:blur(18px);
}
.logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  display:flex;align-items:center;gap:8px;
}
.logo img{width:30px;border-radius:8px;-webkit-text-fill-color:initial;}

/* LANG SWITCHER */
.header-right{display:flex;align-items:center;gap:9px;}
.lang-switcher{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);border-radius:50px;padding:3px;gap:2px;
}
.lang-btn{
  padding:5px 14px;border-radius:50px;border:none;cursor:pointer;
  font-family:'Syne',sans-serif;font-weight:700;font-size:0.78rem;
  background:transparent;color:var(--muted);transition:.2s;
}
.lang-btn.active{background:var(--grad);color:#fff;}
.theme-btn{
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:var(--grad);font-size:1rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s;
}
.theme-btn:hover{transform:scale(1.1);}

/* BREADCRUMB */
.bc{
  max-width:1100px;margin:14px auto 0;padding:0 20px;
  display:flex;flex-wrap:wrap;gap:5px;font-size:0.8rem;color:var(--muted);
}
.bc a{color:var(--c1);}.bc a:hover{text-decoration:underline;}
.bc .sep{color:rgba(255,255,255,0.2);}

/* MAIN */
main{flex:1;max-width:1100px;margin:0 auto;padding:20px 20px 60px;width:100%;}

/* FOOTER */
footer{
  background:var(--bg2);border-top:2px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;
  padding:24px 20px;text-align:center;color:var(--muted);font-size:0.84rem;
}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-bottom:12px;}
.footer-nav a{color:var(--c1);font-size:0.85rem;transition:color .2s;}
.footer-nav a:hover{color:var(--c2);}
footer p{font-size:0.78rem;color:var(--muted);}

/* AD */
.ad-wrap{
  margin:16px auto;max-width:728px;width:100%;
  height:50px;min-height:50px;max-height:50px;overflow:hidden;
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.07);border-radius:8px;display:none;
}
.ad-wrap ins{display:block !important;height:50px !important;max-height:50px !important;}

/* BUTTONS */
.btn{
  display:inline-block;background:var(--grad);color:#fff;
  font-family:'Syne',sans-serif;font-weight:700;font-size:0.92rem;
  padding:12px 26px;border-radius:50px;
  border:2px solid rgba(255,255,255,0.15);transition:.22s;cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px var(--shadow);}
.btn-out{
  display:inline-block;background:transparent;
  font-family:'Syne',sans-serif;font-weight:700;font-size:0.92rem;
  padding:11px 26px;border-radius:50px;border:2px solid var(--c1);color:var(--c1);transition:.22s;
}
.btn-out:hover{background:var(--c1);color:#fff;}

/* CARD */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:24px;margin-bottom:20px;
}
.card h2{font-family:'Syne',sans-serif;font-size:1.08rem;margin-bottom:13px;}
.card p{color:var(--muted);font-size:0.95rem;line-height:1.88;}
.card .bn{color:var(--c2);font-size:0.92rem;line-height:1.9;margin-top:11px;border-left:3px solid var(--c2);padding-left:12px;}

/* HERO */
.hero{text-align:center;padding:30px 0 24px;}
.badge{
  display:inline-block;border:1px solid;border-radius:50px;
  padding:6px 20px;font-size:0.82rem;
  font-family:'Syne',sans-serif;font-weight:700;margin-bottom:14px;
}
.page-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.2;margin-bottom:13px;
}
.page-desc{color:var(--muted);font-size:0.97rem;line-height:1.88;max-width:660px;margin:0 auto;}

/* STATS */
.stats{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin:20px 0;}
.stat-n{
  font-family:'Syne',sans-serif;font-size:1.9rem;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;
}
.stat-l{color:var(--muted);font-size:0.8rem;display:block;margin-top:3px;text-align:center;}

/* COURSE GRID */
.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:18px;}
.c-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:20px 18px;display:flex;align-items:center;gap:15px;
  transition:.22s;cursor:pointer;min-height:90px;width:100%;overflow:visible;
}
.c-card:hover{transform:translateY(-3px);box-shadow:0 10px 32px var(--shadow);border-color:var(--c1);}
.c-emoji{font-size:2.8rem;flex-shrink:0;line-height:1;}
.c-info{flex:1;min-width:0;}
.c-title{
  font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;
  margin-bottom:6px;white-space:normal;word-break:break-word;line-height:1.3;
}
.c-desc{
  font-size:0.82rem;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.c-arr{font-size:1.2rem;flex-shrink:0;}

/* LESSON LIST */
.l-list{display:flex;flex-direction:column;gap:11px;}
.l-row{
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-left:4px solid var(--c1);
  border-radius:12px;padding:16px 18px;min-height:64px;transition:.2s;
}
.l-row:hover{background:rgba(99,102,241,0.09);border-left-color:var(--c2);}
.l-num{
  background:rgba(255,255,255,0.1);padding:5px 13px;border-radius:8px;
  font-weight:800;font-size:0.92rem;flex-shrink:0;color:var(--text);min-width:44px;text-align:center;
}
.l-name{font-size:1rem;font-weight:700;flex:1;line-height:1.45;}
.l-arr{font-size:1.1rem;flex-shrink:0;}

/* CONTENT SECTIONS */
.section{
  border:1px solid rgba(255,255,255,0.09);border-radius:14px;
  padding:22px;margin-bottom:16px;background:rgba(15,23,42,0.5);
}
.section h2{font-family:'Syne',sans-serif;font-size:1.08rem;margin-bottom:13px;}
.section p{color:var(--muted);font-size:0.95rem;line-height:1.88;}

/* TERM BOX */
.term{background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.22);border-radius:10px;padding:14px 16px;margin-bottom:11px;}
.term-n{font-family:'Syne',sans-serif;font-size:0.92rem;font-weight:800;color:#fbbf24;margin-bottom:6px;}
.term-d{color:var(--muted);font-size:0.92rem;line-height:1.82;}

/* STEP BOX */
.step{border-radius:12px;padding:18px;margin-bottom:13px;}
.step-lbl{font-family:'Syne',sans-serif;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.step-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:9px;}
.step-body{color:var(--muted);font-size:0.93rem;line-height:1.88;}
.step-bn{font-size:0.91rem;line-height:1.82;margin-top:10px;padding:9px 12px;border-radius:0 8px 8px 0;font-style:italic;}

/* LIST */
.s-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;}
.s-list li{padding:12px 16px;border-radius:10px;background:rgba(255,255,255,0.03);border-left:3px solid var(--c1);color:var(--muted);font-size:0.93rem;line-height:1.85;}

/* QUIZ */
.quiz{padding:14px 16px;border-radius:10px;background:rgba(239,68,68,0.05);border-left:3px solid #ef4444;color:var(--text);font-size:0.93rem;line-height:1.82;margin-bottom:11px;}

/* SUMMARY */
.summary{border-radius:14px;padding:22px;margin-bottom:18px;}
.summary h2{font-family:'Syne',sans-serif;font-size:1.08rem;margin-bottom:11px;}
.summary p{font-size:0.94rem;line-height:1.88;}

/* PROGRESS */
.prog-wrap{margin-bottom:18px;}
.prog-lbl{font-size:0.81rem;color:var(--muted);margin-bottom:6px;}
.prog-bar{height:5px;background:rgba(255,255,255,0.07);border-radius:10px;overflow:hidden;}
.prog-fill{height:100%;border-radius:10px;transition:width .6s ease;}

/* NAV BTNS */
.nav-btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;}
.nav-btns a{flex:1;min-width:130px;text-align:center;}

/* INLINE LOADER */
.loader-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:22px;text-align:center;}
.dots{display:flex;gap:8px;}
.dot{width:12px;height:12px;border-radius:50%;background:var(--grad);animation:bounce 1.2s infinite ease-in-out;}
.dot:nth-child(2){animation-delay:.2s;}.dot:nth-child(3){animation-delay:.4s;}
@keyframes bounce{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}

/* FLOATING SHARE */
#floating-share{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);
  z-index:300;display:flex;flex-direction:column;gap:10px;
}
.fs-btn{
  position:relative;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;transition:.22s;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
}
.fs-btn:hover{transform:scale(1.13);}
.fs-wa{background:#25d366;}
.fs-tw{background:#1d9bf0;}
.fs-cp{background:var(--grad);}
.fs-tip{
  position:absolute;right:52px;
  background:rgba(10,15,30,0.95);color:var(--text);
  font-size:0.7rem;font-family:'Syne',sans-serif;font-weight:700;
  padding:4px 10px;border-radius:6px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:.2s;
}
.fs-btn:hover .fs-tip{opacity:1;}

/* SCROLL TOP */
#scroll-top{
  position:fixed;bottom:80px;right:18px;z-index:300;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--grad);color:#fff;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:.3s;
  box-shadow:0 4px 16px var(--shadow);
}
#scroll-top.show{opacity:1;visibility:visible;}
#scroll-top:hover{transform:scale(1.12);}

/* PWA BANNER */
#pwa-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:400;
  padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(100%);transition:.4s ease;
  box-shadow:0 -6px 30px rgba(0,0,0,0.35);
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;
  border-top:2px solid transparent;
}
#pwa-banner.show{transform:translateY(0);}
#pwa-banner p{font-size:0.88rem;color:var(--muted);flex:1;line-height:1.5;}
#pwa-banner p strong{color:var(--text);}
.pwa-btns{display:flex;gap:8px;flex-shrink:0;}
.pwa-install{
  background:var(--grad);color:#fff;
  font-family:'Syne',sans-serif;font-weight:700;font-size:0.82rem;
  padding:8px 18px;border-radius:50px;border:none;cursor:pointer;white-space:nowrap;
}
.pwa-dismiss{
  background:transparent;color:var(--muted);
  font-size:0.8rem;font-family:'Syne',sans-serif;font-weight:700;
  padding:8px 14px;border-radius:50px;border:1px solid var(--border);cursor:pointer;white-space:nowrap;
}

/* RESPONSIVE */
@media(max-width:600px){
  .c-grid{grid-template-columns:1fr;}
  .nav-btns{flex-direction:column;}
  .nav-btns a{min-width:unset;}
  header{padding:0 14px;}
  main{padding:14px 14px 60px;}
  .c-card{padding:15px 13px;gap:13px;}
  .c-emoji{font-size:2.3rem;}
  .l-row{padding:14px 14px;gap:12px;}
  .l-name{font-size:0.95rem;}
  .lang-btn{padding:5px 10px;font-size:0.73rem;}
  #floating-share{right:10px;}
  #scroll-top{right:10px;bottom:70px;}
  #pwa-banner{flex-direction:column;text-align:center;}
  .pwa-btns{width:100%;justify-content:center;}
}