/* 课程阅读系统 v2 · 七门课程与构建生成单课页的最终共享层 */
:root{
  --course-sidebar-w:288px;
  --course-header-h:64px;
  --course-reading-w:900px;
  --course-wide-w:1120px;
}

body.lys-course,
body.ls-course,
body.lesson-page{
  overflow-x:clip;
  color:var(--text-primary);
  background-color:var(--bg-primary);
}
body.lys-course img,
body.ls-course img,
body.lesson-page img,
body.lys-course svg,
body.ls-course svg,
body.lesson-page svg,
body.lys-course canvas,
body.ls-course canvas,
body.lesson-page canvas{
  max-width:100%;
}

/* 课程壳：固定目录 + 单一阅读轴 */
body.lys-course .app,
body.ls-course .app,
body.lys-course .course-app,
body.ls-course .course-app{
  display:grid!important;
  grid-template-columns:var(--course-sidebar-w) minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  min-height:calc(100vh - 56px)!important;
  padding-top:0!important;
}
body.lys-course .sidebar,
body.ls-course .sidebar,
body.lys-course aside.sidebar,
body.ls-course aside.sidebar,
body.lys-course #sidebar.sidebar,
body.ls-course #sidebar.sidebar{
  position:fixed!important;
  inset:56px auto auto 0!important;
  width:var(--course-sidebar-w)!important;
  max-width:var(--course-sidebar-w)!important;
  height:calc(100dvh - 56px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:20px 0 32px!important;
  border:0!important;
  border-right:1px solid var(--border)!important;
  border-radius:0!important;
  background:var(--bg-secondary)!important;
  box-shadow:none!important;
  z-index:90;
  transform:none!important;
  transition:transform .25s ease!important;
}
body.lys-course .main,
body.ls-course .main{
  grid-column:2!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  min-height:calc(100dvh - 56px)!important;
  margin:0!important;
  padding:var(--course-header-h) clamp(20px,3.2vw,46px) 72px!important;
  overflow-x:clip!important;
  background:transparent!important;
}
body.lys-course:not([data-course]) .main{
  height:calc(100dvh - 56px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
body.lys-course .top-header,
body.ls-course .top-header{
  position:fixed!important;
  top:56px!important;
  left:var(--course-sidebar-w)!important;
  right:0!important;
  width:auto!important;
  height:var(--course-header-h)!important;
  padding:0 clamp(18px,3vw,40px)!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  background:color-mix(in srgb,var(--bg-primary) 94%,transparent)!important;
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  z-index:80!important;
}
body.lys-course .top-header-left,
body.ls-course .top-header-left,
body.lys-course .top-header-right,
body.ls-course .top-header-right{
  min-width:0;
}
body.lys-course .breadcrumb-mini,
body.ls-course .breadcrumb-mini{
  display:block!important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-muted);
}
body.lys-course .topnav-logo,
body.ls-course .topnav-logo,
body.lys-course .top-header .theme-toggle,
body.ls-course .top-header .theme-toggle{
  display:none!important;
}

/* 侧栏：同一尺寸、同一状态语言 */
body.lys-course .sidebar .brand,
body.ls-course .sidebar .brand{
  margin:0 0 12px!important;
  padding:2px 22px 20px!important;
  border-bottom:1px solid var(--border)!important;
}
body.lys-course .sidebar .search-box,
body.ls-course .sidebar .search-box{
  margin:0 16px 16px!important;
}
body.lys-course .sidebar .search-box input,
body.ls-course .sidebar .search-box input{
  min-height:42px;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;
  background:var(--bg-card)!important;
  color:var(--text-primary)!important;
}
body.lys-course .sidebar .search-box input:focus,
body.ls-course .sidebar .search-box input:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
body.lys-course .nav-group-title,
body.ls-course .nav-group-title,
body.lys-course .sidebar-module-head,
body.ls-course .sidebar-module-head{
  padding-inline:22px!important;
}
body.lys-course .nav-item,
body.ls-course .nav-item,
body.lys-course .sidebar a.nav-item,
body.ls-course .sidebar a.nav-item,
body.lys-course #sidebar button.nav-item,
body.ls-course #sidebar button.nav-item{
  width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:10px 22px!important;
  border:0!important;
  border-left:3px solid transparent!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text-secondary)!important;
  box-shadow:none!important;
  text-align:left!important;
}
body.lys-course .nav-item:hover,
body.ls-course .nav-item:hover{
  background:var(--bg-hover)!important;
  color:var(--text-primary)!important;
}
body.lys-course .nav-item.active,
body.ls-course .nav-item.active,
body.lys-course .nav-item.is-active,
body.ls-course .nav-item.is-active{
  border-left-color:var(--accent)!important;
  background:var(--bg-card)!important;
  color:var(--accent)!important;
  box-shadow:none!important;
}

/* 阅读内容：标题、卡片、表格使用同一几何轴 */
body.lys-course .hero,
body.ls-course .hero,
body.lys-course .course-hero,
body.ls-course .course-hero,
body.lys-course .content-page,
body.ls-course .content-page,
body.lys-course .section-block,
body.ls-course .section-block,
body.lys-course main#content,
body.ls-course main#content{
  width:min(100%,var(--course-reading-w))!important;
  max-width:var(--course-reading-w)!important;
  margin-inline:auto!important;
}
body.lys-course .hero,
body.ls-course .hero,
body.lys-course .course-hero,
body.ls-course .course-hero{
  min-height:0!important;
  padding:clamp(48px,7vh,84px) 0 clamp(42px,6vh,68px)!important;
  text-align:left!important;
  border-bottom:1px solid var(--border);
}
body.lys-course .content-page,
body.ls-course .content-page,
body.lys-course .section-block{
  padding:clamp(36px,5.5vh,64px) 0!important;
}
body.lys-course .hero h1,
body.ls-course .hero h1,
body.lys-course .course-hero h1,
body.ls-course .course-hero h1{
  max-width:14em;
  margin:0 0 20px!important;
  font:700 clamp(40px,5.2vw,64px)/1.12 var(--serif)!important;
  letter-spacing:-.035em!important;
  color:var(--text-primary)!important;
  background:none!important;
  -webkit-text-fill-color:var(--text-primary)!important;
}
body.lys-course .hero p,
body.ls-course .hero p,
body.lys-course .course-hero p,
body.ls-course .course-hero p{
  max-width:680px;
  font-size:clamp(15.5px,1.5vw,18px);
  line-height:1.8;
  color:var(--text-secondary);
}
body.lys-course .hero-buttons .btn-trade,
body.ls-course .hero-buttons .btn-trade,
body.lys-course .hero-buttons .btn-tg,
body.ls-course .hero-buttons .btn-tg{
  border:1px solid var(--accent)!important;
  background:transparent!important;
  color:var(--accent)!important;
}
body.lys-course .hero-buttons .btn-trade:hover,
body.ls-course .hero-buttons .btn-trade:hover,
body.lys-course .hero-buttons .btn-tg:hover,
body.ls-course .hero-buttons .btn-tg:hover{
  border-color:var(--accent-2)!important;
  background:var(--accent-soft)!important;
  color:var(--accent-2)!important;
}
body.lys-course .main h2,
body.ls-course .main h2,
body.lys-course main#content h2,
body.ls-course main#content h2{
  margin:clamp(44px,6vh,68px) 0 18px!important;
  padding:0 0 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  font:700 clamp(25px,3vw,34px)/1.3 var(--serif)!important;
  letter-spacing:-.015em;
  color:var(--text-primary)!important;
}
body.lys-course .main h3,
body.ls-course .main h3,
body.lys-course main#content h3,
body.ls-course main#content h3{
  margin:34px 0 12px!important;
  font:700 clamp(19px,2.1vw,23px)/1.4 var(--serif)!important;
  color:var(--text-primary)!important;
}
body.lys-course .main p,
body.ls-course .main p,
body.lys-course .main li,
body.ls-course .main li,
body.lys-course main#content p,
body.ls-course main#content li{
  line-height:1.85;
}
body.lys-course .card,
body.ls-course .card,
body.lys-course .lesson-card,
body.ls-course .lesson-card,
body.lys-course .chapter-card,
body.ls-course .chapter-card,
body.lys-course .content-card,
body.ls-course .content-card,
body.lys-course .tool-card,
body.ls-course .tool-card,
body.lys-course .quiz-card,
body.ls-course .quiz-card,
body.lys-course .vs-card,
body.ls-course .vs-card{
  min-width:0;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;
  background:var(--bg-card)!important;
  box-shadow:none!important;
}
body.lys-course .card:hover,
body.ls-course .card:hover,
body.lys-course .lesson-card:hover,
body.ls-course .lesson-card:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border))!important;
  box-shadow:var(--shadow-sm)!important;
}
body.lys-course .table-wrap,
body.ls-course .table-wrap,
body.lys-course .table-scroll,
body.ls-course .table-scroll,
body.lys-course .overflow-x-auto,
body.ls-course .overflow-x-auto{
  max-width:100%;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
body.lys-course table,
body.ls-course table{
  min-width:max-content;
  max-width:none;
}
body.lys-course th,
body.ls-course th{
  border-bottom:2px solid var(--accent)!important;
  background:linear-gradient(180deg,var(--bg-secondary),var(--bg-card))!important;
}
body.lys-course pre,
body.ls-course pre{
  max-width:100%;
  overflow-x:auto;
  white-space:pre;
}
body.lys-course :focus-visible,
body.ls-course :focus-visible,
body.lesson-page :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* 移动目录按钮与遮罩 */
body.lys-course .menu-toggle,
body.ls-course .menu-toggle,
body.lys-course #mobile-menu-toggle,
body.ls-course #mobile-menu-toggle,
body.lys-course #menuToggle.course-menu-btn,
body.ls-course #menuToggle.course-menu-btn{
  display:none;
  position:fixed!important;
  top:68px!important;
  left:14px!important;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  padding:0!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;
  background:var(--bg-card)!important;
  color:var(--text-primary)!important;
  box-shadow:var(--shadow-sm)!important;
  z-index:120!important;
}
body.lys-course .sidebar-mask,
body.ls-course .sidebar-mask,
body.lys-course #course-sidebar-mask,
body.ls-course #course-sidebar-mask{
  position:fixed!important;
  inset:56px 0 0!important;
  background:rgba(42,36,25,.42)!important;
  z-index:85!important;
}

/* 构建生成的单课静态页 */
body.lesson-page .lesson-wrap{
  width:min(100%,var(--course-reading-w));
  max-width:var(--course-reading-w);
  margin:0 auto;
  padding:clamp(42px,7vh,78px) clamp(20px,4vw,42px) 88px;
}
body.lesson-page .lesson-bc{
  margin:0 0 24px;
  font-size:13px;
  color:var(--text-muted);
}
body.lesson-page .lesson-bc a{
  color:var(--text-secondary);
  border-bottom:1px solid transparent;
}
body.lesson-page .lesson-bc a:hover{color:var(--accent);border-color:var(--accent)}
body.lesson-page .lesson-wrap>h1{
  max-width:15em;
  margin:0 0 22px;
  font:700 clamp(38px,5.2vw,58px)/1.18 var(--serif);
  letter-spacing:-.03em;
  color:var(--text-primary);
}
body.lesson-page .lesson-lead{
  margin:0 0 clamp(38px,6vh,60px);
  padding:22px clamp(22px,3vw,32px);
  border:0;
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:var(--bg-secondary);
  color:var(--text-secondary);
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.8;
}
body.lesson-page .lesson-body{font-size:16px;line-height:1.9;color:var(--text-secondary)}
body.lesson-page .lesson-body h2{
  margin:clamp(48px,7vh,72px) 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  font:700 clamp(26px,3.2vw,34px)/1.3 var(--serif);
  color:var(--text-primary);
}
body.lesson-page .lesson-body h3{margin:36px 0 12px;font:700 clamp(20px,2.2vw,24px)/1.4 var(--serif);color:var(--text-primary)}
body.lesson-page .lesson-body p{margin:0 0 1.12em}
body.lesson-page .lesson-body a{color:var(--accent-2);border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
body.lesson-page .lesson-body a:hover{color:var(--accent);border-color:var(--accent)}
body.lesson-page .lesson-pull-quote{
  margin:clamp(30px,5vh,48px) 0;
  padding:22px clamp(24px,4vw,38px);
  border:0;
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:var(--bg-secondary);
  color:var(--text-primary);
  font:600 clamp(18px,2.4vw,23px)/1.7 var(--serif);
}
body.lesson-page .lesson-table-wrap,
body.lesson-page .lesson-code{
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
body.lesson-page .lesson-body table{min-width:620px}
body.lesson-page .lesson-body th{border-bottom:2px solid var(--accent);background:linear-gradient(180deg,var(--bg-secondary),var(--bg-card))}
body.lesson-page .lesson-chart-frame,
body.lesson-page .deribit-mock,
body.lesson-page .lesson-aside{
  border-radius:var(--radius-lg);
  border-color:var(--border);
  background:var(--bg-card);
  box-shadow:none;
}
body.lesson-page .lesson-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:52px 0 24px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
body.lesson-page .lesson-nav>div{min-width:0}
body.lesson-page .lesson-nav-link{display:inline-block;max-width:100%;color:var(--accent-2);line-height:1.6}
body.lesson-page .lesson-foot{padding-top:22px;border-top:1px solid var(--border-light)}

@media(max-width:1024px){
  body.lys-course .app,
  body.ls-course .app,
  body.lys-course .course-app,
  body.ls-course .course-app{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.lys-course .sidebar,
  body.ls-course .sidebar,
  body.lys-course aside.sidebar,
  body.ls-course aside.sidebar,
  body.lys-course #sidebar.sidebar,
  body.ls-course #sidebar.sidebar{
    left:0!important;
    transform:translateX(calc(-100% - 20px))!important;
    box-shadow:var(--shadow-lg)!important;
  }
  body.lys-course .sidebar.open,
  body.ls-course .sidebar.open,
  body.lys-course #sidebar.sidebar.open,
  body.ls-course #sidebar.sidebar.open{
    transform:translateX(0)!important;
  }
  body.lys-course .main,
  body.ls-course .main{
    grid-column:1!important;
    margin-left:0!important;
  }
  body.lys-course .top-header,
  body.ls-course .top-header{
    left:0!important;
    padding-left:66px!important;
  }
  body.lys-course .top-header #menu-toggle,
  body.ls-course .top-header #menu-toggle{
    display:none!important;
  }
  body.lys-course .menu-toggle,
  body.ls-course .menu-toggle,
  body.lys-course #mobile-menu-toggle,
  body.ls-course #mobile-menu-toggle,
  body.lys-course #menuToggle.course-menu-btn,
  body.ls-course #menuToggle.course-menu-btn{
    display:inline-flex!important;
  }
  body.lys-course .floating-toc,
  body.ls-course .floating-toc{display:none!important}
}

@media(max-width:760px){
  :root{--course-header-h:56px}
  body.lys-course .main,
  body.ls-course .main{
    padding:var(--course-header-h) 18px 56px!important;
  }
  body.lys-course .top-header-right>*:not(.reading-tools),
  body.ls-course .top-header-right>*:not(.reading-tools){display:none!important}
  body.lys-course .hero,
  body.ls-course .hero,
  body.lys-course .course-hero,
  body.ls-course .course-hero{
    padding:42px 0 38px!important;
  }
  body.lys-course .hero h1,
  body.ls-course .hero h1,
  body.lys-course .course-hero h1,
  body.ls-course .course-hero h1{
    font-size:clamp(34px,10vw,46px)!important;
  }
  body.lys-course .paths-grid,
  body.ls-course .paths-grid,
  body.lys-course .reasons-grid,
  body.ls-course .reasons-grid,
  body.lys-course .rules-grid,
  body.ls-course .rules-grid,
  body.lys-course .glossary-grid,
  body.ls-course .glossary-grid,
  body.lys-course .card-grid,
  body.ls-course .card-grid,
  body.lys-course .lesson-grid,
  body.ls-course .lesson-grid,
  body.lys-course .module-grid,
  body.ls-course .module-grid,
  body.lys-course .chapter-nav-buttons,
  body.ls-course .chapter-nav-buttons{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.lys-course table,
  body.ls-course table{font-size:13px}
  body.lesson-page .lesson-wrap{padding-inline:20px}
  body.lesson-page .lesson-nav{grid-template-columns:1fr}
  body.lesson-page .lesson-nav>div:last-child{text-align:left!important}
  body.lesson-page .lesson-body table{min-width:560px}
}

@media(max-width:480px){
  body.lys-course .sidebar,
  body.ls-course .sidebar,
  body.lys-course aside.sidebar,
  body.ls-course aside.sidebar,
  body.lys-course #sidebar.sidebar,
  body.ls-course #sidebar.sidebar{
    width:min(88vw,320px)!important;
    max-width:min(88vw,320px)!important;
  }
  body.lesson-page .lesson-wrap>h1{font-size:clamp(34px,10.5vw,44px)}
  body.lesson-page .lesson-body{font-size:15.5px}
}

@media(prefers-reduced-motion:reduce){
  body.lys-course .sidebar,
  body.ls-course .sidebar,
  body.lys-course .card,
  body.ls-course .card{
    transition:none!important;
  }
}