:root {
    --color-primary: #1a7c28;    /* 草本绿：用于导航栏文字、图标、常规按钮 */
	--color-light: #E8F5E9;      /* 极浅的草本绿，用于大面积背景装饰、卡片悬停底色 */
	--color-accent: #ef3e43;     /* 朱砂红：用于强调、价格、悬停反馈 */
	--color-hover: #ef3e43;
	--color-border: #E8E4DC;
	--color-bg: #f2ede4;
	--color-cord: $FFFFFF;
	--color-paper:#fdfaf2;
	
	/* --- 文字颜色 --- */
	--text-main: #333333;      /* 深墨灰：主标题 */
	--text-dary: #666666;      /* 中灰：正文、摘要 */
	--text-muted: #999999;     /* 浅灰：辅助信息 */
	--text-white: #FFFFFF;     /* 反白文字 */
}

body {
    background-color: var(--color-bg);
    color: var(--text-main);
    font-family: 'Source Han Serif CN', 'Songti SC', 'SimSun', 'STSong', 'FangSong', serif;
    margin: 0;
    overflow-x: hidden;
}
a:hover{
	color: var(--color-accent);
}
img{
	max-width:100%;
	max-height:100%;
}

.main{
	margin:0px auto;
	width: 90%;
	max-width: 1200px;
	position: relative;
}

.breadcrumb {
    padding: 10px 0px;
	font-size: 0.8rem;
}
.breadcrumb a{
	display:inline-block;
	padding:0px 5px;
	color: var(--text-dary);
}
.breadcrumb cite{
	font-style:normal;
	color: var(--text-muted);
}

.tcm-btn{
	padding: 10px 28px;
	display: inline-flex;  /* 或者 display: flex */
    align-items: center;   /* 垂直方向居中 */
    justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background-color: #fdfaf275;
	transition: all 0.3s ease;
	user-select: none;
}
.tcm-btn:hover,
.tcm-btn:focus {
  color: #fff;
  background-color: var(--color-accent); /* 悬停变为朱砂红，点睛之笔 */
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(239, 62, 67, 0.3); /* 红色微光阴影 */
}
.tcm-btns-group{
	display:flex;
	gap:15px;
}

.tcm-card{
    position:relative;
	margin-bottom:20px;
	padding:15px 20px;
	background: var(--color-paper);
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}
.tcm-card .title{
    position: relative;
	margin:-15px -20px 15px -20px;
	border-bottom: 1px solid #f2f2f2;
    padding: 10px 20px;
    font-size:1.3em;
}
.tcm-card p{
    line-height: 1.8;
    font-size:1.2em;
}

.results-filter{
    margin-top: 56px;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.results-filter .row{
	display: flex;
	align-items: center;
	padding:0px;
}
.results-filter .row+.row{
	margin-top:10px;
}
.results-filter .row>div{
	display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.results-filter .label {
    flex: 0 0 80px;
    font-weight: bold;
    color: #5D664E;
}
.results-filter a{
	padding: 3px 12px;
    border-radius: 15px;
    border: 1px solid var(--color-border);
    transition: 0.2s;
}
.results-filter a:hover,
.results-filter a.active{
	border: 1px solid var(--color-accent);
    color: var(--color-accent);
	background-color: var(--color-paper);
}
.results-info {
    margin: 20px auto;
    color: #888;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}
.results-info span{
	cursor: pointer;
}
.results-info em,
.results-info .active{
	font-style:normal;
	font-weight:700;
	color: var(--color-accent);
}

/* ==================== 书籍列表网格布局 ==================== */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px;
}

/* ==================== 中医风书籍卡片 ==================== */
.tcm-book-card {
    background-color: var(--color-paper); /* 仿宣纸色卡片背景 */
    border: 1px solid var(--color-border);
    border-radius: 4px; /* 较小的圆角，保持古朴感 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    position: relative;
}

/* 悬停效果：卡片微微浮起，边框变为草本绿 */
.tcm-book-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(26, 124, 40, 0.1); /* 带有草本绿的淡淡阴影 */
    background-color: #ffffff; /* 悬停时变白，增强对比 */
}

/* ==================== 封面区域 ==================== */
.book-cover-wrapper {
    position: relative;
    background-color: var(--color-light); /* 极浅草本绿作为图片未加载时的垫底色 */
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dashed var(--color-border); /* 传统中式虚线分割 */
}

.book-cover-wrapper .cover {
    display: block;
    width: 140px; /* 固定的古籍比例宽度 */
    height: 190px;
    overflow: hidden;
    box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.15); /* 模拟书本厚度的阴影 */
    position: relative;
    transition: transform 0.3s ease;
}

.tcm-book-card:hover .cover {
    transform: scale(1.03); /* 悬停时封面微放大 */
}

.book-cover-wrapper .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 中式标签（如：伤寒金匮、本草草药） */
.book-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--color-light);
    color: var(--color-primary);
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    font-weight: 500;
}

/* ==================== 信息区域 ==================== */
.book-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 书名：深墨灰，悬停变为朱砂红 */
.book-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}

.book-title a {
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s ease;
}

.book-title a:hover {
    color: var(--color-accent); /* 朱砂红悬停反馈 */
}

/* 作者与朝代 */
.book-meta {
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.book-era {
    color: var(--text-muted); /* 浅灰朝代 */
}

.book-author {
    color: var(--color-primary); /* 草本绿作者名，彰显医家地位 */
    text-decoration: none;
    font-weight: 500;
}

.book-author:hover {
    text-decoration: underline;
}

/* 简介摘要：中灰，最多显示三行 */
.book-summary {
    color: var(--text-dary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制三行截断，防止排版错乱 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: justify;
}

/* ==================== 底部动作区 ==================== */
.book-footer {
    margin-top: auto; /* 保持按钮始终在卡片底部对齐 */
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

/* 按钮：平时为草本绿，悬停变朱砂红 */
.btn-read {
    font-size: 13px;
    color: var(--color-primary);
    background-color: var(--color-light);
    padding: 6px 14px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-read:hover {
    color: var(--text-white);
    background-color: var(--color-accent); /* 悬停变为朱砂红 */
    box-shadow: 0 2px 6px rgba(239, 62, 67, 0.2);
}

/* ==================== 东方美学大容器 ==================== */
.book-detail-container {
    max-width: 1140px;
    margin: 40px auto;
    padding: 50px 40px;
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    display: flex;
    gap: 60px;
    position: relative;
    overflow: hidden;
    /* 利用径向渐变模拟老宣纸由内向外微微泛黄的岁月感与水墨晕染意象 */
    background-image: 
        radial-gradient(circle at 85% 15%, rgba(232, 245, 233, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, #fdfbf7 0%, var(--color-paper) 100%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}

/* ==================== 左侧：古典线装书工艺 ==================== */
.book-aside {
    width: 240px;
    flex-shrink: 0;
    text-align: center;
}

.book-cover-box {
    width: 240px;
    height: 330px;
    position: relative;
    overflow: hidden;
    background-color: var(--color-light);
    box-shadow: 8px 12px 28px rgba(40, 35, 25, 0.18); /* 更沉稳厚重的纸本书影 */
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.book-cover-box:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 12px 18px 36px rgba(40, 35, 25, 0.25);
}

/* 独创：模拟古籍翻阅形成的深色书脊折痕 */
.book-cover-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 14px;
    background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 30%, transparent 100%);
    z-index: 3;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

/* 独创：悬浮朱砂红传统藏书章 */
.book-seal {
    position: absolute;
    bottom: 20px;
    right: 15px;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 12px;
    font-family: "SimSun", serif;
    font-weight: bold;
    padding: 3px 6px;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: rotate(-8deg); /* 模拟手工盖章的随机倾斜 */
    opacity: 0.85;
    background: rgba(253, 250, 242, 0.7);
    box-shadow: 0 0 2px rgba(239, 62, 67, 0.2);
    z-index: 4;
    pointer-events: none;
}

.book-inscription {
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-dary);
    font-family: "Noto Serif SC", "SimSun", serif;
    letter-spacing: 1px;
}

/* ==================== 右侧：主信息流 ==================== */
.book-main {
    flex-grow: 1;
}

/* 面包屑 */
.tcm-breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.tcm-breadcrumb a {
    color: var(--text-dary);
    text-decoration: none;
    transition: color 0.2s;
}
.tcm-breadcrumb a:hover {
    color: var(--color-primary);
}
.tcm-breadcrumb .sep {
    margin: 0 8px;
    color: var(--color-border);
}

/* 升级：衬线体书名与竹节朱砂红装饰 */
.book-main-title {
    font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; /* 切换为富有文人风骨的衬线体 */
    font-size: 34px;
    color: var(--text-main);
    margin: 0 0 28px 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 14px;
}
/* 书名前的朱砂红古典小立条 */
.title-decorator {
    width: 5px;
    height: 30px;
    background-color: var(--color-accent);
    display: inline-block;
    border-radius: 1px;
}

/* ==================== 创意：百子中药柜拼格 ==================== */
.herbal-cabinet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0; /* 严丝合缝的抽屉拼格 */
    border: 1px solid var(--color-border);
    margin-bottom: 30px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
}
.cabinet-drawer {
    padding: 16px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.6);
}
.cabinet-drawer:last-child {
    border-right: none;
}
/* 模拟药柜抽屉正中心复古的金属拉环意象 */
.cabinet-drawer::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid var(--text-muted);
    border-radius: 50%;
    opacity: 0.4;
}
.cabinet-drawer .drawer-label {
    font-size: 12px;
    color: var(--text-muted);
}
.cabinet-drawer .drawer-value {
    font-size: 14px;
    color: var(--text-main);
}
.cabinet-drawer .drawer-value b {
    font-size: 18px;
    color: var(--text-main);
    font-family: "Georgia", serif;
}
/* 分类小章 */
.cabinet-drawer .badge {
    background-color: var(--color-light);
    color: var(--color-primary);
    padding: 1px 6px;
    font-size: 12px;
    border: 1px solid var(--color-primary);
    border-radius: 2px;
}
.cabinet-drawer .author-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.cabinet-drawer .author-link:hover {
    text-decoration: underline;
}

/* 提要部分 */
.book-intro-section {
    margin-bottom: 35px;
}
.section-sub {
    font-size: 14px;
    color: var(--color-primary);
    margin: 0 0 10px 0;
    font-weight: 600;
}
.book-description {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-dary);
    text-align: justify;
    text-indent: 2em; /* 遵循古籍段落开头缩进 */
}

/* ==================== 强交互行动区 ==================== */
.tcm-action-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 45px;
}
.btns-group {
    display: flex;
    gap: 20px;
}
/* 朱砂红主按钮 */
.btn-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    color: var(--text-white);
    padding: 14px 45px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 62, 67, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 62, 67, 0.35);
	color: var(--text-white);
}
/* 草本绿次按钮 */
.btn-secondary-action {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary-action:hover {
    background-color: var(--color-light);
}

/* 二维码卡片微悬浮 */
.phone-read-qrcode {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #ffffff;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.qrcode-wrapper {
    width: 48px;
    height: 48px;
}
.qrcode-txt {
    display: flex;
    flex-direction: column;
}
.qrcode-txt span {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 600;
}
.qrcode-txt small {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ==================== 竹节风目录设计 ==================== */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-primary); /* 草本绿主视觉横线 */
    padding-bottom: 10px;
    margin-bottom: 24px;
}
.section-title {
    font-size: 18px;
    color: var(--text-main);
    margin: 0;
    font-weight: 600;
}
.btn-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 14px;
    cursor: pointer;
}
.btn-toggle:hover {
    color: var(--color-accent);
}

/* 响应式优雅双列/多列并行 */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.chapter-card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid var(--color-primary); /* 赋予竹简般的挺拔感 */
}
.chapter-card:hover {
    border-color: var(--color-primary);
    background-color: #ffffff;
    transform: translateX(2px); /* 悬停微右移，动态交互感更佳 */
}
/* 优化：章节序号打造成迷你红方印章 */
.stamp-index {
    background-color: var(--color-light);
    color: var(--color-primary);
    font-size: 11px;
    min-width: 28px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    border-radius: 1px;
    margin-right: 12px;
    font-family: "Georgia", serif;
}
.chapter-card:hover .stamp-index {
    background-color: var(--color-accent);
    color: var(--text-white);
    border-color: var(--color-accent);
}
.chapter-title {
    font-size: 14px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chapter-card:hover .chapter-title {
    color: var(--color-primary);
    font-weight: 500;
}

/* 底部收展触点 */
.chapter-more-trigger {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
    background-color: #ffffff;
    border: 1px dashed var(--color-border);
    cursor: pointer;
    color: var(--text-dary);
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.2s;
}
.chapter-more-trigger:hover {
    background-color: var(--color-light);
    color: var(--color-primary);
    border-style: solid;
}




/*herbs*/
.herbs-grid{
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.herbs-grid .tcm-card {
	margin:0px;
	overflow:hidden;
}
.herbs-grid .tcm-card:hover{
	transform: translateY(-3px); 
    outline-color: var(--color-light); 
}
.herbs-grid .herb-img-wrap{
	margin:-20px;
	height: 150px;
}
.herbs-grid .herb-img-wrap img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.herbs-grid .herb-img-wrap .nature-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(139, 26, 26, 0.8);
    color: white;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 4px;
}
.herbs-grid .herb-body{
	margin-top: 30px;
}
.herbs-grid .herb-body>*{
	margin-bottom:5px;
	color: var(--text-main);
}
.herbs-grid .herb-body h3:hover{
	color: var(--color-accent);
}
.herbs-grid .herb-body h3>small{
	font-size: 0.7rem;
	color: var(--text-muted);
}
.herbs-grid .herb-body .tags span{
	display:inline-block;
	padding:0px 8px;
	background-color: var(--color-light);
}
.herb-detail{
	margin-top: 75px;
	display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 20px;
}
.herb-detail .tcm-card .tips{
	margin-top:15px;
	font-size:0.8rem;
	color:var(--text-dary);
	text-align:center;
}
.herb-detail .herb-info{
	display:grid;
	grid-template-columns: 1fr 2fr;
	gap: 20px;
}
.herb-detail .herb-info .herb-img img{
	max-width: 100%;
	max-height:100%;
}
.herb-detail .herb-info .herb-img p{
	margin-top:10px;
	text-align:center;
	font-size: 0.8rem;
	color: var(--text-muted);
}
.herb-detail .herb-info h1{
	font-size: 1.2rem;
	margin-bottom:10px;
}
.herb-detail .herb-info h1 small{
	font-size: 0.8rem;
	color: var(--text-muted);
}
.herb-detail p{
	margin-bottom:6px;
	font-size:1rem;
}
.herb-detail .herb-info .property-tags span{
    background: var(--color-accent);
    color: white;
    padding: 2px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
}
.herb-detail .herb-info .property-tags span.tag-taste{
	background: var(--color-primary);
}
.herb-detail .herb-info .property-tags span.tag-meridian{
	background: var(--text-main);
}
.herb-detail .herb-info .property-tags span.tag-trend{
	background: var(--text-muted);
}
.herb-detail .data-viz-row{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.herb-detail ul.gallery-grid{
	margin-top: 15px;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}
.herb-detail ul.gallery-grid li{
	border-radius: 6px;
	overflow:hidden;
}
.herb-detail ul.gallery-grid img{
	max-width: 100%;
	max-height:100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	cursor: pointer;
}
.herb-detail ul.gallery-grid li img:hover{
	transform: scale(1.05); 
}
.herb-detail .yaofang-list li{
	margin:5px 0px;
	padding:5px 0px;
	border-bottom:1px dashed var(--color-border);
}
.herb-detail .yaofang-list li>div{
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	margin-bottom: 5px;
}
.herb-detail .yaofang-list li>div a{
	display:inline-block;
	margin-bottom: 10px;
	font-size:1.1rem;
	font-weight:700;
}
.herb-detail .yaofang-list li>div span{
	background: var(--color-accent);
    color: white;
    padding: 2px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
}
.herb-detail .yaofang-list li>div span.bg-green{
	background: var(--color-primary);
}

/*yaofang*/
.yaofang-grid{
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.yaofang-grid .tcm-card{
	padding-bottom: 40px;
}
.yaofang-grid .tcm-card:hover{
	transform: translateY(-3px); 
    outline-color: var(--color-light); 
}
.yaofang-grid .tcm-card .f-meta {
    color: var(--text-main);
    margin-bottom: 8px;
}
.yaofang-grid .tcm-card .f-name {
    font-size: 1.3rem;
	font-weight: bold;
    margin-bottom: 10px;
    display: block;
    color: var(--text-dary);
    text-decoration: none;
}
.yaofang-grid .tcm-card .f-name em{
	color: var(--color-accent);
	font-style:normal;
}
.yaofang-grid .tcm-card .f-composition {
    color: var(--color-primary);
	font-weight:700;
    border-bottom: 1px dashed #EEE;
    padding-bottom: 8px;
	margin-bottom: 8px;
}
.yaofang-grid .tcm-card .f-indication {
    margin-bottom:10px;
    color: var(--text-dary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
    text-overflow: ellipsis;
	word-break: break-all;
}
.yaofang-grid .tcm-card .f-footer {
    position:absolute;
	bottom:15px;
    display: flex;
    gap: 8px;
}
.yaofang-grid .tcm-card .f-footer .tag {
    background: var(--color-light);
    padding: 3px 8px;
    border-radius: 2px;
    color: var(--text-dary);
}
.yaofang-detail{
	margin-top: 75px;
	display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 20px;
}
.yaofang-detail .tcm-card{
	font-size: 0.8rem;
}
.yaofang-detail .tcm-card h1{
	margin-bottom: 15px;
	font-size: 1.33rem;
}
.yaofang-detail .tcm-card h3{
	margin-bottom: 10px;
	font-size: 1.1rem;
}
.yaofang-detail .tcm-card p{
	margin-bottom:10px;
}
.yaofang-detail .tcm-card .tips{
	margin-top:15px;
	font-size:0.8rem;
	color:var(--text-dary);
}
.yaofang-detail .tcm-card.bisect{
	display: grid;
    grid-template-columns: 1fr 1fr;
	align-items: start;
    gap: 10px;
	text-align:center;
}
.yaofang-detail ul.composition-grid{
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap:10px;
}
.yaofang-detail ul.composition-grid li{
	position:relative;
	padding: 10px;
	border:1px solid var(--color-border);
	border-radius: 4px;
	overflow:hidden;
}
.yaofang-detail ul.composition-grid li a{
	display: block;
	margin-top:10px;
	font-size:1.1rem;
	font-weight: 700;
}
.yaofang-detail ul.composition-grid li p{
	margin-top:10px;
	margin-bottom: 10px;
	font-size:0.9rem;
}
.yaofang-detail ul.composition-grid li .herb-role{
	margin-top:0px;
	position: absolute;
    top: -5px;
    left: -42px;
    height: 30px;
    line-height: 38px;
    width: 100px;
    background-color: #c04851;
    color: white;
    font-size: 0.9em;
    text-align: center;
    transform: rotate(-45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.yaofang-detail ul.composition-grid li .herb-role.role-zuo{
	background-color: #68945C;
}
.yaofang-detail ul.composition-grid li .herb-role.role-chen{
	background-color: #D9A40E;
}
.yaofang-detail ul.composition-grid li .herb-role.role-shi{
	background-color: #50616D;
}
.herb-jun{
	display:flex;
	grid-template-columns: 1fr 2fr;
	gap: 5px;
}
.herb-jun+.herb-jun{
	margin-top: 15px;
	padding-top:15px;
	border-top:1px dashed var(--color-border);
}
.herb-jun .herb-preview-img img{
	max-width:100px;
	height:auto;
	border-radius: 4px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}
.herb-jun .herb-preview-img:hover img{
	transform: scale(1.05);
}
.herb-jun .meta-group{margin-left:10px;flex:1;}
.herb-jun .meta-group h4{font-size:1.25em;}
.herb-jun .meta-group p{margin-bottom:0px;font-size:0.8rem;}
.tcm-sidebar-list { list-style: none; padding: 0; }
.tcm-sidebar-list li { 
	padding: 10px 0; 
	border-bottom: 1px solid var(--color-border); 
}
.tcm-sidebar-list .formula-header { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
}
.tcm-sidebar-list .formula-header .name { 
	display:inline-block; 
	font-size:1.3em; 
	font-weight: bold; 
}
.tcm-sidebar-list .formula-header .tags { display: flex; gap: 4px; }
.tcm-sidebar-list .formula-actions { 
	font-size:1rem; 
	color: var(-text-dary); 
	margin-top: 5px; 
	line-height: 1.4; 
}
.tcm-sidebar-list .layui-badge { 
	font-size: 10px!important; 
	background-color:var(--color-accent) !important; 
	height: 16px; 
	line-height: 16px; 
	padding: 0 4px; 
}
.tcm-sidebar-list .layui-badge.layui-bg-green{
	background-color:var(--color-primary) !important;
}

/*article*/
.article-grid{
	margin-top: 75px;
	display: grid;
    grid-template-columns: 7fr 3fr;
	gap:20px;
}
/* 列表总容器 */
.article-grid .lists {
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 卡片之间的呼吸间距 */
}

/* ------------------------------------------
   单条文章卡片 (Article Item)
   ------------------------------------------ */
.article-grid .article-item {
    background-color: var(--color-paper); /* #fdfaf2 宣纸白，极度护眼 */
    border: 1px solid var(--color-border); /* #E8E4DC 仿古边框色 */
    border-radius: 8px;
    padding: 24px;
    display: flex;
    gap: 24px; /* 封面图与文字的间距 */
    align-items: flex-start;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 8px rgba(51, 51, 51, 0.02); /* 极淡的阴影 */
}

/* 悬停动效：卡片微微浮起，边框转为草本绿 */
.article-grid .article-item:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary); /* #1a7c28 */
    box-shadow: 0 12px 24px rgba(26, 124, 40, 0.06); /* 带有淡淡绿意的环境光阴影 */
    background-color: #FFFFFF; /* 悬停时变纯白，增强交互感 */
}

/* 当没有封面图时，HTML 模板中会输出 style="display:block;"，此处做兜底强化 */
.article-grid .article-item[style*="display:block;"] {
    display: block !important;
}

/* ------------------------------------------
   文章封面图 (Cover)
   ------------------------------------------ */
.article-grid .article-cover {
    flex-shrink: 0;
    width: 200px;
    height: 130px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(232, 228, 220, 0.6);
    background-color: var(--color-bg);
}

.article-grid .article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不拉伸变形 */
    transition: transform 0.5s ease;
}

/* 悬停卡片时，封面图微微放大 */
.article-grid .article-item:hover .article-cover img {
    transform: scale(1.06);
}

/* ------------------------------------------
   右侧/内部文字区
   ------------------------------------------ */
.article-grid .article-item > div {
    flex: 1; /* 自动撑满剩余宽度 */
    display: flex;
    flex-direction: column;
}

/* 文章标题 */
.article-grid .article-item h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.article-grid .article-item h3 a {
    color: var(--text-main); /* #333333 深墨灰 */
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 标题悬停：变为草本绿 */
.article-grid .article-item h3 a:hover {
    color: var(--color-primary); /* #1a7c28 */
}

/* 元数据 Meta 信息（作者、更新、阅读数） */
.article-grid .article-item .meta {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-muted); /* #999999 辅助浅灰 */
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* 项目之间的间距 */
    align-items: center;
}

/* 增强元数据的标签感 */
.article-grid .article-item .meta span {
    color: var(--text-dary); /* #666666 中灰 */
    font-weight: 500;
}

/* 文章摘要 (Resume) */
.article-grid .article-item p:not(.meta) {
    margin: 0;
    font-size: 14px;
    color: var(--text-dary); /* #666666 正文中灰 */
    line-height: 1.6;
    /* 现代多行文本溢出省略（最多显示 2 行，防止摘要过长破坏排版） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar {
    flex-shrink: 0; /* 锁定宽度，防止被左侧列表挤压变形 */
    display: flex;
    flex-direction: column;
    gap: 20px; /* 各个卡片之间的垂直间距 */
}

/* 2. 通用卡片基础基础（复用宣纸白与仿古边框） */
.sidebar-card {
    background-color: var(--color-paper); /* #fdfaf2 */
    border: 1px solid var(--color-border); /* #E8E4DC */
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(51, 51, 51, 0.01);
}

/* 3. 卡片统一标题样式（带草本绿标志小竖线） */
.sidebar-title {
    margin: 0 0 18px 0;
    font-size: 16px;
    color: var(--text-main); /* #333333 */
    border-left: 3px solid var(--color-primary); /* #1a7c28 */
    padding-left: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ------------------------------------------
   模块一：岐黄寄语卡片
   ------------------------------------------ */
.notice-card .notice-text {
    color: var(--color-primary); /* 草本绿 */
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 10px 0;
    font-style: italic;
}

.notice-card .notice-desc {
    color: var(--text-dary); /* #666666 */
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------------------
   模块二：研究笔记二级分类导航
   ------------------------------------------ */
.research-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.research-categories a {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background-color: var(--color-bg); /* #f2ede4 稍微深一点的宣纸底色 */
    color: var(--text-main);
    text-decoration: none;
    font-size: 13.5px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

.research-categories a span {
    margin-right: 10px;
    font-size: 15px;
}

/* 分类悬停动效：整条变绿，文字反白，向右微弹 */
.research-categories a:hover {
    background-color: var(--color-primary);
    color: #FFFFFF !important;
    border-color: var(--color-primary);
    padding-left: 18px; /* 优雅的向右滑出感 */
}

/* ------------------------------------------
   模块三：同道瞩目 · 热门研习排行榜
   ------------------------------------------ */
.hot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hot-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* 基础排名数字小方块 */
.hot-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-muted); /* #999999 */
    background-color: var(--color-bg);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 【前三名高亮】色彩激活 */
.hot-num.num-1 {
    background-color: var(--color-accent) !important; /* 第一名：朱砂红 #ef3e43 */
    color: #FFFFFF !important;
}

.hot-num.num-2 {
    background-color: var(--color-primary) !important; /* 第二名：草本绿 #1a7c28 */
    color: #FFFFFF !important;
    opacity: 0.9;
}

.hot-num.num-3 {
    background-color: var(--color-primary) !important; /* 第三名：草本绿浅化版 */
    color: #FFFFFF !important;
    opacity: 0.65;
}

/* 排行榜文章标题链接 */
.hot-list a {
    color: var(--text-dary);
    font-size: 13.5px;
    line-height: 1.5;
    text-decoration: none;
    /* 严格控制单条标题最多占 2 行，超出打省略号，保护右侧排版 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

/* 悬停文章标题变绿 */
.hot-list li:hover a {
    color: var(--color-primary);
}


/* ==========================================
   中医资料网：内容详情页【专属】双栏及侧边栏样式
   （已增加父级作用域锁定，绝不污染其他页面）
   ========================================= */

/* 1. 详情页大包装器：负责激活布局 */
.article-detail-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 40px;
	padding-top: 40px;
}

/* 2. 详情页左侧：文章正文白色白底卡片 */
.article-detail-wrapper .article-content-box {
    flex: 1; 
    background-color: var(--color-paper); /* #fdfaf2 宣纸白 */
    border: 1px solid var(--color-border); /* #E8E4DC */
    border-radius: 8px;
    padding: 40px; 
}

/* 主标题 */
.article-detail-wrapper .article-content-box h1 {
    color: var(--text-main); 
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 16px 0;
}

/* 元信息 Meta */
.article-detail-wrapper .article-content-box .meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 24px;
    margin-bottom: 30px;
    border-bottom: 1px dashed var(--color-border); 
    color: var(--text-muted); 
    font-size: 13.5px;
}
.article-detail-wrapper .article-content-box .meta .layui-icon {
    font-size: 14px;
    color: var(--text-muted);
}
.article-detail-wrapper .article-content-box .meta span{
	display:block;
	margin-right: 10px;
}

/* 正文文本排版渲染 (保持实体书书香质感) */
/* =========================================
   文章正文区全局基础设定
   ========================================= */
.article-detail-wrapper .article-body {
  color: var(--text-main);
  font-size: 1.0625rem;       /* 17px：长文阅读黄金字号 */
  line-height: 1.85;          /* 宽松行高，降低阅读疲劳 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  letter-spacing: 0.02em;     /* 微增字间距，中文阅读更透气 */
}

/* =========================================
   标题层级系统 (h1-h6)
   ========================================= */
.article-detail-wrapper .article-body h1,
.article-detail-wrapper .article-body h2,
.article-detail-wrapper .article-body h3,
.article-detail-wrapper .article-body h4,
.article-detail-wrapper .article-body h5,
.article-detail-wrapper .article-body h6 {
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

/* h2：核心章节标题，带左侧主色装饰条 */
.article-detail-wrapper .article-body h2 {
  font-size: 1.625rem;        /* 26px */
  padding-left: 14px;
  border-left: 4px solid var(--color-primary);
  position: relative;
}

/* h3：小节标题，底部浅分割线 */
.article-detail-wrapper .article-body h3 {
  font-size: 1.375rem;        /* 22px */
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

/* h4-h6：段落内子标题 */
.article-detail-wrapper .article-body h4 { font-size: 1.1875rem; /* 19px */ }
.article-detail-wrapper .article-body h5 { font-size: 1.0625rem; /* 17px */ color: var(--text-dary); }
.article-detail-wrapper .article-body h6 { font-size: 0.9375rem; /* 15px */ color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* 首个标题去除顶部间距，避免与文章头部留白冲突 */
.article-detail-wrapper .article-body > :first-child {
  margin-top: 0 !important;
}

/* =========================================
   段落与文本语义标签
   ========================================= */
.article-detail-wrapper .article-body p {
  margin-bottom: 1.5em;
  text-align: justify;        /* 两端对齐，版面更整齐 */
}

/* 强调与加粗 */
.article-detail-wrapper .article-body strong {
  color: var(--text-main);
  font-weight: 700;
}

/* 斜体（中文环境慎用，主要用于外文或特殊术语） */
.article-detail-wrapper .article-body em {
  font-style: italic;
  color: var(--text-dary);
}

/* 删除线 */
.article-detail-wrapper .article-body del {
  color: var(--text-muted);
  text-decoration-color: var(--color-accent);
}

/* 高亮标记 */
.article-detail-wrapper .article-body mark {
  background-color: var(--color-light);
  color: var(--text-main);
  padding: 2px 4px;
  border-radius: 2px;
}

/* =========================================
   链接样式
   ========================================= */
.article-detail-wrapper .article-body a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-primary);
  transition: all 0.2s ease;
}

.article-detail-wrapper .article-body a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  border-bottom-style: solid;
  background-color: var(--color-light);
}

/* =========================================
   引用块 (Blockquote)
   ========================================= */
.article-detail-wrapper .article-body blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  background-color: var(--color-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
  color: var(--text-dary);
  font-size: 0.9375rem;       /* 引用内容略小于正文 */
  line-height: 1.75;
}

.article-detail-wrapper .article-body blockquote p:last-child {
  margin-bottom: 0;
}

/* 嵌套引用降级处理 */
.article-detail-wrapper .article-body blockquote blockquote {
  background-color: rgba(232, 245, 233, 0.5);
  border-left-color: var(--color-border);
  margin: 1em 0;
}

/* =========================================
   列表系统 (ul / ol)
   ========================================= */
.article-detail-wrapper .article-body ul,
.article-detail-wrapper .article-body ol {
  margin: 1.5em 0;
  padding-left: 1.8em;
}

.article-detail-wrapper .article-body li {
  margin-bottom: 0.5em;
  padding-left: 4px;
}

.article-detail-wrapper .article-body li::marker {
  color: var(--color-primary); /* 列表符号使用主色 */
}

/* 嵌套列表间距收紧 */
.article-detail-wrapper .article-body li > ul,
.article-detail-wrapper .article-body li > ol {
  margin: 0.4em 0;
}

/* 任务列表 (GFM Checkbox) */
.article-detail-wrapper .article-body input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-primary);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  top: -1px;
  cursor: default;
}

.article-detail-wrapper .article-body input[type="checkbox"]:checked {
  background-color: var(--color-primary);
}

.article-detail-wrapper .article-body input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =========================================
   代码与预格式化
   ========================================= */
/* 行内代码 */
.article-detail-wrapper .article-body code {
  background-color: var(--color-bg);
  color: var(--color-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.875em;
  word-break: break-word;
}

/* 代码块 */
.article-detail-wrapper .article-body pre {
  margin: 1.5em 0;
  padding: 16px 20px;
  background-color: #2d2d2d;  /* 深色背景与纸张底色形成对比 */
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-detail-wrapper .article-body pre code {
  background: none;
  color: #ccc;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  word-break: normal;
}

/* =========================================
   媒体元素 (图片 / 视频 / 音频)
   ========================================= */
.article-detail-wrapper .article-body img,
.article-detail-wrapper .article-body video,
.article-detail-wrapper .article-body iframe {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1.5em auto;
  display: block;
}

/* 图片说明文字 */
.article-detail-wrapper .article-body figcaption {
  text-align: center;
  font-size: 0.8125rem;       /* 13px */
  color: var(--text-muted);
  margin-top: 8px;
  margin-bottom: 1.5em;
  font-style: italic;
}

/* =========================================
   水平分割线
   ========================================= */
.article-detail-wrapper .article-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-border) 20%,
    var(--color-primary) 50%,
    var(--color-border) 80%,
    transparent
  );
  margin: 2.5em 0;
}

/* =========================================
   表格基础容器（响应式兜底）
   ========================================= */
.article-detail-wrapper .article-body table {
  width: 100%;
  margin: 1.5em 0;
  overflow-x: auto; /* 小屏幕横向滚动，防止撑破布局 */
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  background-color: var(--color-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* =========================================
   表格主体样式
   ========================================= */
.article-detail-wrapper .article-body table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9375rem; /* 15px，比正文略小，区分层级 */
  line-height: 1.6;
  color: var(--text-main);
}

/* --- 表头样式 --- */
.article-detail-wrapper .article-body table thead th {
  background-color: var(--color-primary);
  color: var(--text-white);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  white-space: nowrap; /* 表头不换行，保持紧凑 */
  position: sticky;    /* 长表格滚动时表头吸顶 */
  top: 0;
  z-index: 1;
}
/* 防止空表头/空单元格被压缩为 0 宽度 */
.article-detail-wrapper .article-body table th:empty,
.article-detail-wrapper .article-body table td:empty {
  min-width: 2em;       /* 至少撑开约 2 个字符宽度 */
  padding-left: 16px !important;  /* 保持与其他列一致的内边距 */
  padding-right: 16px !important;
}

/* 针对已包含   但视觉仍过窄的情况 */
.article-detail-wrapper .article-body table th {
  min-width: 3em;       /* 给所有表头设置最小宽度基线 */
}

/* --- 数据行样式 --- */
.article-detail-wrapper .article-body table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top; /* 多行内容顶部对齐，阅读更舒适 */
  transition: background-color 0.2s ease;
}

/* 最后一行去除底边框，视觉更干净 */
.article-detail-wrapper .article-body table tbody tr:last-child td {
  border-bottom: none;
}

/* --- 交互反馈 --- */
.article-detail-wrapper .article-body table tbody tr:hover td {
  background-color: var(--color-light);
}

/* --- 斑马纹（可选，适合超过5行的密集数据表） --- */
.article-detail-wrapper .article-body table tbody tr:nth-child(even) td {
  background-color: rgba(232, 245, 233, 0.3); /* --color-light 的极低透明度版本 */
}
/* 注意：如果使用了斑马纹，hover 优先级需更高，上面的 hover 规则已天然满足 */

/* =========================================
   特殊内容适配
   ========================================= */
/* 表格内的链接使用强调色 */
.article-detail-wrapper .article-body table a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-primary);
  transition: all 0.2s ease;
}

.article-detail-wrapper .article-body table a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  border-bottom-style: solid;
}

/* 表格内的代码/标签样式 */
.article-detail-wrapper .article-body table code {
  background-color: var(--color-bg);
  color: var(--color-accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.875em;
}

/* 数字列右对齐（需在 HTML 中给对应 td/th 添加 class="num"） */
.article-detail-wrapper .article-body table .num {
  text-align: right;
  font-variant-numeric: tabular-nums; /* 等宽数字，纵向对齐更整齐 */
}




/* ------------------------------------------
   锁定作用域：以下样式【仅在文章详情页的侧边栏】生效
   ------------------------------------------ */

/* 详情页专属侧边栏容器 */
.article-detail-wrapper .sidebar {
    width: 300px;
    flex-shrink: 0; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 详情页专属卡片基础 */
.article-detail-wrapper .sidebar-card {
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
}

/* 详情页专属侧边栏标题 */
.article-detail-wrapper .sidebar-title {
    margin: 0 0 18px 0;
    font-size: 15px;
    color: var(--text-main);
    border-left: 3px solid var(--color-primary);
    padding-left: 10px;
    font-weight: 600;
}

/* ==========================================
   内容页专属：国风印章笺盒卡片
   ========================================= */

/* 专属限制在详情页内，防止污染 */
.article-detail-wrapper .author-card.themed-chinese-card {
    background-color: var(--color-paper); /* #fdfaf2 宣纸色 */
    
    /* 核心精髓：双重仿古信笺边框（外实内虚，极其精致） */
    border: 1px solid var(--color-border);
    outline: 1px dashed rgba(26, 124, 40, 0.25);
    outline-offset: -6px; /* 让虚线往内缩，形成复古稿纸线框 */
    
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* 古代书笺多为方正，减小圆角 */
}

/* 上半部分排版（头像与姓名） */
.article-detail-wrapper .themed-chinese-card .author-upper {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 2;
}

/* 【核心改动】朱砂方印头像 */
/* 专属锁定在详情页内的单字朱砂私印 */
.article-detail-wrapper .themed-chinese-card .author-seal {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    
    background-color: transparent;
    color: var(--color-accent); /* 朱砂红 */
    border: 2px solid var(--color-accent);
    
    /* 四角做更微弱的圆角，更像石料刻出来的私章 */
    border-radius: 2px; 
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 单字字号加大，采用粗楷体或仿宋，模拟盖印墨迹 */
    font-size: 24px; 
    font-weight: bold;
    font-family: "Kaiti", "楷体", "SimSun", "华文仿宋", serif;
    
    /* 细节微调：让单字在方框内完美居中，并带有微微的斑驳感 */
    line-height: 1;
    text-align: center;
    box-shadow: inset 0 0 4px rgba(239, 62, 67, 0.1), 1px 1px 2px rgba(0,0,0,0.05);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
}

/* 姓名与标识区 */
.article-detail-wrapper .themed-chinese-card .author-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 研习同道姓名 */
.article-detail-wrapper .themed-chinese-card .author-name {
    margin: 0;
    font-size: 16px;
    color: var(--text-main);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 改良后的古典小标签 */
.article-detail-wrapper .themed-chinese-card .author-tag {
    font-size: 11px;
    color: var(--color-primary); /* 草本绿 */
    background-color: var(--color-light); /* 极浅草本绿 */
    border: 1px solid rgba(26, 124, 40, 0.15);
    padding: 1px 6px;
    border-radius: 2px;
    width: fit-content;
    font-weight: 500;
}

/* ------------------------------------------
   【新增】底部古风书笺寄语区
   ------------------------------------------ */
.article-detail-wrapper .themed-chinese-card .author-motto-line {
    font-size: 13px;
    color: var(--text-dary); /* #666666 */
    font-style: italic;
    border-top: 1px dashed var(--color-border);
    padding-top: 12px;
    margin-top: 4px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* 淡淡的红线装饰，模拟古代线装书的版心线（极弱，隐约可见即可） */
.article-detail-wrapper .themed-chinese-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 78px; /* 刚好位于印章和名字的交界线 */
    width: 1px;
    background-color: rgba(232, 228, 220, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* 模块二：大数据库跨库标签 */
.article-detail-wrapper .relation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.article-detail-wrapper .type-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}
.article-detail-wrapper .tag-book { background-color: var(--color-light); color: var(--color-primary); }
.article-detail-wrapper .tag-prescription { background-color: #FDE8E8; color: var(--color-accent); }

.article-detail-wrapper .relation-name {
    font-size: 13.5px;
    color: var(--text-dary);
    text-decoration: none;
}
.article-detail-wrapper .relation-name:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* 模块三：延伸阅读 */
.article-detail-wrapper .related-articles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.article-detail-wrapper .related-articles li {
    position: relative;
    padding-left: 12px;
}
.article-detail-wrapper .related-articles li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--text-muted);
}
.article-detail-wrapper .related-articles a {
    color: var(--text-dary);
    font-size: 13.5px;
    text-decoration: none;
}
.article-detail-wrapper .related-articles a:hover {
    color: var(--color-primary);
}

/* ------------------------------------------
   📱 移动端自适应（同样受作用域保护）
   ========================================= */
@media (max-width: 992px) {
    .article-detail-wrapper {
        flex-direction: column;
        gap: 24px;
        padding-top: 20px;
    }
    .article-detail-wrapper .article-content-box {
        padding: 24px; 
    }
    .article-detail-wrapper .article-content-box h1 {
        font-size: 22px;
    }
    .article-detail-wrapper .sidebar {
        width: 100%;
    }
}

.article-content-box h1{
	font-size:1.7rem;
}
.article-content-box h2{
	margin:1.3em 0px 0.7em 0px;
	font-size: 1.5rem;
}
.article-content-box h3{
	margin:1.3em 0px 0.7em 0px;
	font-size: 1.4rem;
}
.article-content-box p{
	margin-bottom:0.6em;
}
.article-content-box .content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.article-content-box .content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  color: #666;
  background-color: #f8f9fa;
  border-left: 4px solid #4a90e2;
  border-radius: 4px;
}
.article-content-box .content blockquote p {
  margin-bottom: 0;
}
.article-content-box .content ul {
  list-style-type: none; /* 移除默认符号 */
  padding-left: 0;
}
.article-content-box .content ul li {
  position: relative;
  padding-left: 20px;
}
.article-content-box .content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em; /* 根据行高微调垂直位置 */
  width: 6px;
  height: 6px;
  background-color: #4a90e2; /* 品牌色圆点 */
  border-radius: 50%;
}
.article-content-box .content ol {
  margin-bottom:0.8em;
  counter-reset: item;
  list-style-type: none;
}
.article-content-box .content ol li {
  position: relative;
  padding-left: 25px;
  counter-increment: item;
}
.article-content-box .content ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0px;
  color: var(--text-dary);
}


/* --- 顶部进度条 --- */
.read-progress-bar {
	position: fixed; top: 0; left: 0; height: 3px;
	background: linear-gradient(to right, #3498db, #9b59b6);
	width: 0%; z-index: 9999; transition: width 0.1s ease;
}
/* --- 页头主体 --- */
.header {
	position: fixed; top: 0; width: 100%; z-index: 2000;
	background: rgba(255, 255, 255, 0.7); 
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border-bottom: 1px solid rgba(0,0,0,0.06);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 高级感核心：网格底纹 */
.header::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 0);
	background-size: 20px 20px; /* 细小的点状网格 */
	pointer-events: none; z-index: -1;
}
/* 动态流光边框 (Beam) */
.header::after {
	content: ""; position: absolute; bottom: -1px; left: -100%;
	width: 50%; height: 1px;
	background: linear-gradient(90deg, transparent, #3498db, transparent);
	animation: beam-loop 6s infinite linear;
}
@keyframes beam-loop {
	to { left: 150%; }
}
.header .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header .logo a {
    text-decoration: none;
    color: #333;
    letter-spacing: -1px;
}
.header .logo a img{
    max-width:150px;
}
/* --- 导航 & 磁性指示器 --- */
.nav-menu.active{ background:transparent!important;}
.nav-list { 
	display: flex; 
	list-style: none; 
	gap: 35px;
	position: relative; 
}
.nav-list>li{
	padding: 15px 0px;
}
.nav-list a { text-decoration: none; color: #333; font-weight: 600; font-size: 1.25em; padding: 10px 0; transition: color 0.3s; }
.nav-list a:hover { color: #3498db; }
/* --- 电脑端子菜单 --- */
@media (min-width: 769px) {
	.has-children { position: relative; }
	.sub-menu {
		position: absolute; top: 60px; left: 0px; transform: translateX(-50%) translateY(20px),z-index:1001;
		background: #fff; min-width: 180px; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.12);
		opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); padding: 10px 0; list-style: none;
	}
	.has-children:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(-6px); }
	.sub-menu a { padding: 10px 20px; display: block; font-size: 14px; }
	.sub-menu a:hover { background: #f8fafc; color: #3498db; }
	li.has-children:hover .arrow { transform: rotate(180deg); }
}
/* --- Kbar 命令中心 --- */
.kbar-trigger {
	display: flex; align-items: center; padding: 7px;
	background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.02);
	border-radius: 10px; cursor: pointer; transition: 0.3s; color: #555;
}
.kbar-trigger:hover { background: rgba(0,0,0,0.1); transform: translateY(-1px); }
.kbar-overlay {
	position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(12px);
	z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding-top: 15vh;
}
.kbar-overlay.active { display: flex; background: rgba(15, 23, 42, 0.4)!important;}
.kb-hint{
	font-size: 10px;
    font-weight: 700;
    background: #f2ede457;
    padding: 2px 6px;
    border-radius: 5px;
    margin-left: 6px;
    border: 1px solid #ddd;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.kbar-content { 
	width: 90%; max-width: 580px; background: #fff; border-radius: 20px; 
	box-shadow: 0 30px 70px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
	transform: scale(0.95); transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kbar-overlay.active .kbar-content { transform: scale(1); }
.kbar-header { display: flex; align-items: center; padding: 20px 25px; border-bottom: 1px solid #f1f5f9; }
.kbar-overlay input { flex: 1; border: none; outline: none; font-size: 18px; padding-left: 15px; color: #1e293b; }
.kbar-body { padding: 10px 0; max-height: 400px; overflow-y: auto; }
.kbar-item { padding: 14px 25px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.2s; font-size: 15px; color: #475569; }
button.kbar-item{width: 100%; background: transparent;border: none;}
.kbar-item:hover { background: #f1f5f9; color: #3498db; }
/* --- 手机端适配 --- */
@media (max-width: 768px) {
	.header .main{ padding:10px 5px; }
	.nav-indicator, .glow-container, .kb-hint { display: none !important; }
	.menu-toggle { display: flex; flex-direction: column; gap: 6px; cursor: pointer; z-index: 2500; }
	.menu-toggle span { width: 26px; height: 2px; background: #333; transition: 0.3s; }
	.menu-toggle.active{ background-color:#fff!important; }
	.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.menu-toggle.active span:nth-child(2) { opacity: 0; }
	.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	.nav-menu {
		position: fixed; top: 0; right: -100%; width: 75%; height: 100vh;
		background: #fff; padding: 100px 35px; transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
		z-index: 2400; visibility: hidden; box-shadow: -20px 0 50px rgba(0,0,0,0.1);
	}
	.nav-menu a{ display:block; padding-left:15px; height:38px line-height:38px; }
	.nav-menu a:hover { background: #f8fafc; color: #3498db; }
	.nav-menu.active { right: 0; visibility: visible;background:#fff!important; }
	.nav-list { flex-direction: column; gap: 10px;display:block!important; }
	.nav-list > li { border-bottom: 1px solid #f1f5f9;padding:0px; }
	.sub-menu { display: none; background: none; margin-top: 10px; list-style: none; }
	.has-children.open .sub-menu { display: block; animation: slideDown 0.3s ease; }
	.has-children .sub-menu a{ padding-left:40px;}
}

.arrow { transition: 0.3s; margin-left: 4px; vertical-align: middle; }
.has-children.open .arrow { transform: rotate(180deg); }

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* 隐约的横向信笺格线，增加书斋感背景 */
.home-background{
	background-color: #f6f3eb; 
	background-image: linear-gradient(#efece6 1px, transparent 1px);
	background-size: 100% 50px;
}
.home-background+.site-footer{
	margin-top:0px!important;
}

/*主页*/
.hero{
	background-position: center;
    background-repeat: no-repeat;
	padding:100px 0px 80px 0px;
	box-shadow: inset 0 -50px 50px -50px rgba(0,0,0,0.3);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
	background-size: cover; /* 适配容器，保持比例 */
    background-attachment: fixed; /* 视差效果，增强国风沉浸感 */
}
.hero .main{
	padding:0px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}
.hero .hero-content{
	padding-left: 10px;
}
.hero .hero-content h2{
	font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 1.2rem;
}
.hero .hero-content h2 span{
	display:inline-block;
	padding-left:15px;
	font-size:0.5em;
}
.hero .hero-content .season-tag {
    margin:1.2rem 0px;
	display: inline-block;
    font-weight: 600;
}
.hero .hero-content p{
	font-size: 1.2rem;
    margin-bottom: 1.2rem;
    max-width: 600px;
	line-height:2rem;
}
.hero .tcm-card{
	background: rgba(0,0,0,0.15);
	border: 1px solid #e0d9cc15;
}
.hero .tcm-card .title{
	border-bottom:1px solid #f2f2f24a;
}
.hero .tcm-card .yiji {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin: 1.5rem 0;
	line-height:1.5rem;
}
.hero .tcm-card .yi, .hero .tcm-card .ji {
    padding: 0.9rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
	background: rgba(74, 107, 90, 0.05);
    border: 1px solid rgba(74, 107, 90, 0.2);
}
.hero .tcm-card .ji {
    background: rgba(201, 166, 107, 0.05);
    border: 1px solid rgba(201, 166, 107, 0.2);
}
.hero .tcm-card .yiji b {
    display: block;
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.hero .cta-section .btn-cta {
    display: block;
    background: #ef3e434d;
    padding: 0.9rem 1.8rem;
	color: #ffffffb3;
	text-align:center;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(201, 166, 107, 0.35);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    letter-spacing: 1px;
}
.hero .cta-section .btn-cta:hover{
	background: #ef3e43b5;
	color: #ffffff;
}
.hero .cta-section p {
    margin-top: 10px;
	font-size:0.8rem;
    opacity: 0.92;
    line-height: 1.7;
	text-align:center;
}


/* ==========================================================================
   时令经络、药物、方剂三联屏模块 - 新中式高级视觉样式
   ========================================================================== */

.refined-seasonal-section *,
.refined-seasonal-section *::before,
.refined-seasonal-section *::after {
  box-sizing: border-box;
}

.refined-seasonal-section {
  margin-top: -80px;
  padding: 20px;
}

.refined-seasonal-section .main {
  display: grid;
  /* 三栏不均等网格：经络占地最广（横向），草药与方剂等宽 */
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 20px;
  align-items: stretch;
}

/* --- 通用卡片升级（拒绝傻白大，使用中式折扇边框与微弱呼吸感） --- */
.refined-seasonal-section .tcm-card {
  background: #ffffff;
  border: 1px solid #eadecc; /* 古典淡黄竹木色边框 */
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(162, 147, 126, 0.05);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.refined-seasonal-section .tcm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(138, 122, 105, 0.12);
  border-color: #cbbba3;
}

/* 统一内部边衬 */
.refined-seasonal-section .card-content {
  padding: 5px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* --- 核心：国风标签式头部标题（替代粗体h3） --- */
.refined-seasonal-section .badge-title {
  font-family: "Noto Serif SC", "SimSun", serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a2225;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.refined-seasonal-section .badge-title span {
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 2px;
}

/* 为三种类型定制传统色彩 */
.refined-seasonal-section .meridian .badge-title span { background: #fdf0ed; color: #843322; border: 1px solid #f5cfc7; } /* 经络：朱砂 */
.refined-seasonal-section .herbs .badge-title span { background: #f4f7f6; color: #386641; border: 1px solid #d8e2dc; }    /* 药物：草青 */
.refined-seasonal-section .formula .badge-title span { background: #fbf7ed; color: #b08237; border: 1px solid #f2e3c9; }  /* 方剂：琥珀 */


/* ==========================================================================
   卡片一细节：时令经络（图文并排横向）
   ========================================================================== */
.refined-seasonal-section .tcm-card.meridian {
  flex-direction: row; /* 横向排版 */
}

.refined-seasonal-section .meridian-visual {
  width: 50%;
  background-color: #f7f5f0;
  border-right: 1px solid #ede9df;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 经络图做水墨半透明融合 */
.refined-seasonal-section .meridian-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply; /* 让白底图完美融入网页宣纸色背景 */
  opacity: 0.9;
  transition: transform 0.5s ease;
}

.refined-seasonal-section .tcm-card.meridian:hover .meridian-visual img {
  transform: scale(1.04);
}

.refined-seasonal-section .meridian .card-content {
  width: 50%;
  padding-left:10px;
}

.refined-seasonal-section .seasonal-reason {
  font-size: 0.88rem;
  color: #6e777a;
  line-height: 1.6;
  margin: 0 0 20px 0;
  background: #faf8f4;
  padding: 10px 12px;
  border-left: 2px solid #dcd5c5;
}


/* ==========================================================================
   卡片二细节：时令药物（草本上图下图）
   ========================================================================== */
.refined-seasonal-section .herb-img-wrap {
  width: 100%;
  height: 160px;
  background-color: #f4f7f6;
  border-bottom: 1px solid #ede9df;
  overflow: hidden;
}

.refined-seasonal-section .herb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 性味归经胶囊标签组 */
.refined-seasonal-section .herb-properties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.refined-seasonal-section .prop-tag {
  font-size: 0.8rem;
  padding: 3px 8px;
  background: #faf8f5;
  color: #655947;
  border: 1px solid #e6e2da;
}
.refined-seasonal-section .prop-tag.channel {
  background: #f4f7f6;
  color: #386641;
  border-color: #d8e2dc;
}


/* ==========================================================================
   卡片三细节：时令方剂（纯文本水墨风骨）
   ========================================================================== */
.refined-seasonal-section .tcm-card.formula {
  background-image: linear-gradient(to bottom, #ffffff, #fdfdfb);
}

.refined-seasonal-section .formula-source {
  font-size: 0.82rem;
  color: #8a9194;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refined-seasonal-section .formula-source span {
  font-size: 0.72rem;
  color: #b08237;
  border: 1px solid #bc8a23;
  padding: 0px 4px;
  scale: 0.9;
}

/* 巨幅背景字印章 */
.refined-seasonal-section .formula-seal-bg {
  position: absolute;
  right: -5px;
  bottom: -15px;
  font-family: "KaiTi", serif;
  font-size: 8rem;
  font-weight: bold;
  color: #b08237;
  opacity: 0.03;
  user-select: none;
  z-index: 1;
}


/* ==========================================================================
   通用内部条目排版：古籍注疏式结构（Label 与 Value 彻底分离）
   ========================================================================== */
.refined-seasonal-section .info-meta-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.refined-seasonal-section .meta-item {
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

.refined-seasonal-section .meta-item-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.9rem;
  margin: 0 0 15px 0;
  line-height: 1.6;
}

.refined-seasonal-section .meta-item-block-full {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.6;
  border-top: 1px dashed #ede9df;
  padding-top: 12px;
}

/* 古典注释签 */
.refined-seasonal-section .label {
  font-size: 0.78rem;
  color: #8c8172;
  background: #f4f1ea;
  padding: 1px 6px;
  margin-right: 12px;
  border-radius: 1px;
  flex-shrink: 0;
  display: inline-block;
}

.refined-seasonal-section .meta-item-block .label,
.refined-seasonal-section .meta-item-block-full .label {
  align-self: flex-start;
  margin-bottom: 2px;
}

.refined-seasonal-section .value {
  color: #2c363a;
}

.refined-seasonal-section .highlight-text {
  font-size: 1.1rem;
  color: #843322; /* 穴位突出显示 */
  font-family: "Noto Serif SC", serif;
}

.refined-seasonal-section .formula-grid-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


/* ==========================================================================
   响应式断点（无缝流式降级）
   ========================================================================== */
@media (max-width: 1100px) {
  .refined-seasonal-section .main {
    /* 屏幕缩小时切换为：上方满宽经络，下方两格平分草药方剂 */
    grid-template-columns: repeat(2, 1fr);
  }
  .refined-seasonal-section .tcm-card.meridian {
    grid-column: 1 / 3;
  }
}

@media (max-width: 768px) {
  .refined-quad-style { padding: 50px 15px; }
  .refined-seasonal-section .main {
    grid-template-columns: 1fr; /* 手机端完全变为一列叠放 */
  }
  .refined-seasonal-section .tcm-card.meridian {
    grid-column: auto;
    flex-direction: column; /* 经络卡片手机端变上下结构 */
  }
  .refined-seasonal-section .meridian-visual {
    width: 100%;
    height: 180px;
  }
  .refined-seasonal-section .meridian .card-content {
    width: 100%;
  }
}

/* ==========================================
   首页专用：第二屏（馆藏）与第三屏（沙龙）样式 
   ========================================= */

/* --- 统一大屏头部样式 --- */
.home-screen {
    padding: 80px 0; /* 留出充足的上下大屏呼吸感 */
    position: relative;
}

.home-screen .screen-header {
    text-align: center;
    margin-bottom: 50px;
}

.home-screen .screen-title {
    font-size: 28px;
    color: var(--text-main); /* #333333 */
    font-weight: 600;
    margin: 0 0 12px 0;
    letter-spacing: 1.5px;
    position: relative;
    display: inline-block;
}

/* 在大屏标题下方加一个极淡的复古中式双横线装饰 */
.home-screen .screen-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 25%;
    width: 50%;
    height: 3px;
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    opacity: 0.4;
}

.home-screen .screen-subtitle {
    font-size: 14px;
    color: var(--text-dary); /* #666666 */
    margin: 0;
}


/* ==========================================================================
   岐黄案头与个人藏书阁（修正版：左推荐、右个人空间与动态近期阅读）
   ========================================================================== */

.qihuang-desktop-module {
  padding: 90px 20px 60px 20px;
}

.qihuang-desktop-module .desktop-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 模块头部 --- */
.qihuang-desktop-module .desktop-header {
  text-align: center;
  margin-bottom: 50px;
}

.qihuang-desktop-module .header-mark {
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: #ae8f74;
  font-weight: bold;
  margin-bottom: 10px;
}

.qihuang-desktop-module .module-title {
  font-family: "Noto Serif SC", "KaiTi", serif;
  font-size: 2.2rem;
  color: #222c32;
  margin: 0 0 12px 0;
  letter-spacing: 3px;
}

.qihuang-desktop-module .module-subtitle {
  font-size: 0.95rem;
  color: #788286;
}

/* --- 主体大布局（左推荐列表，右用户边栏） --- */
.qihuang-desktop-module .desktop-main-layout {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr; /* 左右分栏 */
  gap: 20px;
  align-items: stretch;
}

/* --- 【左侧】书卷案头架（推荐书目） --- */
.qihuang-desktop-module .desk-books-shelf {
  display: flex;
  flex-direction: column;
}

.qihuang-desktop-module .shelf-inner-title {
  font-family: "Noto Serif SC", serif;
  font-size: 1.05rem;
  color: #655947;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3dec3;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.qihuang-desktop-module .books-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- 单本书籍卡片设计 --- */
.qihuang-desktop-module .study-book-card {
  background: #ffffff;
  border: 1px solid #e1dacb;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(141, 131, 115, 0.04);
}

.qihuang-desktop-module .book-spine-indicator {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.qihuang-desktop-module .stroke-cyan { background-color: #31576b; }    /* 经典黛蓝 */
.qihuang-desktop-module .stroke-amber { background-color: #b08237; }   /* 经方沉香 */
.qihuang-desktop-module .stroke-green { background-color: #386641; }   /* 本草药青 */

.qihuang-desktop-module .book-card-main {
  padding: 22px 30px 22px 35px;
  flex-grow: 1;
}

.qihuang-desktop-module .book-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.qihuang-desktop-module .status-badge {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 2px;
}
.qihuang-desktop-module .badge-recommend { background: #f4f7f6; color: #436154; border: 1px solid #d8e2dc; }

.qihuang-desktop-module .recommend-reason { 
  font-size: 0.8rem;
  color: #b08237; 
  font-weight: 500; 
}

.qihuang-desktop-module .book-title {
  font-family: "Noto Serif SC", "SimSun", serif;
  font-size: 1.3rem;
  color: #1a2327;
  margin: 0 0 6px 0;
  font-weight: 600;
}

.qihuang-desktop-module .book-progress-text {
  font-size: 0.9rem;
  color: #52595c;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.qihuang-desktop-module .book-intro-snippet {
  font-size: 0.85rem;
  color: #828a8e;
  margin: 4px 0 0 0;
  line-height: 1.6;
  border-top: 1px dashed #ede9df;
  padding-top: 6px;
}

.qihuang-desktop-module .book-enter-btn {
  height: 100%;
  padding: 0 35px;
  border-left: 1px dashed #ede9df;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #7e7361;
  font-family: "Noto Serif SC", serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.qihuang-desktop-module .book-enter-btn em {
  font-style: normal;
  transition: transform 0.3s ease;
  margin-top: 4px;
}

.qihuang-desktop-module .study-book-card:hover {
  transform: translateX(6px);
  border-color: #c7bca6;
  box-shadow: -5px 5px 20px rgba(141, 131, 115, 0.1);
}
.qihuang-desktop-module .study-book-card:hover .book-enter-btn {
  background: #fdfcf9;
  color: #a63a2b;
}
.qihuang-desktop-module .study-book-card:hover .book-enter-btn em {
  transform: translateX(4px);
}


/* --- 【右侧】用户个人空间空间（包含上下两块） --- */
.qihuang-desktop-module .desk-user-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 上下卡片组件间距 */
}

/* 右上：数字化藏书楼大门 */
.qihuang-desktop-module .desk-library-gate {
  background: #ffffff;
  border: 1px solid #e1dacb;
  position: relative;
  border-radius: 2px;
  box-shadow: 3px 4px 20px rgba(141, 131, 115, 0.03);
}

.qihuang-desktop-module .gate-wood-border {
  position: absolute;
  top: 10px; bottom: 10px; left: 10px; right: 10px;
  border: 1px solid #e6dfce;
  pointer-events: none;
}

.qihuang-desktop-module .gate-content {
  padding: 40px 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.qihuang-desktop-module .gate-seal {
  position: absolute;
  top: 30px; right: 110px;
  font-family: "Noto Serif SC", "KaiTi", serif;
  font-size: 0.85rem;
  color: #a63a2b;
  border: 1px solid #a63a2b;
  padding: 8px 3px;
  writing-mode: vertical-rl;
  line-height: 1.1;
  opacity: 0.5;
}

.qihuang-desktop-module .gate-info h3 {
  font-family: "Noto Serif SC", "SimSun", serif;
  font-size: 1.5rem;
  color: #222c32;
  margin: 0 0 15px 0;
}

.qihuang-desktop-module .shelf-stat {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 15px;
}

.qihuang-desktop-module .stat-item .num {
  font-family: "Georgia", serif;
  font-size: 1.9rem;
  font-weight: bold;
  color: #a63a2b;
  line-height: 1;
}

.qihuang-desktop-module .stat-item .lbl {
  font-size: 0.8rem;
  color: #788286;
  margin-left: 5px;
}

.qihuang-desktop-module .stat-line {
  width: 1px;
  height: 20px;
  background: #ede9df;
}

.qihuang-desktop-module .gate-desc {
  font-size: 0.88rem;
  color: #6e777a;
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}

.qihuang-desktop-module .gate-action-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #faf8f5;
  border: 1px solid #d5cbb6;
  padding: 20px 10px;
  color: #524737;
  transition: all 0.4s ease;
}

.qihuang-desktop-module .gate-action-link .text-vertical {
  writing-mode: vertical-rl;
  font-family: "Noto Serif SC", serif;
  font-size: 0.9rem;
  letter-spacing: 2px;
  font-weight: 600;
}

.qihuang-desktop-module .gate-action-link .gate-arrow {
  margin-top: 4px;
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.qihuang-desktop-module .desk-library-gate:hover .gate-action-link {
  background: #a63a2b;
  border-color: #a63a2b;
  color: #ffffff;
}


/* --- 右下：近期阅读区域（状态机容器） --- */
.qihuang-desktop-module .desk-recent-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 状态 A：有记录时的卡片样式 */
.qihuang-desktop-module .recent-reading-box {
  background: #ffffff;
  border: 1px solid #e1dacb;
  border-radius: 2px;
  padding: 25px 30px;
  flex-direction: column;
  position: relative;
  box-shadow: 2px 4px 15px rgba(141, 131, 115, 0.02);
  flex-grow: 1;
}

.qihuang-desktop-module .recent-panel-title {
  font-size: 0.82rem;
  color: #8c8172;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.qihuang-desktop-module .recent-book-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #843322; /* 研习朱砂红 */
}

.qihuang-desktop-module .recent-book-name {
  font-family: "Noto Serif SC", serif;
  font-size: 1.2rem;
  color: #1a2327;
  margin: 0 0 5px 0;
}

.qihuang-desktop-module .recent-chap-name {
  display:flex;
  justify-content: space-between;
  margin:6px 0px;
  align-self: flex-start;
  font-size: 0.88rem;
  color: #a63a2b;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease;
}
.qihuang-desktop-module .recent-chap-name:hover { color: var(--color-hover); }

.qihuang-desktop-module .recent-progress-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.qihuang-desktop-module .recent-progress-track {
  flex-grow: 1;
  height: 2px;
  background: #ede9df;
}

.qihuang-desktop-module .recent-progress-fill {
  height: 100%;
  background: #843322;
}

.qihuang-desktop-module .recent-progress-num {
  font-size: 0.8rem;
  color: #8a9194;
  font-family: 'Georgia', serif;
}


/* 状态 B：无数据时的空置“共勉窗” */
.qihuang-desktop-module .recent-empty-motto {
  background: #fdfcf9;
  border: 1px dashed #dcd5c5; /* 虚线代表虚位以待 */
  border-radius: 2px;
  padding: 30px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-grow: 1;
}

.qihuang-desktop-module .motto-seal {
  font-family: "Noto Serif SC", "KaiTi", serif;
  font-size: 1.1rem;
  color: #ae8f74;
  border: 1px solid #ae8f74;
  padding: 5px 6px;
  line-height: 1;
  border-radius: 50%; /* 圆形简章质感 */
  opacity: 0.7;
  flex-shrink: 0;
}

.qihuang-desktop-module .motto-content h4 {
  font-family: "Noto Serif SC", serif;
  font-size: 1.05rem;
  color: #655947;
  margin: 0 0 10px 0;
}

.qihuang-desktop-module .motto-text {
  font-family: "KaiTi", "楷体", serif;
  font-size: 0.95rem;
  color: #7e6955;
  line-height: 1.6;
  margin: 0 0 12px 0;
  padding-left: 10px;
  border-left: 2px solid #ede9df;
}

.qihuang-desktop-module .motto-tip {
  font-size: 0.82rem;
  color: #8c9396;
  line-height: 1.5;
  margin: 0;
}


/* ==========================================================================
   响应式流式布局断点
   ========================================================================== */
@media (max-width: 1024px) {
  .qihuang-desktop-module .desktop-main-layout {
    grid-template-columns: 1fr; /* 平板及手机端降级为单栏垂直 */
    gap: 35px;
  }
}

@media (max-width: 768px) {
  .qihuang-desktop-module { padding: 60px 15px; }
  .qihuang-desktop-module .module-title { font-size: 1.8rem; }
  .qihuang-desktop-module .book-card-main { padding: 20px 20px 20px 25px; }
  .qihuang-desktop-module .book-enter-btn { padding: 0 20px; }
}

/* ==========================================================================
   中医数字化馆藏 - 高级非对称错落视觉
   ========================================================================== */

.refined-quad-style *, 
.refined-quad-style *::before, 
.refined-quad-style *::after {
  box-sizing: border-box;
}

/* 宣纸温润底色与微弱的水墨纸张肌理 */
.refined-quad-style {
  padding: 20px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.refined-quad-style .main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 顶部分区头部设计 --- */
.refined-quad-style .screen-header {
  text-align: center;
  margin-bottom: 70px;
}

/* 小徽章 */
.refined-quad-style .header-emblem {
  font-family: "Noto Serif SC", "SimSun", serif;
  font-size: 0.85rem;
  color: #a63a2b; /* 朱砂红 */
  border: 1px solid #a63a2b;
  padding: 2px 10px;
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: 15px;
  border-radius: 2px;
}

.refined-quad-style .screen-title {
  font-family: "Noto Serif SC", "SimSun", serif;
  font-size: 2.6rem;
  color: #1a252c; /* 远山黛黑 */
  font-weight: 700;
  letter-spacing: 6px;
  margin: 0 0 15px 0;
}

.refined-quad-style .screen-subtitle {
  font-size: 1.05rem;
  color: #6e777a;
  letter-spacing: 1px;
}

/* --- 核心：非对称、错落网格布局 --- */
.refined-quad-style .library-quad-grid {
  display: grid;
  /* 4列非对称网格 */
  grid-template-columns: 1.1fr 0.9fr 0.9fr 1.1fr;
  gap: 20px;
  align-items: stretch;
}

/* 定义卡片的合并方式，打破呆板的2x2 */
.refined-quad-style .layout-tall:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3; /* 第1个卡片纵向拉长，占满两行 */
}
.refined-quad-style .layout-wide:nth-child(2) {
  grid-column: 2 / 5; /* 第2个卡片横向拉长 */
}
.refined-quad-style .layout-wide:nth-child(3) {
  grid-column: 2 / 4; /* 第3个卡片居中偏左 */
}
.refined-quad-style .layout-tall:nth-child(4) {
  grid-column: 4 / 5;
  /*grid-row: 2 / 4;  第4个卡片向后错落，整体向下掉一格 */
}

/* --- 卡片艺术设计（线装书扉页感） --- */
.refined-quad-style .lib-quad-card {
  text-decoration: none;
  display: block;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 内部真正的容器，留出外框间距 */
.refined-quad-style .card-inner {
  height: 100%;
  background: #ffffff;
  padding: 40px 35px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  /* 极其轻微的木质单边阴影 */
  border-left: 3px solid transparent; 
  box-shadow: 2px 5px 25px rgba(138, 122, 105, 0.06);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 中式古典框角点缀（打破封闭卡片感） */
.refined-quad-style .card-corner-border {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid #d2c7b5;
  opacity: 0.6;
  transition: all 0.4s ease;
}
.refined-quad-style .card-corner-border.top-left { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.refined-quad-style .card-corner-border.bottom-right { bottom: 15px; right: 15px; border-left: none; border-top: none; }

/* 各主题对应的传统国色左侧“书脊”与点缀 */
.refined-quad-style .card-books .card-inner { border-left-color: #843322; }         /* 朱砂红 */
.refined-quad-style .card-drugs .card-inner { border-left-color: #386641; }         /* 苍岭绿 */
.refined-quad-style .card-prescriptions .card-inner { border-left-color: #bc8a23; }  /* 沉香金 */
.refined-quad-style .card-meridians .card-inner { border-left-color: #2a6f97; }      /* 黛蓝色 */

/* --- 悬停动效：虚实结合，墨色晕染感 --- */
.refined-quad-style .lib-quad-card:hover {
  transform: translateY(-8px); /* 整体轻微浮起 */
}

.refined-quad-style .lib-quad-card:hover .card-inner {
  box-shadow: 10px 20px 45px rgba(100, 85, 70, 0.12);
  background: #fdfcf9;
}

/* 悬停时古籍框角向外侧外扩展开 */
.refined-quad-style .lib-quad-card:hover .card-corner-border {
  opacity: 1;
  border-color: inherit; /* 继承书脊的国色 */
  transform: scale(1.1);
}

/* --- 卡片文本元素 --- */
.refined-quad-style .card-meta {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: #a49e93;
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.refined-quad-style .card-header-row h3 {
  font-family: "Noto Serif SC", "SimSun", serif;
  font-size: 1.45rem;
  color: #1a252c;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.refined-quad-style .card-count {
  font-size: 0.85rem;
  color: #7a6e5d;
  display: inline-block;
  padding: 2px 0;
  border-bottom: 1px dashed #d2c7b5;
  margin-bottom: 20px;
}

.refined-quad-style .card-desc {
  font-size: 0.92rem;
  color: #555c60;
  line-height: 1.8;
  margin: 0 0 30px 0;
  flex-grow: 1;
  letter-spacing: 0.5px;
}

/* --- 背景书法巨字（水印章感觉） --- */
.refined-quad-style .card-seal-bg {
  position: absolute;
  right: 15px;
  bottom: 10px;
  font-family: "Noto Serif SC", "KaiTi", "楷体", serif;
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.025;
  user-select: none;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  color: #000000;
  z-index:-1;
}

/* 悬停时字像从水墨中凸显，并带有一点点宣纸上的晕染红色 */
.refined-quad-style .lib-quad-card:hover .card-seal-bg {
  opacity: 0.08;
  transform: scale(1.05) translateX(-5px);
}
.refined-quad-style .card-books:hover .card-seal-bg { color: #843322; }
.refined-quad-style .card-drugs:hover .card-seal-bg { color: #386641; }
.refined-quad-style .card-prescriptions:hover .card-seal-bg { color: #bc8a23; }
.refined-quad-style .card-meridians:hover .card-seal-bg { color: #2a6f97; }

/* --- 阁楼式标签群 --- */
.refined-quad-style .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.refined-quad-style .card-tags a {
  font-size: 0.8rem;
  padding: 3px 8px;
  background: #f7f5f0;
  color: #62594c;
  border-radius: 0; /* 纯方直角，更有古风碑刻感 */
  border: 1px solid #e6e2da;
  transition: all 0.3s ease;
}

.refined-quad-style .lib-quad-card:hover .card-tags span {
  background: #ffffff;
  border-color: #d2c7b5;
  box-shadow: 2px 2px 0px rgba(138, 122, 105, 0.15); /* 做出中式小木印的效果 */
}

/* ==========================================================================
   响应式流式布局（防止小屏幕错位）
   ========================================================================== */
@media (max-width: 1024px) {
  .refined-quad-style .library-quad-grid {
    grid-template-columns: repeat(2, 1fr); /* 降级为双列 */
  }
  .refined-quad-style .layout-tall,
  .refined-quad-style .layout-wide {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 768px) {
  .refined-quad-style {
    padding: 60px 15px;
  }
  .refined-quad-style .screen-title { font-size: 2rem; }
  .refined-quad-style .library-quad-grid {
    grid-template-columns: 1fr; /* 移动端完全单列平铺 */
    gap: 25px;
  }
  .refined-quad-style .card-inner {
    padding: 30px 25px;
  }
  .refined-quad-style .card-seal-bg { font-size: 7rem; }
}


/* ==========================================
   --- 第三屏：仿古竹简与朱砂批注沙龙 ---
   ========================================= */
.salon-screen.bamboo-style {
    
}

/* 左侧：竹简/书签交错式列表 */
.article-bamboo-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent !important; /* 打破白色大方块背景 */
    border: none !important;
    padding: 0 !important;
}

/* 单条竹简书签 */
.bamboo-item {
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary); /* 左侧草本绿厚边，模拟竹简侧面 */
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 0 6px 6px 0;
    transition: all 0.3s ease;
}

.bamboo-item:hover {
    transform: translateX(8px); /* 悬停时不是往上浮，而是往右优雅滑动 */
    background-color: #FFFFFF;
    box-shadow: 4px 8px 20px rgba(0,0,0,0.02);
    border-left-color: var(--color-accent); /* 悬停变朱砂红 */
}

/* 竹简分类药签标签 */
.bamboo-tag {
    font-size: 12px;
    color: var(--color-primary);
    background: var(--color-light);
    border: 1px solid rgba(26, 124, 40, 0.15);
    padding: 4px 2px;
    writing-mode: vertical-lr; /* 极其惊艳的文字竖排特效！ */
    letter-spacing: 2px;
    font-weight: 600;
    border-radius: 2px;
}
.bamboo-item:hover .bamboo-tag {
    color: #FFFFFF;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.bamboo-main h4 { margin: 0 0 6px 0; font-size: 16px; }
.bamboo-main h4 a { color: var(--text-main); text-decoration: none; }
.bamboo-main h4 a:hover { color: var(--color-primary); }
.bamboo-meta { margin: 0; font-size: 12px; color: var(--text-muted); }

/* 右侧：朱砂批注医案卡片 */
.comment-style-card {
    background-image: linear-gradient(to bottom, #fdfaf2 0%, #fcf8ee 100%);
    position: relative;
}
/* 给卡片顶部加一个中式传统“回纹”或“祥云”挂钩的视觉暗示 */
.comment-style-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background-color: var(--color-primary);
}

.case-source {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: bold;
}

.case-core-text {
    font-size: 13.5px;
    color: var(--text-main);
    line-height: 1.6;
    background: rgba(232, 228, 220, 0.2);
    padding: 12px;
    border-radius: 4px;
    margin: 0 0 16px 0;
}

/* 【绝杀细节】：朱砂红古代眉批/旁批文字样式 */
.case-annotation {
    font-size: 13px;
    color: var(--color-accent) !important; /* 纯正朱砂红 */
    line-height: 1.6;
    border-left: 2px dashed var(--color-accent);
    padding-left: 10px;
    font-family: "Kaiti", "楷体", serif;
}


/* ==========================================
   📱 移动端破格自适应
   ========================================= */
@media (max-width: 992px) {
    .library-staggered-flow {
        flex-direction: column;
        gap: 20px;
    }
    .library-screen .card-wide {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .bamboo-item {
        padding: 15px;
    }
    .bamboo-tag {
        writing-mode: horizontal-tb; /* 手机端竖字阅读困难，切回横排 */
        padding: 2px 6px;
    }
}


/*---水印---*/
.watermark {
    position: fixed;
    top: 10%;
    right: 10%;
    font-size: 15rem;
    opacity: 0.03;
    writing-mode: vertical-rl;
    pointer-events: none;
    z-index: -1;
}

/* 通用中式极简分页容器 */
.pagination{
    position: relative;
    display: flex;
    justify-content: center;
}
.pagination ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 60px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", serif;
}
.pagination ul li{
    margin:0px 5px;
}
.pagination ul li:hover{
    color: #8b1a1a;
}
.pagination ul li a,
.pagination ul li span{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: transparent;
    width: 40px;
    height: 40px;
    color: #666;
    font-size: 15px;
    border-radius: 50%;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.pagination ul li.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.3;
}
.pagination ul li.disabled span,
.pagination ul li.disabled a {
    color: #ccc;
    border: 1px solid transparent; 
    background: transparent;
    transform: none !important;
}
.pagination ul li.disabled:hover {
    transform: none;
    color: #ccc;
}
.pagination ul li a:hover {
    background: rgba(181, 144, 93, 0.1);
    color: #b5905d;
}
.pagination ul li.active span {
    background: #333; /* 墨黑色 */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transform: scale(1.05);
}
/* 修饰符：省略号 */
.pagination ul li.dots {
    cursor: default;
    color: #ccc;
}
/* 响应式：小屏幕自动调整 */
@media (max-width: 480px) {
    .pagination ul li a,
    .pagination ul li span { width: 32px; height: 32px; }
}

/*---阅读器---*/
.reader{
    display: flex;
    width: 100vw;
    position: relative;
    z-index: 2;
}
.reader+.site-footer{
	display:none;
}
.reader aside{
    position:fixed;
	height:100vh;
	width: 280px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-blur: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-left: calc(-1 * 280px);
	z-index:2;
}
.reader.show-menu aside { margin-left: 0; }
.reader-header {
    padding: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 2px solid #8C2C21;
    color: #8C2C21;
}
.reader-menu {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}
.reader-menu .menu-item {
    display:block;
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-left: 3px solid transparent;
}
.menu-item:hover { 
    background: rgba(140, 44, 33, 0.05); 
    border-left-color: #8C2C21; 
}
.reader-content {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 0;
}
.reader-card {
    margin: 0px auto 30px auto;
	padding: 30px 50px;
    max-width: 1024px;
    width: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    position: relative;
    min-height: 100vh;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
	font-family: "LXGW WenKai Screen",'Noto Serif SC', "Songti SC", sans-serif, "SimSun";
}
.reader-card .pager-btns{
	margin-top: 100px;
	display:flex;
	justify-content:space-between;
}
.reader-card .pager-btns a{
	display:block;
	padding: 10px 25px;
    font-size: 14px;
	color: #5d646e9c;
	border-radius: 100px;
    border: 1px solid hsl(0deg 7.23% 80.48% / 48%);
}
.reader-card .pager-btns a:hover{
	color: #5d646e;
	border: 1px solid hsl(0deg 7.23% 80.48% / 100%);
}
.reader-card .pager-btns a.layui-disabled{
	color: #5d646e9c!important;
}
.theme-dark .reader-card .pager-btns a{
	border: 1px solid hsla(0, 0%, 100%, .1);
}
.article-header {
    border-bottom: 1px solid #DDD;
    margin-bottom: 40px;
    padding-bottom: 20px;
    text-align: center;
}
.article-header h1{
    color:#8B1A1A;
}
.article-header p {
    color: #888;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 15px;
}
.content-body p {
    font-size: 1.33em;
    line-height: 2em;
    margin-bottom: 30px;
    text-indent: 2em;
    text-align: justify;
}
/* --- 浮动控制工具栏 --- */
.reader.show-menu .control-dock{
    display:none;
}
.control-dock {
    position: fixed; 
    bottom: 40px; 
    left: 40px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px;
    z-index:1;
}
.dock-item {
    width: 40px; height: 40px; background: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer;
    transition: 0.3s; border: none; font-size: 1.2rem;
    opacity:0.3;
}
.dock-item:hover { 
    transform: scale(1.1); 
    background: #9B2C21; 
    color: white; 
    opacity:1;
}
/* --- 主题方案 --- */
.reader.theme-dark{
    background-color: #1A1C20;
    color: #B0B3B8;
}
.reader.theme-dark .reader-card { 
    background: #252930; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}
.reader.theme-grad{
    background-color: #EAE3D2;
    color: #3E3A35;
}
.reader.theme-grad .reader-card { 
    background: #f5f1e6; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}
.reader.theme-accent{
    background-color: #CCE8CF;
    color: #1a2b1ab8;
}
.reader.theme-accent .reader-card { 
    background: #E8F3E8; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}
/*--end--*/


/* ==================== 两列满屏沙盘全局布局 ==================== */
.tcm-meridian-layout {
    margin-top: 76px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    height: calc(100vh - 76px); /* 锁死一整屏高度 */
    overflow: hidden;
    background-color: var(--color-bg); /* 全局米汤色/宣纸底色 */
    box-sizing: border-box;
}

/* ==================== 左侧：全景画布区 ==================== */
.media-section {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    height: 100%;
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.media-section:active { cursor: grabbing; }

.canvas-control-bar {
    position: absolute;
    top: 15px; left: 20px; right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    pointer-events: none;
}
.canvas-title {
    font-family: "Noto Serif SC", serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(253, 250, 242, 0.93);
    padding: 6px 12px;
    border-left: 3px solid var(--color-primary);
}
.canvas-btns { pointer-events: auto; }
.tcm-mini-btn {
    background-color: var(--color-light); color: var(--color-primary);
    border: 1px solid var(--color-primary); padding: 4px 12px;
    font-size: 12px; cursor: pointer; border-radius: 2px;
}
.tcm-mini-btn:hover { background-color: var(--color-primary); color: var(--text-white); }

.media-wrapper {
    display: flex; 
    align-items: center; 
    justify-content: center;
    /* 核心修复：必须改为中心点缩放，否则 JS 计算出的居中坐标会被左上角基准点拉飞 */
    transform-origin: center center; 
    will-change: transform; 
    user-select: none;
}
.media-wrapper img {
    display: block; max-width: 100%; max-height: 100%;
    object-fit: contain; /* 锁死长宽不一GIF的完美自适应居中 */
    pointer-events: none;
    filter: drop-shadow(0 10px 25px rgba(40,35,25,0.08));
}
/* 核心修复：锁死画布内图片的表现，不允许系统/第三方框架的 max-width 干扰 JS 计算 */
.media-wrapper img.meridian-img {
    display: block !important;
    max-width: none !important;  
    max-height: none !important; 
    min-width: 0 !important;   /* 关键：防止隐式宽度（如 min-width: 100%）锁死宽度 */
    min-height: 0 !important;
    object-fit: fill !important; 
    pointer-events: none;
}
.zoom-tip {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(40, 35, 25, 0.75); padding: 6px 16px;
    font-size: 11px; color: var(--text-white); pointer-events: none; z-index: 2;
}

/* ==================== 右侧：内容区与头部高度减负 ==================== */
.content-section {
    height: 100%;
    display: flex;
    flex-direction: column; /* 纵向：搜索 -> 视窗滑槽 */
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}
.search-panel-box-mini {
    padding: 16px 24px 10px 24px;
    background: #fdfcf7;
    border-bottom: 1px solid var(--color-border);
}
.smart-search-mini {
    display: flex; align-items: center; background: #ffffff;
    border: 1px solid var(--color-border);
    border-bottom: 2px solid var(--color-primary); /* 国风墨线衬底 */
    border-radius: 2px; padding: 2px 2px 2px 12px;
    transition: all 0.25s ease;
}
.smart-search-mini:focus-within {
    border-color: var(--color-accent); border-bottom-color: var(--color-accent);
}
.smart-search-mini .search-icon { font-size: 13px; color: var(--text-muted); margin-right: 8px; }
.smart-search-mini input { flex: 1; border: none; padding: 8px 0; font-size: 14px; outline: none; background: transparent; }
.smart-search-mini button {
    background: var(--color-primary); color: var(--text-white);
    border: none; padding: 8px 20px; font-size: 13px;
    font-weight: 600; cursor: pointer; border-radius: 1px;
}
.smart-search-mini button:hover { background: var(--color-accent); }

/* 搜索框正下方横向展开式医案带 */
.tcm-articles-ribbon-bar {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fdf5e6; /* 淡淡的古籍黄 */
    border-left: 3px solid var(--color-accent); /* 朱砂红醒目衬线 */
    display: flex;
    align-items: center;
    gap: 8px;
}
.ribbon-title { font-size: 12px; font-weight: 600; color: var(--color-accent); white-space: nowrap; }
.ribbon-tags-flex { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

/* 医案扁平小标签 */
.article-link-item {
    display: inline-flex; align-items: center; background: #ffffff;
    border: 1px solid var(--color-border); padding: 2px 10px; font-size: 12px;
    color: var(--text-main) !important; text-decoration: none !important; border-radius: 2px;
    max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s;
}
.article-link-item:hover {
    border-color: var(--color-accent); background-color: var(--color-light);
    color: var(--color-accent) !important; transform: translateY(-1px);
}
.article-link-item::before { content: "• "; color: var(--color-accent); font-weight: bold; margin-right: 4px; }
.result-stats-mini {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--text-muted); margin-top: 8px; min-height: 18px;
}
.result-stats-mini b { color: var(--color-accent); }
.result-stats-mini .btn-back-link {
    background: none; border: none; color: var(--color-accent);
    cursor: pointer; font-weight: 600; text-decoration: none;
}

/* 中间主要滑槽视窗：$100\%$ 吃满剩下的右侧高度 */
.view-slider-container { flex: 1; overflow-y: auto; position: relative; }
.meridian-body { padding: 24px; }
.group-title {
    font-family: "Noto Serif SC", serif; font-size: 15px; color: var(--text-main);
    margin-bottom: 16px; border-bottom: 1px solid var(--color-border); padding-bottom: 6px;
}

/* ==================== 【视图层一】主经络拼格 ==================== */
.meridian-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.meridian-card {
    position: relative; background: #ffffff; padding: 16px;
    border: 1px solid var(--color-border); display: flex; flex-direction: column; transition: all 0.25s ease; cursor: pointer;
	overflow:hidden;
}
.meridian-card:hover, .meridian-card.active-track {
    border-color: var(--color-primary); transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 124, 40, 0.06);
}
.ribbon {
    position: absolute; top: -6px; right: -32px; width: 80px; transform: rotate(45deg);
    color: #fff; padding: 14px 0 2px 0; font-size: 10px; text-align: center;
}
.yang-card { border-top: 3px solid var(--color-accent); }
.yang-card .ribbon { background-color: var(--color-accent); }
.yin-card { border-top: 3px solid var(--color-primary); }
.yin-card .ribbon { background-color: var(--color-primary); }
.meridian-card h3 { font-size: 15px; color: var(--text-main); margin: 0 0 8px 0; }
.meridian-card p {
    font-size: 12px; color: var(--text-dary); line-height: 1.5; margin: 0 0 14px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==================== 【视图层二】专属穴位百子柜 ==================== */
.detail-panel-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--color-primary); }
.btn-panel-back { background: var(--color-light); color: var(--color-primary); border: 1px solid var(--color-primary); padding: 4px 10px; font-size: 12px; cursor: pointer; }
.detail-track-title { font-family: "Noto Serif SC", serif; font-size: 17px; color: var(--text-main); margin: 0; }
.points-cabinet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 10px; }
.point-drawer-item { background: #ffffff; border: 1px solid var(--color-border); padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s ease; }
.point-drawer-item:hover { border-color: var(--color-accent); background-color: var(--color-paper); }
.point-drawer-item::after { content: ''; display: block; width: 5px; height: 5px; background: var(--text-muted); border-radius: 50%; margin: 6px auto 0; opacity: 0.3; }
.point-drawer-item .p-name { font-size: 1.1em; font-weight: 600; color: var(--text-main); }
.point-drawer-item .p-name cite { display:none;padding-left:10px;color:#666;font-style:normal;font-size:0.8em; }
.point-drawer-item.active-drawer { grid-column: 1 / -1; text-align: left; padding: 16px; border-color: var(--color-primary); background: var(--color-light); }
.point-drawer-item.active-drawer::after { display: none; }
.point-drawer-item.active-drawer .p-name cite { display:inline-block; }
.point-drawer-detail { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-primary); font-size: 13px; color: var(--text-dary); line-height: 1.6; display: none; }
.point-drawer-detail strong { color: var(--color-accent); }

/* ==================== 【视图层三】全局搜索结果样式 ==================== */
.search-result-header { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--color-accent); }
.search-points-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.search-point-card { background: #ffffff; border: 1px solid var(--color-border); padding: 20px 16px 16px 16px; position: relative; display: flex; flex-direction: column; transition: all 0.25s ease; }
.search-point-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40, 35, 25, 0.05); }
.point-badge-tag { position: absolute; top: -10px; left: 14px; font-size: 10px; padding: 1px 6px; border-radius: 2px; font-weight: 600; }
.yang-point { border-top: 2px solid var(--color-accent); }
.yang-point .point-badge-tag { background: var(--color-light); color: var(--color-accent); border: 1px solid var(--color-accent); }
.yin-point { border-top: 2px solid var(--color-primary); }
.yin-point .point-badge-tag { background: var(--color-light); color: var(--color-primary); border: 1px solid var(--color-primary); }
.point-card-body h3 { font-family: "Noto Serif SC", serif; font-size: 17px; margin: 6px 0; }
.point-card-body h3 cite { padding-left:10px;color:#666;font-style:normal;font-size:0.8em; }
.point-card-body p { font-size: 12px; line-height: 1.6; color: var(--text-dary); margin: 0 0 6px 0; }
.point-card-footer { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--color-border); text-align: right; }
.point-card-footer .btn-track-go { display: inline-block; background: transparent; color: var(--color-primary); font-size: 12px; text-decoration: none; }



/*自测*/
.app-container { 
	margin: 80px auto;
	padding:0px;
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 10px 40px rgba(0,0,0,0.15);
	position: relative;
	overflow: hidden; 
}
.app-container>div{
	padding: 40px;
}

/* 步进器 */
.steps-container { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; }
.steps-container::before { content: ""; position: absolute; top: 15px; left: 5%; right: 5%; height: 2px; background: #eee; z-index: 1; }
.step-item { position: relative; z-index: 2; text-align: center; flex: 1; }
.step-num { width: 30px; height: 30px; background: #eee; color: #999; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; font-weight: bold; }
.step-item.active .step-num { background: var(--color-primary);color:#fff; }
.step-text { color: #999; }
.step-item.active .step-text{ color:var(--color-primary); }
/* 答题区 */
.app-container h3{ margin:20px auto;font-size:1.3rem;text-align:center;color:var(--ink); }
.app-container .q-row { margin-bottom:10px; padding: 20px 10px; border-bottom: 1px dashed #eee; transition: all 0.3s; scroll-margin-top: 100px; }
.app-container .q-row.error-unanswered { border: 2px solid var(--accent); border-radius: 8px; background-color: rgba(192, 57, 43, 0.05); animation: pulse 1.5s infinite; }
@keyframes pulse-error { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.q-text { font-size: 1.2rem; font-weight: 600; margin-bottom: 15px; display: block; }
.options-group { display: flex; justify-content: space-between;max-width:600px; }
.opt-label { flex: 1; padding:6px 20px; cursor: pointer;display:flex;
    flex-direction: column;
    align-items: center;}
.opt-label input { display: block; margin-bottom: 8px; accent-color: var(--dark); width: 18px; height: 18px; }
.opt-name { }
/* 按钮 */
.app-container .nav-btns { margin-top: 40px; display: flex; justify-content: space-between; gap: 20px; }
.app-container button { flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: 0.3s; }
.app-container .btn-next { background: var(--gold); color: white; }
.app-container .btn-prev { background: #e0d9cc; color: #5d2e0c; }
.app-container .btn-download { background: #27ae60; color: white; margin-top: 15px; }

/* 模拟报告纸张 */
.report-wrapper {
	padding:40px;
}
/* 装饰背景 - 古典边纹 */
.report-wrapper::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; height: 8px;
	background: repeating-linear-gradient(45deg, #a67c52, #a67c52 10px, #2c3e50 10px, #2c3e50 20px);
}

/* 顶部元数据 */
.report-meta {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #888;
	border-bottom: 1px solid var(--bg-color);
	padding-bottom: 10px;
	margin-bottom: 30px;
}

/* 标题区域与印章 */
.header-section {
	text-align: center;
	position: relative;
	margin-bottom: 40px;
}

.header-section h1 {
	font-size: 32px;
	letter-spacing: 10px;
	margin: 0;
	color: var(--primary);
}

.header-section .sub-title {
	color: var(--accent);
	font-size: 16px;
	margin-top: 10px;
	letter-spacing: 2px;
}

.official-seal {
	position: absolute;
	right: 0;
	top: -10px;
	width: 90px;
	height: 90px;
	border: 3px solid rgba(192, 57, 43, 0.4);
	color: rgba(192, 57, 43, 0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-15deg);
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	pointer-events: none;
}
/* 板块标题 */
.section-head {
	display: flex;
	align-items: center;
	margin: 40px 0 20px;
}
.section-head b {
	background: var(--primary);
	color: #fff;
	padding: 4px 15px;
	font-size: 14px;
	letter-spacing: 1px;
}
.section-head .line {
	flex: 1;
	height: 1px;
	background: var(--border);
	margin-left: 10px;
}
.report-title-section h1{
	text-align: center;
}
.report-title-section p{
	padding:10px;
	font-size:12px; 
	color:#999;
	text-align:center;
	border-bottom: 3px double var(--bg-color);
}

/* 核心：左右双栏仪表盘 */
.report-wrapper .dashboard {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--bg-color);
	margin: 20px 0;
	min-height: 320px;
}
.report-wrapper .db-left { padding: 10px; display: flex; align-items: center; justify-content: center; }
.report-wrapper .db-right { 
	margin-left:-6px;
	padding: 25px; 
	border-left: 1px dashed var(--bg-color); 
	display: flex; flex-direction: column; justify-content: center; 
}

/* 数据标签 */
.score-box { background: #c5a05915; border-left: 4px solid #c5a059; padding: 10px 15px; margin-bottom: 20px; }
.score-label { font-size: 12px; color: #666; display: block; }
.score-num { font-size: 2.5em; font-weight: bold; color: rgb(var(--gold)); }

/* 雷达图 */
#chart-container {
	width: 100%;
	height: 380px;
	margin: 0 auto;
}

/* 调养方案表格 */
.diet-box {
    margin-bottom: 20px;
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 10px;
}
.diet-item {
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
}
.diet-box .detail-card{
	margin-bottom: 0px;
}

.detail-card {
    background: #fff;
    border-radius: 2px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(93, 64, 55, 0.05);
    border: 1px solid rgba(211, 196, 168, 0.3);
}
.detail-card b {
    display: block;
    color: var(--primary);
    font-size: 18px;
    margin-bottom: 12px;
    border-left: 4px solid var(--primary);
    padding-left: 10px;
    line-height: 1;
}

/* 文本分段处理 */
.text-block {
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}
/* 文本高亮标签 */
.highlight-key {
	color: #a67c52;
	font-weight: bold;
	display: block;
	margin-top: 10px;
}

/* 时间轴样式 */
.timeline {
	padding-left: 20px;
}

.timeline-item {
	border-left: 1px solid #a67c52;
	padding-left: 20px;
	padding-bottom: 20px;
	position: relative;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 1px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
	border: 1px solid #a67c52;
}
.time-tag {
	font-weight: bold;
	color: #a67c52;
	font-size: 14px;
}

/* 底部免责声明 */
.footer-note {
	margin-top: 50px;
	font-size: 12px;
	color: #999;
	text-align: justify;
	border-top: 1px solid #eee;
	padding-top: 20px;
}

/* 操作按钮 */
.btn-box {
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ==========================================
   中医资料网站专属：深色沉墨防混淆页脚
   ========================================= */
.site-footer {
    /* 【核心改动 1】：抛弃浅色，改用极深沉的墨黑/古木色背景，与主内容区形成强烈的明暗断层 */
    background-color: #1e2521 !important; /* 带有极微弱绿意的高级深草木墨黑 */
    
    /* 【核心改动 2】：顶部加上多重仿古边框和阴影，彻底切断与上方的视觉粘连 */
    border-top: 3px double var(--color-primary); /* 双线草本绿边框，极具中式严谨感 */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05); /* 淡淡的向上阴影，让主内容区“压”在页脚上方 */
    
    /* 【核心改动 3】：巨大的外边距！强制将页脚向下推，留出绝对的空气隔离带 */
    margin-top: 80px !important; 
    
    padding: 50px 20px 30px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* 布局容器 */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-between;
}

.footer-section {
    flex: 1;
    min-width: 320px;
}

/* 标题样式：反白高亮 */
.footer-title {
    color: #FFFFFF !important; /* 深色背景下，标题文字强制纯白 */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 22px;
    position: relative;
    padding-left: 14px;
    letter-spacing: 1px;
}
/* 标题左侧的草本绿小竖线 */
.footer-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 4px;
    background-color: var(--color-primary); /* #1a7c28 */
    border-radius: 2px;
}

/* 左侧：共勉文案 */
.footer-motto {
    color: #82c98e !important; /* 降低绿色的饱和度，在深色背景下更优雅、不刺眼 */
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
    font-weight: 500;
}

.footer-desc {
    color: #cbd5e1 !important; /* 正文改成浅丝绸灰，极易阅读 */
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.85;
}

/* 右侧：防纠纷免责声明列表 */
.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notice-list li {
    color: #cbd5e1 !important; /* 浅丝绸灰 */
    font-size: 13.5px;
    line-height: 1.8;
    margin-bottom: 14px;
    opacity: 0.85;
}

/* 警示加粗文字：使用明亮的朱砂红 */
.notice-list li strong {
    color: #ff6b6b !important; /* 针对暗底微调的亮朱砂红，警示效果极强 */
    font-weight: 600;
}

/* 提示标签 */
.badge-accent {
    background-color: rgba(26, 124, 40, 0.2) !important; /* 暗色半透明绿 */
    color: #a7f3d0 !important; /* 嫩绿字 */
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 8px;
    border: 1px solid rgba(167, 243, 208, 0.3);
    display: inline-block;
}

/* 第二个警告标签：红底红字 */
.notice-list li:nth-child(2) .badge-accent {
    background-color: rgba(239, 62, 67, 0.15) !important; /* 暗色半透明红 */
    color: #fca5a5 !important; /* 粉红字 */
    border: 1px solid rgba(252, 165, 165, 0.3);
}

/* 底部暗色分隔线 */
.footer-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* 极淡的白色透明线 */
    max-width: 1200px;
    margin: 40px auto 25px auto;
}

/* 底部版权与备案区 */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #94a3b8 !important; /* 哑光灰 */
    gap: 10px;
}

.footer-bottom a {
    color: #94a3b8 !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-bottom a:hover {
    color: #ff6b6b !important; /* 悬停亮朱砂红 */
}

.footer-bottom .divider {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.08);
}

/* 特殊强调声明 */
.cms-tips {
    color: #fca5a5 !important; /* 柔和红，确保合规性一眼可见 */
    font-weight: 500;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .site-footer {
        margin-top: 50px !important;
        padding: 40px 20px 20px 20px;
    }
    .footer-container, .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .footer-bottom {
        gap: 15px;
    }
}