/* ════════════════════════════════════════════════════════════════════
   Octary Learning Console — shared styles
   ════════════════════════════════════════════════════════════════════ */
.lms-wrap { max-width: 1180px; margin: 0 auto; padding: calc(64px + 2.5rem) 1.5rem 4rem; }
.lms-eyebrow { display:inline-flex;align-items:center;gap:.6rem;background:rgba(0,212,170,.05);border:none;border-left:3px solid var(--accent);color:var(--accent);padding:.38rem .9rem .38rem .7rem;border-radius:0 4px 4px 0;font-size:.72rem;font-weight:700;letter-spacing:.09em;margin-bottom:1rem;text-transform:uppercase; }
.lms-h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: .6rem; color: var(--text-primary); line-height:1.15; }
.lms-sub { color: var(--text-secondary); font-size: 1.02rem; max-width: 640px; line-height: 1.6; margin-bottom: 2rem; }

/* Course grid */
.lms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.25rem; }
.lms-card { display:block; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; text-decoration:none; transition:border-color .2s, transform .2s; }
.lms-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.lms-card-cover { aspect-ratio:16/9; background:linear-gradient(135deg,#0f1828,#1a2235); display:flex; align-items:center;justify-content:center; font-size:2.4rem; position:relative; overflow:hidden; }
.lms-card-cover img { width:100%; height:100%; object-fit:cover; }
.lms-card-level { position:absolute; top:.7rem; left:.7rem; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); color:#fff; font:600 .68rem var(--font-body); padding:.2rem .55rem; border-radius:4px; text-transform:capitalize; }
.lms-card-body { padding:1.1rem 1.2rem 1.3rem; }
.lms-card-cat { font:700 .68rem var(--font-body); letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem; }
.lms-card-title { font-size:1.05rem; font-weight:700; color:var(--text-primary); margin-bottom:.4rem; line-height:1.35; }
.lms-card-desc { font-size:.82rem; color:var(--text-muted); line-height:1.55; margin-bottom:.9rem; }
.lms-card-foot { display:flex; align-items:center; justify-content:space-between; padding-top:.8rem; border-top:1px solid rgba(255,255,255,.06); }
.lms-card-price { font-weight:800; font-size:1.05rem; color:var(--text-primary); }
.lms-card-price.free { color:#4ade80; }
.lms-card-meta { font-size:.72rem; color:var(--text-muted); display:flex; gap:.5rem; align-items:center; }

.lms-empty { text-align:center; padding:4rem 1.5rem; color:var(--text-muted); }
.lms-empty h3 { color:var(--text-secondary); font-size:1.15rem; margin-bottom:.5rem; }

/* Buttons */
.lms-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.5rem; border-radius:8px; font:700 .88rem var(--font-body); text-decoration:none; cursor:pointer; border:none; transition:opacity .15s, transform .1s; }
.lms-btn:active { transform:scale(.98); }
.lms-btn-primary { background:var(--accent); color:#04140f; }
.lms-btn-primary:hover { opacity:.9; }
.lms-btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text-secondary); }
.lms-btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.lms-btn-block { width:100%; }
.lms-btn[disabled] { opacity:.5; cursor:not-allowed; }

/* Forms */
.lms-form-group { margin-bottom:1rem; }
.lms-form-group label { display:block; font:600 .8rem var(--font-body); color:var(--text-secondary); margin-bottom:.4rem; }
.lms-input { width:100%; background:var(--bg-elevated,#1a2235); border:1px solid var(--border); border-radius:8px; padding:.7rem .9rem; color:var(--text-primary); font:.92rem var(--font-body); outline:none; transition:border-color .15s; }
.lms-input:focus { border-color:var(--accent); }
.lms-row2 { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media(max-width:520px){ .lms-row2{grid-template-columns:1fr} }
.lms-err { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; padding:.7rem .9rem; border-radius:8px; font-size:.82rem; margin-bottom:1rem; }
.lms-ok { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#86efac; padding:.7rem .9rem; border-radius:8px; font-size:.82rem; margin-bottom:1rem; }

/* Auth card */
.lms-auth-card { max-width:420px; margin:0 auto; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:2rem; }
.lms-auth-divider { display:flex; align-items:center; gap:.8rem; margin:1.3rem 0; color:var(--text-muted); font-size:.78rem; }
.lms-auth-divider::before,.lms-auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.lms-google-btn { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%; background:#fff; color:#1f1f1f; border:1px solid #d0d0d0; border-radius:8px; padding:.7rem 1rem; font:600 .88rem var(--font-body); cursor:pointer; text-decoration:none; transition:box-shadow .15s; }
.lms-google-btn:hover { box-shadow:0 2px 8px rgba(0,0,0,.2); }
.lms-auth-switch { text-align:center; margin-top:1.2rem; font-size:.84rem; color:var(--text-muted); }
.lms-auth-switch a { color:var(--accent); font-weight:600; text-decoration:none; }

/* Course detail page */
.lms-course-hero { display:grid; grid-template-columns:1fr 360px; gap:2.5rem; align-items:start; }
@media(max-width:880px){ .lms-course-hero{grid-template-columns:1fr} }
.lms-buy-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:1.5rem; position:sticky; top:90px; }
.lms-buy-cover { aspect-ratio:16/9; border-radius:10px; overflow:hidden; margin-bottom:1.2rem; background:linear-gradient(135deg,#0f1828,#1a2235); display:flex;align-items:center;justify-content:center;font-size:2.5rem; }
.lms-buy-cover img { width:100%;height:100%;object-fit:cover; }
.lms-buy-price { font-size:2rem; font-weight:800; color:var(--text-primary); margin-bottom:.2rem; }
.lms-buy-price.free { color:#4ade80; }
.lms-buy-meta-row { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.82rem; color:var(--text-secondary); }
.lms-buy-meta-row:last-of-type { border-bottom:none; }

.lms-module-list { margin-top:2.5rem; }
.lms-module { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; margin-bottom:.8rem; overflow:hidden; }
.lms-module-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; cursor:pointer; }
.lms-module-head h3 { font-size:.95rem; font-weight:700; color:var(--text-primary); }
.lms-module-head .n { font-size:.76rem; color:var(--text-muted); }
.lms-lesson-list { border-top:1px solid var(--border); }
.lms-lesson-row { display:flex; align-items:center; gap:.7rem; padding:.7rem 1.2rem; font-size:.84rem; color:var(--text-secondary); border-bottom:1px solid rgba(255,255,255,.04); }
.lms-lesson-row:last-child { border-bottom:none; }
.lms-lesson-row .ico { width:18px; text-align:center; color:var(--text-muted); }
.lms-lesson-row.done .ico { color:#4ade80; }

/* Promo box */
.lms-promo-box { margin-top:1rem; }
.lms-promo-row { display:flex; gap:.5rem; }
.lms-promo-row input { flex:1; }
.lms-promo-applied { display:flex; align-items:center; justify-content:space-between; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.3); border-radius:8px; padding:.6rem .8rem; font-size:.82rem; color:#86efac; margin-top:.6rem; }

/* ── Lesson player ─────────────────────────────────────────────── */
.lms-player { display:grid; grid-template-columns:300px 1fr; min-height:calc(100vh - 64px); }
@media(max-width:880px){ .lms-player{grid-template-columns:1fr} }
.lms-sidebar { background:var(--bg-surface); border-right:1px solid var(--border); padding:1.2rem 0; overflow-y:auto; max-height:calc(100vh - 64px); position:sticky; top:64px; }
.lms-sidebar-hd { padding:0 1.2rem 1rem; border-bottom:1px solid var(--border); margin-bottom:.6rem; }
.lms-sidebar-hd a { font-size:.76rem; color:var(--text-muted); text-decoration:none; }
.lms-sidebar-hd h2 { font-size:.95rem; font-weight:700; color:var(--text-primary); margin-top:.4rem; }
.lms-sb-progress { height:5px; background:rgba(255,255,255,.07); border-radius:3px; margin-top:.6rem; overflow:hidden; }
.lms-sb-progress-bar { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; }
.lms-sb-module { padding:.6rem 1.2rem .2rem; font:700 .68rem var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.lms-sb-lesson { display:flex; align-items:center; gap:.6rem; padding:.6rem 1.2rem; font-size:.83rem; color:var(--text-secondary); text-decoration:none; transition:background .12s,color .12s; }
.lms-sb-lesson:hover { background:rgba(255,255,255,.04); color:var(--text-primary); }
.lms-sb-lesson.active { background:rgba(0,212,170,.08); color:var(--accent); font-weight:600; border-right:2px solid var(--accent); }
.lms-sb-lesson .ico { width:16px; text-align:center; flex-shrink:0; }
.lms-sb-lesson.done .ico { color:#4ade80; }

.lms-content-area { padding:2rem 2.5rem 5rem; max-width:880px; }
@media(max-width:600px){ .lms-content-area{padding:1.3rem 1.2rem 4rem} }
.lms-lesson-hd { margin-bottom:1.6rem; }
.lms-lesson-hd .crumb { font-size:.76rem; color:var(--text-muted); margin-bottom:.5rem; }
.lms-lesson-hd h1 { font-size:1.6rem; font-weight:800; color:var(--text-primary); }

.lms-block { margin-bottom:1.8rem; }
.lms-block-text { font-size:.98rem; line-height:1.75; color:var(--text-secondary); }
.lms-block-text h2 { font-size:1.25rem; font-weight:700; color:var(--text-primary); margin:1.5rem 0 .7rem; }
.lms-block-text h3 { font-size:1.05rem; font-weight:700; color:var(--text-primary); margin:1.2rem 0 .5rem; }
.lms-block-text ul,.lms-block-text ol { margin:.6rem 0 .6rem 1.3rem; }
.lms-block-text li { margin-bottom:.35rem; }
.lms-block-image { border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.lms-block-image img { width:100%; display:block; }
.lms-block-image figcaption { padding:.6rem .9rem; font-size:.78rem; color:var(--text-muted); background:var(--bg-surface); }
.lms-block-video { border-radius:10px; overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9; background:#000; }
.lms-block-video iframe,.lms-block-video video { width:100%; height:100%; border:none; }
.lms-video-label { font-size:.85rem; color:var(--text-muted); margin:1.5rem 0 .6rem; }
.lms-video-label strong { color:var(--accent); }
.lms-block-callout { background:rgba(0,212,170,.06); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:1rem 1.2rem; font-size:.9rem; color:var(--text-secondary); }
.lms-block-diagram { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:1.5rem; }

.lms-lesson-nav { display:flex; justify-content:space-between; align-items:center; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.lms-lesson-nav a, .lms-lesson-nav button { font:600 .85rem var(--font-body); }

/* Quiz */
.lms-quiz-heading { font-size:1.2rem; font-weight:800; color:var(--text-primary); margin:2.5rem 0 1.2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.lms-quiz-q { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:1.3rem; margin-bottom:1rem; }
.lms-quiz-q-text { font-weight:700; color:var(--text-primary); margin-bottom:.9rem; font-size:.94rem; }
.lms-quiz-opt { display:flex; align-items:center; gap:.65rem; padding:.65rem .8rem; border-radius:7px; border:1px solid var(--border); margin-bottom:.5rem; cursor:pointer; font-size:.88rem; color:var(--text-secondary); transition:border-color .15s,background .15s; }
.lms-quiz-opt:hover { border-color:var(--accent); }
.lms-quiz-opt.selected { border-color:var(--accent); background:rgba(0,212,170,.06); color:var(--text-primary); }
.lms-quiz-opt.correct { border-color:#4ade80; background:rgba(74,222,128,.08); }
.lms-quiz-opt.incorrect { border-color:#f87171; background:rgba(248,113,113,.08); }
.lms-quiz-explain { margin-top:.7rem; padding:.7rem .9rem; background:rgba(255,255,255,.03); border-radius:7px; font-size:.82rem; color:var(--text-muted); }
.lms-quiz-result { text-align:center; padding:2rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; }
.lms-quiz-result .pct { font-size:2.5rem; font-weight:800; color:var(--accent); }

/* Admin */
.lms-admin-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.lms-admin-table th { text-align:left; padding:.7rem 1rem; color:var(--text-muted); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); }
.lms-admin-table td { padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,.05); color:var(--text-secondary); vertical-align:middle; }
.lms-admin-table tr:hover td { background:rgba(255,255,255,.02); }
.lms-status-pill { display:inline-block; padding:.18rem .55rem; border-radius:4px; font:700 .68rem var(--font-body); text-transform:uppercase; letter-spacing:.04em; }
.lms-status-published { background:rgba(74,222,128,.12); color:#4ade80; }
.lms-status-draft { background:rgba(148,163,184,.12); color:#94a3b8; }
.lms-status-archived { background:rgba(248,113,113,.12); color:#f87171; }

.lms-admin-nav { display:flex; gap:.5rem; margin-bottom:2rem; border-bottom:1px solid var(--border); }
.lms-admin-nav a { padding:.7rem 1rem; font:600 .85rem var(--font-body); color:var(--text-muted); text-decoration:none; border-bottom:2px solid transparent; }
.lms-admin-nav a.active,.lms-admin-nav a:hover { color:var(--accent); border-bottom-color:var(--accent); }

/* Editor */
.lms-editor-toolbar { display:flex; gap:.4rem; padding:.6rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px 10px 0 0; flex-wrap:wrap; }
.lms-editor-toolbar button { background:var(--bg-elevated,#1a2235); border:1px solid var(--border); color:var(--text-secondary); border-radius:6px; padding:.45rem .7rem; font:600 .76rem var(--font-body); cursor:pointer; transition:all .15s; }
.lms-editor-toolbar button:hover { border-color:var(--accent); color:var(--accent); }
.lms-editor-canvas { border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; min-height:300px; padding:1rem; background:var(--bg-elevated,#1a2235); }
.lms-editor-block { border:1px solid transparent; border-radius:8px; padding:.6rem; margin-bottom:.6rem; position:relative; }
.lms-editor-block:hover { border-color:var(--border); }
.lms-editor-block-controls { position:absolute; top:.3rem; right:.3rem; display:none; gap:.3rem; }
.lms-editor-block:hover .lms-editor-block-controls { display:flex; }
.lms-editor-block-controls button { background:rgba(0,0,0,.5); border:none; color:#fff; width:24px; height:24px; border-radius:4px; cursor:pointer; font-size:.75rem; }