/* ──────────────────────────────────────────────────────────
   链研社课程子页统一主题
   目标：海龟交易 / 威科夫 等 Tailwind 页对齐主站
   「焦糖棕 · 羊皮纸杂志风」
   加载顺序：lianyanshe.css → tailwind-pages.css → unify → 本文件
   ────────────────────────────────────────────────────────── */

/* ── 1. 页面根：羊皮纸网格 ── */
html[data-theme="light"] body.bg-gray-50,
html[data-theme="light"] body.bg-slate-50,
html:not([data-theme="dark"]) body {
  background-color: var(--bg-primary) !important;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  color: var(--text-primary) !important;
  font-family: var(--sans) !important;
}

html[data-theme="dark"] body {
  background-color: var(--bg-primary) !important;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  color: var(--text-primary) !important;
}

/* ── 2. 顶栏 / 侧栏 / 卡片：羊皮纸材质 ── */
header.bg-white\/90,
header[class*="bg-white"],
aside.bg-white,
aside[class*="bg-white"],
.sidebar,
#sidebar {
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent) !important;
  border-color: var(--border) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

main#content,
#content,
.main-content {
  background: transparent !important;
}

/* 主内容白卡片 → 羊皮纸卡片 */
.bg-white,
[class*="bg-white"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ── 3. 标题 serif ── */
h1, h2, h3, h4,
.prose-turtle h1, .prose-turtle h2, .prose-turtle h3, .prose-turtle h4,
.lesson-content h1, .lesson-content h2, .lesson-content h3, .lesson-content h4,
.text-3xl, .text-4xl, .text-5xl, .text-2xl {
  font-family: var(--serif) !important;
  letter-spacing: -0.02em;
  color: var(--text-primary) !important;
}

/* ── 4. 灰阶文字 → 品牌棕墨 ── */
[class*="text-gray-900"],
[class*="text-slate-900"],
[class*="text-gray-800"],
[class*="text-slate-800"] {
  color: var(--text-primary) !important;
}
[class*="text-gray-700"],
[class*="text-slate-700"],
[class*="text-gray-600"],
[class*="text-slate-600"] {
  color: var(--text-secondary) !important;
}
[class*="text-gray-500"],
[class*="text-slate-500"],
[class*="text-gray-400"],
[class*="text-slate-400"] {
  color: var(--text-muted) !important;
}

/* 边框 */
[class*="border-gray-"],
[class*="border-slate-"] {
  border-color: var(--border) !important;
}

/* ── 5. Emerald / Teal（海龟）→ 焦糖 + 品牌绿 ── */
[class*="text-emerald-"],
[class*="text-teal-"] {
  color: var(--accent) !important;
}
[class*="bg-emerald-50"],
[class*="bg-teal-50"],
[class*="bg-emerald-100"],
[class*="bg-teal-100"] {
  background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-card)) !important;
  color: var(--accent-2) !important;
}
[class*="bg-emerald-500"],
[class*="bg-emerald-400"],
[class*="bg-teal-500"],
[class*="bg-teal-400"] {
  background-color: var(--accent) !important;
  background-image: none !important;
}
[class*="border-emerald-"],
[class*="border-teal-"] {
  border-color: var(--accent) !important;
}
[class*="from-emerald-"],
[class*="from-teal-"] {
  --tw-gradient-from: var(--accent) !important;
  --tw-gradient-to: var(--accent-hi) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
[class*="to-teal-"],
[class*="to-emerald-"] {
  --tw-gradient-to: var(--accent-hi) !important;
}
.bg-gradient-to-r.from-emerald-400,
[class*="bg-gradient-to-r"][class*="emerald"],
[class*="bg-gradient-to-r"][class*="teal"] {
  background-image: var(--grad-warm) !important;
}

/* ── 6. Indigo / Violet / Purple（威科夫）→ 焦糖 ── */
[class*="text-indigo-"],
[class*="text-violet-"],
[class*="text-purple-"] {
  color: var(--accent) !important;
}
[class*="bg-indigo-50"],
[class*="bg-violet-50"],
[class*="bg-purple-50"],
[class*="bg-indigo-100"] {
  background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-card)) !important;
}
[class*="bg-indigo-500"],
[class*="bg-indigo-600"],
[class*="bg-violet-500"],
[class*="bg-purple-500"] {
  background-color: var(--accent) !important;
}
[class*="border-indigo-"],
[class*="border-violet-"],
[class*="border-purple-"] {
  border-color: var(--accent) !important;
}
[class*="from-indigo-"],
[class*="from-violet-"],
[class*="from-purple-"] {
  --tw-gradient-from: var(--accent) !important;
  --tw-gradient-to: var(--accent-hi) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
[class*="to-purple-"],
[class*="to-indigo-"],
[class*="to-violet-"] {
  --tw-gradient-to: var(--accent-hi) !important;
}

/* ── 7. 按钮系统（覆盖海龟 .btn-* 硬编码） ── */
.btn {
  border-radius: var(--radius-full) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  transition: all .2s ease !important;
}
.btn-primary {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-primary:hover {
  background: var(--accent-2) !important;
  background-color: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover {
  background: var(--bg-hover) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn-ghost {
  background: transparent !important;
  color: var(--text-muted) !important;
}
.btn-ghost:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
.btn-emerald-outline,
.btn-done {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)) !important;
  color: var(--accent-2) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
}
.btn-emerald-outline:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)) !important;
  border-color: var(--accent) !important;
}

/* ── 8. 进度条 ── */
#top-progress,
.progress-bar,
[class*="bg-emerald-500"].h-full,
.h-full.bg-emerald-500 {
  background: var(--grad-line) !important;
  background-color: var(--accent) !important;
}
.h-0\.5.bg-gray-100,
.bg-gray-200.rounded-full,
.w-full.bg-gray-200 {
  background-color: var(--bg-tertiary) !important;
}

/* ── 9. 侧栏导航（去浏览器默认黑框，杂志风目录） ── */
/* tailwind-pages 无 preflight，button 会带 UA 深色描边 → 必须重置 */
/* 左侧高亮用 inset box-shadow，避免 border-left 把文字列挤歪 */
#sidebar button,
aside#sidebar button,
.sidebar button,
#sidebar .nav-item,
aside .nav-item,
.chapter-nav-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  font-family: var(--sans) !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  text-align: left;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
}

#sidebar button:hover,
aside#sidebar button:hover,
.sidebar button:hover,
#sidebar .nav-item:hover,
aside .nav-item:hover,
.nav-item:not(.active):hover,
.chapter-nav-btn:not(.active):hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

#sidebar button:focus-visible,
.nav-item:focus-visible,
.chapter-nav-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  outline-offset: 1px;
}

/* 激活态：左侧焦糖竖线 + 柔和底，无描边框，不改布局宽度 */
.nav-item.active,
button.nav-item.active,
.chapter-nav-btn.active,
#sidebar button.is-active,
#sidebar button[aria-current="page"],
[class*="bg-emerald-50"].text-emerald-700,
button[class*="bg-emerald-50"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)) !important;
  color: var(--accent-2) !important;
  border: none !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
  font-weight: 600 !important;
}

/* 模块分组：轻分隔，不用卡片黑框 */
#sidebar .sidebar-module,
#sidebar .nav-module {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}
#sidebar .sidebar-module:last-child,
#sidebar .nav-module:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#sidebar .sidebar-module-head {
  padding: 0.35rem 0.65rem 0.4rem;
}
#sidebar .sidebar-module-id {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#sidebar .sidebar-module-title {
  font-family: var(--serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 0.15rem;
}

/* 课时项内图标不抢焦点 */
#sidebar .nav-item .nav-dot,
#sidebar button .nav-dot {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
}
#sidebar .nav-item.is-done .nav-dot,
#sidebar button.is-done .nav-dot,
#sidebar .nav-item .nav-dot.is-done {
  color: var(--accent) !important;
}
#sidebar .nav-item.active .nav-dot,
#sidebar button.is-active .nav-dot {
  color: var(--accent) !important;
}

/* ── 10. 威科夫专用组件重绘 ── */
.gradient-text {
  background: var(--grad-warm) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* 速查卡：深色 slate → 深焦糖 */
.quick-card {
  background: linear-gradient(135deg, #2a2218 0%, #1a1610 100%) !important;
  color: #f0e6d2 !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid #3d3325 !important;
}
.quick-card .qc-title { color: var(--accent-hi) !important; }
.quick-card .qc-row { border-top-color: rgba(212, 168, 87, 0.18) !important; }
.quick-card .qc-tag {
  background: var(--accent) !important;
  color: #fff !important;
}
.quick-card .qc-tag.danger { background: var(--accent-put) !important; color: #fff !important; }
.quick-card .qc-tag.ok { background: var(--accent-call) !important; color: #fff !important; }
.quick-card .qc-tag.info { background: var(--accent-info) !important; color: #fff !important; }
.quick-card .qc-content { color: #e8dcc4 !important; }

/* 交易口诀：黄底 → 柔和焦糖 */
.trader-saying {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-soft) 55%, var(--bg-card)) 0%,
    color-mix(in srgb, var(--accent-hi) 28%, var(--bg-card)) 100%) !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: var(--radius-2xl) !important;
}
.trader-saying::before { color: var(--accent) !important; }
.trader-saying,
.trader-saying * {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .trader-saying {
  background: linear-gradient(135deg, #3d2f1c 0%, #2a2218 100%) !important;
  border-color: var(--accent) !important;
}

/* 案例卡 / 模块卡 */
.module-card,
.case-card,
.lesson-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}
.module-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-md) !important;
}

/* 代码块：深 slate → 深棕 */
.lesson-content pre,
pre.bg-slate-900,
pre[class*="bg-slate-9"],
pre[class*="bg-gray-9"] {
  background: #1f1a12 !important;
  color: #e8c97a !important;
  border: 1px solid #3d3325 !important;
  border-radius: var(--radius-lg) !important;
}

/* 引用 */
.lesson-content blockquote,
.prose-turtle blockquote {
  border-left: 4px solid var(--accent) !important;
  background: linear-gradient(90deg, rgba(184,118,58,0.08) 0%, rgba(184,118,58,0.02) 100%) !important;
  color: var(--text-secondary) !important;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
}

/* 列表 marker */
.lesson-content ul li::marker,
.lesson-content ol li::marker,
.prose-turtle ul li::marker {
  color: var(--accent) !important;
}

/* ── 11. 海龟测验选项 ── */
.quiz-option:has(input:checked) {
  background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-card)) !important;
  border-color: var(--accent) !important;
}
.quiz-option:has(input:checked) .opt-letter {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.quiz-option:has(input:checked) .opt-text {
  color: var(--accent-2) !important;
  font-weight: 600 !important;
}

/* 滚动条 */
.scroll-area::-webkit-scrollbar-thumb,
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
  border-radius: 3px;
}
.scroll-area::-webkit-scrollbar-thumb:hover,
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}

/* ── 12. 课程首页大卡片 ── */
#content .rounded-2xl,
#content .rounded-xl,
#content .rounded-lg {
  border-radius: var(--radius-xl) !important;
}
#content .shadow-sm,
#content .shadow,
#content .shadow-md {
  box-shadow: var(--shadow-sm) !important;
}
#content .shadow-lg,
#content .shadow-xl {
  box-shadow: var(--shadow-md) !important;
}

/* 顶栏标题区 */
header h1 {
  font-family: var(--serif) !important;
  color: var(--text-primary) !important;
}
header p {
  color: var(--text-muted) !important;
}

/* 正文阅读区 */
.prose-turtle,
.lesson-content {
  color: var(--text-secondary) !important;
  line-height: 1.85 !important;
}
.prose-turtle strong,
.lesson-content strong {
  color: var(--text-primary) !important;
}
.prose-turtle a,
.lesson-content a {
  color: var(--accent) !important;
  text-decoration-color: rgba(184, 118, 58, 0.35) !important;
}

/* ── 13. 暗色模式补强 ── */
html[data-theme="dark"] .btn-secondary {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .quick-card {
  background: linear-gradient(135deg, #2a2218 0%, #14100c 100%) !important;
}
html[data-theme="dark"] #sidebar button,
html[data-theme="dark"] #sidebar .nav-item,
html[data-theme="dark"] .sidebar button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] #sidebar button:hover,
html[data-theme="dark"] #sidebar .nav-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] #sidebar button.is-active,
html[data-theme="dark"] #sidebar button[aria-current="page"] {
  background: rgba(212, 168, 87, 0.14) !important;
  color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* 课程页非 .btn 的列表按钮：去掉 UA 默认黑框（tailwind-pages 无 preflight） */
body.ls-course button:not(.btn):not(.theme-toggle):not(.pb-back):not(.pb-theme) {
  appearance: none !important;
  -webkit-appearance: none !important;
  border-style: none !important;
  box-shadow: none !important;
  font-family: var(--sans) !important;
  cursor: pointer;
}

/* 海龟硬编码蓝色测验 → 品牌色（已在上方覆盖） */

/* ── 14. 门户芯片色与课程一致时可更暖 ── */
[data-portal-host] .pb-chip {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-chip, var(--accent)) 20%, transparent);
}

/* ── 15. 课程区块色调（海龟 sectionHtml） ── */
.ls-tone {
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  background: var(--bg-card);
  border-color: var(--border);
}
.ls-tone-accent {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)) !important;
  border-left-color: var(--accent) !important;
}
.ls-tone-warm {
  background: color-mix(in srgb, var(--accent-hi) 14%, var(--bg-card)) !important;
  border-left-color: var(--accent-hi) !important;
}
.ls-tone-info {
  background: color-mix(in srgb, var(--accent-info) 10%, var(--bg-card)) !important;
  border-left-color: var(--accent-info) !important;
}
.ls-tone-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}
.ls-progress-fill {
  background: var(--grad-line) !important;
  background-color: var(--accent) !important;
}