:root{
  --paper:#F3F4FA; --panel:#FFFFFF; --ink:#181B26; --slate:#585F72; --slate-soft:#9297A8;
  --line:#E2E3EE; --line-strong:#CDD0E2;
  --violet:#6E56CF; --violet-deep:#5641AD; --violet-soft:#EFEAFB;
  --teal:#177A5F; --teal-soft:#E3F4EE;
  --radius:14px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* aliases so admin.css (written against the old token names) still works */
  --muted:var(--slate);
  --accent:var(--violet);
  --accent-soft:var(--violet-soft);
  --danger:#A3372A;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3,.disp{font-family:var(--font-display); letter-spacing:-0.01em; margin:0;}
.mono{font-family:var(--font-mono);}
:focus-visible{outline:2px solid var(--violet); outline-offset:2px; border-radius:4px;}

/* ---------- Landing page ---------- */

.landing{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#FFFFFF;
}

.landing-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 40px 8px;
}

/* ---------- Logo lockup ---------- */

.logo{
  display:inline-flex;
  align-items:center;
  gap:11px;
}
.logo .mark{
  width:34px;
  height:34px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.02em;
  box-shadow:0 6px 14px -6px rgba(110,86,207,.55);
  flex-shrink:0;
}
.logo .word{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.015em;
  white-space:nowrap;
}
.logo .word .t1{ color:var(--ink); }
.logo .word .t2{ color:var(--violet); }

.logo.logo-lg .mark{ width:52px; height:52px; border-radius:14px; font-size:19px; }
.logo.logo-lg .word{ font-size:27px; }

.landing-hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 20px 130px;
  text-align:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:var(--violet-deep);
  background:var(--violet-soft);
  border:1px solid #DDD3F9;
  padding:5px 13px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:20px;
}
.eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--violet);}

.landing-hero h1{
  font-size:clamp(34px, 5.5vw, 54px);
  font-weight:700;
  line-height:1.06;
  margin:0 0 14px;
  max-width:720px;
}

.landing-hero p.sub{
  color:var(--slate);
  font-size:16.5px;
  max-width:460px;
  margin:0 0 44px;
}

.code-panel{
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:18px;
  padding:28px 30px 26px;
  box-shadow:0 1px 2px rgba(24,27,38,.05), 0 30px 60px -30px rgba(24,27,38,.30);
}

.code-form{
  display:flex;
  gap:10px;
  align-items:center;
}

.code-form input[type=text]{
  width:220px;
  font-family:var(--font-mono);
  font-size:22px;
  letter-spacing:0.35em;
  text-align:center;
  font-weight:600;
  padding:15px 10px 15px 22px;
  border:1.5px solid var(--line-strong);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease;
}
.code-form input[type=text]:focus{ border-color:var(--violet); }
.code-form input[type=text]::placeholder{
  letter-spacing:0.2em;
  color:#C7C9DA;
  font-weight:500;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14.5px;
  padding:16px 22px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  background:var(--violet);
  color:#fff;
  box-shadow:0 8px 20px -10px rgba(110,86,207,.6);
  transition:background .15s ease, transform .12s ease;
}
.btn:hover{ background:var(--violet-deep); }
.btn:active{ transform:scale(0.97); }

.error-msg{
  margin-top:16px;
  color:#A3372A;
  font-size:13.5px;
  font-family:var(--font-mono);
}

.landing-foot{
  text-align:center;
  padding:20px;
  color:var(--slate-soft);
  font-size:12px;
  font-family:var(--font-mono);
}

/* ---------- Course viewer ---------- */

.viewer{
  display:flex;
  height:100vh;
  overflow:hidden;
  position:relative;
}

.sidebar{
  width:300px;
  flex-shrink:0;
  background:var(--panel);
  border-right:1px solid var(--line);
  overflow-y:auto;
  padding:18px 0 40px;
  transition:width .22s ease, padding .22s ease, opacity .18s ease;
}

.viewer.collapsed .sidebar{
  width:0;
  padding:18px 0 40px 0;
  overflow:hidden;
  opacity:0;
  border-right:none;
}

.sidebar-head{
  padding:0 18px 16px;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
}

.sidebar-head .course-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  line-height:1.25;
}

.sidebar-head .course-code{
  display:inline-block;
  margin-top:9px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--violet-deep);
  background:var(--violet-soft);
  border:1px solid #DDD3F9;
  padding:4px 10px;
  border-radius:999px;
}

.sidebar-head a.exit{
  display:inline-block;
  margin-top:14px;
  font-size:12px;
  color:var(--slate-soft);
  text-decoration:none;
}
.sidebar-head a.exit:hover{ color:var(--ink); }

.section-block{ margin-bottom:4px; }

.section-title{
  padding:12px 18px 6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--slate-soft);
  font-weight:700;
}

.subsection-title{
  padding:8px 18px 4px 18px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}

.page-link{
  display:block;
  padding:8px 18px 8px 30px;
  font-size:13.5px;
  color:var(--slate);
  text-decoration:none;
  border-left:2px solid transparent;
  cursor:pointer;
}
.page-link:hover{ color:var(--ink); background:var(--paper); }
.page-link.active{
  color:var(--violet-deep);
  border-left-color:var(--violet);
  background:var(--violet-soft);
  font-weight:600;
}

.empty-note{
  padding:10px 18px;
  font-size:12.5px;
  color:var(--slate-soft);
  font-style:italic;
}

.content-area{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  position:relative;
  min-width:0;
}

.content-area iframe{
  flex:1;
  border:none;
  width:100%;
  background:#fff;
}

.content-placeholder{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:var(--slate);
  text-align:center;
  padding:40px;
}
.content-placeholder h2{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
}

.sidebar-toggle{
  position:absolute;
  top:16px;
  left:284px;
  z-index:20;
  width:30px;
  height:30px;
  border-radius:8px;
  border:1px solid var(--line-strong);
  background:var(--panel);
  color:var(--slate);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:13px;
  box-shadow:0 4px 10px -4px rgba(24,27,38,.18);
  transition:left .22s ease, transform .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-toggle:hover{ color:var(--violet-deep); border-color:var(--violet); }
.viewer.collapsed .sidebar-toggle{ left:16px; transform:scaleX(-1); }

@media (max-width:760px){
  .viewer{ flex-direction:column; height:auto; }
  .sidebar{ width:100%; border-right:none; border-bottom:1px solid var(--line); max-height:40vh; }
  .viewer.collapsed .sidebar{ max-height:0; padding:0; }
  .content-area iframe{ min-height:60vh; }
  .sidebar-toggle{ position:static; margin:12px 0 0 12px; }
}