/* ==========================================================================
   NAYI LMS · student-facing styles (builds on tokens.css + styles.css)
   ========================================================================== */
.lms-hi { font-size:.9rem; color:var(--text-muted); font-weight:600; }
.lms-wrap { max-width:1120px; margin-inline:auto; padding-inline:var(--container-pad,1.25rem); }

/* Page header band */
.lms-head { padding:clamp(2rem,1.5rem + 3vw,3.5rem) 0 1.5rem; }
.lms-head h1 { font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); margin:.4rem 0; }
.lms-head p { color:var(--text-muted); max-width:60ch; }

/* ---- Auth (login / register) ---- */
.auth-shell { min-height:70vh; display:grid; place-items:center; padding:2.5rem 1.25rem; }
.auth-card { width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl,20px); box-shadow:var(--sh-lg); padding:clamp(1.5rem,1rem + 2vw,2.5rem); }
.auth-card h1 { font-size:1.6rem; margin:0 0 .35rem; }
.auth-card .sub { color:var(--text-muted); font-size:.92rem; margin-bottom:1.5rem; }
.auth-field { margin-bottom:1rem; }
.auth-field label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
.auth-field input { width:100%; padding:.8rem .9rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-family:inherit; font-size:.95rem; }
.auth-field input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.auth-alt { text-align:center; margin-top:1.25rem; font-size:.9rem; color:var(--text-muted); }
.auth-alt a { color:var(--primary); font-weight:600; }
.auth-err { background:color-mix(in srgb,#b23b2e 12%,var(--surface)); border:1px solid color-mix(in srgb,#b23b2e 35%,transparent); color:#a2402f; padding:.7rem .9rem; border-radius:10px; font-size:.88rem; margin-bottom:1rem; }
.auth-ok  { background:color-mix(in srgb,#3f7d3a 12%,var(--surface)); border:1px solid color-mix(in srgb,#3f7d3a 35%,transparent); color:#2f6b2b; padding:.7rem .9rem; border-radius:10px; font-size:.88rem; margin-bottom:1rem; }

/* ---- Course grid ---- */
.course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.course-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg,16px); overflow:hidden; box-shadow:var(--sh-xs); display:flex; flex-direction:column; transition:box-shadow .3s, transform .3s, border-color .2s; }
.course-card:hover { box-shadow:var(--sh-lg); transform:translateY(-5px); border-color:var(--sage-200); }
.course-card .cc-media { aspect-ratio:16/9; overflow:hidden; background:var(--grad-sage,var(--sage-300)); position:relative; }
.course-card .cc-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.course-card:hover .cc-media img { transform:scale(1.05); }
.cc-body { padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.cc-body h3 { font-size:1.15rem; line-height:1.25; margin:0; }
.cc-body .cc-sum { color:var(--text-muted); font-size:.85rem; flex:1; }
.cc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; }
.cc-price { font-weight:800; font-size:1.15rem; color:var(--text); }
.cc-price .mrp { font-weight:500; font-size:.85rem; color:var(--text-subtle); text-decoration:line-through; margin-left:.35rem; }
.cc-price .free { color:var(--sage-600,#3f7d3a); }
.badge-enrolled { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#2f6b2b; background:color-mix(in srgb,#3f7d3a 14%,transparent); padding:.25rem .6rem; border-radius:999px; }

/* ---- Course detail ---- */
.course-detail { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(1.5rem,1rem + 2vw,3rem); align-items:start; }
@media(max-width:900px){ .course-detail { grid-template-columns:1fr; } .buy-card { position:static; } }
.buy-card { position:sticky; top:88px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg,16px); box-shadow:var(--sh-md); overflow:hidden; }
.buy-card .bc-top { aspect-ratio:16/9; overflow:hidden; background:var(--grad-sage); }
.buy-card .bc-top img { width:100%; height:100%; object-fit:cover; }
/* compact branded header when a course has no thumbnail — no big empty block */
.buy-card .bc-top--plain { aspect-ratio:auto; display:flex; align-items:center; gap:.6rem; padding:1rem 1.3rem; color:#fff; background:var(--grad-sage,linear-gradient(135deg,var(--sage-600,#3f5227),var(--sage-500,#6e8b43))); }
.buy-card .bc-top--plain span { font-family:var(--font-display,serif); font-size:.98rem; font-weight:600; letter-spacing:.01em; }
.buy-card .bc-top--plain svg { flex:none; opacity:.95; }
.buy-card .bc-in { padding:1.3rem; }
.buy-price { font-size:1.9rem; font-weight:800; }
.buy-price .mrp { font-size:1rem; font-weight:500; color:var(--text-subtle); text-decoration:line-through; margin-left:.5rem; }

/* Curriculum / lesson list */
.lesson-list { display:flex; flex-direction:column; gap:.5rem; }
.lesson-item { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--text); transition:border-color .2s, background .2s; }
.lesson-item:hover { border-color:var(--sage-300); background:var(--surface-2); }
.lesson-item .li-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb,var(--sage-500) 14%,transparent); color:var(--primary); flex:none; }
.lesson-item .li-t { flex:1; font-weight:600; font-size:.95rem; }
.lesson-item .li-meta { font-size:.78rem; color:var(--text-subtle); }
.lesson-item.locked { opacity:.72; }
.lesson-item.locked .li-ic { background:color-mix(in srgb,var(--text-subtle) 16%,transparent); color:var(--text-subtle); }
.pill-preview { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-600,#a07800); background:color-mix(in srgb,var(--gold-500,#c8961e) 18%,transparent); padding:.2rem .5rem; border-radius:999px; }

/* ---- Secure video player ---- */
.player-shell { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.5rem; align-items:start; }
@media(max-width:960px){ .player-shell { grid-template-columns:1fr; } }
/* ===== Secure YouTube player (custom controls, click-shield, watermark) ===== */
.secvid { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:var(--sh-lg); user-select:none; -webkit-user-select:none; }
.secvid iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
/* click-shield swallows every click so YouTube chrome/title is never reachable */
.secvid .shield { position:absolute; inset:0; z-index:3; cursor:pointer; background:transparent; }
/* per-student watermark — drifts via GPU transform (compositor-only → no jank) */
.secvid .wm { position:absolute; top:0; left:0; z-index:4; pointer-events:none; font:600 13px/1 var(--font-body,sans-serif);
  color:rgba(255,255,255,.5); text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap; letter-spacing:.02em;
  transition:transform 4s ease-in-out; will-change:transform; }
/* OPAQUE top bar covers YouTube's title area; auto-hides a few seconds into playback */
.secvid .topbar { position:absolute; top:0; left:0; right:0; z-index:9; height:50px; display:flex; align-items:flex-start;
  gap:8px; padding:9px 16px 0; color:#fff; font:700 12.5px var(--font-display,sans-serif); pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,16,10,.97) 52%,rgba(20,16,10,.5) 80%,transparent); transition:opacity .45s ease; }
.secvid.nochrome .topbar { opacity:0; }
.secvid .topbar b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* OPAQUE bottom control bar covers the logo / "Watch on YouTube" area */
.secvid .bar { position:absolute; left:0; right:0; bottom:0; z-index:10; display:flex; align-items:center; gap:12px;
  min-height:48px; padding:11px 16px 12px; background:#14100a; box-shadow:0 -10px 14px -6px #14100a; }
.secvid .bar button { background:none; border:0; color:#fff; cursor:pointer; display:flex; padding:2px; transition:opacity .15s; }
.secvid .bar button:hover { opacity:.72; }
.secvid .bar .prog { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.28); cursor:pointer; position:relative; }
.secvid .bar .prog i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--gold-500,#c8961e); width:0; }
.secvid .bar .t { color:#fff; font-size:12px; font-variant-numeric:tabular-nums; min-width:90px; text-align:right; }
/* poster covers the WHOLE video whenever it isn't actively playing (hides YT pre-play/paused branding) */
.secvid .poster { position:absolute; inset:0; z-index:8; background-size:cover; background-position:center; cursor:pointer; }
.secvid .poster::after { content:""; position:absolute; inset:0; background:rgba(8,6,3,.45); }
.secvid .poster .pbtn { position:absolute; inset:0; z-index:1; display:grid; place-items:center; }
.secvid .poster .pbtn svg { width:74px; height:74px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.secvid.playing .poster { display:none; }
/* fullscreen: keep watermark + bars inside */
.secvid:fullscreen, .secvid:-webkit-full-screen { border-radius:0; }
.player-side .side-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.2rem; margin-bottom:1rem; }
.player-side .lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-subtle); font-weight:700; display:block; margin-bottom:.7rem; }
.plesson { display:flex; align-items:center; gap:.6rem; padding:.55rem .3rem; border-radius:8px; text-decoration:none; color:var(--text-muted); font-size:.88rem; }
.plesson.active { background:color-mix(in srgb,var(--sage-500) 12%,transparent); color:var(--primary); font-weight:600; }
.plesson .n { width:22px; height:22px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font-size:.72rem; flex:none; }

/* ---- Tests ---- */
.test-shell { max-width:820px; margin-inline:auto; }
.test-bar { position:sticky; top:74px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.7rem 1rem; box-shadow:var(--sh-xs); margin-bottom:1.5rem; }
.test-timer { font-weight:800; font-variant-numeric:tabular-nums; color:var(--primary); }
.test-timer.warn { color:#a2402f; }
.q-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.3rem 1.4rem; margin-bottom:1rem; }
.q-card .q-num { font-size:.75rem; font-weight:700; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.06em; }
.q-card .q-text { font-size:1.08rem; font-weight:600; margin:.3rem 0 1rem; }
.q-opt { display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem; border:1px solid var(--border); border-radius:11px; cursor:pointer; margin-bottom:.55rem; transition:border-color .15s, background .15s; }
.q-opt:hover { border-color:var(--sage-300); background:var(--surface-2); }
.q-opt input { accent-color:var(--primary); width:18px; height:18px; }
.q-opt.correct { border-color:#3f7d3a; background:color-mix(in srgb,#3f7d3a 10%,transparent); }
.q-opt.wrong { border-color:#b23b2e; background:color-mix(in srgb,#b23b2e 10%,transparent); }

/* Result */
.result-hero { text-align:center; padding:2.5rem 1.25rem; }
.result-ring { width:160px; height:160px; margin:0 auto 1.25rem; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--pass-color,var(--sage-500)) calc(var(--pct,0) * 1%), var(--surface-2) 0); }
.result-ring .inner { width:126px; height:126px; border-radius:50%; background:var(--surface); display:grid; place-items:center; flex-direction:column; }
.result-ring .pct { font-size:2rem; font-weight:800; font-family:var(--font-display); }

/* Dashboard */
.dash-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:2rem; }
.dstat { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.2rem; }
.dstat b { font-size:1.8rem; font-family:var(--font-display); display:block; }
.dstat span { color:var(--text-subtle); font-size:.82rem; }
.progress { height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:.5rem; }
.progress > i { display:block; height:100%; background:var(--grad-sage,var(--sage-500)); border-radius:99px; }

/* ===== Help Center ===== */
.help-hero { background:linear-gradient(160deg, color-mix(in srgb,var(--sage-500) 16%,var(--surface)), var(--surface) 70%); padding:clamp(2.5rem,2rem + 3vw,4.5rem) 0 clamp(2rem,1.5rem + 2vw,3rem); text-align:center; border-bottom:1px solid var(--border); }
.help-hero h1 { font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem); margin:.4rem 0 .5rem; }
.help-hero p { color:var(--text-muted); max-width:52ch; margin:0 auto; }
.help-search { position:relative; max-width:560px; margin:1.6rem auto 0; }
.help-search span { position:absolute; left:1rem; top:50%; transform:translateY(-50%); opacity:.6; }
.help-search input { width:100%; padding:.95rem 1rem .95rem 2.7rem; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); font-size:1rem; font-family:inherit; box-shadow:var(--sh-sm,0 4px 14px rgba(0,0,0,.05)); }
.help-search input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent); }

.help-body { display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(1.5rem,1rem + 2vw,3rem); padding-block:clamp(2rem,1.5rem + 2vw,3.5rem); align-items:start; }
@media(max-width:820px){ .help-body { grid-template-columns:1fr; } .help-nav { position:static !important; flex-direction:row !important; flex-wrap:wrap; } }
.help-nav { position:sticky; top:88px; display:flex; flex-direction:column; gap:.25rem; }
.help-nav a { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:10px; color:var(--text-muted); text-decoration:none; font-size:.9rem; font-weight:500; transition:background .15s,color .15s; }
.help-nav a:hover { background:var(--surface-2); color:var(--primary); }
.help-nav a span { font-size:1.05rem; }

.help-cat { margin-bottom:2.2rem; scroll-margin-top:90px; }
.help-cat-h { display:flex; align-items:center; gap:.6rem; font-size:1.35rem; margin:0 0 1rem; }
.help-cat-ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--sage-500) 14%,transparent); font-size:1.1rem; }
.help-item { border:1px solid var(--border); border-radius:12px; background:var(--surface); margin-bottom:.6rem; overflow:hidden; transition:border-color .15s,box-shadow .15s; }
.help-item[open] { border-color:var(--sage-300); box-shadow:var(--sh-sm,0 4px 14px rgba(0,0,0,.05)); }
.help-item summary { cursor:pointer; list-style:none; padding:1rem 1.2rem; font-weight:600; font-size:.98rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.help-item summary::-webkit-details-marker { display:none; }
.help-chev { color:var(--primary); display:inline-flex; transition:transform .2s; flex:none; }
.help-item[open] .help-chev { transform:rotate(180deg); }
.help-a { padding:0 1.2rem 1.15rem; color:var(--text-muted); line-height:1.7; font-size:.94rem; }
.help-a a { color:var(--primary); font-weight:600; }
.help-empty { color:var(--text-muted); padding:1rem 0; }

.help-cta { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:1rem; padding:1.6rem 1.8rem; border-radius:18px; background:var(--grad-cta,linear-gradient(135deg,var(--sage-600,#3f5227),var(--sage-500,#6e8b43))); color:#fff; }
.help-cta h3 { margin:0 0 .2rem; color:#fff; font-family:var(--font-display); font-size:1.3rem; }
.help-cta p { margin:0; color:rgba(255,255,255,.85); font-size:.92rem; }

/* Admin help center (reuses admin tokens) */
.ahelp { max-width:900px; }
.ahelp .help-item { background:var(--ad-panel); border-color:var(--ad-border); }
.ahelp .help-a { color:var(--ad-muted); }
.ahelp-cat { margin-bottom:1.8rem; }
.ahelp-cat h2 { font-size:1.15rem; margin:0 0 .8rem; display:flex; align-items:center; gap:.5rem; }

/* Interactive star rating picker (radios in reverse 5→1 order) */
.star-pick { display:inline-flex; flex-direction:row-reverse; gap:.15rem; }
.star-pick label { color:#d8d2c2; transition:color .12s; line-height:1; }
.star-pick label:hover, .star-pick label:hover ~ label,
.star-pick input:checked ~ label { color:var(--gold-500); }

/* compact inputs used in the buy card (guest checkout, coupon) */
.buy-card .ci { width:100%; margin:0; padding:.6rem .75rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-family:inherit; font-size:.92rem; }
.buy-card .ci:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent); }

/* buttons full width helper (reuse .btn from styles.css) */
.btn-block { width:100%; justify-content:center; }
.muted-sm { color:var(--text-subtle); font-size:.8rem; }

/* ===== Student panel (dashboard sidebar layout) ===== */
.spanel-body { margin:0; background:var(--bg,#faf7f0); }
.spanel { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.spanel-side { position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:1rem .75rem 1.25rem; z-index:40; }
.sp-brand { display:flex; align-items:center; gap:.6rem; padding:.4rem .6rem 1rem; text-decoration:none; color:var(--text); }
.sp-brand img { height:34px; background:#fff; border-radius:8px; padding:3px; }
.sp-brand b { font-family:var(--font-display); font-size:1.05rem; display:block; line-height:1; }
.sp-brand small { color:var(--text-subtle); font-size:.7rem; font-weight:600; }
.sp-nav { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.sp-link { display:flex; align-items:center; gap:.7rem; padding:.65rem .8rem; border-radius:11px; color:var(--text-muted);
  text-decoration:none; font-size:.92rem; font-weight:500; transition:background .15s,color .15s; }
.sp-link:hover { background:var(--surface-2); color:var(--text); }
.sp-link.active { background:color-mix(in srgb,var(--sage-500) 14%,transparent); color:var(--primary); font-weight:600; }
.sp-link .ic { width:20px; height:20px; display:grid; place-items:center; flex:none; }
.sp-sep { height:1px; background:var(--border); margin:.7rem .4rem; }
.sp-enquire { margin-top:1rem; justify-content:center; }
.spanel-main { display:flex; flex-direction:column; min-width:0; }
.spanel-top { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:64px;
  background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.sp-ptitle { font-family:var(--font-display); font-size:1.05rem; }
.sp-top-actions { margin-left:auto; display:flex; align-items:center; gap:.7rem; }
.sp-hello { font-size:.88rem; color:var(--text-muted); font-weight:600; }
.sp-avatar { width:36px; height:36px; border-radius:50%; background:var(--grad-sage,var(--sage-500)); color:#fff; display:grid; place-items:center; font-weight:700; }
.sp-burger { display:none; background:none; border:0; color:var(--text); cursor:pointer; }
.spanel-content { padding:1.6rem 1.75rem 3rem; max-width:1200px; width:100%; }
.sp-scrim { display:none; }
@media(max-width:860px){
  .spanel { grid-template-columns:1fr; }
  .spanel-side { position:fixed; left:0; top:0; width:250px; transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--sh-xl); }
  .spanel-side.open { transform:none; }
  .sp-burger { display:inline-flex; }
  .sp-hello { display:none; }
  .sp-scrim.show { display:block; position:fixed; inset:0; background:rgba(20,16,10,.4); z-index:35; }
}

/* buttons inside the student panel (learning-body) must keep their own text color,
   overriding learning.css `.learning-body a{color:inherit}` */
.learning-body a.btn-primary{ color:#fff !important; }
.learning-body a.btn-accent{ color:#142d26 !important; }
.learning-body a.btn-ghost, .learning-body a.btn-outline{ color:#173c2e !important; }
.learning-body a.plesson{ color:inherit; }

/* .btn variants inside the student panel: force correct bg + text (beats /styles.css .btn and learning.css a{inherit}) */
.learning-body .btn-primary{ background:#173c2e !important; color:#fff !important; border-color:#173c2e !important; }
.learning-body .btn-accent{ background:#c3dc50 !important; color:#142d26 !important; border-color:#c3dc50 !important; }
.learning-body .btn-ghost{ background:transparent !important; color:#173c2e !important; border:1px solid #bac7ae !important; }