/* ============================================================
   Karma Burning Projects — LMS Global Styles  v3.0
   Aesthetic: Sacred luxury — deep onyx · burnished gold · divine geometry
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ink:        #06070a;
  --bg:         #0d0e12;
  --bg2:        #13151c;
  --bg3:        #191c26;
  --surface:    #1f2232;
  --border:     #252a3a;
  --border2:    #2e3450;

  --gold:       #c9a34c;
  --gold-lt:    #e8c97a;
  --gold-dim:   #6b5520;
  --gold-glow:  rgba(201,163,76,.18);

  --teal:       #3ecfbb;
  --teal-dim:   rgba(62,207,187,.12);

  --text:       #e4e8f4;
  --text2:      #8892aa;
  --text3:      #4a5268;

  --success:    #4ade80;
  --danger:     #f87171;
  --warning:    #fbbf24;
  --info:       #60a5fa;

  --locked-bg:  rgba(248,113,113,.07);
  --locked-border: rgba(248,113,113,.25);

  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --nav-h: 62px;
  --sidebar-w: 240px;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family:'DM Sans', sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;  /* prevent horizontal scroll on mobile */
}

a { color:var(--gold); text-decoration:none; transition:color .15s; }
a:hover { color:var(--gold-lt); }
h1,h2,h3,h4,h5 {
  font-family:'Cormorant Garamond', serif;
  font-weight:600; line-height:1.2;
}
img { max-width:100%; display:block; }
code,pre { font-family:'DM Mono', monospace; }

/* ── Sacred geometry background pattern ─────────────────── */
.sacred-bg {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(201,163,76,.06) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(62,207,187,.04) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 5 L55 50 L5 50 Z' fill='none' stroke='%23252a3a' stroke-width='.3' opacity='.5'/%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23252a3a' stroke-width='.3' opacity='.4'/%3E%3C/svg%3E");
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dim); }

/* ════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════ */
.navbar {
  position:sticky; top:0; z-index:200;
  height:var(--nav-h);
  background:rgba(13,14,18,.93);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.75rem;
  gap:1rem;
}

.navbar-brand {
  font-family:'Cormorant Garamond',serif;
  font-weight:700; font-size:1.1rem; letter-spacing:.02em;
  color:var(--text) !important;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap;
}
.brand-wheel {
  font-size:1.4rem; color:var(--gold);
  animation:spin 18s linear infinite;
  display:inline-block; line-height:1;
}
@keyframes spin { to { transform:rotate(360deg); } }

.navbar-links {
  display:flex; align-items:center; gap:2px;
}
.navbar-links a {
  font-size:.82rem; font-weight:500;
  color:var(--text2); padding:6px 13px;
  border-radius:7px; transition:all .15s;
}
.navbar-links a:hover,
.navbar-links a.active { color:var(--text); background:var(--surface); }
.navbar-links a.active { color:var(--gold); }
.navbar-links .nav-user {
  font-size:.78rem; color:var(--text3);
  padding:0 8px; border-left:1px solid var(--border);
  margin-left:6px;
}
.btn-nav-logout {
  border:1px solid var(--border) !important;
  color:var(--danger) !important; margin-left:4px;
}

/* ─── Language selector (English / हिन्दी) ───────────────── */
.lang-select {
  font-size:.78rem; font-weight:500;
  color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:6px;
  padding:5px 8px; margin-left:8px;
  cursor:pointer; transition:border-color .15s;
}
.lang-select:hover,
.lang-select:focus { border-color:var(--gold-dim); outline:none; }
.lang-select option { background:var(--bg); color:var(--text); }

/* Google Translate injects its own top banner/tooltip/highlight chrome, plus a
   full-page overlay iframe for the "page translated" notice. All of it carries
   the "skiptranslate" class regardless of Google's current (obfuscated) class
   names, so hide by that instead of a specific class that can change between
   widget versions. Without this, the overlay sits on top of the whole page and
   silently blocks clicks everywhere, including the toggle itself. */
body { top:0 !important; }
iframe.skiptranslate,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame { display:none !important; }
.goog-text-highlight { background:none !important; box-shadow:none !important; }
.btn-nav-logout:hover { background:rgba(248,113,113,.08) !important; border-color:var(--danger) !important; }

/* ════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════ */
.app-shell { display:flex; min-height:calc(100vh - var(--nav-h)); }

.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:var(--nav-h);
  height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.sidebar-section { padding:1.25rem 1rem .75rem; }
.sidebar-label {
  font-size:.65rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text3);
  padding:.5rem .75rem .4rem; display:block;
}
.sidebar-link {
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; border-radius:8px; margin-bottom:2px;
  font-size:.84rem; font-weight:400; color:var(--text2);
  transition:all .15s;
}
.sidebar-link:hover { background:var(--surface); color:var(--text); }
.sidebar-link.active { background:var(--gold-glow); color:var(--gold); border:1px solid rgba(201,163,76,.2); }
.sidebar-link .icon { width:16px; text-align:center; font-size:.9rem; flex-shrink:0; }
.sidebar-divider { height:1px; background:var(--border); margin:.5rem 1rem; }

.main-content { flex:1; padding:2rem; min-width:0; }

/* ════════════════════════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════════════════════════ */
.page-header {
  margin-bottom:1.75rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
}
.page-header h1 {
  font-size:1.75rem; font-weight:600;
  background:linear-gradient(135deg,var(--text),var(--text2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.page-header p { color:var(--text2); font-size:.9rem; margin-top:.3rem; }
.page-header-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 20px; border-radius:var(--r);
  font-family:'DM Sans',sans-serif; font-size:.855rem; font-weight:500;
  cursor:pointer; border:none; transition:all .15s; text-decoration:none;
  white-space:nowrap;
}
.btn-gold {
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:#1a1000; font-weight:600;
}
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(201,163,76,.35); color:#1a1000; }
.btn-primary {
  background:var(--teal); color:#0a1410;
}
.btn-primary:hover { background:#33baa8; color:#0a1410; }
.btn-secondary {
  background:var(--surface); color:var(--text); border:1px solid var(--border);
}
.btn-secondary:hover { border-color:var(--gold-dim); color:var(--gold); }
.btn-danger {
  background:rgba(248,113,113,.1); color:var(--danger); border:1px solid rgba(248,113,113,.25);
}
.btn-danger:hover { background:rgba(248,113,113,.18); }
.btn-ghost { background:transparent; color:var(--text2); }
.btn-ghost:hover { color:var(--text); background:var(--surface); }
.btn-sm { padding:5px 14px; font-size:.78rem; border-radius:7px; }
.btn-xs { padding:3px 10px; font-size:.72rem; border-radius:5px; }
.btn-icon { padding:7px; min-width:32px; justify-content:center; }

/* ════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════ */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.5rem;
}
.card-sm { padding:1rem 1.25rem; }

/* ── KPI stat card ── */
.kpi-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:1rem; margin-bottom:2rem;
}
.kpi {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.25rem 1.4rem;
  position:relative; overflow:hidden; transition:border-color .2s,transform .2s;
  cursor:default;
}
.kpi::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%,var(--gold-glow) 0%,transparent 70%);
  pointer-events:none;
}
.kpi:hover { border-color:var(--gold-dim); transform:translateY(-2px); }
.kpi-icon {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; margin-bottom:.75rem;
  background:rgba(201,163,76,.1);
}
.kpi-val { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700; line-height:1; }
.kpi-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); margin-top:.3rem; }
.kpi-sub   { font-size:.75rem; color:var(--text2); margin-top:.35rem; }
.kpi-gold  .kpi-val { color:var(--gold); }
.kpi-teal  .kpi-val { color:var(--teal); }
.kpi-green .kpi-val { color:var(--success); }
.kpi-red   .kpi-val { color:var(--danger); }
.kpi-blue  .kpi-val { color:var(--info); }

/* ── Lesson cards ── */
.lesson-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.1rem; }
.lesson-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .2s,transform .18s;
  display:flex; flex-direction:column;
}
.lesson-card:hover { border-color:var(--gold-dim); transform:translateY(-2px); }
.lesson-card.locked {
  background:var(--locked-bg); border-color:var(--locked-border);
  opacity:.8;
}
.lesson-card.locked:hover { transform:none; border-color:var(--locked-border); }
.lesson-card-top {
  height:4px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
}
.lesson-card.locked .lesson-card-top { background:linear-gradient(90deg,#5a2020,var(--danger)); }
.lesson-card-body { padding:1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.lesson-cat-badge {
  display:inline-block; font-size:.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em;
  padding:3px 10px; border-radius:100px;
  background:rgba(201,163,76,.1); color:var(--gold);
  margin-bottom:.75rem;
}
.lesson-card h3 { font-size:1.05rem; font-weight:600; margin-bottom:.5rem; flex:1; }
.lesson-card .meta { font-size:.75rem; color:var(--text3); display:flex; gap:1rem; margin-top:.5rem; }
.lesson-card .meta span { display:flex; align-items:center; gap:4px; }
.lesson-card-foot { padding:.9rem 1.4rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }

/* Progress bar */
.progress-wrap { height:4px; background:var(--bg3); border-radius:2px; overflow:hidden; width:100%; margin-top:.5rem; }
.progress-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); transition:width .4s; }

/* ════════════════════════════════════════════════════════
   FLASH / TOAST
   ════════════════════════════════════════════════════════ */
.flash {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.5rem; font-size:.875rem; font-weight:500;
}
.flash button { background:none; border:none; cursor:pointer; font-size:1.1rem; opacity:.5; color:inherit; }
.flash-success { background:rgba(74,222,128,.08); color:var(--success); border-bottom:1px solid rgba(74,222,128,.2); }
.flash-error   { background:rgba(248,113,113,.08); color:var(--danger);  border-bottom:1px solid rgba(248,113,113,.2); }
.flash-info    { background:rgba(201,163,76,.08);  color:var(--gold);    border-bottom:1px solid rgba(201,163,76,.2);  }

/* ════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:.855rem; }
thead { background:var(--bg3); }
thead th {
  padding:11px 15px; text-align:left;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text3);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg3); }
tbody td { padding:11px 15px; color:var(--text); vertical-align:middle; }
.td-actions { display:flex; gap:5px; align-items:center; }

/* ════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════ */
.form-group { margin-bottom:1.2rem; }
.form-group label {
  display:block; font-size:.75rem; font-weight:500;
  color:var(--text2); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.05em;
}
.form-control {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 13px;
  font-family:'DM Sans',sans-serif; font-size:.875rem; color:var(--text);
  transition:border-color .15s; outline:none;
}
.form-control:focus { border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(201,163,76,.08); }
.form-control::placeholder { color:var(--text3); }
select.form-control { cursor:pointer; }
textarea.form-control { min-height:100px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media(max-width:640px) { .form-row,.form-row-3 { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:100px;
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
}
.badge-paid    { background:rgba(74,222,128,.1);   color:var(--success); border:1px solid rgba(74,222,128,.2); }
.badge-pending { background:rgba(251,191,36,.1);   color:var(--warning); border:1px solid rgba(251,191,36,.2); }
.badge-active  { background:rgba(74,222,128,.1);   color:var(--success); border:1px solid rgba(74,222,128,.2); }
.badge-locked  { background:rgba(248,113,113,.1);  color:var(--danger);  border:1px solid rgba(248,113,113,.2); }
.badge-open    { background:rgba(201,163,76,.1);   color:var(--gold);    border:1px solid rgba(201,163,76,.2); }
.badge-admin   { background:rgba(96,165,250,.1);   color:var(--info);    border:1px solid rgba(96,165,250,.2); }
.badge-waived  { background:rgba(62,207,187,.1);   color:var(--teal);    border:1px solid rgba(62,207,187,.2); }
.badge-completed { background:rgba(74,222,128,.1); color:var(--success); border:1px solid rgba(74,222,128,.2); }

/* ════════════════════════════════════════════════════════
   PANELS (dashboard sections)
   ════════════════════════════════════════════════════════ */
.panel { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.panel-head {
  padding:.85rem 1.25rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.panel-head h3 { font-size:.95rem; font-weight:600; font-family:'DM Sans',sans-serif; }
.panel-head a  { font-size:.78rem; color:var(--gold); }
.panel-body    { padding:1.1rem 1.25rem; }

.profile-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.84rem;gap:1rem;}
.profile-row:last-child{border-bottom:none;}
.profile-row .lbl{color:var(--text3);line-height:1.6;}
.profile-row .val{font-weight:500;color:var(--text);white-space:nowrap;}
.profile-row .val.gold{color:var(--gold);font-weight:700;font-size:.95rem;}

/* bar chart */
.bar-chart { display:flex; align-items:flex-end; gap:10px; height:100px; }
.bar-col   { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bar-rect  { width:100%; min-height:4px; background:linear-gradient(180deg,var(--gold),var(--gold-dim)); border-radius:3px 3px 0 0; opacity:.8; transition:opacity .15s; }
.bar-rect:hover { opacity:1; }
.bar-lbl   { font-size:.65rem; color:var(--text3); }
.bar-num   { font-size:.68rem; color:var(--gold); font-weight:600; }

/* ════════════════════════════════════════════════════════
   LESSON VIEWER
   ════════════════════════════════════════════════════════ */
.viewer-layout { display:grid; grid-template-columns:220px 1fr; gap:1.5rem; }
@media(max-width:768px) { .viewer-layout { grid-template-columns:1fr; } }

.viewer-sidebar {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.1rem;
  position:sticky; top:calc(var(--nav-h) + 1rem);
  max-height:calc(100vh - var(--nav-h) - 3rem); overflow-y:auto;
}
.viewer-sidebar h4 {
  font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text3); margin-bottom:.6rem; padding:.2rem .5rem;
}
.viewer-lesson-link {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:8px; margin-bottom:2px;
  font-size:.82rem; color:var(--text2); transition:all .15s;
}
.viewer-lesson-link:hover { background:var(--surface); color:var(--text); }
.viewer-lesson-link.active { background:var(--gold-glow); color:var(--gold); }
.viewer-lesson-link.locked-link { color:var(--text3); pointer-events:none; }
.viewer-lesson-link .lock-icon { font-size:.7rem; opacity:.5; }

.lesson-body-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:2rem;
  min-height:320px; line-height:1.8;
}
.lesson-body-card h2 { color:var(--gold); font-size:1.35rem; margin-bottom:1rem; }
.lesson-body-card h3 { color:var(--gold-lt); font-size:1.1rem; margin:.75rem 0 .5rem; }
.lesson-body-card p  { color:var(--text2); margin-bottom:.9rem; }
.lesson-body-card ul,
.lesson-body-card ol { padding-left:1.5rem; margin:.5rem 0; color:var(--text2); }
.lesson-body-card li { margin:.25rem 0; }
.lesson-body-card code { background:var(--bg3); padding:2px 7px; border-radius:4px; color:var(--gold-lt); font-size:.88em; }
.lesson-body-card blockquote {
  border-left:3px solid var(--gold-dim); padding:.5rem 1rem;
  margin:.5rem 0; background:rgba(201,163,76,.04);
  border-radius:0 8px 8px 0; color:var(--text2);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.05rem;
}
.lesson-body-card table { width:100%; border-collapse:collapse; margin:.75rem 0; }
.lesson-body-card th,
.lesson-body-card td { border:1px solid var(--border); padding:.4rem .75rem; font-size:.85rem; }
.lesson-body-card th { background:var(--bg3); color:var(--gold); }
.lesson-body-card img { max-width:100%; border-radius:8px; margin:.5rem 0; }
.lesson-body-card iframe { max-width:100%; border-radius:8px; margin:.5rem 0; display:block; }
.lesson-body-card .yt-embed {
  margin:1.25rem 0; width:100%;
  position:relative;   /* needed for the overlay */
}
.lesson-body-card .yt-embed iframe {
  width:100%; min-height:360px; border-radius:8px; display:block;
  /* pointer-events:none stops ALL clicks — use overlay instead for partial block */
}
/* Overlay that covers ONLY the "Watch on YouTube" button area (bottom-right ~220x50px) */
.lesson-body-card .yt-embed::after {
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:240px;
  height:52px;
  background:transparent;   /* invisible */
  z-index:10;               /* sits above the iframe */
  cursor:default;
  pointer-events:all;       /* blocks clicks in this area only */
}
/* Responsive video height */
@media(max-width:600px){
  .lesson-body-card .yt-embed iframe { min-height:220px; }
  .lesson-body-card .yt-embed::after { width:180px; height:44px; }
}

/* page nav pills */
.page-nav { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-pill {
  width:34px; height:34px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:500; border:1px solid var(--border);
  color:var(--text2); transition:all .15s; text-decoration:none;
}
.page-pill:hover { border-color:var(--gold-dim); color:var(--gold); }
.page-pill.active { background:linear-gradient(135deg,var(--gold-dim),var(--gold)); color:#1a1000; border-color:transparent; }

/* ════════════════════════════════════════════════════════
   COMMENTS
   ════════════════════════════════════════════════════════ */
.comments-section { margin-top:2rem; }
.comment-item {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:.75rem;
}
.comment-meta { display:flex; align-items:center; gap:10px; margin-bottom:.5rem; }
.comment-av {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-dim),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; color:#1a1000; flex-shrink:0;
}
.comment-author { font-size:.83rem; font-weight:500; }
.comment-date   { font-size:.72rem; color:var(--text3); margin-left:auto; }
.comment-text   { font-size:.855rem; color:var(--text2); line-height:1.65; }
.comment-form   { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.4rem; margin-top:1.25rem; }

/* ════════════════════════════════════════════════════════
   LOCK OVERLAY (locked lesson)
   ════════════════════════════════════════════════════════ */
.lock-overlay {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4rem 2rem; text-align:center;
}
.lock-icon-big { font-size:3.5rem; margin-bottom:1rem; opacity:.5; }
.lock-overlay h3 { font-size:1.25rem; color:var(--text2); margin-bottom:.5rem; }
.lock-overlay p { font-size:.875rem; color:var(--text3); }

/* ════════════════════════════════════════════════════════
   ASSIGN LESSONS (admin)
   ════════════════════════════════════════════════════════ */
.assign-check-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r); border:1px solid var(--border);
  margin-bottom:6px; cursor:pointer; transition:all .15s; font-size:.85rem;
}
.assign-check-item:hover { border-color:var(--gold-dim); }
.assign-check-item.checked { border-color:rgba(201,163,76,.4); background:rgba(201,163,76,.05); }
.assign-check-item.locked-item { border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.04); }
.assign-check-item input[type="checkbox"] { accent-color:var(--gold); width:15px; height:15px; }
.lock-toggle {
  margin-left:auto; font-size:.7rem; padding:2px 10px;
  border-radius:100px; border:1px solid; cursor:pointer;
  transition:all .15s; background:none; font-family:'DM Sans',sans-serif;
}
.lock-toggle.is-locked { color:var(--danger); border-color:rgba(248,113,113,.4); }
.lock-toggle.is-open   { color:var(--gold);   border-color:rgba(201,163,76,.3); }

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.site-footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:1.1rem 2rem; text-align:center;
  font-size:.75rem; color:var(--text3);
}

/* ════════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════════ */
.flex   { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:.75rem; } .gap-4 { gap:1rem; }
.mb-1 { margin-bottom:.5rem; }  .mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; } .mb-4 { margin-bottom:2rem; }
.mt-2 { margin-top:1rem; }      .mt-3 { margin-top:1.5rem; }
.text-muted  { color:var(--text2); font-size:.875rem; }
.text-sm     { font-size:.82rem; }
.text-xs     { font-size:.72rem; color:var(--text3); }
.text-gold   { color:var(--gold); }
.text-danger { color:var(--danger); }
.text-success{ color:var(--success); }
.text-center { text-align:center; }
.w-full { width:100%; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem; }
@media(max-width:768px) { .grid-2,.grid-3 { grid-template-columns:1fr; } }
.empty-state { text-align:center; padding:3.5rem 2rem; color:var(--text3); }
.empty-state .empty-icon { font-size:2.5rem; margin-bottom:.75rem; opacity:.4; }
.divider { height:1px; background:var(--border); margin:1.5rem 0; }

/* ════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ════════════════════════════════════════════════════════ */

/* ── Hamburger — always in DOM, hidden on desktop ──────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
  pointer-events: none;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Dark overlay behind the sidebar on mobile ─────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 190;
}
.sidebar-overlay.show { display: block; }

/* ═══════════════════════════════════════════
   768px and below — MOBILE
═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Navbar: fixed to top ── */
  .navbar {
    padding: 0 1rem;
    height: 56px;
    gap: .5rem;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    width: 100%;
  }

  /* body offset so fixed navbar doesn't hide content */
  body {
    padding-top: 56px;
    overflow-x: hidden;
  }

  /* ── Nav links: hide on mobile, show hamburger ── */
  .navbar-links { display: none !important; }
  .hamburger    { display: flex !important; flex-shrink: 0; }

  /* Language select stays visible on mobile (it's outside .navbar-links) —
     shrunk so brand + select + hamburger all fit on narrow phones. */
  .lang-select {
    margin-left: 0;
    padding: 4px 6px;
    font-size: .7rem;
    flex-shrink: 0;
    max-width: 92px;
  }

  /* ── Sidebar: off-canvas drawer ── */
  .sidebar {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    width: 72vw !important;
    max-width: 280px !important;
    height: calc(100vh - 56px) !important;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 195;
    box-shadow: 6px 0 32px rgba(0,0,0,.55);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sidebar.open { transform: translateX(0); }

  /* ── App shell: block so sidebar is out of flow ── */
  .app-shell {
    display: block !important;
    width: 100%;
    overflow-x: hidden;
  }

  /* ── Main content ── */
  .main-content {
    padding: 1.1rem .9rem;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* ── Page header ── */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1.25rem;
  }
  .page-header h1         { font-size: 1.25rem; }
  .page-header-actions    { width: 100%; flex-wrap: wrap; }

  /* ── Tables: scroll horizontally ── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  thead th, tbody td { padding: 8px 10px; font-size: .75rem; }

  /* ── Grids ── */
  .lesson-grid            { grid-template-columns: 1fr; }
  .kpi-grid               { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .grid-2, .grid-3        { grid-template-columns: 1fr; }
  .viewer-layout          { grid-template-columns: 1fr; }
  .viewer-sidebar         { position: static; max-height: none; margin-bottom: 1rem; }

  /* ── Forms ── */
  .form-row, .form-row-3  { grid-template-columns: 1fr; }

  /* ── Lesson body ── */
  .lesson-body-card       { padding: 1rem; }

  /* ── Footer ── */
  .site-footer            { padding: .75rem 1rem; font-size: .7rem; }

  /* ── Buttons ── */
  .btn                    { font-size: .8rem; padding: 8px 14px; }

  /* ── Prevent any element from overflowing ── */
  * { max-width: 100%; box-sizing: border-box; }
  img, iframe, video      { max-width: 100% !important; }
}

/* ═══════════════════════════════════════════
   480px and below — SMALL PHONES
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .navbar                 { height: 50px; }
  body                    { padding-top: 50px; }
  .sidebar                { top: 50px !important; height: calc(100vh - 50px) !important; }

  .main-content           { padding: 1rem .75rem; }
  .kpi-grid               { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .kpi                    { padding: .8rem; }
  .kpi-val                { font-size: 1.5rem; }
  .lesson-body-card       { padding: .85rem; }
  .navbar-brand           { font-size: .88rem; }
  .brand-wheel            { font-size: 1rem; }
  .page-header h1         { font-size: 1.1rem; }
  .btn                    { font-size: .76rem; padding: 7px 11px; }
  .lesson-card-body       { padding: 1rem; }
  .lesson-card-foot       { padding: .7rem 1rem; }
  .badge                  { font-size: .62rem; }
}