/* =========================================================
   君帆信息咨询工作室 · 暗色极客风主题样式
   配色：近黑背景 + 青绿(teal)高亮 + 等宽字编号
   ========================================================= */

:root {
	--bg:        #0d1117;
	--bg-elev:   #161b22;
	--bg-elev-2: #1c2230;
	--border:    #2a313c;
	--border-strong: #3a4250;
	--text:      #e6edf3;
	--text-muted:#8b949e;
	--text-dim:  #6e7681;

	--accent:    #2dd4bf;   /* teal 青绿，主强调 */
	--accent-ink:#03201c;   /* 强调色上的文字 */
	--accent-2:  #58a6ff;   /* 蓝，次强调 */
	--accent-soft: rgba(45,212,191,.12);

	--danger:    #f85149;
	--warning:   #d29922;
	--success:   #3fb950;

	--radius:    10px;
	--radius-sm: 6px;
	--radius-lg: 16px;

	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;

	--maxw: 1200px;
	--header-h: 80px;
}

/* ---------- 全站暗黑科技风滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	/* 极客网格底纹 */
	background-image:
		linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
	background-size: 32px 32px;
}

a { color: var(--accent-2); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; color: var(--text); }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }

code, kbd, pre, .mono { font-family: var(--mono); }

/* ---------- 像素风 / 等宽字锐利文本 ---------- */
.mono-text,
.mono-tag,
.breadcrumb,
.section-head .more,
.card-meta,
.stat,
.page-head .lead,
.empty-state p,
.site-footer .bottom,
.mono-desc {
	font-family: var(--mono);
	letter-spacing: .02em;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
}

/* ---------- 布局容器 ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.site-main { min-height: 60vh; padding: 32px 0 64px; }
.grid-2 { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.grid-2 aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
@media (max-width: 920px) { .grid-2 { grid-template-columns: 1fr; } .grid-2 aside { position: static; } }

/* ---------- 顶部导航 ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	height: var(--header-h);
	background: rgba(13,17,23,.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 16px; }
.brand .logo-mark {
	width: 40px; height: 40px; border-radius: 8px;
	background: var(--accent); color: var(--accent-ink);
	display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 18px;
}
.brand small { color: var(--text-dim); font-weight: 400; font-size: 11px; display: block; font-family: var(--mono); }

.primary-nav { display: flex; gap: 4px; margin-left: 8px; flex: 1; }
.primary-nav a {
	padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px;
}
.primary-nav a:hover, .primary-nav a.active { color: var(--text); background: var(--bg-elev); }

.header-actions { display: flex; align-items: center; gap: 10px; }
/* 通用头像：自定义图片或首字母文字 */
.jjzl-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
	background: var(--accent); color: var(--accent-ink);
	font-family: var(--mono); font-weight: 700;
}
.jjzl-avatar-text { font-size: 14px; }

.user-chip { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.user-chip .avatar {
	width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elev-2);
	border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--accent);
}
.user-chip .avatar.jjzl-avatar { width: 28px; height: 28px; font-size: 12px; }
.nav-bell {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong);
	background: var(--bg-elev); color: var(--text-muted); cursor: pointer; padding: 0;
	transition: all .15s ease;
}
.nav-bell:hover { color: var(--accent); border-color: var(--accent); }
.nav-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-bell .nav-bell-dot {
	position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
	background: #ff5b5b; border: 2px solid var(--bg-elev); box-sizing: content-box;
}

/* ---------- 按钮 ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px; border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 600; cursor: pointer;
	border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
	transition: all .15s ease; font-family: var(--sans);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: #3ee9d4; color: var(--accent-ink); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- 作品页作者名片 ---------- */
.author-card .ac-head { display: flex; align-items: center; gap: 12px; }
.author-card .ac-avatar {
	flex: none; width: 48px; height: 48px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
	background: var(--accent); color: var(--accent-ink);
	object-fit: cover;
}
.author-card .ac-avatar.jjzl-avatar { width: 48px; height: 48px; }
.author-card .ac-info { flex: 1 1 auto; min-width: 0; }
.author-card .ac-name-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.author-card .ac-name { font-size: 15px; font-weight: 700; }
.author-card .ac-home-btn {
	font-size: 12px; color: var(--accent); text-decoration: none;
	padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--radius-sm);
	white-space: nowrap; transition: .15s ease;
}
.author-card .ac-home-btn:hover { background: var(--accent); color: var(--accent-ink); }
.author-card .ac-sub-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.author-card .ac-sub { font-size: 12px; color: var(--text-muted); }
.author-card .ac-reg { font-size: 12px; color: var(--text-muted); }
.author-card .ac-contact { list-style: none; margin: 12px 0 0; padding: 10px 12px; background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; gap: 12px 24px; }
.author-card .ac-contact li { display: flex; gap: 10px; font-size: 13px; padding: 0; }
.author-card .ac-k { color: var(--text-muted); flex: none; width: 34px; }
.author-card .ac-v { font-family: var(--mono); color: var(--text); word-break: break-all; }
.author-card .ac-nocontact { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; font-style: italic; }

.author-others .ac-others-title { font-size: 14px; margin: 0 0 10px; }
.author-others .ac-others-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.author-others .ac-others-list li {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.author-others .ac-others-list li:last-child { border-bottom: none; }
.author-others .ac-others-list .ac-others-link {
	font-size: 13px; color: var(--text); text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0;
}
.author-others .ac-others-list .ac-others-link:hover { color: var(--accent); }
.author-others .ac-others-list .ac-others-date {
	font-size: 11px; color: var(--text-muted); white-space: nowrap;
	font-family: var(--mono); flex: 0 0 auto;
}

/* 账号资料：公开联系方式开关行 */
.field-inline { display: flex; align-items: center; }
.field-inline .switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin: 0; }
.field-inline .switch input { width: 16px; height: 16px; accent-color: var(--accent); }

/* 作者作品归档页：名片铺满宽度，横向排布 */
.author-page-card { max-width: 100%; margin-bottom: 24px; }
.author-page-card .author-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.author-page-card .ac-head { flex: none; }
.author-page-card .ac-info { flex: 1 1 auto; min-width: 0; }
.author-page-card .ac-name-row { flex-wrap: wrap; }
.author-page-card .ac-sub-row { margin-top: 2px; }
.author-page-card .ac-contact { margin: 0; flex: 1 1 auto; background: transparent; border: none; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.author-page-card .ac-contact li { padding: 0; background: transparent; }
.author-page-card .ac-nocontact { margin: 0; }
.author-page-card .widget + .widget { margin-top: 16px; }
.btn-outline { background: transparent !important; border-color: var(--border) !important; color: var(--text-muted) !important; }
.btn-outline:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ---------- 徽标 / 标签 ---------- */
.badge {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
	padding: 3px 10px; border-radius: 8px;
	background: var(--bg-elev-2); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-accent { color: var(--accent); border-color: rgba(45,212,191,.4); background: var(--accent-soft); }
.badge-blue   { color: var(--accent-2); border-color: rgba(88,166,255,.4); background: rgba(88,166,255,.1); }
.badge-warn   { color: var(--warning); border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.1); }

.chip {
	display: inline-block; font-size: 12px; color: var(--text-muted);
	padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev);
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 面包屑 ---------- */
.breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent); }
.course-crumb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.course-crumb-row .breadcrumb { margin-bottom: 0; }

/* ---------- 页面标题区 ---------- */
.page-head { margin-bottom: 28px; }
.page-head h1 { margin: 0 0 6px; }
.page-head .lead { color: var(--text-muted); margin: 0; }

/* ---------- 卡片网格 ---------- */
.card-grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card {
	background: var(--bg-elev); border: 1px solid var(--border);
	border-radius: var(--radius); overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
	display: flex; flex-direction: column;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card-thumb {
	aspect-ratio: 16/10; background: var(--bg-elev-2);
	display: grid; place-items: center; position: relative; overflow: hidden;
	border-bottom: 1px solid var(--border);
}
.card-thumb .thumb-icon { font-family: var(--mono); font-size: 34px; color: var(--border-strong); }
.card-thumb .idx {
	position: absolute; top: 10px; left: 10px;
	font-family: var(--mono); font-size: 11px; color: var(--text-dim);
	background: rgba(13,17,23,.6); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border);
}
/* 卡片收藏按钮 */
.card-fav {
	width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0;
	color: var(--text-muted); background: var(--bg-elev-2); border: 1px solid var(--border);
	border-radius: 8px; transition: background .15s, transform .15s, color .15s;
}
.card-fav:hover { transform: scale(1.08); color: var(--accent); border-color: var(--accent); }
.card-fav.faved { color: #f5a623; border-color: rgba(245,163,35,.6); background: rgba(245,163,35,.14); font-weight: 700; }

/* 卡片操作区与内容分区 */
.card-top-tags { display: none; }
.card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-actions > .chip,
.card-actions > .btn,
.card-actions > .badge,
.card-actions > .card-fav {
	height: 32px;
	min-height: 32px;
	font-size: 13px;
	line-height: 1;
}
.card-actions > .chip,
.card-actions > .btn,
.card-actions > .badge {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 14px;
}
.card-actions > .card-fav { padding: 0; }
.card-bottom-info { display: flex; flex-direction: column; gap: 6px; }

/* 我的收藏：分类 tab */
.fav-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fav-tab {
	font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
	background: var(--bg-elev); color: var(--text-muted);
	border: 1px solid var(--border); transition: all .15s;
}
.fav-tab:hover { border-color: var(--accent); color: var(--accent); }
.fav-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.fav-tab-count { font-family: var(--mono); opacity: .8; margin-left: 2px; }
.fav-panel.hidden { display: none; }

.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--text); line-height: 1.4; }
.card-title a { color: inherit; }
.card-meta { font-family: var(--mono); font-size: 12px; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; }
.card-excerpt { font-size: 13px; color: var(--text-muted); margin: 0; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.card-foot-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ===== 卡片展示风格（后台「首页布局 / 内容布局」可配置）===== */
/* 1) 缩略图在上、内容在下：即默认竖向卡片，无需特殊规则 */
.card.style-thumb-top { /* default */ }

/* 2) 内容浮于缩略图之上 */
.card.style-overlay { position: relative; overflow: hidden; }
.card.style-overlay .card-thumb {
	border-bottom: none;
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.card.style-overlay:hover .card-thumb {
	transform: scale(1.08);
}
.card.style-overlay .card-thumb img,
.card.style-overlay .card-thumb canvas,
.card.style-overlay .card-thumb .jjzl-cad-thumb {
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.card.style-overlay:hover .card-thumb img,
.card.style-overlay:hover .card-thumb canvas,
.card.style-overlay:hover .card-thumb .jjzl-cad-thumb {
	transform: scale(1.08);
}
.card.style-overlay .card-body {
	position: absolute; inset: 0;
	background: rgba(13, 17, 23, .62);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: #fff; padding: 16px;
	display: flex; flex-direction: column; gap: 6px;
	transform: translateY(calc(100% + 12px));
	opacity: 0;
	transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
.card.style-overlay:hover .card-body {
	transform: translateY(0);
	opacity: 1;
}
/* 内容子元素依次上浮，增强丝滑感 */
.card.style-overlay .card-body > * {
	transform: translateY(18px);
	opacity: 0;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.card.style-overlay:hover .card-body > * {
	transform: translateY(0);
	opacity: 1;
}
.card.style-overlay:hover .card-body > *:nth-child(1) { transition-delay: .04s; }
.card.style-overlay:hover .card-body > *:nth-child(2) { transition-delay: .10s; }
.card.style-overlay:hover .card-body > *:nth-child(3) { transition-delay: .16s; }
.card.style-overlay .card-top-tags {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.card.style-overlay .card-top-left,
.card.style-overlay .card-top-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card.style-overlay .card-actions {
	flex: 1;
	display: flex; align-items: center; justify-content: center; gap: 10px;
}
.card.style-overlay .card-bottom-info { margin-top: auto; }
.card.style-overlay .card-title,
.card.style-overlay .card-title a { color: #fff; }
.card.style-overlay .card-excerpt { color: rgba(255,255,255,.82); }
.card.style-overlay .card-meta { color: rgba(255,255,255,.7); }
.card.style-overlay .card-actions .chip { color: #fff; border-color: rgba(255,255,255,.5); }
.card.style-overlay .card-fav { color: #fff; background: rgba(13,17,23,.45); border-color: rgba(255,255,255,.3); }
.card.style-overlay .card-fav.faved { color: #f5a623; border-color: rgba(245,163,35,.6); background: rgba(245,163,35,.2); }

/* 3) 缩略图在左，内容随其后 */
.card.style-thumb-left { flex-direction: row; align-items: stretch; }
.card.style-thumb-left .card-thumb {
	width: 40%; flex: 0 0 40%; aspect-ratio: 4/3;
	border-bottom: none; border-right: 1px solid var(--border);
}
.card.style-thumb-left .card-body { flex: 1; }

/* 4) 无缩略图，纯内容 */
.card.style-no-thumb .card-thumb { display: none; }

/* 资源卡专用 */
.resource-card .card-thumb { background:
		radial-gradient(circle at 30% 30%, rgba(45,212,191,.08), transparent 60%),
		var(--bg-elev-2); }
.format-tag { font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--accent); border: 1px solid rgba(45,212,191,.4); padding: 3px 10px; border-radius: 8px; display: inline-flex; align-items: center; }

/* 课程卡 */
.course-card .card-thumb::after {
	content: "▶"; position: absolute; font-size: 22px; color: var(--text); opacity: .85;
	width: 46px; height: 46px; border-radius: 50%; background: rgba(13,17,23,.7);
	display: grid; place-items: center; border: 1px solid var(--border-strong);
}
.course-card .duration { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

/* 卡片分类标签（可点击，直达分类列表） */
.card-cat { margin-bottom: 6px; }
.cat-tag {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 8px;
	color: var(--accent);
	background: rgba(45, 212, 191, .1);
	border: 1px solid rgba(45, 212, 191, .35);
	transition: background .15s, color .15s, border-color .15s;
}
.cat-tag:hover {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
}
/* 课程详情页状态标签：统一用 cat-tag 造型，保留语义色 */
.cat-tag.status-available,
.cat-tag.status-vip {
	color: #a78bfa;
	background: rgba(167, 139, 250, .10);
	border-color: rgba(167, 139, 250, .35);
}
.cat-tag.status-locked {
	color: var(--warning);
	background: rgba(210, 153, 34, .10);
	border-color: rgba(210, 153, 34, .35);
}
.cat-tag.status-available:hover,
.cat-tag.status-vip:hover {
	background: #a78bfa;
	color: #0b0f17;
	border-color: #a78bfa;
}
.cat-tag.status-locked:hover {
	background: var(--warning);
	color: #0b0f17;
	border-color: var(--warning);
}

/* 已开通课程卡：去掉权限行，标题贴近缩略图、整体更紧凑 */
.course-card-tight .card-body { padding-top: 3px; gap: 6px; }
.course-stats { font-family: var(--mono); font-size: 12px; color: var(--text-dim); display: flex; gap: 12px; }
.course-stats .notes-count { color: var(--accent); }
.card-foot-center { justify-content: center; }

/* 学习记录 / 我的课程：一行一条横向列表 */
.learn-list { display: flex; flex-direction: column; gap: 10px; }
.learn-item {
	display: flex; align-items: stretch; gap: 16px;
	background: var(--bg-elev); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 12px 16px;
	transition: border-color .15s;
}
.learn-item:hover { border-color: var(--accent); }
.learn-thumb {
	width: 72px; height: 48px; flex-shrink: 0; align-self: center;
	border-radius: var(--radius-sm);
	background:
		radial-gradient(circle at 30% 30%, rgba(45,212,191,.08), transparent 60%),
		var(--bg-elev-2);
	position: relative;
}
.learn-thumb::after {
	content: "▶"; position: absolute;
	inset: 0; display: grid; place-items: center;
	font-size: 18px; color: var(--text); opacity: .7;
}
.learn-info {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; justify-content: center;
}
.learn-info .cat-tag { display: inline-block; margin-bottom: 4px; }
.learn-title { font-size: 15px; font-weight: 600; margin: 0 0 3px; line-height: 1.35; }
.learn-title a { color: inherit; }
.learn-chapter { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 420px; }
.learn-stats { margin: 4px 0 8px; }
.learn-actions { display: inline-flex; gap: 8px; margin-bottom: 8px; }
.learn-actions .btn { margin-left: 0; }
/* 进度区：百分比 + 进度条 + 继续学习按钮纵向排列 */
.learn-progress {
	flex: 0 0 110px; text-align: center;
	display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.learn-pct { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); line-height: 1.2; }
.learn-bar { height: 5px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; }
.learn-progress .btn { margin-left: 0; width: 100%; }

@media (max-width: 720px) {
	.learn-item { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
	.learn-thumb { width: 56px; height: 38px; }
	.learn-info { flex: 1 1 auto; order: -1; }
	.learn-chapter { max-width: none; }
	.learn-progress { flex: 1 1 100%; order: 99; flex-direction: row; align-items: center; gap: 10px; }
	.learn-progress .learn-bar { flex: 1 1 auto; margin: 0; }
	.learn-progress .btn { width: auto; }
}

/* 学习进度条 */
.course-progress { margin: 8px 0 4px; }
.progress-bar { height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #2dd4bf); border-radius: 3px; transition: width .4s ease; min-width: 2px; }
.progress-info { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 8px; }
.progress-pct { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.progress-pos { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 作品卡 */
.work-card .card-thumb { aspect-ratio: 4/3; }

/* 列表每行数量（后台设置） */
.card-grid.cols-1 { grid-template-columns: 1fr; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.card-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* 瀑布流模式：JS 计算位置后切为 absolute 定位 */
.card-grid.masonry { position: relative; }
.card-grid.masonry.masonry-ready {
	display: block;
}
.card-grid.masonry.masonry-ready > .my-work-item,
.card-grid.masonry.masonry-ready > .card,
.card-grid.masonry.masonry-ready > article {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	/* transform 用于切换列数滑动重排；opacity 用于入场逐行渐显（按最终行错开延迟） */
	transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
	will-change: transform, opacity;
}
.card-grid.masonry.masonry-ready.masonry-visible > .my-work-item,
.card-grid.masonry.masonry-ready.masonry-visible > .card,
.card-grid.masonry.masonry-ready.masonry-visible > article {
	opacity: 1;
}
/* 页面加载 / 图片异步加载后的即时重排：关闭 transform 过渡直接就位，但保留 opacity 渐显过渡 */
.card-grid.masonry.masonry-instant > .my-work-item,
.card-grid.masonry.masonry-instant > .card,
.card-grid.masonry.masonry-instant > article {
	transition: opacity .5s ease !important;
}
/* masonry 中卡片由 JS 控制 transform，禁用默认 hover 上浮避免跳位；保留阴影高亮 */
.card-grid.masonry.masonry-ready .card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

/* 每行 1 个且无缩略图时，卡片应占满整行并保持内容自适应 */
.card-grid.cols-1 .card.style-no-thumb { width: 100%; }
.card-grid.cols-1 .card.style-no-thumb .card-body { max-width: 100%; }
@media (max-width: 1280px) {
	.card-grid.cols-6 { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1100px) {
	.card-grid.cols-4, .card-grid.cols-5, .card-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
	.card-grid.cols-3, .card-grid.cols-4, .card-grid.cols-5, .card-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
}

/* 缩略图比例（后台设置），需置于 work-card 规则之后以正确覆盖 */
.card-thumb.ratio-4x3 { aspect-ratio: 4/3; }
.card-thumb.ratio-1x1 { aspect-ratio: 1/1; }
.card-thumb.ratio-16x9 { aspect-ratio: 16/9; }
.card-thumb.ratio-3x4 { aspect-ratio: 3/4; }
.card-thumb.ratio-2x3 { aspect-ratio: 2/3; }
.card-thumb.ratio-3x2 { aspect-ratio: 3/2; }
.card-thumb.ratio-21x9 { aspect-ratio: 21/9; }

/* 浏览量 / 点赞量 */
.engagement-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-family: var(--mono); font-size: 13px; color: var(--text-dim); flex-wrap: wrap; }
.engagement-bar .eb-stat { color: var(--text-dim); }
.eb-like, .eb-share, .eb-link, .engagement-bar .card-fav { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; padding: 0 13px; cursor: pointer; font-family: var(--mono); font-size: 13px; line-height: 1; transition: all .15s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; box-sizing: border-box; }
.engagement-bar .card-fav { width: 32px; padding: 0; font-size: 16px; background: var(--bg-elev-2); }
.eb-like:hover, .eb-share:hover, .eb-link:hover, .engagement-bar .card-fav:hover { border-color: var(--accent); color: var(--accent); transform: none; }
.eb-like.liked, .eb-like.liked:hover { color: #ff6b81; border-color: rgba(255,107,129,.5); }
.eb-heart { font-size: 16px; line-height: 1; }
.eb-like.liked .eb-heart { color: #ff6b81; }
.card-fav.faved, .engagement-bar .card-fav.faved, .engagement-bar .card-fav.faved:hover { color: #f5a623; border-color: rgba(245,163,35,.6); background: rgba(245,163,35,.14); font-weight: 700; transform: none; }
.eb-douyin { color: #fe2c55; border-color: rgba(254,44,85,.45); }
.eb-bili { color: #fb7299; border-color: rgba(251,114,153,.45); }

/* ---------- 文章 / 单页排版 ---------- */
.prose { max-width: 760px; }
.prose p, .prose li, .prose td { color: var(--text-muted); }
.prose strong, .prose b { color: var(--text); }
.prose h2, .prose h3 { margin-top: 1.6em; color: var(--text); }
.prose img { border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 1em 0; }
.prose pre { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; overflow: auto; }
.prose code { background: var(--bg-elev); padding: 2px 6px; border-radius: 4px; font-size: 13px; color: var(--text); }
.prose blockquote { border-left: 3px solid var(--accent); margin: 1em 0; padding: 4px 16px; color: var(--text-muted); }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.prose th, .prose td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--bg-elev); color: var(--text-muted); font-weight: 600; }
.prose td { color: var(--text-muted); }

.single-head { margin-bottom: 20px; }
.single-head h1 { margin: 8px 0; }
.single-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.single-meta { font-family: var(--mono); font-size: 12px; color: var(--text-dim); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 下载盒（资源详情页） ---------- */
.download-box {
	background: var(--bg-elev); border: 1px solid var(--border-strong);
	border-radius: var(--radius); padding: 20px; margin: 20px 0;
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.download-box .dl-info { flex: 1; min-width: 220px; }
.download-box .dl-info .name { font-weight: 600; font-size: 16px; }
.download-box .dl-info .specs { font-family: var(--mono); font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.dl-locked { color: var(--warning); }
.download-box .btn-pan { background: #4e6ef2; border-color: #4e6ef2; color: #fff; margin-left: 10px; }
.download-box .btn-pan:hover { background: #3b5bdb; border-color: #3b5bdb; color: #fff; }

/* ---------- 等级 徽章 / 卡片 ---------- */
.lv-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-family: var(--mono); border: 1px solid; vertical-align: middle; }
.lv-1 { color: var(--accent); border-color: var(--accent); background: rgba(45,212,191,.10); }
.lv-2 { color: #fbbf24; border-color: #fbbf24; background: rgba(251,191,36,.10); }
.lv-3 { color: #a78bfa; border-color: #a78bfa; background: rgba(167,139,250,.10); }

.level-card { display: flex; align-items: center; gap: 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 8px; flex-wrap: wrap; }
.level-widget .level-card { background: transparent; border: 0; padding: 0; margin-bottom: 16px; }
.level-widget .jjzl-open-guide { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.lv-badge { padding: 8px 16px; border-radius: var(--radius); font-weight: 700; font-size: 15px; border: 1px solid; }


/* ---------- 兑换码区域：输入行 ---------- */
.account-redeem-top { margin-bottom: 28px; }
.redeem-actions {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}
.redeem-actions .field {
	flex: 1 1 auto;
	min-width: 200px;
	margin: 0;
}
.redeem-actions .btn { white-space: nowrap; }
.redeem-actions #jjzlContactBtn { margin-left: auto; }
.jjzl-contact-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.jjzl-contact-item {
	font-size: 14px;
	color: var(--text);
}
.jjzl-contact-label {
	color: var(--text-muted);
	font-size: 12px;
	margin-right: 6px;
}
.jjzl-contact-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px;
	background: var(--bg);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

@media (max-width: 768px) {
	.jjzl-redeem-row { flex-direction: column; }
	.jjzl-contact-card { flex: 1 1 auto; width: 100%; }
}

/* ---------- PDF 在线预览 ---------- */
.pdf-viewer { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 18px 0; background: var(--bg-elev); }
.pdf-bar { padding: 10px 14px; background: var(--bg-elev-2); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-muted); font-family: var(--mono); }
.pdf-pages { padding: 16px; display: flex; flex-direction: column; gap: 16px; align-items: center; max-height: 70vh; overflow: auto; background: #525659; }
.pdf-page { max-width: 100%; height: auto; box-shadow: 0 2px 12px rgba(0,0,0,.4); background: #fff; }
.pdf-loading { color: #fff; font-family: var(--mono); font-size: 13px; }

/* ---------- 评论区 ---------- */
.comments-area { margin-top: 28px; }
.comments-title { font-size: 16px; margin-bottom: 16px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 24px; }
.comment-list .comment { padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-list .comment .comment-meta { font-size: 12px; color: var(--text-muted); font-family: var(--mono); margin-bottom: 6px; }
.comment-list .comment .comment-author { font-weight: 600; color: var(--text); }
.comment-list .comment .avatar { border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.comment-list .comment .comment-content { font-size: 14px; line-height: 1.7; }
.comment-list .comment .reply { font-size: 12px; margin-top: 4px; }
.comment-list .comment .children { margin-left: 24px; border-left: 2px solid var(--border); padding-left: 16px; list-style: none; }
.comment-form-comment label, .comment-form-author label, .comment-form-email label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-muted); }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"] {
	width: 100%; background: var(--bg-elev); color: var(--text);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	padding: 10px 12px; font-family: var(--mono); font-size: 14px;
}

/* ---------- 相关推荐 ---------- */
.related { margin-top: 40px; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.jjzl-email-row { display: flex; align-items: center; gap: 8px; }
.jjzl-email-row .jjzl-email-local { flex: 1 1 auto; min-width: 0; }
.jjzl-email-row .jjzl-email-at { color: var(--text-muted); font-size: 14px; }
.jjzl-email-row .jjzl-email-domain { flex: 0 0 auto; width: auto; min-width: 130px; }
.jjzl-email-row .jjzl-email-custom { flex: 1 1 auto; min-width: 0; display: none; }
.input, .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=tel], .field input[type=number], .field textarea, .field select {
	width: 100%; padding: 10px 12px; background: var(--bg); color: var(--text);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; font-family: var(--sans);
}
.input:focus, .field input:focus, .field textarea:focus, .field select:focus {
	outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.notice { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.notice-error { color: var(--danger); border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.08); }
.notice-ok    { color: var(--success); border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.08); }
.notice-warn  { color: var(--warning); border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.08); }

/* ---------- 个人中心 ---------- */
/* ---------- 个人中心：横版顶栏导航 ---------- */
.account-wrap { display: flex; flex-direction: column; gap: 20px; }
.account-topbar {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 20px;
}
.account-topbar .u-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.account-topbar .u-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); color: var(--accent); font-weight: 700; font-size: 15px; }
.account-topbar .u-avatar.jjzl-avatar { width: 40px; height: 40px; font-size: 15px; }
.account-topbar .u-name { font-weight: 600; font-size: 14px; }
.account-topbar .u-role { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.account-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; }
.account-nav a {
	display: inline-block;
	padding: 7px 14px;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-size: 13px;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: all .15s;
}
.account-nav a:hover { background: var(--bg-elev-2); color: var(--text); border-color: var(--border); }
.account-nav a.active { background: rgba(45,212,191,.12); color: var(--accent); border-color: rgba(45,212,191,.3); font-weight: 600; }
.account-nav a.logout { margin-left: auto; color: var(--text-dim); font-size: 12px; padding: 6px 12px; }
.account-nav a.logout:hover { color: #ef4444; background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); }
.account-main { width: 100%; }

/* 账号与等级：两列并排，窄屏堆叠 */
.account-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}
.account-col { min-width: 0; }
.account-col > h2 { margin-top: 0; }
@media (max-width: 768px) {
	.account-cols { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 768px) {
	.account-topbar { flex-direction: column; align-items: stretch; gap: 12px; }
	.account-nav { justify-content: flex-start; }
	.account-nav a.logout { margin-left: 0; }
	.field-row { flex-direction: column; gap: 0; }
	.contact-row { align-items: stretch; gap: 0; }
	.contact-row > .field { flex: 1 1 auto; }
	.contact-row .btn { width: 100%; margin-top: 10px; height: 40px; }
	.contact-public { margin-top: 12px; }
	.myhome-tab-nav a { padding: 8px 12px; }
}

.record-list { display: flex; flex-direction: column; gap: 10px; }
/* 我的主页：联系方式设置卡片铺满宽度 */
.contact-settings-form { width: 100%; max-width: none; }
/* 我的主页：联系方式设置卡片铺满宽度 */
.contact-settings-form { width: 100%; max-width: none; }
/* 我的主页：微信号 / QQ 并排 */
.field-row { display: flex; gap: 16px; }
.field-row > .field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* 我的主页：联系方式一行 —— 微信号 / QQ / 保存按钮 同排 */
.contact-row { align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; }
.contact-row > .field { flex: 1 1 200px; }
.contact-row .btn { flex: 0 0 auto; height: 38px; }
.contact-public { margin: 14px 0 0; }
/* 我的主页：投稿表单与作品列表间距 */
.myhome-block { margin-bottom: 22px; }
/* 我的主页：下方 tab（我要投稿 / 已投稿作品） */
.myhome-tabs { margin-top: 8px; }
.myhome-tab-nav { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.myhome-tab-nav a {
	padding: 9px 16px; font-size: 14px; color: var(--text-muted);
	border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0;
	text-decoration: none; cursor: pointer;
}
.myhome-tab-nav a:hover { color: var(--text); }
.myhome-tab-nav a.active {
	color: var(--text); background: var(--bg); border-color: var(--border);
	border-bottom: 1px solid var(--bg); margin-bottom: -1px; font-weight: 600;
}
.myhome-tab-panel[hidden] { display: none; }
/* 我的笔记 / 作品列表：列数切换按钮（复用 notes-grid-btn 样式） */
.card-grid-btns { display: inline-flex; gap: 4px; }
.card-grid-btns .card-grid-btn,
.notes-grid-btns .notes-grid-btn {
	width: 32px; height: 28px;
	border: 1px solid var(--border); border-radius: 6px;
	background: var(--bg); color: var(--text-muted);
	font-size: 15px; line-height: 1;
	cursor: pointer; display: grid; place-items: center;
	transition: all .15s;
}
.card-grid-btns .card-grid-btn:hover,
.notes-grid-btns .notes-grid-btn:hover { border-color: var(--accent); color: var(--accent); }
.card-grid-btns .card-grid-btn.active,
.notes-grid-btns .notes-grid-btn.active {
	background: rgba(45,212,191,.12);
	border-color: var(--accent);
	color: var(--accent);
}
/* 卡片展示风格切换按钮 */
.card-grid-style-btns {
	display: inline-flex;
	gap: 4px;
	margin-left: 8px;
}
.card-grid-style-btns .card-grid-style-btn {
	width: 32px; height: 28px;
	border: 1px solid var(--border); border-radius: 6px;
	background: var(--bg); color: var(--text-muted);
	font-size: 15px; line-height: 1;
	cursor: pointer; display: grid; place-items: center;
	transition: all .15s;
}
.card-grid-style-btns .card-grid-style-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.card-grid-style-btns .card-grid-style-btn.active {
	background: rgba(45,212,191,.12);
	border-color: var(--accent);
	color: var(--accent);
}
/* 列表页（归档）网格控制条：与筛选/排序栏保持对齐 */
.archive-grid-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 10px;
}
.archive-grid-label {
	font-size: 13px;
	color: var(--text-muted);
	margin-right: 4px;
}
.archive-grid-controls .card-grid-btns,
.archive-grid-controls .card-grid-style-btns {
	margin-left: 0;
}

/* 我投过的稿 / 作者主页作品列表标题行：标题与切换按钮两端对齐 */
.my-works-head, .author-works-head {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 22px 0 10px;
}
.my-works-head h3, .author-works-head h3 { margin: 0; font-size: 15px; }
.my-works-head-tools,
.author-works-head-tools {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-wrap: wrap;
}
/* 我投过的稿：卡片外套 + 状态条 */
.my-work-item { display: flex; flex-direction: column; }
.my-work-item .card { flex: 1 1 auto; }
.my-work-status {
	margin-top: 8px; padding: 6px 10px;
	font-size: 12px; color: var(--text-muted); text-align: center;
	background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.my-work-status a { color: var(--accent); }
.my-work-status a:hover { color: var(--accent-2); }
.my-work-item.status-pending .my-work-status { border-color: rgba(210,153,34,.35); color: var(--warning); }
.my-work-delete-form { display: inline; margin: 0; padding: 0; }
.my-work-delete-btn {
	display: inline; margin: 0; padding: 0;
	background: none; border: none; color: #fb7185;
	font-size: inherit; font-family: inherit; line-height: inherit;
	cursor: pointer; text-decoration: none;
}
.my-work-delete-btn:hover { color: #ff9b9b; text-decoration: underline; }
/* 我的笔记：课程 Tab 切换 */
.notes-course-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.notes-course-tabs::-webkit-scrollbar { height: 4px; }
.notes-course-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.notes-course-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.notes-course-tab:hover { border-color: var(--accent); color: var(--text); }
.notes-course-tab.active { background: rgba(45,212,191,.12); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.notes-tab-title { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.notes-tab-count { font-size: 12px; padding: 1px 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); }
.notes-course-tab.active .notes-tab-count { border-color: var(--accent); color: var(--accent); background: rgba(45,212,191,.08); }
.notes-group[data-cid] { display: none; }
.notes-group[data-cid].active { display: flex; }
/* 我的笔记：按课程分组，每个分类区块内独立滚动（最外层不再整体滚动） */
.notes-groups { /* 最外层不再滚动，滚动条下沉到每个分类区块内 */ display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.notes-group { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elev); display: flex; flex-direction: column; }
.notes-group:last-child { margin-bottom: 0; }
.notes-group-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 10px 12px; background: var(--bg-elev-2); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
.notes-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-group-toggle { flex: 0 0 auto; width: 18px; text-align: center; font-size: 16px; line-height: 1; color: var(--accent); transition: transform .2s ease; }
.notes-group-label { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.notes-group.collapsed .notes-group-toggle { transform: rotate(-90deg); }
.notes-group.collapsed .notes-group-body { display: none; }
/* 章节嵌套在课程分组内：留出间距、标题略小 */
.notes-group .notes-group { margin: 8px 0; }
.notes-group .notes-group .notes-group-head { font-size: 13px; }
/* 播放页：当前章节标签 */
.notes-ctx { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; padding: 6px 10px; background: var(--bg-elev-2); border-radius: var(--radius-sm); }
.notes-group-count { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px; font-weight: 500; white-space: nowrap; }
.notes-group-body { max-height: 50vh; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.notes-group-body .notes-item:last-child { margin-bottom: 0; }
.jjzl-group-go { flex: 0 0 auto; margin-left: 2px; }

@media (max-width: 640px) {
	.notes-groups { grid-template-columns: 1fr !important; }
}

.record-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.record-item .r-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--bg-elev-2); display: grid; place-items: center; font-family: var(--mono); color: var(--text-dim); flex: none; }
.record-item .r-main { flex: 1; min-width: 0; }
.record-item .r-title { font-size: 14px; font-weight: 500; }
.record-item .r-sub { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty-state .big { font-size: 32px; font-family: var(--mono); color: var(--border-strong); }

/* ---------- 等级权益列表（打勾 / 打叉） ---------- */
.benefit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.benefit-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; }
.benefit-list li .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.benefit-list li .ic svg { width: 12px; height: 12px; }
.benefit-list li.ok .ic { background: rgba(45,212,191,.15); color: #2dd4bf; }
.benefit-list li.no .ic { background: rgba(248,113,113,.15); color: #f87171; }
.benefit-list li.no { color: var(--text-muted); }
.benefit-list li.no.js-lock { cursor: pointer; transition: border-color .15s, background .15s; }
.benefit-list li.no.js-lock:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.benefit-list li .txt { flex: 1; }
.benefit-list li .lk { font-family: var(--mono); font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px; }

/* ---------- 等级权益弹窗 ---------- */
.jjzl-modal-mask { position: fixed; inset: 0; background: rgba(8,11,18,.66); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.jjzl-modal-mask[hidden] { display: none; }

/* ---------- 主题设置：兑换码子目录 ---------- */
.jjzl-codes-subtabs { display:flex; gap:0; border-bottom:2px solid #e0e4ea; margin-bottom:20px; }
.jjzl-codes-subtabs a { padding:9px 20px; font-size:14px; color:#666; text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; }
.jjzl-codes-subtabs a:hover { color:#333; }
.jjzl-codes-subtabs a.active { color:#3858e9; border-bottom-color:#3858e9; font-weight:500; }
.jjzl-codes-sub { max-width:560px; }
.jjzl-codes-table { margin-top:8px; }
.jjzl-codes-table code.jjzl-code-text { font-size:13px; background:transparent; padding:0; }
.jjzl-copy-code.copied { background:#22c55e !important; color:#fff !important; border-color:#22c55e !important; }
.jjzl-codes-table td form { display:inline; }
.jjzl-codes-table .button { margin-left:4px; }
.lv-table { width: 100%; border-collapse: collapse; margin: 12px 0 0; font-size: 13px; }
.lv-table th, .lv-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.lv-table th { color: var(--text-muted); font-family: var(--mono); font-weight: 500; font-size: 12px; }
.lv-table td.yn { text-align: center; font-weight: 700; }
.lv-table td.yes { color: #2dd4bf; }
.lv-table td.yn:not(.yes) { color: #f87171; }

/* ---------- 视频课程播放 ---------- */
.video-stage { background: #000; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; position: relative; }
.video-stage video, .video-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.chapter-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.chapter-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.chapter-item:hover { border-color: var(--border-strong); }
.chapter-item.active { border-color: var(--accent); }
.chapter-item .c-idx { font-family: var(--mono); color: var(--accent); min-width: 28px; text-align: center; }
.chapter-item .c-title { flex: 1; font-size: 13px; line-height: 1.4; }
.chapter-item .c-dur { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
/* 课程目录每节课右侧：进度条 + 总时长 + 看到位置 + 学习状态 */
/* 课程目录每节课右侧：进度条 + 总时长 + 看到位置 + 学习状态 */
.chapter-item .c-right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.chapter-item .c-progress { width: 120px; height: 4px; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.chapter-item .c-progress-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.chapter-item .c-dur { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; min-width: 72px; text-align: right; }
.chapter-item .c-seen { font-size: 12px; color: var(--text-muted); white-space: nowrap; min-width: 76px; text-align: left; }
/* 学习状态统一宽度，避免“继续学习”按钮与“已学完”宽度不同导致上下行错位 */
.chapter-item .c-done,
.chapter-item .c-continue,
.chapter-item .lv-lock { min-width: 84px; text-align: center; box-sizing: border-box; }
.chapter-item .c-done { font-size: 12px; font-weight: 600; color: #3aab6e; white-space: nowrap; }
.chapter-item .c-continue { font-size: 12px; padding: 4px 8px; white-space: nowrap; cursor: pointer; justify-content: center; }
.chapter-item .lv-lock { font-size: 12px; }

/* ---------- 课程播放页：播放器 + 右目录 + 笔记 ---------- */
/* ==================== 播放页三栏布局（笔记左 | 播放器中满屏 | 目录右）==================== */
.course-player-wrap { display: flex; gap: 12px; align-items: stretch; position: relative; }

/* 真实全屏态：点击播放器全屏按钮后，对整块播放区（视频 + 左右侧栏）请求浏览器全屏，
   由 :fullscreen 伪类接管铺满视口，左右侧栏一并显示 */
.course-player-wrap:fullscreen,
.course-player-wrap:-webkit-full-screen,
.course-player-wrap:-moz-full-screen {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; flex-direction: row; gap: 14px; padding: 14px;
	background: var(--bg); max-width: none !important;
	width: 100vw !important; height: 100vh !important;
}
/* 全屏时左右侧栏默认收起（仅边缘把手可见），鼠标划过把手或点击图钉可展开；视频居中铺满 */
.course-player-wrap:fullscreen .player-side,
.course-player-wrap:-webkit-full-screen .player-side,
.course-player-wrap:-moz-full-screen .player-side {
	flex: 0 0 0; width: 0; height: 100%;
	background: transparent; border-color: transparent;
}
.course-player-wrap:fullscreen .player-side .side-inner,
.course-player-wrap:-webkit-full-screen .player-side .side-inner,
.course-player-wrap:-moz-full-screen .player-side .side-inner { display: none; }
/* 全屏内同样确保边缘把手可见（覆盖移动端媒体查询的 display:none） */
.course-player-wrap:fullscreen .side-handle,
.course-player-wrap:-webkit-full-screen .side-handle,
.course-player-wrap:-moz-full-screen .side-handle { display: flex; }
/* 悬停边缘把手 / 点击图钉展开（.open）时，全屏内同样展开侧栏 */
.course-player-wrap:fullscreen .player-side.open,
.course-player-wrap:-webkit-full-screen .player-side.open,
.course-player-wrap:-moz-full-screen .player-side.open {
	flex: 0 0 280px; width: 280px;
	background: var(--bg-elev); border-color: var(--border);
}
.course-player-wrap:fullscreen .player-side.open .side-inner,
.course-player-wrap:-webkit-full-screen .player-side.open .side-inner,
.course-player-wrap:-moz-full-screen .player-side.open .side-inner { display: flex; }
.course-player-wrap:fullscreen .course-main-col,
.course-player-wrap:-webkit-full-screen .course-main-col,
.course-player-wrap:-moz-full-screen .course-main-col { height: 100%; flex: 1 1 auto; min-width: 0; }
.course-main-col { flex: 1 1 auto; min-width: 0; display: flex; min-height: 0; background: #000; border-radius: var(--radius); overflow: hidden; }
.course-main-col .video-stage { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.course-main-col .video-stage > * { max-width: 100%; max-height: 100%; }
.course-main-col .video-stage .video-js,
.course-main-col .video-stage #tcplayer,
.course-main-col .video-stage video { width: 100% !important; height: 100% !important; background: #000; }
.course-main-col .video-stage video,
.course-main-col .video-stage .vjs-tech { object-fit: contain; }

/* 侧栏（笔记 / 目录）——默认自动隐藏（flex-basis:0），鼠标划到屏幕边缘时滑出；图钉可固定常驻 */
.player-side { display: flex; flex-direction: row; flex: 0 0 0; width: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; position: relative; transition: flex-basis .22s ease, width .22s ease; }
.player-side.open,
.player-side.pinned { flex: 0 0 280px; width: 280px; }
.player-side .side-inner { flex: 1; min-width: 0; min-height: 0; overflow: hidden; padding: 12px 10px; display: flex; flex-direction: column; }
/* 收起（自动隐藏）时隐藏面板内容，但保留 fixed 边缘把手可见 */
.player-side:not(.open):not(.pinned) .side-inner { display: none; }
/* 收起时面板本身不占视觉宽度，仅边缘把手可见 */
.player-side:not(.open):not(.pinned) { border-color: transparent; background: transparent; }
/* 展开 / 固定时给内容让出边缘把手的宽度，避免文字被把手遮挡 */
.player-side.open .side-inner,
.player-side.pinned .side-inner { padding-left: 24px; }
.player-side-notes.open .side-inner,
.player-side-notes.pinned .side-inner { padding-left: 10px; padding-right: 24px; }

/* 边缘把手：贴屏幕左右侧边的紧凑胶囊按钮——上下居中，仅图钉 + 竖排文字 */
.side-handle {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--bg-elev-2);
	border: 1px solid var(--border-strong);
	color: var(--text-muted);
	cursor: pointer;
	z-index: 40;
	opacity: .88;
	padding: 10px 0;
	transition: opacity .18s ease, background .18s, color .18s, border-color .18s, width .18s, box-shadow .18s;
	box-shadow: 0 0 10px rgba(0,0,0,.28);
}
.side-handle:hover {
	opacity: 1; color: var(--text);
	background: var(--bg-elev);
	width: 30px;
	box-shadow: 0 0 14px rgba(45,212,191,.20);
	border-color: var(--accent);
}
.player-side-toc .side-handle { left: 0; border-left: none; border-radius: 0 10px 10px 0; }
.player-side-notes .side-handle { right: 0; border-right: none; border-radius: 10px 0 0 10px; }

/* 竖排文字标签：目录 / 笔记（用户一眼识别） */
.side-handle::after {
	content: '';
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1.35;
	opacity: .72;
	transition: opacity .18s, color .18s;
}
.side-handle:hover::after { opacity: 1; color: var(--accent); }
.player-side-toc .side-handle::after { content: '目录'; }
.player-side-notes .side-handle::after { content: '笔记'; }

/* 图钉在上，竖排文字在下 */
.side-pin {
	font-size: 15px;
	line-height: 1;
	width: 22px; height: 22px;
	display: grid;
	place-items: center;
	background: rgba(139,148,158,.12);
	border-radius: 50%;
	filter: grayscale(1) brightness(.78);
	opacity: .7;
	transition: filter .18s, opacity .18s, background .18s, box-shadow .18s;
	pointer-events: none;
	flex-shrink: 0;
}
.side-handle:hover .side-pin { opacity: .92; filter: grayscale(.4) brightness(.95); background: rgba(139,148,158,.18); }
/* 固定状态：把手整体高亮 accent 色，图钉点亮发光 */
.player-side.pinned .side-handle {
	opacity: 1;
	background: linear-gradient(180deg, var(--accent), #1db9a0);
	color: var(--accent-ink);
	border-color: var(--accent);
	box-shadow: 0 0 16px rgba(45,212,191,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.player-side.pinned .side-handle::after { opacity: 1; color: inherit; }
.player-side.pinned .side-pin {
	filter: none; opacity: 1;
	background: rgba(0,0,0,.18);
	box-shadow: 0 0 6px rgba(0,0,0,.25);
}

/* 侧栏内的笔记 / 目录：由 .player-side 统一承载；内部滚动，不撑高外层 */
.course-toc { flex: 1 1 auto; min-height: 0; background: transparent; border: 0; border-radius: 0; padding: 0; max-width: 100%; overflow-y: auto; }
/* 笔记面板内部布局：标题固定 / 列表占满剩余空间并内部滚动 / 编辑器固定底部 */
.player-side .course-notes { margin-top: 0; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.player-side .notes-head { flex: 0 0 auto; font-size: 15px; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; }
/* 笔记列表：占据侧栏剩余全部空间，内部独立滚动，每条记录完整显示 */
.player-side .notes-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
/* 记笔记编辑器：固定在底部，不随列表滚动 */
.player-side .notes-editor { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.toc-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.toc-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.toc-search { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--radius-sm); transition: border-color .15s, background .15s; }
.toc-search:focus-within { border-color: var(--accent); background: var(--bg); }
.toc-search-ico { font-size: 13px; opacity: .7; }
.jjzl-toc-search { flex: 1; border: none; outline: none; background: transparent; padding: 8px 0; font-size: 13px; color: var(--text); }
.jjzl-toc-search::placeholder { color: var(--text-muted); }
.toc-count { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.jjzl-search-hl { background: rgba(74, 222, 128, 0.18); color: #4ade80; font-weight: 700; border-radius: 2px; padding: 0 1px; }
.toc-toggle-all { flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 14px; line-height: 1; transition: all .15s; }
.toc-toggle-all:hover { border-color: var(--accent); color: var(--accent); background: rgba(45,212,191,.08); }
.toc-btn { font-size: 12px; line-height: 1; padding: 6px 12px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.toc-btn:hover { background: var(--bg-elev-2); border-color: var(--accent); color: var(--accent); }
.toc-filter.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.toc-filter.active:hover { color: var(--accent-ink); background: var(--accent); }
/* 目录顶部学习进度条 */
.toc-progress { margin: 0 0 14px; }
.toc-progress .progress-bar { margin-bottom: 6px; }
.toc-progress .progress-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toc-progress .progress-pct { font-size: 13px; color: var(--text-muted); font-family: var(--mono); }
.toc-progress .toc-resume { flex-shrink: 0; }
@media (max-width: 600px) {
	.toc-progress .progress-info { flex-wrap: wrap; }
	.toc-tools { flex-wrap: wrap; }
	.toc-search { flex: 1 1 100%; }
	.chapter-item .c-progress { width: 60px; }
	.chapter-item .c-dur { min-width: 62px; }
	.chapter-item .c-seen { min-width: 64px; }
	.chapter-item .c-done,
	.chapter-item .c-continue,
	.chapter-item .lv-lock { min-width: 70px; }
}

/* 视频水印（防录屏追踪） */
.jjzl-wm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.jjzl-wm-marquee .jjzl-wm-float { position: absolute; top: 40%; left: 10%; white-space: nowrap; }
.jjzl-wm-tiled { position: absolute; top: -60%; left: -60%; width: 220%; height: 220%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.jjzl-wm-tiled .jjzl-wm-row { white-space: nowrap; line-height: 1; }
.toc-empty { color: var(--text-dim); font-size: 13px; }
.toc-chapter { margin-bottom: 10px; }
.toc-chapter-head { display: flex; align-items: center; gap: 8px; padding: 9px 8px; margin: 2px 0; cursor: pointer; user-select: none; border-radius: var(--radius-sm); transition: background .15s; }
.toc-chapter-head:hover { background: var(--bg-elev-2); }
.toc-chapter-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.toc-chapter-title { font-size: 15px; font-weight: 700; color: var(--text); }
.toc-toggle { flex: 0 0 auto; width: 18px; text-align: center; font-size: 16px; line-height: 1; color: var(--accent); transition: transform .2s ease; }
/* 展开：箭头指向右（▶）；收起：箭头指向下（▾）——与笔记分组的箭头逻辑一致 */
.toc-chapter .toc-toggle { transform: rotate(-90deg); }
.toc-chapter.collapsed .toc-toggle { transform: rotate(0); }
.toc-chapter-lessons { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; padding-left: 14px; border-left: 2px solid var(--border); }
.toc-chapter.collapsed .toc-chapter-lessons { display: none; }
.course-toc .chapter-item { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; font-size: 13px; }
.course-toc .chapter-item .c-row { display: flex; align-items: center; gap: 8px; }
.course-toc .chapter-item .c-row-top { justify-content: space-between; }
.course-toc .chapter-item .c-row-bottom { justify-content: flex-start; }
.course-toc .chapter-item .c-idx { min-width: 26px; text-align: left; }
.course-toc .chapter-item .c-dur { min-width: auto; text-align: right; }
/* 播放页目录：播放图标 hover 出现在标题左侧 */
.course-toc .chapter-item .c-go { font-size: 11px; color: var(--accent); flex: 0 0 auto; opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s; order: -1; margin-left: -2px; }
.course-toc .chapter-item:hover .c-go { opacity: 1; transform: translateX(0); }

/* 笔记 */
.course-notes { margin-top: 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.notes-head { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; }
.notes-head-actions { display: inline-flex; align-items: center; gap: 8px; }
.notes-head-actions .btn { font-size: 12px; padding: 6px 12px; }
.notes-editor textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text); padding: 10px; font-family: var(--sans); resize: vertical; transition: border-color .18s, box-shadow .18s; }
.notes-editor textarea:hover { border-color: var(--border-strong); }
.notes-editor textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(62,215,183,.18); }
.notes-editor-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.notes-time { font-size: 13px; color: var(--text-dim); }
.notes-time b { color: var(--accent); font-family: var(--mono); }
.notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* ====== 播放页笔记条目：上下两行布局（操作行 + 内容行）====== */
.notes-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 10px 12px !important;
	background: var(--bg-elev) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	font-size: 13px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	writing-mode: horizontal-tb !important;
	direction: ltr !important;
}
.player-side .notes-item:hover { border-color: var(--border-strong) !important; }
/* 第一行：播放按钮 + 章节 + 操作图标 */
.notes-item-row {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: nowrap !important;
}
.notes-ts { flex: 0 0 auto !important; font-family: var(--mono); font-size: 12px !important; color: var(--accent) !important; cursor: pointer; background: rgba(45,212,191,.12) !important; padding: 3px 8px !important; border-radius: 4px !important; border: 1px solid transparent !important; white-space: nowrap; line-height: 1.4 !important; transition: background .15s, border-color .15s, color .15s !important; }
.notes-ts:hover { background: var(--accent) !important; color: var(--accent-ink) !important; }
.notes-where { flex: 1 1 auto !important; min-width: 0 !important; font-size: 11px !important; color: var(--text-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 修改 / 删除 图标按钮 */
.notes-ed, .notes-del, .notes-topic { flex: 0 0 auto !important; width: 28px !important; height: 28px !important; border: 1px solid var(--border) !important; border-radius: 6px !important; background: var(--bg-elev-2) !important; color: var(--text-dim) !important; cursor: pointer !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 0 !important; transition: border-color .15s, color .15s, background .15s !important; }
.notes-ed:hover { border-color: #3b82f6 !important; color: #3b82f6 !important; background: rgba(59,130,246,.1) !important; }
.notes-del:hover { border-color: #ef4444 !important; color: #ef4444 !important; background: rgba(239,68,68,.1) !important; }
.notes-topic:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: rgba(45,212,191,.1) !important; }
/* 第二行：笔记正文（完整显示，不挤压） */
.notes-txt {
	flex: 0 0 auto !important;
	width: 100% !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
	line-height: 1.6 !important;
	writing-mode: horizontal-tb !important;
	direction: ltr !important;
	white-space: pre-wrap !important;
	color: var(--text) !important;
	font-size: 13px !important;
}
.notes-empty { color: var(--text-dim); font-size: 13px; padding: 12px 2px; text-align: center; }
.notes-jump { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(45,212,191,.3); }
/* 个人中心笔记：参照播放页笔记列表，column 布局 */
.notes-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.notes-item-row { display: flex; align-items: center; gap: 8px; }
/* 搜索过滤隐藏（覆盖 .notes-item 的 display:flex !important） */
.jjzl-note-hidden { display: none !important; }
.notes-ts { font-family: var(--mono); font-size: 12px; color: var(--accent); cursor: pointer; background: rgba(45,212,191,.12); padding: 3px 8px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; line-height: 1.4; transition: background .15s, border-color .15s, color .15s; }
.notes-ts:hover { background: var(--accent); color: var(--accent-ink); }
.notes-where { flex: 1; min-width: 0; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-ed, .notes-del, .notes-topic {
	width: 28px; height: 28px; padding: 0;
	display: grid; place-items: center;
	font-size: 13px; border-radius: var(--radius-sm);
	background: var(--bg-elev-2); border: 1px solid var(--border);
	color: var(--text-muted); cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	flex-shrink: 0;
}
.notes-ed:hover { border-color: #3b82f6; color: #3b82f6; background: rgba(59,130,246,.1); }
.notes-del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }
.notes-topic:hover { border-color: var(--accent); color: var(--accent); background: rgba(45,212,191,.1); }
.notes-txt { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.jjzl-note-edit-box { width: 100%; }
.jjzl-note-edit-area { width: 100%; box-sizing: border-box; min-height: 64px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); padding: 8px; font-family: var(--sans); resize: vertical; }
.jjzl-note-edit-bar { display: flex; gap: 8px; margin-top: 8px; }

/* 笔记轻量 Markdown 渲染 */
.jjzl-md-p { margin: 0 0 6px; }
.jjzl-md-p:last-child { margin-bottom: 0; }
.jjzl-md-h { margin: 6px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.jjzl-md-h:first-child { margin-top: 0; }
.jjzl-md-ul { margin: 4px 0; padding-left: 20px; }
.jjzl-md-ul li { margin: 2px 0; }
.jjzl-md-code { background: rgba(125,125,125,.18); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12px; }
.jjzl-md-p strong, .jjzl-md-h strong { color: var(--text); font-weight: 700; }

/* 我的笔记：跨课程搜索时，显示全部课程分组并隐藏课程 Tab 导航 */
#jjzl-view-list.is-searching .notes-course-tabs { display: none; }
#jjzl-view-list.is-searching .notes-group[data-cid] { display: flex !important; }

@media (max-width: 900px) {
	.course-player-wrap { flex-direction: column; }
	.player-side { flex-direction: column; flex: 1 1 auto; width: 100%; }
	.player-side.collapsed { flex-basis: auto; width: 100%; }
	.course-main-col { min-height: 50vh; }
	/* 移动端：侧栏常驻显示，隐藏边缘把手（无 hover 概念） */
	.player-side .side-handle { display: none; }
	.player-side .side-inner,
	.player-side.open .side-inner,
	.player-side.pinned .side-inner { display: flex; padding: 12px 10px; }
}

/* ---------- 侧边栏（与站点整体风格统一）---------- */
.widget,
.wp-block-widget {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 18px;
	transition: border-color .2s;
}
.widget:hover,
.wp-block-widget:hover {
	border-color: var(--border-strong);
}
.widget-title,
.widget .wp-block-heading,
.wp-block-widget .wp-block-heading {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--sans);
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 8px;
}
.widget-title::before,
.widget .wp-block-heading::before,
.wp-block-widget .wp-block-heading::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 15px;
	background: var(--accent);
	border-radius: 2px;
	flex-shrink: 0;
}
.widget ul,
.widget ol,
.widget .wp-block-latest-posts__list,
.widget .wp-block-latest-comments,
.widget .wp-block-archives-list,
.widget .wp-block-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget ul li,
.widget ol li,
.widget .wp-block-latest-posts__list li,
.widget .wp-block-latest-comments__comment,
.widget .wp-block-archives-list li,
.widget .wp-block-categories-list li,
.widget .wp-block-latest-posts__list li .wp-block-latest-posts__post-author {
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	line-height: 1.5;
}
.widget ul li:last-child,
.widget .wp-block-latest-posts__list li:last-child,
.widget .wp-block-latest-comments__comment:last-child,
.widget .wp-block-archives-list li:last-child,
.widget .wp-block-categories-list li:last-child {
	border-bottom: 0;
}
.widget ul li a,
.widget ol li a,
.widget .wp-block-latest-posts__post-title,
.widget .wp-block-latest-comments__comment-author,
.widget .wp-block-latest-comments__comment-link,
.widget .wp-block-archives-list li a,
.widget .wp-block-categories-list li a,
.widget .wp-block-categories-list .wp-block-categories__count {
	color: var(--text-muted);
	text-decoration: none;
	transition: color .15s, padding-left .15s;
	display: inline-block;
}
.widget ul li a:hover,
.widget ol li a:hover,
.widget .wp-block-latest-posts__post-title:hover,
.widget .wp-block-latest-comments__comment-author:hover,
.widget .wp-block-latest-comments__comment-link:hover,
.widget .wp-block-archives-list li a:hover,
.widget .wp-block-categories-list li a:hover {
	color: var(--accent);
	padding-left: 4px;
}

/* 搜索 widget（兼容传统小工具 + 区块小工具） */
.widget_search .search-form,
.widget .wp-block-search {
	display: flex;
	gap: 8px;
}
.widget_search .search-field,
.widget .wp-block-search__input {
	flex: 1;
	min-width: 0;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	padding: 8px 12px;
	font-size: 13px;
	font-family: var(--sans);
	outline: none;
	transition: border-color .2s;
}
.widget_search .search-field:focus,
.widget .wp-block-search__input:focus {
	border-color: var(--accent);
}
.widget_search .search-submit,
.widget .wp-block-search__button {
	background: var(--bg-elev-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.widget_search .search-submit:hover,
.widget .wp-block-search__button:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}

/* ---------- 分页 ---------- */
.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 32px; flex-wrap: wrap; padding: 0; list-style: none; }
.pagination li { list-style: none; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); font-size: 13px; text-decoration: none; box-sizing: border-box; }
.pagination a:hover { color: var(--accent); border-color: var(--accent); }
.pagination .current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pagination .disabled { opacity: 0.45; cursor: not-allowed; }
.pagination .dots { border-color: transparent; background: transparent; cursor: default; min-width: 22px; padding: 8px 4px; }

/* 手动跳转 */
.pagination .page-jump { margin-left: 8px; }
.pagination .page-jump form { display: flex; gap: 6px; align-items: center; }
.pagination .page-jump input { width: 56px; height: 36px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; text-align: center; box-sizing: border-box; }
.pagination .page-jump input:focus { outline: none; border-color: var(--accent); }
.pagination .page-jump button { height: 36px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-size: 13px; cursor: pointer; box-sizing: border-box; }
.pagination .page-jump button:hover { opacity: 0.9; }

/* ---------- 区块标题 ---------- */
.section {
	position: relative;
	margin-bottom: 24px;
	padding: 24px;
	background: rgba(10, 14, 20, .55);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--radius);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
	overflow: hidden;
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.section-head h2 {
	position: relative;
	margin: 0;
	padding-left: 14px;
	font-size: 20px;
}
.section-head h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 4px;
	border-radius: 2px;
	background: var(--accent);
	box-shadow: 0 0 10px rgba(45,212,191,.45);
}
.section-head .more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
	transition: all .15s ease;
	text-decoration: none;
}
.section-head .more:hover {
	background: #3ee9d4;
	border-color: #3ee9d4;
	color: var(--accent-ink);
}


/* CAD 模型区块：复用统一网格背景，仅保留卡片微强调 */
.section[data-pt="cad_model"] {
	border-color: rgba(120,160,255,.14);
}
.section[data-pt="cad_model"] .card {
	background: rgba(12, 16, 24, .45);
	border-color: rgba(120,160,255,.12);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.section[data-pt="cad_model"] .card-thumb {
	background: rgba(12, 16, 24, .45);
	border-bottom-color: rgba(120,160,255,.10);
}
.section[data-pt="cad_model"] .card:hover {
	border-color: rgba(120,160,255,.28);
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ---------- 首页英雄区 ---------- */
.hero { padding: 56px 0 40px; }
.hero h1 { font-size: 40px; margin: 0 0 12px; letter-spacing: -.5px; }
.hero h1 .hl { color: var(--accent); }
.hero .mono-tag { font-size: 12px; color: var(--text-dim); letter-spacing: .04em; margin-bottom: 14px; }
.hero .mono-desc { font-size: 13px; line-height: 1.8; color: var(--text-dim); max-width: 720px; margin: 0 0 22px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-family: var(--mono); font-size: 13px; line-height: 1.6; transition: border-color .2s, color .2s; cursor: default; }
.stat:hover { border-color: var(--accent); color: var(--text); }
.stat .num { font-weight: 600; color: var(--accent); font-size: 14px; }
.stat .lbl { color: var(--text-muted); font-size: 13px; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding: 32px 0 16px; margin-top: 28px; }
.site-footer .cols { display: flex; align-items: stretch; justify-content: space-between; gap: 40px; }
@media (max-width: 820px) { .site-footer .cols { flex-wrap: wrap; gap: 28px; } }
.site-footer h4 { font-size: 12px; font-family: var(--mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.site-footer a { color: var(--text-muted); display: block; padding: 3px 0; font-size: 13px; }
.site-footer a:hover { color: var(--accent); }
.site-footer .bottom { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 12px; color: var(--text-dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.site-footer .bottom a { color: var(--text-dim); font-family: var(--mono); font-size: 12px; display: inline; padding: 0; text-decoration: none; }
.site-footer .bottom a:hover { color: var(--accent); }

/* 页脚三大区域：logo 说明 / 链接 / 二维码 均匀分布 */
.footer-brand-col,
.footer-nav-group,
.footer-qrs { flex: 1 1 0; min-width: 0; position: relative; }

/* 页脚第一列：logo 与说明并排 */
.footer-brand-col { display: flex; align-items: center; gap: 16px; justify-content: center; }
.footer-brand-col .brand { flex-shrink: 0; }
.footer-brand-col .footer-about { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0; max-width: 100%; }
.footer-brand-col::after,
.footer-nav-group::after,
.footer-soft-col::after {
	content: '';
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 70%;
	background: var(--border);
	pointer-events: none;
}
@media (max-width: 820px) {
	.footer-brand-col,
	.footer-nav-group,
	.footer-qrs { flex: 1 1 100%; max-width: 100%; }
	.footer-brand-col { flex-direction: column; gap: 10px; justify-content: flex-start; }
	.footer-brand-col .footer-about { max-width: 100%; padding-right: 0; }
	.footer-brand-col::after,
	.footer-nav-group::after { display: none; }
}

/* 资源 / 学习 / 账户：三列在其区域内居中 */
.footer-nav-group { display: flex; gap: 28px; justify-content: center; }

/* Footer 二维码列 */
.footer-qrs { text-align: center; }
.footer-qrs h4 { text-align: center; }
.qr-pair { display: flex; gap: 14px; justify-content: center; }
.qr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qr-item img { border-radius: var(--radius-sm); border: 1px solid var(--border); }
.qr-item span { font-size: 11px; color: var(--text-muted); }

/* ---------- 播放页：三栏全屏（突破容器宽度限制）---------- */
body.jjzl-play-page .site-main { padding: 3px 0 0 !important; }
body.jjzl-play-page .site-main > .container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* 强制播放器区域撑满视口宽度（备用：负margin 突破法） */
body.jjzl-play-page .course-player-wrap {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
body.jjzl-play-page .course-crumb-row {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 3px;
}
body.jjzl-play-page .site-footer > .container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 20px !important;
}

/* 播放页：禁止整页滚动，三栏贴底、底栏显示并紧贴三栏下方 */
body.jjzl-play-page { overflow: hidden; }
body.jjzl-play-page .site-footer { padding: 6px 0 !important; margin-top: 0 !important; }
/* 底栏只保留最底部一行（版权/备案），隐藏上方多列链接区 */
body.jjzl-play-page .site-footer .cols { display: none !important; }
body.jjzl-play-page .site-footer .bottom { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; justify-content: center !important; gap: 16px !important; }

/* ---------- 杂项 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tax-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
/* 分类栏所有标签统一继承「全部」的 accent 描边布局 */
.tax-bar .chip { color: var(--accent); border-color: var(--accent); }
.tax-bar .chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tax-bar .chip:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- 资源筛选条（格式 / 排序） ---------- */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 22px; }
.filter-label { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.filter-bar .chip { color: var(--accent); border-color: var(--accent); background: transparent; }
.filter-bar .chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.filter-bar .chip:hover { background: var(--accent); color: var(--accent-ink); }
.sort-form { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sort-form label { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.sort-form select { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; font-family: var(--mono); font-size: 12px; }

/* ---------- 自定义 Logo / 移动端响应式 ---------- */
.site-logo { height: 64px; width: auto; display: block; border-radius: 6px; }
.site-footer .site-logo { height: auto; max-height: 72px; }

@media (max-width: 860px) {
	.site-header .container { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
	.primary-nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.header-actions { margin-left: auto; }
	.container { padding: 0 14px; }
}
@media (max-width: 720px) {
	.filter-bar { gap: 6px; }
	.filter-bar .sort-form { margin-left: 0; width: 100%; justify-content: space-between; }
	.download-box { flex-direction: column; align-items: stretch; }
	.download-box .btn { width: 100%; }
	.chapter-list .chapter-item { font-size: 13px; }
	.page-head h1 { font-size: 26px; }
}
@media (max-width: 480px) {
	.page-head h1, .single-head h1 { font-size: 24px; }
	.tax-bar, .filter-bar { gap: 6px; }
	.card-grid, .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4, .card-grid.cols-5, .card-grid.cols-6 { grid-template-columns: 1fr; }
}
.divider { height: 1px; background: var(--border); margin: 28px 0; }
.search-box { display: flex; gap: 8px; max-width: 460px; }

/* ---------- 右下角浮窗工具栏 ---------- */
.jjzl-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.jjzl-fab-item { position: relative; }
.jjzl-fab-btn {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text);
	display: grid; place-items: center; cursor: pointer; text-decoration: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
	transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}
.jjzl-fab-btn:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(45,212,191,.35); }
.jjzl-fab-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jjzl-fab-pop {
	position: absolute; bottom: calc(100% + 10px); right: 0;
	background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px;
	padding: 10px; width: 160px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); display: none;
}
.jjzl-fab-pop.open { display: block; }
.jjzl-fab-pop img { width: 140px; height: 140px; object-fit: contain; background: #fff; border-radius: 6px; display: block; margin: 0 auto 6px; }
.jjzl-fab-pop span { font-size: 12px; color: var(--text-muted); font-family: var(--mono); }

/* 课程播放页：彻底隐藏右下角浮窗工具栏，避免遮挡播放器控制条与记笔记按钮 */
.jjzl-play-page .jjzl-fab { display: none; }

/* 搜索浮层 */
.jjzl-search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 70; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.jjzl-search-overlay.open { display: flex; }
.jjzl-search-box { width: min(560px, 90vw); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 14px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.25); }
.jjzl-search-box form { display: flex; gap: 8px; }
.jjzl-search-box input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 10px 12px; font-size: 15px; }
.jjzl-search-box input:focus { outline: none; border-color: var(--accent); }
.jjzl-search-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.jjzl-search-close:hover { color: var(--text); }

/* 联系站长弹窗 */
.jjzl-contact-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; animation: jjzlModalIn .18s ease; }
.jjzl-contact-modal.open { display: flex; }
.jjzl-contact-box { width: min(440px, 94vw); max-height: 88vh; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 28px 30px 22px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.25); }
.jjzl-contact-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.jjzl-contact-close:hover { color: var(--text); }
.jjzl-contact-title { margin: 0 0 12px; font-size: 18px; color: var(--text); }
.jjzl-contact-intro { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.jjzl-contact-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jjzl-contact-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.jjzl-contact-list li span { width: 56px; color: var(--text-dim); font-family: var(--mono); flex-shrink: 0; }
.jjzl-contact-list li b { color: var(--text); font-weight: 600; word-break: break-all; }
.jjzl-contact-qrs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; justify-content: center; }
.jjzl-contact-qrs figure { margin: 0; text-align: center; }
.jjzl-contact-qrs img { display: block; }
.jjzl-contact-qrs figcaption { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-family: var(--mono); }

/* ---------- 弹窗公告 ---------- */
.jjzl-announce-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; animation: jjzlModalIn .18s ease; }
.jjzl-announce-modal.open { display: flex; }
.jjzl-announce-box {
	width: min(520px, 94vw); max-height: 86vh; overflow-y: auto;
	background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
	padding: 0 0 22px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.25);
}
.jjzl-announce-header {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 18px 24px; background: var(--bg-elev-2);
	border-bottom: 1px solid var(--border-strong); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	margin-bottom: 18px;
}
.jjzl-announce-close { background: none; border: none; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.jjzl-announce-close:hover { color: var(--text); background: var(--bg-elev); }
.jjzl-announce-title { margin: 0; font-size: 18px; color: var(--text); }
.jjzl-announce-content { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin: 0 24px 20px; white-space: normal; word-break: break-word; }
.jjzl-announce-content p { margin: 0 0 12px; }
.jjzl-announce-content p:last-child { margin-bottom: 0; }
.jjzl-announce-content img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 10px 0; }
.jjzl-announce-content a { color: var(--accent); text-decoration: underline; }
.jjzl-announce-ok { width: calc(100% - 48px); margin: 0 24px; justify-content: center; }

/* ---------- 左右浮窗广告 ---------- */
.jjzl-side-ads {
	position: fixed; z-index: 45; top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; gap: 12px;
	/* 根据视口剩余空间自适应，避免与 1200px 主容器重叠；最大 200px，最小 120px */
	width: clamp(120px, calc((100vw - var(--maxw)) / 2 - 28px), 200px);
}
.jjzl-side-ads--left { left: 14px; }
.jjzl-side-ads--right { right: 14px; }

/* 通用广告卡（左右浮窗 / 侧边栏共用） */
.jjzl-ad {
	position: relative; border-radius: 12px; overflow: hidden;
	background: var(--bg-elev); border: 1px solid var(--border-strong);
	box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.jjzl-ad--sidebar { width: 100%; }
.jjzl-ad-link { display: block; line-height: 0; }
.jjzl-ad-media { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; }
.jjzl-ad--sidebar .jjzl-ad-media { max-height: 220px; }
.jjzl-ad-close, .jjzl-ad-mute {
	position: absolute; background: rgba(13,17,23,.6); color: #fff; border: none; cursor: pointer;
	border-radius: 50%; display: grid; place-items: center; line-height: 1; backdrop-filter: blur(4px);
}
.jjzl-ad-close { top: 6px; right: 6px; width: 22px; height: 22px; font-size: 16px; }
.jjzl-ad-close:hover { background: rgba(220,60,80,.85); }
.jjzl-ad-mute { top: 6px; left: 6px; width: 24px; height: 24px; padding: 0; }
.jjzl-ad-mute svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jjzl-ad-mute .ic-off { display: none; }
.jjzl-ad-mute.is-muted .ic-on { display: none; }
.jjzl-ad-mute.is-muted .ic-off { display: block; }
.jjzl-ad.is-hidden { display: none; }

/* 内容页侧边栏广告容器 */
.jjzl-sidebar-ads { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

@media (max-width: 1496px) {
	.jjzl-side-ads { display: none; }
}

/* ---------- 幻灯片 / 公告 小模块：去除区块卡片背景 ---------- */
.section-widget-slider,
.section-widget-notice {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

/* 首页幻灯片小模块：去除图片容器卡片背景，并让比例类直接生效 */
.section-widget-slider .jjzl-slider {
	background: transparent;
	border-radius: 0;
}
.jjzl-slider.ratio-banner   { aspect-ratio: 37 / 10; }
.jjzl-slider.ratio-wide     { aspect-ratio: 16 / 9; }
.jjzl-slider.ratio-standard { aspect-ratio: 4 / 3; }
.jjzl-slider.ratio-square   { aspect-ratio: 1 / 1; }
.jjzl-slider.ratio-tall     { aspect-ratio: 3 / 4; }
.jjzl-slider.ratio-auto .jjzl-slide img { max-height: 520px; }
.jjzl-slider:not(.ratio-auto) .jjzl-slide img { height: 100%; }

/* ---------- 首页公告小模块 ---------- */
.jjzl-home-notice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px 6px;
	margin: 12px 0;
	border-radius: 10px;
	border-bottom: 1px dashed var(--border-strong, rgba(255,255,255,.12));
	background: transparent;
	color: var(--text);
	line-height: 1.6;
}
/* 滚动公告：文本横向跑马灯，悬停暂停 */
.jjzl-home-notice.is-scroll { overflow: hidden; }
.jjzl-home-notice.is-scroll .jjzl-notice-track {
	overflow: hidden;
	white-space: nowrap;
	margin: 0;
	flex: 1 1 auto;
}
.jjzl-home-notice.is-scroll .jjzl-notice-text {
	display: inline-block;
	padding-left: 100%;
	animation: jjzl-notice-marquee 16s linear infinite;
}
.jjzl-home-notice.is-scroll:hover .jjzl-notice-text { animation-play-state: paused; }
@keyframes jjzl-notice-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
.jjzl-home-notice .jjzl-notice-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--accent, #38d9a9);
}
.jjzl-home-notice p { margin: 0; }
.jjzl-home-notice.notice-warning { --accent: #ffd43b; }
.jjzl-home-notice.notice-danger  { --accent: #ff6b6b; }
.jjzl-home-notice.notice-success { --accent: #69db7c; }

@media (max-width: 860px) {
	.jjzl-fab { right: 12px; bottom: 12px; gap: 10px; }
	.jjzl-fab-btn { width: 42px; height: 42px; }
}
.search-box input { flex: 1; }

/* ---------- 主题后端设置页（后台，使用管理界面配色，不依赖前端 CSS 变量） ---------- */
.jjzl-settings { max-width: 980px; }
/* 左列表 + 右详情 布局 */
.jjzl-settings-layout { display: flex; align-items: flex-start; gap: 24px; margin-top: 16px; }
.jjzl-settings-nav {
	width: 210px; flex: 0 0 210px;
	background: #fff; border: 1px solid #c3c4c7; border-radius: 8px;
	padding: 8px; position: sticky; top: 32px;
}
.jjzl-settings-nav a {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 12px; border-radius: 6px; text-decoration: none;
	color: #1d2327; font-weight: 500; font-size: 14px;
}
.jjzl-settings-nav a .ico { font-size: 16px; line-height: 1; width: 20px; text-align: center; }
.jjzl-settings-nav a:hover { background: #f0f0f1; color: #3858e9; }
.jjzl-settings-nav a.active { background: #3858e9; color: #fff; }
.jjzl-settings-nav a.active .ico { filter: none; }
.jjzl-settings-content { flex: 1; min-width: 0; }
.jjzl-settings-content > form { margin-top: 0; }
/* 窄屏：左列表转为顶部横排 */
@media (max-width: 782px) {
	.jjzl-settings-layout { flex-direction: column; gap: 14px; }
	.jjzl-settings-nav { position: static; width: 100%; flex: none; display: flex; gap: 6px; flex-wrap: wrap; }
	.jjzl-settings-nav a { flex: 1 1 auto; justify-content: center; }
}
.jjzl-form { background: #fff; border: 1px solid #c3c4c7; border-radius: 8px; padding: 18px 22px; margin: 6px 0; }
.jjzl-form h2 { font-size: 15px; margin: 4px 0 14px; padding-top: 12px; border-top: 1px solid #f0f0f1; }
.jjzl-form h2:first-of-type { border-top: 0; padding-top: 0; }
.jjzl-logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jjzl-logo-preview img { display: block; border: 1px solid #c3c4c7; border-radius: 8px; padding: 6px; background: #fff; }
.jjzl-logo-placeholder { color: #646970; font-size: 13px; }

/* 可重复广告项编辑器 */
.jjzl-ad-list { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }
.jjzl-ad-item { border: 1px dashed #c3c4c7; border-radius: 8px; padding: 12px 14px; background: #fbfbfc; }
.jjzl-ad-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jjzl-ad-item-title { font-weight: 600; color: #1d2327; font-size: 13px; }
.jjzl-ad-field { margin: 6px 0; }
.jjzl-ad-field label { font-size: 13px; color: #50575e; line-height: 1.5; }
.jjzl-ad-item-remove { color: #b32d2e; border-color: #f0c8c8; background: #fff; }
.jjzl-ad-item-remove:hover { background: #fcf0f1; border-color: #b32d2e; }
.jjzl-ad-item-add { margin-top: 4px; align-self: flex-start; }

/* 3D CAD 模型预览器 */
.jjzl-cad-viewer { width:100%;height:620px;background:#1a1a2e;border-radius:10px;overflow:hidden;position:relative;margin:20px 0;touch-action:none }
.jjzl-cad-viewer canvas { display:block;width:100%!important;height:100%!important;touch-action:none }
.jjzl-cad-bar { position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(17,21,28,.78);padding:6px 12px;border-radius:8px;backdrop-filter:blur(4px) }
.jjzl-cad-btns { display:flex;gap:6px;align-items:center }
.jjzl-cad-bar button { background:#1c2230;border:1px solid #2a3140;color:#e6edf3;padding:4px 9px;border-radius:6px;cursor:pointer;font-size:12px;line-height:1.4;white-space:nowrap }
.jjzl-cad-bar button:hover { border-color:#39d0d8;color:#39d0d8 }
.jjzl-cad-bar button.fs-on { border-color:#39d0d8;color:#39d0d8 }
.jjzl-cad-bar .jjzl-cad-hint { color:#8b97a7;font-size:11px;text-align:center }
.jjzl-cad-explode { display:flex;align-items:center;gap:8px;color:#e6edf3;font-size:12px }
.jjzl-cad-explode-range { -webkit-appearance:none;appearance:none;width:120px;height:4px;background:#2a3140;border-radius:3px;outline:none;cursor:pointer }
.jjzl-cad-explode-range::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#39d0d8;cursor:pointer;border:none }
.jjzl-cad-explode-range::-moz-range-thumb { width:13px;height:13px;border-radius:50%;background:#39d0d8;cursor:pointer;border:none }

/* 全屏模式下左上角品牌区（logo + 站点标题），非全屏隐藏 */
.jjzl-cad-fs-brand{display:none;position:absolute;left:14px;top:8px;align-items:center;gap:10px;text-decoration:none;z-index:11;max-width:180px;height:28px;}
.jjzl-cad-viewer:fullscreen .jjzl-cad-fs-brand{display:flex;}
.jjzl-cad-viewer:-webkit-full-screen .jjzl-cad-fs-brand{display:flex;}
.jjzl-cad-fs-brand img{height:28px;width:auto;max-width:120px;object-fit:contain;display:block;}
.jjzl-cad-fs-brand span{font-size:14px;font-weight:600;color:#e6edf3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:28px;height:28px;}

/* 全屏提示 toast：居中，风格与网站一致 */
.jjzl-cad-fs-hint{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:100000;background:rgba(13,17,23,.88);border:1px solid rgba(57,208,216,.45);border-radius:12px;padding:14px 24px;color:#e6edf3;font-size:14px;font-weight:500;box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(57,208,216,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;animation:jjzlCadFsHintIn .35s cubic-bezier(.22,.61,.36,1) forwards;pointer-events:none;}
.jjzl-cad-fs-hint kbd{display:inline-block;margin-left:6px;padding:3px 8px;background:rgba(57,208,216,.15);border:1px solid rgba(57,208,216,.4);border-radius:6px;color:#39d0d8;font-family:ui-monospace,monospace;font-size:12px;}
.jjzl-cad-fs-hint.hide{animation:jjzlCadFsHintOut .35s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes jjzlCadFsHintIn{from{opacity:0;transform:translate(-50%,-50%) scale(.96);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes jjzlCadFsHintOut{from{opacity:1;transform:translate(-50%,-50%) scale(1);}to{opacity:0;transform:translate(-50%,-50%) scale(.96);}}
.jjzl-cad-canvas { position:absolute;inset:0;z-index:1 }
.jjzl-cad-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9fb4c9;font-size:15px;z-index:5;pointer-events:none }

/* 背景颜色调节面板（点击「背景」按钮弹出） */
.jjzl-cad-bg-panel{position:absolute;top:100%;margin-top:8px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:12px;background:rgba(13,17,23,.95);border:1px solid rgba(42,49,64,.8);border-radius:10px;padding:10px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.5);}
.jjzl-cad-bg-label{color:#8b97a7;font-size:12px;white-space:nowrap;}
.jjzl-cad-bg-swatches{display:flex;gap:8px;}
.jjzl-cad-bg-sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;transition:transform .12s,border-color .12s;}
.jjzl-cad-bg-sw:hover{border-color:#39d0d8;transform:scale(1.08);}
.jjzl-cad-bg-custom{display:flex;align-items:center;gap:6px;color:#e6edf3;font-size:12px;cursor:pointer;white-space:nowrap;}
.jjzl-cad-bg-input{width:28px;height:24px;border:none;background:none;cursor:pointer;padding:0;}

/* 旋转 3D 缩略图（卡片网格用）——含控制栏，加高避免遮挡模型 */
.card-thumb:has(.jjzl-cad-thumb) { aspect-ratio: 4/3; }
.jjzl-cad-thumb { position:absolute;inset:0;background:#0d1117;pointer-events:auto }
.jjzl-cad-thumb-canvas { position:absolute;inset:0 }
.jjzl-cad-thumb canvas { display:block;width:100%!important;height:100%!important }
.jjzl-cad-error { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ff9b9b;font-size:14px;z-index:6;padding:20px;text-align:center }
.jjzl-cad-locked { display:flex;align-items:center;justify-content:center;height:100%;color:#aaa;font-size:15px }

/* ============================================================
   课程介绍页 / 播放页（single-course.php）
   ============================================================ */
.btn-lg { padding: 12px 26px; font-size: 16px; font-weight: 700; }

/* ---------- 课程介绍页：封面 + 概要 ---------- */
.course-hero { display: flex; gap: 28px; align-items: flex-start; margin: 6px 0 26px; }
.course-hero-cover { flex: 0 0 360px; max-width: 360px; align-self: stretch; }
.course-cover-img { width: 100%; height: 100%; border-radius: var(--radius); border: 1px solid var(--border); display: block; aspect-ratio: 16/9; object-fit: cover; }
.course-cover-empty { width: 100%; height: 100%; aspect-ratio: 16/9; border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 56px; background: var(--bg-elev); color: var(--border-strong); }
.course-hero-info { flex: 1 1 auto; min-width: 0; }
.course-title { font-size: 28px; line-height: 1.25; margin: 10px 0 12px; }
.course-hero-info .single-meta { margin-bottom: 8px; }
.course-hero-cta { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-sub { color: var(--text-dim); font-size: 13px; }

/* ---------- 标签页导航 ---------- */
.course-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 8px 0 18px; flex-wrap: wrap; }
.tab-link { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; font: inherit; font-size: 15px; color: var(--text-dim); cursor: pointer; transition: color .15s, border-color .15s; }
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- 标签页内容 ---------- */
.course-tab-panel { display: none; }
.course-tab-panel.active { display: block; animation: jjzlFade .2s ease; }
@keyframes jjzlFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- 目录（介绍页，链接形式） ---------- */
.course-tab-panel .toc-chapter { margin-bottom: 10px; }
.course-tab-panel .toc-chapter-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.cat-item { text-decoration: none; transition: border-color .15s, background .15s; }
/* 播放图标：标题左侧，默认隐藏，hover 时滑出 */
.cat-item .c-go { font-size: 11px; color: var(--accent); flex: 0 0 auto; opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s, color .18s; order: -1; margin-left: -2px; }
.cat-item:hover .c-go { opacity: 1; transform: translateX(0); }
/* 锁图标：始终显示在最右侧（时长后面） */
.cat-item .lv-lock { flex: 0 0 auto; margin-left: 8px; }
.cat-item.is-first { border-color: var(--accent); }

/* ---------- 随课资料 ---------- */
.material-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.material-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.material-item .mat-icon { font-size: 18px; }
.material-item .mat-link { flex: 1; color: var(--text); text-decoration: none; font-weight: 500; word-break: break-all; }
.material-item .mat-link:hover { color: var(--accent); }
.material-item .mat-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.material-item .mat-action:hover { background: #3ee9d4; border-color: #3ee9d4; color: var(--accent-ink); }

.lv-lock { color: var(--warning); border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.1); }

/* ---------- 用户评价 / 评论区（介绍页） ---------- */
.course-tab-panel[data-panel="reviews"] .comments-area { margin-top: 4px; }
.course-map-intro { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.course-map-intro p { margin: 0 0 20px; line-height: 1.6; }

/* ---------- 播放页：返回链接 ---------- */
.course-back { display: inline-block; margin: 4px 0 14px; color: var(--text-dim); text-decoration: none; font-size: 14px; }
.course-back:hover { color: var(--accent); }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
	.course-hero { flex-direction: column; gap: 16px; }
	.course-hero-cover { flex: 1 1 auto; max-width: 100%; width: 100%; }
	.course-title { font-size: 22px; }
}

/* ---------- 全站统一弹窗系统（提示 / 确认 / 表单弹窗共用） ---------- */
.jjzl-modal-overlay,
.jjzl-modal-mask {
	position: fixed; inset: 0; z-index: 2147483647;
	background: rgba(0,0,0,.55);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	animation: jjzlModalIn .18s ease;
}
.jjzl-modal-mask[hidden] { display: none; }
@keyframes jjzlModalIn { from { opacity: 0; } to { opacity: 1; } }
.jjzl-modal-box, .jjzl-modal {
	position: relative; width: 100%; max-width: 420px; box-sizing: border-box;
	background: var(--bg-elev); border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg); padding: 28px 30px 22px;
	box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.25);
	animation: jjzlModalBoxIn .2s ease;
}
@keyframes jjzlModalBoxIn { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.jjzl-modal-title, .jjzl-modal-h {
	font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 10px;
	display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* 通用提示语：阿君温馨提示 */
.jjzl-modal-tip {
	font-size: 12px; font-weight: 600; color: var(--text-dim);
	text-align: center; letter-spacing: .5px;
	margin: 0 0 12px;
}
.jjzl-modal-sub, .jjzl-modal-subtitle {
	font-size: 13px; color: var(--text); text-align: center;
	margin-bottom: 12px; padding: 6px 12px;
	background: var(--bg-elev-2); border-radius: var(--radius-sm);
	line-height: 1.5;
}
.jjzl-modal-f, .jjzl-modal-actions {
	display: flex; justify-content: center; gap: 10px; margin-top: 20px;
}
.jjzl-modal-f .btn, .jjzl-modal-actions .btn { font-size: 13px; padding: 8px 20px; }
.jjzl-modal-body {
	font-size: 13px; line-height: 1.65; color: var(--text-muted); white-space: pre-line;
	text-align: center; margin-bottom: 20px;
}
.jjzl-modal-body .jjzl-hl { font-weight: 700; color: var(--accent); }
.jjzl-modal-message { color: var(--text); font-size: 14px; margin-bottom: 14px; }
.jjzl-prompt-input {
	width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
	border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
	font-size: 14px; font-family: inherit; text-align: center;
}
.jjzl-prompt-input:focus { outline: none; border-color: var(--accent); }

/* 取消按钮（HTML 弹窗用 .jjzl-modal-cancel，与 .jjzl-modal-btn-cancel 同款） */
.jjzl-modal-ok, .jjzl-modal-btn, .jjzl-modal-btn-cancel, .jjzl-modal-cancel {
	font-size: 13px; padding: 8px 20px; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); cursor: pointer; transition: all .15s ease;
}
.jjzl-modal-btn-cancel, .jjzl-modal-cancel { background: transparent; color: var(--text-dim); }
.jjzl-modal-btn-cancel:hover, .jjzl-modal-cancel:hover { background: var(--bg-elev-2); color: var(--text); }
.jjzl-modal-ok, .jjzl-modal-btn, .jjzl-modal-f .jjzl-modal-ok {
	background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.jjzl-modal-ok:hover, .jjzl-modal-btn:hover, .jjzl-modal-f .jjzl-modal-ok:hover {
	background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink);
}
.jjzl-modal-link { text-decoration: none; }
.jjzl-modal-close {
	position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
	border: 0; background: transparent; color: var(--text-muted);
	font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.jjzl-modal-close:hover { background: var(--bg-elev-2); color: var(--text); }
.jjzl-modal .hint {
	font-size: 13px; line-height: 1.7; color: var(--text); background: var(--bg-elev-2);
	border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 16px 0 0;
}
.jjzl-modal-qr { margin-top: 18px; text-align: center; padding-top: 16px; border-top: 1px solid var(--border); }

/* ===== 播放结束弹窗（进入下一节 / 圆环倒计时 / 重播 / 返回课程介绍） ===== */
.jjzl-ended-modal { max-width: 360px; text-align: center; }
.jjzl-ended-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.jjzl-ended-ring { position: relative; width: 76px; height: 76px; margin-bottom: 2px; }
.jjzl-ended-ring svg { transform: rotate(-90deg); display: block; }
.jjzl-ended-ring-bg { fill: none; stroke: var(--bg-elev-2); stroke-width: 5; }
.jjzl-ended-ring-fg { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.jjzl-ended-num { position: absolute; top: 0; left: 0; width: 76px; height: 76px; display: grid; place-items: center; font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--text); }
.jjzl-ended-title { font-size: 17px; font-weight: 700; color: var(--text); }
.jjzl-ended-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.jjzl-ended-actions { flex-direction: column; gap: 10px; }
.jjzl-ended-actions-top { flex-direction: row; justify-content: center; }
.jjzl-ended-actions-top .btn { flex: 1 1 0; max-width: 140px; }
.jjzl-ended-actions-bottom { flex-direction: column; }
.jjzl-ended-actions-bottom .btn { width: 100%; }
.jjzl-ended-actions .btn { font-size: 13px; }

/* ===== 登录 / 注册页：社交登录入口 ===== */
.social-login { margin-top: 18px; }
.social-divider { display: flex; align-items: center; color: var(--text-muted); font-size: 12px; }
.social-divider::before, .social-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.social-divider span { padding: 0 10px; }
.social-btns { display: flex; gap: 10px; margin-top: 12px; }
.social-btn { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 14px; transition: border-color .15s, color .15s, background .15s; }
.social-btn:hover { border-color: var(--accent); color: var(--accent); }
.social-btn.wechat { border-color: #07c160; color: #07c160; }
.social-btn.wechat:hover { background: rgba(7,193,96,.08); }
.social-btn.qq { border-color: #12b7f5; color: #12b7f5; }
.social-btn.qq:hover { background: rgba(18,183,245,.08); }
.social-btn.sms { border-color: var(--accent); color: var(--accent); }
.social-btn.sms:hover { background: rgba(45,212,191,.08); }
.jjzl-hp { display: none; }
#jjzl-sms-send:disabled { opacity: .6; cursor: not-allowed; }

/* ===== 首页小模块（幻灯片 / 广告 / 公告 / 自定义图文） ===== */
.jjzl-widget { margin: 0; }

/* 幻灯片轮播 */
.jjzl-widget-slider { margin: 32px 0; }
.jjzl-widget-slider.width-boxed { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.jjzl-widget-slider.width-full { width: 100vw; margin-left: calc(50% - 50vw); }
.jjzl-slider { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-elev); }
.jjzl-slider-track { display: flex; height: 100%; transition: transform .5s ease; }
.jjzl-slide { flex: 0 0 100%; height: 100%; position: relative; }
.jjzl-slide img { display: block; width: 100%; object-fit: cover; }
.jjzl-widget-slider.ratio-banner .jjzl-slider { aspect-ratio: 37 / 10; }
.jjzl-widget-slider.ratio-wide .jjzl-slider { aspect-ratio: 16 / 9; }
.jjzl-widget-slider.ratio-standard .jjzl-slider { aspect-ratio: 4 / 3; }
.jjzl-widget-slider.ratio-square .jjzl-slider { aspect-ratio: 1 / 1; }
.jjzl-widget-slider.ratio-tall .jjzl-slider { aspect-ratio: 3 / 4; }
.jjzl-widget-slider.ratio-banner .jjzl-slide img,
.jjzl-widget-slider.ratio-wide .jjzl-slide img,
.jjzl-widget-slider.ratio-standard .jjzl-slide img,
.jjzl-widget-slider.ratio-square .jjzl-slide img,
.jjzl-widget-slider.ratio-tall .jjzl-slide img { height: 100%; }
.jjzl-widget-slider.ratio-auto .jjzl-slide img { max-height: 520px; }
.jjzl-slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; color: #fff; font-size: 15px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.55)); }

/* 淡入淡出效果 */
.jjzl-slider[data-effect="fade"] .jjzl-slider-track { display: block; }
.jjzl-slider[data-effect="fade"] .jjzl-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.jjzl-slider[data-effect="fade"] .jjzl-slide:first-child { position: relative; }
.jjzl-slider[data-effect="fade"] .jjzl-slide.active { opacity: 1; }

/* 箭头按钮（默认圆形半透明） */
.jjzl-slider-prev, .jjzl-slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s, opacity .15s; display: flex; align-items: center; justify-content: center; user-select: none; }
.jjzl-slider-prev:hover, .jjzl-slider-next:hover { background: rgba(0,0,0,.55); }
.jjzl-slider-prev { left: 12px; }
.jjzl-slider-next { right: 12px; }
.jjzl-slider.nav-square .jjzl-slider-prev, .jjzl-slider.nav-square .jjzl-slider-next { border-radius: 8px; }
.jjzl-slider.nav-line .jjzl-slider-prev, .jjzl-slider.nav-line .jjzl-slider-next { background: transparent; border: 1px solid rgba(255,255,255,.7); width: 36px; height: 36px; font-size: 18px; }
.jjzl-slider.nav-line .jjzl-slider-prev:hover, .jjzl-slider.nav-line .jjzl-slider-next:hover { background: rgba(255,255,255,.18); }
.jjzl-slider.nav-none .jjzl-slider-prev, .jjzl-slider.nav-none .jjzl-slider-next { display: none; }

.jjzl-slider-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.jjzl-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; pointer-events: auto; transition: background .15s, width .2s; }
.jjzl-dot.active { background: #fff; width: 22px; border-radius: 5px; }

/* 广告横幅 */
.jjzl-widget-ad a { display: block; }
.jjzl-widget-ad img { display: block; width: 100%; border-radius: var(--radius-sm); }

/* 公告通知条 */
.jjzl-widget-notice { display: flex; align-items: center; gap: 12px; padding: 12px 0 4px; background: transparent; border: 0; border-bottom: 1px dashed var(--border); border-radius: 0; font-size: 14px; color: var(--text-muted); }
.jjzl-notice-ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--text-muted); }
.jjzl-notice-static, .jjzl-notice-marquee { flex: 1; }
.jjzl-notice-static a, .jjzl-notice-marquee a { color: var(--text-muted); text-decoration: none; }
.jjzl-notice-static a:hover, .jjzl-notice-marquee a:hover { color: var(--accent); }
.jjzl-notice-marquee { overflow: hidden; white-space: nowrap; }
.jjzl-notice-inner { display: inline-block; padding-left: 100%; animation: jjzl-marquee 20s linear infinite; }
@keyframes jjzl-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* 自定义图文区 */
.jjzl-widget-html .jjzl-html-content { color: var(--text); line-height: 1.7; }
.jjzl-widget-html.align-center { text-align: center; }
.jjzl-widget-html.align-right { text-align: right; }

/* ---------- 自定义小工具：最新发布 / 最新评论 / 全站标签 ---------- */
.jjzl-latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jjzl-latest-list li {
	display: flex; align-items: center;
	gap: 10px; line-height: 1.4; padding: 5px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.jjzl-latest-list li:last-child { border-bottom: none; }
.jjzl-latest-thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); border: 1px solid var(--border); line-height: 0; position: relative; }
.jjzl-latest-thumb img { width: 60px; height: 60px; object-fit: cover; display: block; }
.jjzl-latest-thumb-placeholder { flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); display: inline-block; }
.jjzl-latest-cad-thumb .jjzl-cad-thumb { position: absolute; inset: 0; border-radius: var(--radius-sm); overflow: hidden; }
.jjzl-latest-title { font-size: 13px; color: var(--text); text-decoration: none; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jjzl-latest-title:hover { color: var(--accent); }
.jjzl-latest-date { font-size: 11px; color: var(--text-muted); font-family: var(--mono); flex: 0 0 auto; white-space: nowrap; }

.jjzl-latest-comments { display: flex; flex-direction: column; gap: 14px; }
.jjzl-latest-comments li { display: flex; gap: 10px; align-items: flex-start; }
.jjzl-comment-avatar { flex: 0 0 auto; line-height: 0; border-radius: 50%; overflow: hidden; width: 32px; height: 32px; }
.jjzl-comment-avatar img, .jjzl-comment-avatar .jjzl-avatar { width: 32px; height: 32px; border-radius: 50%; display: block; object-fit: cover; }

/* 账号资料页头像上传 */
.jjzl-avatar-field .jjzl-avatar-preview { margin: 8px 0 10px; }
.jjzl-avatar-field .jjzl-avatar-preview .jjzl-avatar,
.jjzl-avatar-field .jjzl-avatar-preview-img {
	width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
	background: var(--accent); color: var(--accent-ink);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--mono); font-size: 28px; font-weight: 700;
}
.jjzl-avatar-field input[type="file"] { font-size: 13px; color: var(--text); max-width: 280px; }
.jjzl-avatar-field .description { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.jjzl-avatar-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jjzl-avatar-upload-row .btn { padding: 6px 14px; font-size: 13px; }
.jjzl-comment-body { min-width: 0; }
.jjzl-comment-author { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
.jjzl-comment-author:hover { color: var(--accent); }
.jjzl-comment-on { display: block; font-size: 12px; color: var(--text-muted); margin: 1px 0 4px; }
.jjzl-comment-excerpt { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }

.jjzl-widget-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
.widget_jjzl_all_tags .tagcloud { line-height: 1.8; }
.widget_jjzl_all_tags .tagcloud a { color: var(--text-muted); text-decoration: none; margin: 0 2px; }
.widget_jjzl_all_tags .tagcloud a:hover { color: var(--accent); }

/* ===== 我的笔记：视图切换（课程列表 / 知识导图） ===== */
.notes-view-tabs { display: inline-flex; gap: 4px; margin-bottom: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.notes-view-tab { border: 0; background: transparent; color: var(--text-muted); padding: 6px 16px; border-radius: calc(var(--radius-sm) - 3px); cursor: pointer; font-size: 14px; font-weight: 600; transition: .15s; }
.notes-view-tab:hover { color: var(--text); }
.notes-view-tab.active { background: var(--accent); color: var(--accent-ink); }
.notes-view-tab.active:hover { color: var(--accent-ink); }

/* ===== 知识导图（树状，带连接线） ===== */
/* 导图选择栏（多张独立导图） */
.jjzl-map-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.jjzl-map-list { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.jjzl-map-chip { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); padding: 5px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; transition: .15s; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.jjzl-map-chip:hover { color: var(--text); border-color: var(--accent); }
.jjzl-map-chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.jjzl-map-bar .btn { padding: 5px 12px; font-size: 13px; }
.jjzl-map-bar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; align-self: center; }
.jjzl-map-search { flex: 0 0 200px; max-width: 240px; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 13px; font-family: inherit; }
.jjzl-map-search:focus { outline: none; border-color: var(--accent); }
.jjzl-map-hit { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(45, 212, 191, .35); }
.jjzl-map-body { min-height: 120px; }

/* 导图导出线框样式：仅作用于 html2canvas 的克隆节点，不影响页面实际显示 */
.jjzl-map-wire { --border: #cbd5e1; background: transparent !important; }
.jjzl-map-wire .jjzl-map-node,
.jjzl-map-wire .jjzl-map-root-node,
.jjzl-map-wire .jjzl-map-note-node { background: transparent !important; box-shadow: none !important; border-color: #cbd5e1 !important; }
.jjzl-map-wire .jjzl-map-node,
.jjzl-map-wire .jjzl-map-root-node,
.jjzl-map-wire .jjzl-map-title,
.jjzl-map-wire .jjzl-map-note-text,
.jjzl-map-wire .jjzl-map-note-meta,
.jjzl-map-wire .jjzl-map-note-remark,
.jjzl-map-wire .jjzl-map-count { color: #475569 !important; }
.jjzl-map-wire .jjzl-map-count { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
.jjzl-map-wire .jjzl-map-toggle,
.jjzl-map-wire .jjzl-map-actions,
.jjzl-map-wire .jjzl-map-note-actions { display: none !important; }

.jjzl-map-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.jjzl-map-hint { font-size: 12px; color: var(--text-muted); }
.jjzl-map { overflow: auto; padding: 16px 8px 28px; --gutter: 44px; --stub: 22px; }
/* 知识导图在个人中心里突破 1200px 容器限制，最大化利用屏幕宽度 */
#jjzl-view-map {
	width: 100vw;
	max-width: 1600px;
	margin-left: calc(50% - 50vw);
	padding: 0 24px;
	box-sizing: border-box;
}
@media (min-width: 1600px) {
	#jjzl-view-map { margin-left: calc(50% - 800px); }
}
/* 每个层级组 = 纵向列（同级主题上下排列） */
.jjzl-map-ul { display: flex; flex-direction: column; position: relative; margin: 0; padding: 0; list-style: none; }
/* 每个节点 = 横向行：左侧卡片 + 右侧子级列（从左往右展开） */
.jjzl-map-node-li { list-style: none; position: relative; display: flex; flex-direction: row; align-items: center; padding: 8px 0; }

/* 连接线几何（所有层级通用，含 根→一级主题）：
   父卡片右缘先留一小段水平引线(--stub)，再到竖向总线，再分叉到每张子卡片 */
.jjzl-map-node-li > .jjzl-map-ul { margin-left: var(--gutter); }
/* 父级引线：从父卡片右缘向右一小段，接到竖向总线（ul 的 top:50% = 父卡片垂直中心） */
.jjzl-map-node-li > .jjzl-map-ul::before {
	content: ''; position: absolute; top: 50%; left: calc(-1 * var(--gutter));
	width: var(--stub); border-top: 1px solid var(--border); pointer-events: none;
}
/* 竖向总线：位于父卡片右缘外 --stub 处（相对本卡片为负的 --gutter+--stub，这样每一层都对齐到同一根竖线） */
.jjzl-map-ul > .jjzl-map-node-li:not([data-type="root"])::after {
	content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--stub) - var(--gutter));
	border-left: 1px solid var(--border); pointer-events: none;
}
.jjzl-map-ul > .jjzl-map-node-li:not([data-type="root"]):first-child::after { top: 50%; }
.jjzl-map-ul > .jjzl-map-node-li:not([data-type="root"]):last-child::after { bottom: 50%; }
.jjzl-map-ul > .jjzl-map-node-li:not([data-type="root"]):only-child::after { display: none; }
/* 子级引线：从竖向总线向左连到本卡片右缘（一小段 --stub，正好填满 --gutter） */
.jjzl-map-ul > .jjzl-map-node-li:not([data-type="root"])::before {
	content: ''; position: absolute; top: 50%; left: calc(var(--stub) - var(--gutter));
	width: calc(var(--gutter) - var(--stub)); border-top: 1px solid var(--border); pointer-events: none;
}

.jjzl-map-node-li.collapsed > ul { display: none; }
.jjzl-map-node-li.collapsed > .jjzl-map-node .jjzl-map-toggle { transform: rotate(-90deg); }

/* 节点卡片（宽度自适应内容，但限制最大宽度避免过长） */
.jjzl-map-node {
	display: inline-flex; align-items: center; gap: 6px; text-align: left;
	background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
	padding: 8px 12px; font-size: 14px; color: var(--text); vertical-align: top;
	width: auto; white-space: normal; word-break: break-word; flex: 0 0 auto; max-width: 420px; min-width: 0;
}
.jjzl-map-root-node { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 10px 18px; width: auto; flex: 0 0 auto; max-width: 420px; }
.jjzl-map-topic-node { cursor: pointer; font-weight: 600; }
.jjzl-map-topic-node:hover { border-color: var(--accent); }
.jjzl-map-toggle { display: inline-block; transition: transform .15s; color: var(--text-muted); font-size: 12px; }
.jjzl-map-title { line-height: 1.3; }
.jjzl-map-count { background: var(--bg); color: var(--text-muted); border-radius: 10px; font-size: 12px; padding: 0 7px; font-weight: 600; }
.jjzl-map-actions { display: inline-flex; gap: 2px; margin-left: 2px; opacity: 0; transition: opacity .15s; }
.jjzl-map-node:hover > .jjzl-map-actions { opacity: 1; }
.jjzl-map-act { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; line-height: 1; text-decoration: none; }
.jjzl-map-act:hover { background: var(--bg); color: var(--accent); }

/* 学习进度标记 */
.jjzl-map-status { margin-left: 8px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 10px; font-size: 11px; padding: 1px 8px; cursor: pointer; line-height: 1.5; font-weight: 600; transition: all .15s; white-space: nowrap; }
.jjzl-map-status:hover { border-color: var(--accent); }
.jjzl-status-0 { color: #94a3b8; }
.jjzl-status-1 { color: #d97706; border-color: #fcd34d; background: #fffbeb; }
.jjzl-status-2 { color: #059669; border-color: #6ee7b7; background: #ecfdf5; }
.jjzl-share-page .jjzl-map-status { cursor: default; }

/* 主题推荐课程 */
.jjzl-map-courses { list-style: none; margin: 4px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 3px; }
.jjzl-map-course { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.jjzl-map-course-link { color: var(--accent); text-decoration: none; }
.jjzl-map-course-link:hover { text-decoration: underline; }
.jjzl-map-course-remove { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; border-radius: 3px; }
.jjzl-map-course-remove:hover { color: #ef4444; background: rgba(239,68,68,.1); }

/* 课程搜索弹窗 */
.jjzl-course-modal { max-width: 460px; width: 92%; }
.jjzl-course-modal .jjzl-modal-body { text-align: left; }
.jjzl-course-results { margin-top: 10px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.jjzl-course-result { text-align: left; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text); cursor: pointer; transition: all .15s; }
.jjzl-course-result:hover { border-color: var(--accent); color: var(--accent); background: rgba(16,185,129,.06); }
.jjzl-course-empty { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }

/* 公开分享页 */
.jjzl-share-page { max-width: 1200px; margin: 24px auto 48px; padding: 0 16px; }
.jjzl-share-page .jjzl-map { width: 100%; max-width: 100%; }
.jjzl-share-head { text-align: center; margin-bottom: 18px; }
.jjzl-share-head h1 { font-size: 24px; margin: 0 0 6px; }
.jjzl-share-sub { color: var(--text-muted); font-size: 13px; margin: 0; }
.jjzl-share-collection { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.jjzl-share-collection h2 { font-size: 18px; margin: 0 0 14px; }
.jjzl-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.jjzl-collection-card { display: block; padding: 14px 16px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: all .15s; }
.jjzl-collection-card:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.jjzl-collection-title { font-size: 14px; font-weight: 600; }
.jjzl-share-404 { max-width: 480px; margin: 80px auto; text-align: center; }

.jjzl-map-note-node { flex-direction: column; align-items: flex-start; gap: 4px; width: auto; flex: 0 0 auto; max-width: 420px; cursor: default; }
.jjzl-map-note-remark { font-size: 12px; color: var(--accent); font-weight: 600; line-height: 1.3; }
.jjzl-map-note-text { font-size: 13px; color: var(--text); line-height: 1.45; }
.jjzl-map-note-meta { font-size: 11px; color: var(--text-muted); }
.jjzl-map-note-actions { display: flex; gap: 4px; align-self: flex-end; }

/* 归入主题 弹窗（样式统一到通用 .jjzl-modal / .jjzl-modal-overlay，仅保留专属字段） */
.jjzl-modal-overlay[hidden] { display: none !important; }
.jjzl-assign-modal { max-width: 440px; width: 92%; }
/* 复用通用弹窗头部/底部，这里只为「归入主题」覆盖 body 左对齐（表单布局） */
.jjzl-assign-modal .jjzl-modal-body { text-align: left; white-space: normal; margin-bottom: 0; color: var(--text); }
.jjzl-assign-modal .jjzl-modal-actions { justify-content: flex-end; }
.jjzl-assign-seed { padding: 10px 12px; background: var(--bg-elev-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); margin-top: 10px; }
.jjzl-assign-seed[hidden] { display: none !important; }
.jjzl-assign-seed-tip { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.jjzl-assign-seed .btn { width: 100%; justify-content: center; }
.jjzl-assign-note-info { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.jjzl-assign-note-info span { color: var(--text); }
.jjzl-assign-label { display: block; font-size: 12px; color: var(--text-muted); margin: 12px 0 5px; }
.jjzl-assign-select, .jjzl-assign-input {
	width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
	border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.jjzl-assign-select:focus, .jjzl-assign-input:focus { outline: none; border-color: var(--accent); }

/* 统一所有 jjzl-modal 弹窗外观（含「归入主题」与通用确认弹窗），避免风格分裂 */
/* 轻量 toast */
.jjzl-toast {
	position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 12px);
	background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
	padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.3);
	opacity: 0; transition: opacity .2s, transform .2s; z-index: 9999; pointer-events: none;
}
.jjzl-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================================
   工法墙模块（gongfa）
   =========================================================================== */
.format-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.3); }

/* 工法归档分类条：强化“墙”的分区感 */
.post-type-archive-gongfa .tax-bar,
.tax-gongfa_cat .tax-bar { margin-bottom: 14px; }

/* 工法详情页结构化区块 */
.gongfa-block { margin: 22px 0; padding: 16px 18px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; }
.gongfa-h { font-size: 16px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); display: inline-block; }
.gongfa-steps { margin: 0; padding-left: 22px; }
.gongfa-steps li { margin-bottom: 8px; line-height: 1.7; }
.gongfa-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gongfa-tags .tag { font-size: 13px; padding: 4px 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.gongfa-params { margin: 0; padding-left: 20px; }
.gongfa-params li { margin-bottom: 6px; line-height: 1.7; }

/* 关联课程 / 作品 侧栏 */
.gongfa-rel .gongfa-rel-list { list-style: none; margin: 0; padding: 0; }
.gongfa-rel .gongfa-rel-list li { margin-bottom: 8px; }
.gongfa-rel .gongfa-rel-list a { font-size: 14px; color: var(--accent); text-decoration: none; }
.gongfa-rel .gongfa-rel-list a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   展厅式工法墙（gongfa）
   --------------------------------------------------------------------------- */
/* 系统分类条 */
.gongfa-tax-bar { margin-bottom: 20px; }

/* 大图卡片网格 */
.gongfa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 28px; }
.gongfa-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.gongfa-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.gongfa-card-link { display: block; text-decoration: none; color: inherit; }
.gongfa-card-thumb { position: relative; aspect-ratio: 4 / 3; background: #1a1a1a; overflow: hidden; }
.gongfa-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gongfa-card:hover .gongfa-card-thumb img { transform: scale(1.05); }
.gongfa-card-thumb.no-thumb { display: grid; place-items: center; }
.gongfa-card-icon { font-size: 18px; color: var(--text-muted); }
.gongfa-card-type { position: absolute; top: 10px; right: 10px; font-size: 11px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; }
.gongfa-card-body { padding: 14px; }
.gongfa-card-cat { margin-bottom: 6px; }
.gongfa-card-cat .badge { font-size: 11px; }
.gongfa-card-title { font-size: 16px; margin: 0 0 8px; line-height: 1.4; }
.gongfa-card-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.gongfa-card-specs span { font-size: 12px; color: var(--text-muted); background: var(--bg); padding: 2px 8px; border-radius: 4px; }

/* 详情页图集 */
.gongfa-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 18px 0; }
.gongfa-gallery-item { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-elev-2); }
.gongfa-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gongfa-gallery-item:hover img { transform: scale(1.05); }
.gongfa-model-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #111; }

/* 参数表 */
table.gongfa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.gongfa-table th,
table.gongfa-table td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
table.gongfa-table th { width: 30%; background: var(--bg); color: var(--text-dim); font-weight: 500; }
table.gongfa-table td { background: var(--bg-elev-2); }

/* 详情页 3D 预览容器：复用 CAD 查看器，去掉默认外边距 */
.gongfa-model-wrap .jjzl-cad-viewer { margin: 0; border-radius: 0; height: 560px; }

/* 图集点击放大光标 */
.gongfa-gallery-item { cursor: zoom-in; }

/* 灯箱（窗口内放大显示图片） */
.gongfa-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; padding: 4vh 4vw; }
.gongfa-lightbox.open { display: flex; }
.gongfa-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.6); }
.gongfa-lightbox-close { position: absolute; top: 18px; right: 26px; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; opacity: .8; }
.gongfa-lightbox-close:hover { opacity: 1; }

/* CAD 下载权限提示（需 L2 及以上） */
.gongfa-locked { margin: 0; font-size: 14px; color: var(--text-dim); background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; padding: 12px 14px; }
.gongfa-locked a { color: var(--accent); font-weight: 600; }