/* ===========================
   LigerLearn Professional Themes (Clean)
   Based on your Coxy Builder UI
   =========================== */

/* Core sizing + motion */
:root{
  --radius-lg: 1.25rem;
  --radius-md: 0.75rem;
  --transition-fast: 0.18s ease-out;
  --transition-slow: 0.35s ease-out;
}

*{ box-sizing:border-box; }
.hidden{ display:none; }

/* ---------- Themes (body.theme-*) ---------- */
body.theme-midnight{
  --bg-body: radial-gradient(circle at top left, #4f46e5 0, #020617 46%);
  --bg-surface: rgba(15, 23, 42, 0.97);
  --card-bg: radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), rgba(15, 23, 42, 0.98));
  --card-border: rgba(148, 163, 184, 0.55);
  --card-shadow: 0 22px 50px rgba(15, 23, 42, 0.9);
  --border-color: rgba(148, 163, 184, 0.5);
  --accent: #8b5cf6;
  --accent-soft: #6366f1;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --text-soft: #c4c9d4;
  --pill-bg: rgba(34, 197, 94, 0.12);
  --pill-border: rgba(74, 222, 128, 0.6);
  --pill-text: #bbf7d0;
  --input-bg: rgba(15, 23, 42, 0.9);
  --input-border: rgba(148, 163, 184, 0.7);
  --scrollbar-track: rgba(15, 23, 42, 0.9);
  --scrollbar-thumb: rgba(79, 70, 229, 0.9);
}

body.theme-sunrise{
  --bg-body: linear-gradient(135deg, #fee2e2 0, #fef3c7 30%, #f9fafb 100%);
  --bg-surface: #ffffff;
  --card-bg: linear-gradient(145deg, #fff7ed, #fefce8);
  --card-border: #fed7aa;
  --card-shadow: 0 14px 30px rgba(251, 191, 36, 0.35);
  --border-color: #e5e7eb;
  --accent: #f97316;
  --accent-soft: #ec4899;
  --text-main: #0f172a;
  --text-muted: #6b7280;
  --text-soft: #4b5563;
  --pill-bg: rgba(22, 163, 74, 0.08);
  --pill-border: rgba(22, 163, 74, 0.45);
  --pill-text: #15803d;
  --input-bg: #ffffff;
  --input-border: #e5e7eb;
  --scrollbar-track: #f3f4f6;
  --scrollbar-thumb: #f59e0b;
}

body.theme-forest{
  --bg-body: radial-gradient(circle at top left, #22c55e 0, #020617 48%);
  --bg-surface: rgba(6, 24, 24, 0.97);
  --card-bg: radial-gradient(circle at top left, rgba(45, 212, 191, 0.18), rgba(6, 24, 24, 0.98));
  --card-border: rgba(45, 212, 191, 0.6);
  --card-shadow: 0 20px 50px rgba(2, 6, 23, 0.9);
  --border-color: rgba(51, 65, 85, 0.7);
  --accent: #22c55e;
  --accent-soft: #14b8a6;
  --text-main: #e5f9f4;
  --text-muted: #a7f3d0;
  --text-soft: #99f6e4;
  --pill-bg: rgba(34, 197, 94, 0.14);
  --pill-border: rgba(74, 222, 128, 0.7);
  --pill-text: #bbf7d0;
  --input-bg: rgba(15, 23, 42, 0.9);
  --input-border: rgba(45, 212, 191, 0.65);
  --scrollbar-track: rgba(6, 24, 24, 0.96);
  --scrollbar-thumb: rgba(34, 197, 94, 0.9);
}

body.theme-terminal{
  --bg-body: radial-gradient(circle at top left, #22c55e 0, #020617 60%);
  --bg-surface: #020617;
  --card-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.98));
  --card-border: rgba(34, 197, 94, 0.6);
  --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.95);
  --border-color: rgba(34, 197, 94, 0.55);
  --accent: #22c55e;
  --accent-soft: #4ade80;
  --text-main: #e5f9e7;
  --text-muted: #6ee7b7;
  --text-soft: #bbf7d0;
  --pill-bg: rgba(34, 197, 94, 0.1);
  --pill-border: rgba(34, 197, 94, 0.7);
  --pill-text: #bbf7d0;
  --input-bg: #020617;
  --input-border: rgba(34, 197, 94, 0.7);
  --scrollbar-track: #020617;
  --scrollbar-thumb: #16a34a;
}

body.theme-solarized{
  --bg-body: radial-gradient(circle at top left, #0f766e 0, #0f172a 45%, #020617 100%);
  --bg-surface: #0b1120;
  --card-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 75, 0.9));
  --card-border: rgba(148, 163, 184, 0.65);
  --card-shadow: 0 20px 44px rgba(15, 23, 42, 0.9);
  --border-color: rgba(148, 163, 184, 0.7);
  --accent: #0ea5e9;
  --accent-soft: #eab308;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --text-soft: #facc15;
  --pill-bg: rgba(14, 165, 233, 0.12);
  --pill-border: rgba(234, 179, 8, 0.7);
  --pill-text: #fde68a;
  --input-bg: rgba(15, 23, 42, 0.92);
  --input-border: rgba(148, 163, 184, 0.7);
  --scrollbar-track: #020617;
  --scrollbar-thumb: #0ea5e9;
}

body.theme-cardano{
  --bg-body: radial-gradient(circle at top left, #0ea5e9 0, #0b1120 45%, #020617 100%);
  --bg-surface: rgba(10, 18, 40, 0.98);
  --card-bg: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.98));
  --card-border: rgba(56, 189, 248, 0.75);
  --card-shadow: 0 22px 48px rgba(15, 23, 42, 0.95);
  --border-color: rgba(148, 163, 184, 0.8);
  --accent: #0ea5e9;
  --accent-soft: #2563eb;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --text-soft: #bfdbfe;
  --pill-bg: rgba(74, 222, 128, 0.1);
  --pill-border: rgba(74, 222, 128, 0.7);
  --pill-text: #bbf7d0;
  --input-bg: rgba(15, 23, 42, 0.96);
  --input-border: rgba(96, 165, 250, 0.8);
  --scrollbar-track: #020617;
  --scrollbar-thumb: #2563eb;
}

/* ---------- Global layout ---------- */
body{
  margin:0;
  /*padding:1.5rem;*/
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  transition: background var(--transition-slow), color var(--transition-fast);
}

body::-webkit-scrollbar{ width:10px; }
body::-webkit-scrollbar-track{ background: var(--scrollbar-track); }
body::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius:999px; }

a{ color: var(--accent-soft); text-underline-offset: 3px; }
a:hover{ text-decoration: underline; }

.page{
  /*max-width: 1200px;*/
  /*margin: 0 auto;*/
  /*background: var(--bg-surface);*/
  /*border-radius: 1.8rem;*/
  /*border: 1px solid var(--border-color);*/
  /*box-shadow: 0 26px 70px rgb(15 23 42 / .75);*/
  /*padding: 1.5rem 1.75rem 1.75rem;*/
  /*display:flex;*/
  /*flex-direction:column;*/
  /*gap: 1.15rem;*/
  /*backdrop-filter: blur(26px);*/
}

/* ---------- Header ---------- */
.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.brand-logo{
  width:48px;
  height:34px;
  border-radius:999px;
  background: radial-gradient(circle at 20% 0%, var(--accent-soft), var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.78rem;
  color:#f9fafb;
  line-height:1.1;
}

.brand-text h1{
  margin:0;
  font-size: 1.05rem;
  letter-spacing:.02em;
}

.brand-text p{
  margin:.15rem 0 0;
  font-size:.78rem;
  color: var(--text-muted);
}

.header-right{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* ---------- Theme pills ---------- */
.theme-switcher{
  display:flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem;
  border-radius:999px;
  background: rgb(15 23 42 / .4);
  border: 1px solid rgb(148 163 184 / .3);
  flex-wrap: wrap;
}

body.theme-sunrise .theme-switcher{
  background: rgb(249 250 251 / .8);
  border-color: rgb(209 213 219 / .9);
}

.theme-label{
  font-size:.75rem;
  color: var(--text-muted);
  padding: 0 .4rem;
}

.theme-pill{
  border:none;
  border-radius:999px;
  padding:.25rem .65rem;
  font-size:.78rem;
  background: transparent;
  color: var(--text-soft);
  cursor:pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  white-space:nowrap;
}

.theme-pill:hover{
  background: rgb(148 163 184 / .25);
  transform: translateY(-1px);
}

.theme-pill.is-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color:#f9fafb;
}

/* ---------- Compact toggle ---------- */
.compact-toggle{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.8rem;
  cursor:pointer;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgb(148 163 184 / .4);
  background: rgb(15 23 42 / .4);
}

body.theme-sunrise .compact-toggle{
  background: rgb(249 250 251 / .8);
}

.compact-toggle input{ display:none; }

.compact-toggle-slider{
  width:26px;
  height:14px;
  border-radius:999px;
  background: rgb(75 85 99 / .6);
  position:relative;
  transition: background var(--transition-fast);
}

.compact-toggle-slider::before{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border-radius:999px;
  background:#f9fafb;
  top:1px;
  left:1px;
  transition: transform var(--transition-fast);
}

.compact-toggle input:checked + .compact-toggle-slider{
  background: var(--accent);
}

.compact-toggle input:checked + .compact-toggle-slider::before{
  transform: translateX(12px);
}

.compact-toggle-text{ color: var(--text-soft); }

/* ---------- Status pill ---------- */
.status-pill{
  padding:.35rem .9rem;
  border-radius:999px;
  font-size:.78rem;
  border:1px solid var(--pill-border);
  background: var(--pill-bg);
  color: var(--pill-text);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  cursor:pointer;
}

.status-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
}

/* ---------- Grid rows ---------- */
.row{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.row--3 > .col{ width:100%; }

@media (min-width: 900px){
  .row--3{ flex-direction: row; }
  .row--3 > .col{ flex:1; }
}

@media (max-width: 820px){
  .header-row{ flex-direction:column; align-items:flex-start; }
  .header-right{ width:100%; justify-content:flex-start; gap:.5rem; }
  .theme-switcher{ width:100%; justify-content:flex-start; }
}

/* ---------- Cards/panels ---------- */
.step-block,
.subpanel{
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: .9rem 1rem;
  position:relative;
  overflow:hidden;
}

.step-block::before,
.subpanel::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgb(255 255 255 / .08), transparent 40%);
  opacity:.6;
  pointer-events:none;
}

.step-title{
  font-size:.94rem;
  font-weight:600;
  margin-bottom:.35rem;
}

.step-subtitle{
  font-size:.83rem;
  color: var(--text-muted);
}

.panel-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

/* ---------- Inputs ---------- */
input[type="text"], select{
  width:100%;
  padding:.6rem .75rem;
  border-radius:.6rem;
  border:1px solid var(--input-border);
  font-size:.9rem;
  background: var(--input-bg);
  color: var(--text-main);
  outline:none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

input::placeholder{ color: var(--text-muted); }

input:focus, select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgb(129 140 248 / .6), 0 16px 30px rgb(15 23 42 / .35);
  transform: translateY(-1px);
}

/* ---------- Video ---------- */
.video{
  aspect-ratio: 16/9;
  width:100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow:hidden;
}

iframe{ width:100%; height:100%; border:0; }

/* ---------- Buttons ---------- */
.primary-btn{
  padding:.55rem 1.3rem;
  border-radius:999px;
  border:none;
  font-size:.9rem;
  font-weight:600;
  color:#f9fafb;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  cursor:pointer;
  box-shadow: 0 16px 32px rgb(37 99 235 / .35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.primary-btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgb(37 99 235 / .45);
}

.primary-btn:active{
  transform: scale(.98);
}

.secondary-btn{
  padding:.35rem .9rem;
  border-radius:999px;
  border:1px solid var(--border-color);
  font-size:.8rem;
  background: rgb(15 23 42 / .22);
  color: var(--text-main);
  cursor:pointer;
}

/* ---------- Progress ---------- */
.progress-bar{
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgb(15 23 42 / .18);
  overflow:hidden;
} 

.progress-fill{
  height:100%;
  width:0%;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  transition: width 220ms ease;
  text-align: center;
}

/* ---------- Quiz ---------- */
.quiz{
  margin-top:.85rem;
  padding-top:.85rem;
  border-top: 1px solid var(--border-color);
}

.opts{ display:grid; gap:.6rem; margin-top:.6rem; }

label.opt{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.6rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: .8rem;
  cursor:pointer;
  background: rgb(15 23 42 / .12);
}

label.opt:hover{
  background: rgb(15 23 42 / .18);
}

.feedback{
  margin-top:.6rem;
  padding:.6rem .75rem;
  border-radius:.8rem;
  border: 1px solid var(--border-color);
  display:none;
}

.feedback.ok, .feedback.bad{ display:block; }

/* ---------- Compact mode ---------- */
body.compact-mode .page{
  padding: 1.1rem 1.2rem 1.25rem;
  gap: .7rem;
}
body.compact-mode .step-block,
body.compact-mode .subpanel{
  padding: .55rem .7rem;
  border-radius: .6rem;
}

/* Sticky top bar */
.sticky-topbar{
  position: sticky;
  top: 0;
  z-index: 999;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 55px rgba(2,6,23,.55);
  padding: .85rem 1rem;
}

.topbar-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  flex-wrap: wrap;
}

.topbar-right{
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar-progress{
  margin-top: .65rem;
  display: grid;
  gap: .35rem;
}

.topbar-progress small{
  color: var(--text-muted);
  font-style: italic;
}

/* Big full-width video card */
.video-card, .toc-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.05rem;
   display: flex;
  justify-content: center;
}

.video--hero{
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 auto;
}

/* Make TOC look pro under the video */
.toc.toc--pro{
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--bg-light) 40%, transparent);
  border-radius: var(--radius-md);
  padding: .75rem .9rem;
}

.toc.toc--pro ol{
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .35rem;
}

@media (min-width: 900px){
  .toc.toc--pro ol{ grid-template-columns: 1fr 1fr; }
}

/* On small screens, keep the sticky bar clean */
@media (max-width: 820px){
  .sticky-topbar{ padding: .75rem .85rem; }
  .brand-text p{ display:none; }
}

.lesson-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:.6rem;
  padding-top:.6rem;
  border-top: 1px solid var(--border-color, rgba(148,163,184,.35));
  max-height: 160px;        /* keeps the header clean */
  overflow:auto;            /* scroll if too many */
}

.lesson-nav::-webkit-scrollbar{ height: 10px; width: 10px; }
.lesson-nav::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: 999px; }
.lesson-nav::-webkit-scrollbar-track{ background: var(--scrollbar-track); }

.lesson-btn{
  border:none;
  border-radius:999px;
  padding:.28rem .65rem;
  font-size:.78rem;
  cursor:pointer;
  white-space:nowrap;
  background: rgba(148,163,184,.18);
  color: var(--text-soft, #cbd5e1);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.lesson-btn:hover{
  transform: translateY(-1px);
  background: rgba(148,163,184,.28);
}

.lesson-btn.is-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color:#f9fafb;
  font-weight:700;
}

.pill-toggle {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));;
  border-radius: 999px;
  font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  user-select: none;
  width:100%;
  margin:3px;
  height:22px;
}

.pill-toggle:hover { filter: brightness(0.98); }
.pill-toggle:active { transform: translateY(1px); }
.pill-toggle:focus { outline: 2px solid rgba(0,0,0,0.25); outline-offset: 2px; }

.toolbar {
  overflow: hidden;
  transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease;
  max-height: 500px;      /* set big enough for your toolbar */
  opacity: 1;
  transform: translateY(0);
}

.toolbar.is-collapsed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  text-align:center;
}

#lessonNav{
    background-color:linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 75, 0.9));
}