/* ================================================================
   LittleScienceLab — Global Stylesheet
   Fonts: Baloo 2 (headings) + Hind (body) + Noto Devanagari (Hindi)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Hind:wght@300;400;500;600;700&family=Noto+Sans+Devanagari:wght@400;600;700;800&display=swap');

:root {
  --saffron:    #FF6B1A;
  --saffron2:   #FF9A4D;
  --teal:       #0D7377;
  --teal2:      #14A3A8;
  --gold:       #FFC107;
  --gold2:      #FFD54F;
  --green:      #2ECC71;
  --pink:       #E91E8C;
  --purple:     #7C3AED;
  --blue:       #1565C0;
  --sky:        #29B6F6;
  --red:        #E53935;
  --dark:       #1A1A2E;
  --dark2:      #16213E;
  --mid:        #2D3748;
  --muted:      #64748B;
  --lite:       #94A3B8;
  --border:     #E2E8F0;
  --bg:         #F8F5F0;
  --white:      #FFFFFF;
  --sidebar-w:  270px;
  --topbar-h:   68px;
  --bar-h:      36px;
  --radius:     16px;
  --radius-lg:  24px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07);
  --shadow:     0 6px 24px rgba(0,0,0,0.10);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.14);
  --font-head:  'Baloo 2','Noto Sans Devanagari',sans-serif;
  --font-body:  'Hind','Noto Sans Devanagari',sans-serif;
}

/* Hindi body */
body.lang-hi { font-family:'Noto Sans Devanagari','Hind',sans-serif; }
body.lang-hi h1,body.lang-hi h2,body.lang-hi h3,body.lang-hi h4,
body.lang-hi .brand,.lang-hi .sec-h { font-family:'Noto Sans Devanagari','Baloo 2',sans-serif; }

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--mid); min-height:100vh; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; }
img { max-width:100%; display:block; }

/* ── Language + Audio Bar ── */
.lang-audio-bar {
  position:fixed; top:0; left:0; right:0; z-index:2000; height:var(--bar-h);
  background:var(--dark2); padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.lab-logo-sm { font-family:var(--font-head); font-size:0.95rem; color:var(--gold); font-weight:800; text-decoration:none; }
.lang-audio-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lang-lbl { font-size:0.7rem; color:rgba(255,255,255,0.4); font-weight:700; letter-spacing:.04em; }
.lang-btn {
  padding:4px 12px; border-radius:20px; border:1.5px solid rgba(255,255,255,0.18);
  background:transparent; color:rgba(255,255,255,0.6); font-weight:700; font-size:0.74rem;
  transition:all .2s; cursor:pointer;
}
.lang-btn.active  { background:var(--saffron); border-color:var(--saffron); color:#fff; }
.lang-btn:hover:not(.active) { border-color:rgba(255,255,255,0.45); color:#fff; }
.audio-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.08); border:none;
  padding:4px 12px; border-radius:20px; color:#fff; font-weight:700; font-size:0.74rem;
  transition:all .2s; cursor:pointer;
}
.audio-btn:hover { background:rgba(255,255,255,0.16); }
.audio-btn.on { background:var(--teal); }
.dvr { width:1px; height:18px; background:rgba(255,255,255,0.14); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; border-radius:50px; border:none;
  font-family:var(--font-head); font-weight:700; font-size:0.95rem;
  transition:all .22s; white-space:nowrap; cursor:pointer;
}
.btn-primary { background:var(--saffron); color:#fff; box-shadow:0 4px 16px rgba(255,107,26,.35); }
.btn-primary:hover { background:#e55a10; transform:translateY(-2px); }
.btn-teal    { background:var(--teal); color:#fff; }
.btn-teal:hover { background:#0a5f63; transform:translateY(-2px); }
.btn-purple  { background:var(--purple); color:#fff; }
.btn-purple:hover { background:#6d28d9; transform:translateY(-2px); }
.btn-outline { background:#fff; color:var(--mid); border:2px solid var(--border); }
.btn-outline:hover { border-color:var(--saffron); color:var(--saffron); }
.btn-sm  { padding:7px 16px; font-size:.82rem; }
.btn-lg  { padding:14px 32px; font-size:1.05rem; }
.btn-xl  { padding:17px 40px; font-size:1.15rem; }

/* ── Card ── */
.card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.card-p { padding:22px; }
.card-hover { transition:all .28s; }
.card-hover:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }

/* ── Progress bar ── */
.prog-bar  { height:10px; background:#EEF2FF; border-radius:5px; overflow:hidden; }
.prog-fill { height:100%; border-radius:5px; transition:width 1.2s cubic-bezier(.4,0,.2,1); }

/* ── Chip / Badge ── */
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:700; }
.chip-saffron { background:rgba(255,107,26,.12); color:var(--saffron); }
.chip-teal    { background:rgba(13,115,119,.12); color:var(--teal); }
.chip-gold    { background:rgba(255,193,7,.18);  color:#9a7000; }
.chip-green   { background:rgba(46,204,113,.12); color:#1a7a45; }
.chip-purple  { background:rgba(124,58,237,.1);  color:var(--purple); }
.chip-pink    { background:rgba(233,30,140,.1);  color:var(--pink); }

/* ── Pill ── */
.pill { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:50px; font-weight:700; font-size:.8rem; }
.pill-gold    { background:#FFF8E1; color:#7a5800; }
.pill-green   { background:#F0FDF4; color:#166534; }
.pill-saffron { background:#FFF0E8; color:var(--saffron); }
.pill-purple  { background:#EDE9FE; color:var(--purple); }
.pill-teal    { background:#E0F2F1; color:var(--teal); }

/* ── Scroll Reveal ── */
.reveal { opacity:0; transform:translateY(24px); transition:all .5s ease; }
.reveal.visible { opacity:1; transform:none; }
.r1 { transition-delay:.08s; } .r2 { transition-delay:.16s; } .r3 { transition-delay:.24s; } .r4 { transition-delay:.32s; }

/* ── Toast ── */
.toast {
  position:fixed; bottom:24px; right:24px; z-index:9990;
  background:var(--dark); color:#fff; padding:13px 20px;
  border-radius:14px; font-weight:600; font-size:.88rem;
  box-shadow:var(--shadow-lg); pointer-events:none;
  transform:translateY(80px); opacity:0; transition:all .35s cubic-bezier(.4,0,.2,1);
}
.toast.show { transform:none; opacity:1; }

/* ── App layout (sidebar + main) ── */
.app-layout { display:flex; min-height:100vh; padding-top:var(--bar-h); }

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w); position:fixed; left:0; top:var(--bar-h); bottom:0;
  background:var(--dark); display:flex; flex-direction:column;
  z-index:100; overflow-y:auto; transition:transform .3s;
}
.sidebar-logo { padding:18px 20px 13px; border-bottom:1px solid rgba(255,255,255,0.07); }
.brand { font-family:var(--font-head); font-size:1.2rem; font-weight:800; color:var(--gold); display:flex; align-items:center; gap:8px; }
.sidebar-user { padding:14px 20px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,0.06); }
.avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.u-name { font-weight:700; color:#fff; font-size:.9rem; }
.u-role { font-size:.72rem; color:var(--lite); font-weight:600; }
.sidebar-xp { padding:11px 20px; border-bottom:1px solid rgba(255,255,255,0.05); }
.xp-row { display:flex; justify-content:space-between; margin-bottom:5px; }
.xp-lbl { font-size:.7rem; color:rgba(255,255,255,0.38); font-weight:700; }
.xp-val { font-size:.7rem; color:var(--gold); font-weight:800; }
.sidebar-nav { flex:1; padding:8px 0; }
.nav-section { font-size:.62rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,0.2); padding:13px 20px 4px; }
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; color:rgba(255,255,255,0.58);
  font-weight:600; font-size:.86rem; border:none; background:none;
  width:100%; text-align:left; transition:all .18s; cursor:pointer;
  border-left:3px solid transparent;
}
.nav-link:hover  { background:rgba(255,255,255,0.06); color:#fff; }
.nav-link.active { background:rgba(255,107,26,.14); color:var(--saffron2); border-left-color:var(--saffron); }
.nav-link .icon  { font-size:1.05rem; width:21px; text-align:center; }
.nav-badge { margin-left:auto; background:var(--saffron); color:#fff; font-size:.65rem; font-weight:900; padding:2px 7px; border-radius:10px; }
.sidebar-footer  { padding:14px 20px; border-top:1px solid rgba(255,255,255,0.06); }
.streak-card { background:rgba(255,193,7,.1); border:1px solid rgba(255,193,7,.22); border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:10px; }
.streak-num { font-family:var(--font-head); font-size:1.3rem; font-weight:800; color:var(--gold); }
.streak-lbl { font-size:.7rem; color:rgba(255,255,255,0.45); font-weight:600; }

/* ── Main + Topbar ── */
.main { margin-left:var(--sidebar-w); flex:1; padding-top:var(--topbar-h); }
.topbar {
  position:fixed; top:var(--bar-h); left:var(--sidebar-w); right:0; height:var(--topbar-h);
  background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; z-index:90; box-shadow:var(--shadow-sm);
}
.topbar-title { font-family:var(--font-head); font-size:1.25rem; font-weight:800; color:var(--dark); }
.topbar-sub   { font-size:.78rem; color:var(--muted); font-weight:500; margin-top:1px; }
.topbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── Content ── */
.content { padding:24px 28px 80px; max-width:1200px; }
.sec-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; margin-top:28px; }
.sec-title { font-family:var(--font-head); font-size:1.15rem; font-weight:800; color:var(--dark); }
.sec-link  { font-size:.82rem; font-weight:700; color:var(--saffron); cursor:pointer; }

/* ── Stat cards ── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; }
.stat-card  { background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); border-top:4px solid var(--saffron); }
.stat-card.teal   { border-top-color:var(--teal); }
.stat-card.gold   { border-top-color:var(--gold); }
.stat-card.green  { border-top-color:var(--green); }
.stat-card.pink   { border-top-color:var(--pink); }
.stat-card.purple { border-top-color:var(--purple); }
.stat-card.blue   { border-top-color:var(--blue); }
.stat-val  { font-family:var(--font-head); font-size:1.9rem; font-weight:800; color:var(--dark); }
.stat-lbl  { font-size:.76rem; color:var(--muted); font-weight:600; margin-top:2px; }
.stat-icon { font-size:1.5rem; margin-bottom:6px; display:block; }

/* ── Grids ── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ga { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:15px; }
.ga-lg { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:18px; }

/* ── Activity item ── */
.act-item { display:flex; align-items:center; gap:13px; background:#fff; border-radius:14px; padding:13px 17px; box-shadow:var(--shadow-sm); margin-bottom:9px; }
.act-ico  { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.act-title { font-weight:700; font-size:.87rem; color:var(--dark); }
.act-meta  { font-size:.73rem; color:var(--lite); font-weight:600; }
.act-pts   { font-family:var(--font-head); font-size:.98rem; color:var(--green); font-weight:800; margin-left:auto; white-space:nowrap; }

/* ── Chart box ── */
.chart-box { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); }
.chart-title { font-family:var(--font-head); font-weight:800; color:var(--dark); margin-bottom:13px; font-size:.96rem; }

/* ── Table ── */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 13px; background:#F8F9FA; border-bottom:2px solid var(--border); }
.tbl td { padding:11px 13px; border-bottom:1px solid var(--border); font-size:.85rem; font-weight:500; }
.tbl tr:hover td { background:#FAFAFA; }

/* ── Mobile hamburger ── */
.mob-btn { display:none; position:fixed; top:44px; left:12px; z-index:200; background:var(--saffron); color:#fff; border:none; border-radius:10px; padding:8px 12px; font-size:1rem; cursor:pointer; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.14); border-radius:3px; }

/* ── Responsive ── */
@media(max-width:1024px) { .g4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:none; }
  .main { margin-left:0; }
  .topbar { left:0; }
  .mob-btn { display:block; }
  .g3,.g2 { grid-template-columns:1fr; }
  .content { padding:16px 16px 60px; }
}
@media(max-width:600px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .ga,.ga-lg { grid-template-columns:repeat(2,1fr); }
  .topbar { padding:0 14px; }
}