/* ================================================================
   EduHindi LMS — Main Stylesheet v3.0
   Production ready. Mobile-first. No duplicate rules.
   ================================================================ */

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  --primary:    #1E3A5F;
  --accent:     #FF6B35;
  --success:    #10B981;
  --danger:     #EF4444;
  --warning:    #F59E0B;
  --bg:         #F0F4F8;
  --card-bg:    #FFFFFF;
  --border:     #E2E8F0;
  --text-primary:   #1A202C;
  --text-secondary: #4A5568;
  --text-muted:     #718096;
  --shadow-sm:  0 1px 4px rgba(30,58,95,.08);
  --shadow-md:  0 4px 16px rgba(30,58,95,.12);
  --shadow-lg:  0 8px 32px rgba(30,58,95,.16);
  --radius:     12px;
  --radius-sm:  8px;
  --max-w:      480px;
  --nav-h:      56px;
  --bot-nav-h:  70px;
  --font-head:  'Baloo 2', sans-serif;
  --font-body:  'Noto Sans', sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── CRITICAL: Desktop nav HIDDEN on mobile/tablet ──────────── */
/* Must be here at the top. The @media block below will override. */
.desktop-nav { display: none !important; }

/* ── Mobile App Shell ───────────────────────────────────────── */
.app-shell {
  max-width: var(--max-w);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* ── Top Navigation ─────────────────────────────────────────── */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--primary);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(30,58,95,.3);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.top-nav__btn,
.top-nav__menu-btn,
.top-nav__icon-btn {
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s;
}
.top-nav__btn:hover,
.top-nav__menu-btn:hover,
.top-nav__icon-btn:hover  { background: rgba(255,255,255,.12); }
.top-nav__btn:active,
.top-nav__menu-btn:active,
.top-nav__icon-btn:active { background: rgba(255,255,255,.2); }
.top-nav__btn .material-icons-round,
.top-nav__menu-btn .material-icons-round,
.top-nav__icon-btn .material-icons-round { font-size: 22px; }
.top-nav__title {
  flex: 1;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-nav__actions { display: flex; gap: 2px; }

/* Notification badge */
.notif-btn    { position: relative; }
.notif-badge  {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 16px; height: 16px;
  background: var(--accent); color: #fff;
  border-radius: 20px; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
}

/* ── Bottom Navigation ──────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  height: var(--bot-nav-h);
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(30,58,95,.1);
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: color .15s;
  position: relative;
}
.bottom-nav__item.active { color: var(--primary); }
.bottom-nav__item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 4px 4px;
}
.bottom-nav__item .material-icons-round { font-size: 22px; }

/* ── Page Content ───────────────────────────────────────────── */
.page-content {
  padding: 0 0 calc(var(--bot-nav-h) + 16px);
}

/* ── Drawer Overlay ─────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,.55);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  backdrop-filter: blur(3px);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

/* ── Side Drawer (Mobile) ───────────────────────────────────── */
.side-drawer {
  position: fixed;
  top: 0; left: 0;
  width: min(82%, 300px);
  height: 100%;
  background: #fff;
  z-index: 210;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 32px rgba(10,20,40,.2);
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}
.side-drawer.open { transform: translateX(0); }

.drawer-header {
  background: linear-gradient(145deg,#1E3A5F,#2d5a8e);
  padding: 20px 16px 16px;
  position: relative;
  flex-shrink: 0;
}
.drawer-close-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.drawer-close-btn .material-icons-round { font-size: 16px; }
.drawer-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 22px; font-weight: 800; color: #fff;
  margin-bottom: 8px;
  border: 3px solid rgba(255,255,255,.25);
}
.drawer-app-name    { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 15px; line-height: 1.2; }
.drawer-app-tagline { color: rgba(255,255,255,.6); font-size: 11px; margin-top: 2px; }
.drawer-user-badge  {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.15);
  border-radius: 20px; padding: 4px 10px;
  margin-top: 8px;
}
.drawer-user-badge > span:first-child { color: rgba(255,255,255,.7); font-size: 13px; }
.drawer-user-badge > span:last-child  { color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; }
.drawer-admin-tag {
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
  text-transform: uppercase;
}
.drawer-body {
  flex: 1; overflow-y: auto;
  padding: 8px 0 12px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.drawer-body::-webkit-scrollbar { display: none; }
.drawer-section-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted);
  padding: 12px 20px 4px;
}
.drawer-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  color: var(--text-secondary);
  font-size: 14px; font-weight: 500;
  transition: all .15s;
  position: relative;
  text-decoration: none;
}
.drawer-nav-item:hover, .drawer-nav-item:active { background: #F0F4F8; color: var(--primary); }
.drawer-nav-item.active { background: #EBF4FF; color: var(--primary); font-weight: 700; }
.drawer-nav-item.active::before {
  content: ''; position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.drawer-nav-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drawer-divider {
  height: 1px; background: var(--border);
  margin: 6px 16px;
}
.drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: #FAFBFC;
  flex-shrink: 0;
}
.drawer-footer-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 2px; }
.drawer-welcome      { color: var(--accent); font-weight: 700; font-size: 12px; }
.drawer-user-name    { font-weight: 700; font-size: 14px; color: var(--text-primary); margin: 1px 0; }
.drawer-user-id      { font-size: 11px; color: var(--text-muted); font-family: monospace; }

/* ── Loading & Toast ────────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(30,58,95,.7);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.spinner {
  width: 44px; height: 44px;
  border: 4px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Forms ──────────────────────────────────────────────────── */
.form-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  background: #fff;
  color: var(--text-primary);
  transition: border-color .15s;
  -webkit-appearance: none;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,58,95,.08); }
textarea.form-input { resize: vertical; min-height: 90px; }
select.form-input { cursor: pointer; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.form-hint  { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.form-group { margin-bottom: 14px; }
.input-wrap { position: relative; }
.input-wrap .icon-l { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #94A3B8; pointer-events: none; }
.input-wrap .form-input.has-icon { padding-left: 40px; }
.pass-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #94A3B8; display: flex; align-items: center; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: 12px 20px; font-size: 14px; font-weight: 700;
  font-family: var(--font-body); cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.btn-primary:hover   { opacity: .9; transform: translateY(-1px); }
.btn-primary:active  { transform: scale(.98); }
.btn-primary .material-icons-round { font-size: 18px; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: var(--primary);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  font-family: var(--font-body); cursor: pointer;
  transition: all .15s;
}
.btn-outline:hover { border-color: var(--primary); background: #F0F4F8; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 8px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid transparent; margin-bottom: 12px; line-height: 1.5; }
.alert .material-icons-round { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.alert-danger, .alert-error { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.alert-info    { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.alert-warning { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }

/* ── Cards (mobile) ─────────────────────────────────────────── */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; }
.card-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-body   { padding: 16px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge        { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-green  { background: #DCFCE7; color: #16A34A; }
.badge-red    { background: #FEE2E2; color: #DC2626; }
.badge-blue   { background: #DBEAFE; color: #2563EB; }
.badge-orange { background: #FFEDD5; color: #EA580C; }
.badge-yellow { background: #FEF9C3; color: #CA8A04; }
.badge-purple { background: #EDE9FE; color: #7C3AED; }
.badge-upcoming { display: inline-block; background: rgba(37,99,235,.15); border: 1px solid rgba(37,99,235,.3); color: #2563EB; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.badge-live   { display: inline-flex; align-items: center; gap: 4px; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #EF4444; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.badge-free-tag   { position: absolute; top: 6px; right: 6px; background: #10B981; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.badge-discount   { position: absolute; top: 6px; left: 6px; background: #EF4444; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }

/* ── Pills ──────────────────────────────────────────────────── */
.pill       { display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; background: #F1F5F9; color: var(--text-secondary); }
.pill .material-icons-round { font-size: 13px; }
.meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* ── OTP Input ──────────────────────────────────────────────── */
.otp-row { display: flex; gap: 8px; justify-content: center; }
.otp-d   { width: 44px; height: 52px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 22px; font-weight: 700; text-align: center; font-family: var(--font-body); color: var(--text-primary); outline: none; transition: border-color .15s; -moz-appearance: textfield; }
.otp-d:focus { border-color: var(--primary); }
.otp-d::-webkit-outer-spin-button,
.otp-d::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Empty State ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state .material-icons-round { font-size: 56px; color: #CBD5E1; display: block; margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.empty-state p  { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

/* ── Progress ───────────────────────────────────────────────── */
.progress-bar  { height: 6px; background: #E2E8F0; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width .6s; }

/* ── Tab Bar ────────────────────────────────────────────────── */
.tab-bar  { display: flex; background: #F1F5F9; border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.tab-item { flex: 1; text-align: center; padding: 8px 4px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: all .15s; }
.tab-item.active { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ── Banner Slider ──────────────────────────────────────────── */
.banner-slider { aspect-ratio: 2/1; min-height: 160px; overflow: hidden; position: relative; background: var(--primary); display: block; width: 100%; }
.banner-slide  { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.banner-slide.active { opacity: 1; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-placeholder { width: 100%; height: 100%; display: flex; align-items: center; }
.banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.banner-dot  { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .3s; }
.banner-dot.active { background: #fff; width: 18px; border-radius: 3px; }

/* ── Grid Menu ──────────────────────────────────────────────── */
.grid-menu { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 12px 12px 0; }
.grid-menu-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px;
  background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: rgba(30,58,95,.08);
}
.grid-menu-item:active { transform: scale(.95); }
.grid-menu-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.grid-menu-icon .material-icons-round { font-size: 24px; }
.grid-menu-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-align: center; line-height: 1.2; }

/* ── Section Header ─────────────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 12px 8px; }
.section-title  { font-size: 16px; font-weight: 800; color: var(--text-primary); font-family: var(--font-head); }
.section-link   { font-size: 13px; font-weight: 600; color: var(--accent); }

/* ── H-Scroll Row ───────────────────────────────────────────── */
.h-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.h-scroll::-webkit-scrollbar { display: none; }

/* ── Index Page Components ──────────────────────────────────── */
.membership-strip {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg,#1E3A5F,#2d5a8e);
  border-radius: var(--radius); padding: 12px 14px; margin: 12px 12px 0;
}
.membership-strip-name { color: #fff; font-weight: 700; font-size: 14px; }
.membership-strip-exp  { color: rgba(255,255,255,.7); font-size: 11px; }
.membership-strip-btn  { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }

.live-now-strip {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,#EF4444,#DC2626);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 12px 0;
}
.live-dot-anim, .pulse-dot {
  width: 9px; height: 9px;
  background: #fff; border-radius: 50%; flex-shrink: 0;
  animation: pulseAnim 1.3s ease-in-out infinite;
}
@keyframes pulseAnim { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.social-btns  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 0; }
.social-btn   { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--radius-sm); color: #fff; font-weight: 700; font-size: 13px; }
.social-btn .material-icons-round { font-size: 18px; }

.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
.more-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; display: flex; align-items: center; gap: 12px; transition: transform .15s; }
.more-card:hover { transform: translateY(-2px); }
.more-card-icon  { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.more-card-icon .material-icons-round { font-size: 20px; }
.more-card-title { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.more-card-sub   { font-size: 11px; color: var(--text-muted); }

/* ── Horizontal Cards ───────────────────────────────────────── */
.course-card-h { flex-shrink: 0; width: 200px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.course-card-h-img  { height: 112px; background: var(--primary); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.course-card-h-img img { width: 100%; height: 100%; object-fit: cover; }
.course-card-h-placeholder .material-icons-round { font-size: 36px; color: rgba(255,255,255,.3); }
.course-card-h-body  { padding: 10px; }
.course-card-h-cat   { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.course-card-h-title { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin: 3px 0 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.course-card-h-price { font-size: 13px; }
.price-free    { font-weight: 800; color: var(--success); }
.price-current { font-weight: 800; color: var(--primary); }
.price-original{ font-size: 11px; color: var(--text-muted); text-decoration: line-through; }

.live-card-mini { flex-shrink: 0; width: 200px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid #F1F5F9; }
.live-card-mini-top   { background: linear-gradient(135deg,#1a1a2e,#0f3460); padding: 10px 12px 8px; }
.live-card-mini-title { padding: 8px 12px 4px; font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.live-card-mini-time  { display: flex; align-items: center; gap: 4px; padding: 0 12px 10px; font-size: 11px; color: var(--text-muted); }

.free-card { flex-shrink: 0; width: 150px; }
.free-card-img { height: 90px; background: linear-gradient(135deg,#1E3A5F,#2d5a8e); border-radius: var(--radius-sm); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.free-card-img img { width: 100%; height: 100%; object-fit: cover; }
.free-card-badge { position: absolute; top: 6px; right: 6px; background: #10B981; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.free-card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }

.plan-card-mini { flex-shrink: 0; width: 180px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 2px solid var(--border); }
.plan-card-mini.popular { border-color: var(--accent); }
.plan-card-mini-header { background: linear-gradient(135deg,#1E3A5F,#2d5a8e); padding: 14px; text-align: center; }
.plan-card-mini-name   { color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.plan-card-mini-price  { color: #fff; font-size: 22px; font-weight: 800; }
.plan-card-mini-period { color: rgba(255,255,255,.6); font-size: 11px; }
.plan-card-mini-body   { padding: 12px; }
.plan-feature { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); margin-bottom: 5px; }
.plan-feature .material-icons-round { font-size: 13px; color: var(--success); }
.btn-plan { display: block; text-align: center; background: var(--accent); color: #fff; padding: 8px; border-radius: 8px; font-weight: 700; font-size: 12px; margin-top: 10px; }

/* ── Course Grid (listing page) ─────────────────────────────── */
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px; }
.course-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--border); transition: transform .15s; }
.course-card:hover { transform: translateY(-2px); }
.course-card:active { transform: scale(.98); }
.course-thumb-wrap { aspect-ratio: 16/9; overflow: hidden; background: var(--primary); position: relative; }
.course-thumb { width: 100%; height: 100%; object-fit: cover; }
.course-info  { padding: 10px; }
.course-cat   { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
.course-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 3px 0 6px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.course-meta-row { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); align-items: center; margin-bottom: 5px; }
.course-price-row { display: flex; align-items: baseline; gap: 5px; }
.result-count { font-size: 13px; color: var(--text-muted); }

/* ── Filter / Search ────────────────────────────────────────── */
.filter-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 12px 12px 0; scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0; padding: 7px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 600; border: 1.5px solid var(--border);
  background: #fff; color: var(--text-secondary); cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.search-bar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 12px 12px 0; }
.search-bar input { flex: 1; border: none; outline: none; font-size: 14px; font-family: var(--font-body); color: var(--text-primary); background: transparent; }
.search-bar .material-icons-round { color: var(--text-muted); font-size: 20px; }

/* ── PDF & Test Cards ───────────────────────────────────────── */
.pdf-list-card, .test-list-card, .my-course-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 14px; border: 1px solid var(--border); margin: 0 12px 10px;
}

/* ── Live Page ──────────────────────────────────────────────── */
.live-hero { background: linear-gradient(135deg,#1a1a2e 0%,#0f3460 100%); padding: 28px 20px 24px; text-align: center; color: #fff; }
.session-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 3px 16px rgba(0,0,0,.08); margin: 0 12px 14px; border: 1px solid #F1F5F9; }
.session-card-header { padding: 16px 16px 12px; background: linear-gradient(135deg,#1E3A5F,#2d5a8e); }
.session-join-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 14px; width: 100%; border: none; cursor: pointer; font-family: var(--font-body); transition: all .18s; text-decoration: none; }
.session-join-btn:hover:not(.scheduled-btn) { opacity: .9; transform: translateY(-1px); }
.live-btn      { background: linear-gradient(135deg,#EF4444,#DC2626); color: #fff; }
.zoom-btn      { background: linear-gradient(135deg,#2563EB,#1D4ED8); color: #fff; }
.agora-btn     { background: linear-gradient(135deg,#7C3AED,#6D28D9); color: #fff; }
.meet-btn      { background: linear-gradient(135deg,#059669,#047857); color: #fff; }
.scheduled-btn { background: #F1F5F9; color: #64748B; cursor: default; }
.tab-pills { display: flex; gap: 8px; padding: 14px 12px 4px; overflow-x: auto; scrollbar-width: none; }
.tab-pills::-webkit-scrollbar { display: none; }
.tab-pill { flex-shrink: 0; padding: 8px 18px; border-radius: 22px; font-size: 13px; font-weight: 600; background: #F1F5F9; color: #64748B; border: none; cursor: pointer; transition: all .18s; display: inline-flex; align-items: center; gap: 5px; }
.tab-pill.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(30,58,95,.3); }
.platform-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.platform-badge.zoom       { background: #DBEAFE; color: #1D4ED8; }
.platform-badge.agora      { background: #EDE9FE; color: #6D28D9; }
.platform-badge.youtube    { background: #FEE2E2; color: #DC2626; }
.platform-badge.googlemeet { background: #D1FAE5; color: #059669; }
.agora-container { position: fixed; inset: 0; background: #0a0a0f; z-index: 1000; display: none; flex-direction: column; }
.agora-container.active { display: flex; }
.agora-ctrl-btn { width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: all .2s; background: #1e2030; color: #fff; }
.agora-ctrl-btn.end { background: #EF4444; }
.agora-ctrl-btn:hover { transform: scale(1.08); }

/* ── Test / Result ──────────────────────────────────────────── */
.result-circle { width: 120px; height: 120px; border-radius: 50%; border: 5px solid rgba(255,255,255,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: rgba(255,255,255,.15); }
.result-percent { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.result-label   { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.9); margin-top: 2px; }
.review-card { background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 14px; margin: 0 12px 10px; border-left: 4px solid #E2E8F0; }
.review-card.correct { border-left-color: var(--success); }
.review-card.wrong   { border-left-color: var(--danger); }
.review-card.skipped { border-left-color: var(--warning); }

/* ── Strength Bar ───────────────────────────────────────────── */
.strength-bar  { height: 4px; background: #E2E8F0; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.strength-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }

/* ── Auth Pages ─────────────────────────────────────────────── */
.auth-wrap { max-width: 400px; margin: 0 auto; padding: 24px 16px; }
.auth-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow-md); padding: 28px 24px; }
.auth-logo { width: 70px; height: 70px; background: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.auth-logo .material-icons-round { font-size: 36px; color: #fff; }
.auth-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; text-align: center; color: var(--text-primary); margin-bottom: 4px; }
.auth-sub   { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 24px; }

/* ── Module / Learn ─────────────────────────────────────────── */
.module-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 12px 8px; overflow: hidden; }
.module-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; background: #F8FAFC; }
.module-title  { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.module-count  { font-size: 12px; color: var(--text-muted); }
.module-chevron { transition: transform .3s; font-size: 20px; color: var(--text-muted); }
.module-item.open .module-chevron { transform: rotate(180deg); }
.module-lessons { display: none; }
.module-item.open .module-lessons { display: block; }
.lesson-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid #F1F5F9; text-decoration: none; color: var(--text-primary); }
.lesson-item:hover { background: #F8FAFC; }
.lesson-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 0; }
.page-btn { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all .15s; }
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); padding: 12px 12px 0; flex-wrap: wrap; }
.breadcrumb a { color: var(--primary); }

/* ── Profile stat ───────────────────────────────────────────── */
.stat-bubble { text-align: center; padding: 8px 4px; }
.stat-bubble-val { font-size: 20px; font-weight: 800; line-height: 1; }
.stat-bubble-lbl { font-size: 10px; color: var(--text-muted); margin-top: 3px; font-weight: 600; }

/* ================================================================
   RESPONSIVE — Tablet & Desktop
   NOTE: .desktop-nav { display: none !important } is at TOP.
   The @media below OVERRIDES it with display:flex !important.
   This is the ONLY place .desktop-nav gets display: flex.
   ================================================================ */

/* Tablet 768px+ */
@media (min-width: 768px) {
  .app-shell   { max-width: 768px; }
  .grid-menu   { grid-template-columns: repeat(4,1fr); }
  .course-grid { grid-template-columns: repeat(3,1fr); gap: 16px; }
  .more-grid   { grid-template-columns: repeat(4,1fr); }
  .social-btns { grid-template-columns: repeat(4,1fr); }
}

/* Desktop 1200px+ */
@media (min-width: 1200px) {
  :root { --desktop-w: 260px; }

  /* ✓ Show desktop sidebar */
  .desktop-nav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    width: var(--desktop-w);
    height: 100vh;
    background: var(--primary);
    z-index: 500;
    overflow-y: auto;
    scrollbar-width: none;
    box-shadow: 4px 0 24px rgba(30,58,95,.15);
  }
  .desktop-nav::-webkit-scrollbar { display: none; }

  /* Shift content right */
  body { padding-left: var(--desktop-w); background: #EDF0F6; }

  /* Hide mobile UI */
  .bottom-nav     { display: none !important; }
  .side-drawer    { display: none !important; }
  .drawer-overlay { display: none !important; }
  #menuBtn        { display: none !important; }

  /* Full-width top nav */
  .top-nav {
    max-width: 100%; width: 100%;
    background: #fff; border-radius: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    height: 62px; padding: 0 28px;
    position: sticky; top: 0; z-index: 100;
  }
  .top-nav__title { color: var(--text-primary); }
  .top-nav__btn, .top-nav__menu-btn, .top-nav__icon-btn { color: var(--text-secondary); }
  .top-nav__btn:hover, .top-nav__menu-btn:hover, .top-nav__icon-btn:hover { background: #F1F5F9; }

  /* App shell full width */
  .app-shell { max-width: 100%; background: transparent; box-shadow: none; border-radius: 0; margin: 0; }

  /* Page content centred with max-width */
  .page-content { padding: 24px 32px 48px; max-width: 1040px; margin: 0 auto; }

  /* Wider grids */
  .grid-menu   { grid-template-columns: repeat(6,1fr); gap: 12px; }
  .course-grid { grid-template-columns: repeat(3,1fr); gap: 18px; }
  .more-grid   { grid-template-columns: repeat(4,1fr); }
  .social-btns { grid-template-columns: repeat(4,1fr); }

  /* H-scroll → wrap */
  .h-scroll        { overflow-x: visible; flex-wrap: wrap; gap: 14px; }
  .course-card-h   { width: calc(33.33% - 10px); }
  .live-card-mini  { width: calc(25% - 8px); }
  .plan-card-mini  { width: calc(25% - 8px); }
  .free-card       { width: calc(16.66% - 9px); }

  /* Banner wider ratio */
  .banner-slider { aspect-ratio: 3/1; border-radius: 16px; }
  .banner-slide img { border-radius: 16px; }
}

/* Desktop nav component styles — safe to define globally (nav is hidden on mobile) */
.desktop-nav-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.desktop-nav-logo-icon {
  width: 38px; height: 38px; background: var(--accent);
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; color: #fff; font-size: 14px; flex-shrink: 0;
}
.desktop-nav-logo-text h2  { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; }
.desktop-nav-logo-text span{ font-size: 10px; color: rgba(255,255,255,.5); }
.desktop-nav-body { flex: 1; overflow-y: auto; padding: 8px 0 16px; scrollbar-width: none; }
.desktop-nav-body::-webkit-scrollbar { display: none; }
.desktop-nav-section { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.35); padding: 14px 18px 4px; }
.desktop-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 1px 8px;
  color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500;
  border-radius: 8px; text-decoration: none; transition: all .15s;
}
.desktop-nav-link .material-icons-round { font-size: 19px; flex-shrink: 0; }
.desktop-nav-link:hover  { background: rgba(255,255,255,.1); color: #fff; }
.desktop-nav-link.active { background: var(--accent); color: #fff; font-weight: 700; }
.desktop-nav-link.danger { color: rgba(239,68,68,.85); }
.desktop-nav-link.danger:hover { background: rgba(239,68,68,.12); }
.desktop-nav-user {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.desktop-nav-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); display: flex;
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; flex-shrink: 0;
}