/* 主内容区 */
.hc-main {
	padding: 30px;
}

/* 英雄区域 */
.hero-section {
	background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
	padding: 80px 30px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle at 20% 80%, rgba(195, 39, 43, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(42, 110, 187, 0.05) 0%, transparent 50%);
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
}

.hero-title {
	font-size: 48px;
	color: var(--text-primary);
	margin-bottom: 20px;
	font-weight: 700;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	text-shadow: 2px 2px 4px rgba(44, 36, 22, 0.1);
}

.hero-subtitle {
	font-size: 20px;
	color: var(--text-secondary);
	margin-bottom: 40px;
	line-height: 1.6;
}

.hero-search {
	display: flex;
	max-width: 600px;
	margin: 0 auto;
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-medium);
	box-shadow: var(--shadow-lg);
}

.hero-search input {
	border: none;
	background: none;
	padding: 18px 24px;
	flex: 1;
	outline: none;
	font-size: 16px;
	color: var(--text-primary);
}

.hero-search input::placeholder {
	color: var(--text-muted);
}

.hero-search-btn {
	border: none;
	background: var(--primary-red);
	color: white;
	padding: 0 40px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 600;
	font-size: 16px;
}

.hero-search-btn:hover {
	background: var(--red-dark);
}

/* 功能卡片区域 */
.features-section {
	padding: 80px 30px;
	background: var(--bg-page);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.feature-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 40px 30px;
	text-align: center;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-md);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--primary-red), var(--accent-blue));
}

.feature-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-lg);
}

.feature-icon {
	width: 80px;
	height: 80px;
	background: var(--primary-red);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 25px;
	font-size: 32px;
	transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
	transform: scale(1.1);
	background: var(--accent-blue);
}

.feature-title {
	font-size: 24px;
	color: var(--text-primary);
	margin-bottom: 15px;
	font-weight: 600;
}

.feature-description {
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 25px;
}

.feature-link {
	display: inline-block;
	padding: 10px 24px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-medium);
	transition: all 0.3s ease;
	font-weight: 500;
}

.feature-link:hover {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
}

/* 热门内容区域 */
.popular-section {
	padding: 80px 30px;
	background: var(--bg-card);
}

.tabs-container {
	margin-bottom: 40px;
}

.tabs-nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 30px;
}

.tab-btn {
	padding: 12px 28px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
}

.tab-btn.active {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
}

.tab-btn:hover:not(.active) {
	background: var(--bg-tertiary);
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.content-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px;
}

.content-card {
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: 25px;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
}

.content-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-red);
}

.content-title {
	font-size: 20px;
	color: var(--text-primary);
	margin-bottom: 10px;
	font-weight: 600;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.content-meta {
	font-size: 14px;
	color: var(--primary-red);
	margin-bottom: 15px;
	font-weight: 500;
}

.content-description {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
}

        /* 五行属性核心卡片 */
.wuxing-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-md);
	margin-bottom: 28px;
	border: 1px solid var(--border-light);
	position: relative;
	overflow: hidden;
}

.wuxing-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wood-color), var(--fire-color), var(--earth-color), var(--metal-color), var(--water-color));
}

.wuxing-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.wuxing-title-group {
	flex: 1;
}

.wuxing-title {
	font-size: 38px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 10px;
	line-height: 1.2;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	text-shadow: 1px 1px 2px rgba(44, 36, 22, 0.1);
}

.wuxing-subtitle {
	font-size: 18px;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.wuxing-actions {
	display: flex;
	gap: 10px;
}

.action-btn {
	border: 1px solid var(--border-medium);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
}

.action-btn:hover {
	color: var(--primary-red);
	border-color: var(--primary-red);
	background: var(--bg-card);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
        /* 五行属性核心信息 */
.wuxing-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
	margin-bottom: 28px;
	padding: 22px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	padding: 14px;
	background: var(--bg-card);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
}

.info-label {
	font-size: 13px;
	color: var(--text-light);
	font-weight: 500;
}

.info-value {
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 600;
}

        /* 五行属性展示 */
.wuxing-display {
	text-align: center;
	margin: 30px 0;
	padding: 25px;
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-light);
}

.wuxing-character {
	font-size: 120px;
	color: var(--text-primary);
	font-weight: 700;
	margin-bottom: 20px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	text-shadow: 2px 2px 4px rgba(44, 36, 22, 0.1);
}

.wuxing-property {
	display: inline-block;
	padding: 12px 30px;
	color: white;
	border-radius: 50px;
	font-size: 24px;
	font-weight: 700;
	box-shadow: var(--shadow-md);
	margin-bottom: 15px;
}

.wuxing-desc {
	font-size: 16px;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}
        /* 五行相生相克图 */
.wuxing-relations {
	margin: 30px 0;
}

.section-header {
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border-medium);
	position: relative;
}

.section-header::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 80px;
	height: 2px;
	background: var(--primary-red);
}

.section-header h2 {
	font-size: 22px;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.section-header i {
	color: var(--primary-red);
}

.wuxing-cycle {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0;
	position: relative;
	height: 300px;
}

.wuxing-element {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 18px;
	box-shadow: var(--shadow-md);
	transition: all 0.3s ease;
	cursor: pointer;
}

.wuxing-element:hover {
	transform: scale(1.1);
	box-shadow: var(--shadow-lg);
}

.wuxing-wood {
	background: var(--wood-color);
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
}

.wuxing-fire {
	background: var(--fire-color);
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
}

.wuxing-earth {
	background: var(--earth-color);
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
}

.wuxing-metal {
	background: var(--metal-color);
	bottom: 10%;
	left: 25%;
	transform: translateX(-50%);
}

.wuxing-water {
	background: var(--water-color);
	bottom: 10%;
	right: 25%;
	transform: translateX(50%);
}
        /* 五行详细解释 */
.wuxing-details {
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin: 30px 0;
	border: 1px solid var(--border-light);
}

.wuxing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
}

.element-card {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	border-top: 4px solid var(--wood-color);
}

.element-card.fire {
	border-top-color: var(--fire-color);
}

.element-card.earth {
	border-top-color: var(--earth-color);
}

.element-card.metal {
	border-top-color: var(--metal-color);
}

.element-card.water {
	border-top-color: var(--water-color);
}

.element-card h3 {
	font-size: 18px;
	color: var(--text-primary);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	gap: 8px;
}

.element-card h3 i {
	color: inherit;
}

.element-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.element-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
}

.element-item i {
	margin-top: 2px;
	flex-shrink: 0;
}

.element-item span {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
}

        /* 姓名学应用 */
.naming-application {
	margin: 30px 0;
}

.application-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.application-card {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.application-card h3 {
	font-size: 18px;
	color: var(--text-primary);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	gap: 8px;
}

.application-card h3 i {
	color: var(--primary-red);
}

/* ===== 拼音导航栏样式 ===== */
.content-nav-list {
    --gap-x: 20px;
    padding-bottom: 15px;
    padding-top: 5px;
    margin-bottom: 20px;
    position: relative;
}

.zi-pinyin-nav {
    border-bottom: 2px solid var(--border-light);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.zi-pinyin-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-red), var(--accent-blue));
}

.scroll-x {
    position: relative;
}

.scroll-x::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, var(--bg-card) 70%);
    pointer-events: none;
    z-index: 2;
}

.scroll-x .wrap {
    padding: 12px 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-x .wrap::-webkit-scrollbar {
    display: none;
}

.zi-pinyin {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
}

.zi-pinyin a {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 40px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.zi-pinyin a:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.zi-pinyin a.active {
    background: var(--primary-red);
    color: white;
    border-color: var(--primary-red);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(195, 39, 43, 0.3);
    position: relative;
}

.zi-pinyin a.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--primary-red));
}

.zi-pinyin a.active::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--primary-red);
}

/* 拼音标签中的数字上标 */
.zi-pinyin a sup {
    position: relative;
    font-size: 11px;
    line-height: 0;
    vertical-align: super;
    margin-left: 2px;
    color: inherit;
    opacity: 0.9;
    top: -0.5em;
}

.zi-pinyin a.active sup {
    color: white;
    opacity: 1;
}

.zi-pinyin a.pinyin sup {
    color: var(--primary-red);
}

.zi-pinyin a.active sup {
    color: white;
}

/* 导航指示器 */
.zi-pinyin-nav-indicator {
    position: absolute;
    bottom: -2px;
    height: 3px;
    background: var(--primary-red);
    border-radius: 2px;
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .zi-pinyin-nav {
        margin: 0 -20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .scroll-x .wrap {
        padding: 10px 15px;
    }
    
    .zi-pinyin a {
        min-width: 60px;
        height: 36px;
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .zi-pinyin a.active::after {
        bottom: -10px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--primary-red);
    }
}

@media (max-width: 480px) {
    .zi-pinyin {
        gap: 6px;
    }
    
    .zi-pinyin a {
        min-width: 55px;
        height: 34px;
        padding: 5px 10px;
        font-size: 13px;
    }
    
    .zi-pinyin a sup {
        font-size: 10px;
    }
}

/* 拼音导航交互效果增强 */
.zi-pinyin a {
    position: relative;
    z-index: 1;
}

.zi-pinyin a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    border-radius: var(--radius-md);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zi-pinyin a:hover::before {
    opacity: 1;
}

.zi-pinyin a.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    opacity: 1;
}

/* 拼音导航栏的阴影效果 */
.zi-pinyin-nav {
    box-shadow: 0 2px 10px rgba(44, 36, 22, 0.08);
}

/* 滚动渐变效果增强 */
.scroll-x::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, var(--bg-card) 30%, transparent);
    pointer-events: none;
    z-index: 2;
}

/* 拼音内容区域切换动画 */
.zi-contents {
    animation: fadeIn 0.3s ease;
}

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

/* 拼音标签的间隔调整 */
.zi-pinyin {
    gap: 10px;
}

/* 第一个标签的特殊处理 */
.zi-pinyin a:first-child {
    margin-left: 0;
}

/* 最后一个标签的特殊处理 */
.zi-pinyin a:last-child {
    margin-right: 0;
}

/* 拼音标签的数字样式优化 */
.zi-pinyin a sup small {
    font-size: 10px;
    font-weight: 600;
}

/* 活动状态的下划线动画 */
@keyframes pulse {
    0% {
        box-shadow: 0 4px 12px rgba(195, 39, 43, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(195, 39, 43, 0.4);
    }
    100% {
        box-shadow: 0 4px 12px rgba(195, 39, 43, 0.3);
    }
}

.zi-pinyin a.active {
    animation: pulse 2s infinite;
}

       /* 五行属性导航 */
.wuxing-nav {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.wuxing-nav-item {
	padding: 12px 25px;
	background: var(--bg-card);
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	font-weight: 500;
}

.wuxing-nav-item:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.wuxing-nav-item.active {
	background: ;
            color: white;
	border-color: ;
            box-shadow: var(--shadow-sm);
}

.wuxing-nav-item.wood {
	background: var(--wood-color);
	color: white;
}

.wuxing-nav-item.fire {
	background: var(--fire-color);
	color: white;
}

.wuxing-nav-item.earth {
	background: var(--earth-color);
	color: white;
}

.wuxing-nav-item.metal {
	background: var(--metal-color);
	color: white;
}

.wuxing-nav-item.water {
	background: var(--water-color);
	color: white;
}
/* 特色功能区域 */
.special-section {
	padding: 80px 30px;
	background: var(--bg-page);
}

.special-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.special-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 40px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-md);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.special-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--accent-blue);
}

.special-card:nth-child(2)::before {
	background: var(--primary-red);
}

.special-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
}

.special-title {
	font-size: 24px;
	color: var(--text-primary);
	margin-bottom: 20px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 12px;
}

.special-title i {
	color: var(--accent-blue);
}

.special-card:nth-child(2) .special-title i {
	color: var(--primary-red);
}

.special-list {
	list-style: none;
}

.special-item {
	padding: 12px 0;
	border-bottom: 1px dashed var(--border-light);
	display: flex;
	align-items: center;
	gap: 10px;
}

.special-item:last-child {
	border-bottom: none;
}

.special-item i {
	color: var(--primary-red);
	font-size: 12px;
}

.special-link {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.3s ease;
}

.special-link:hover {
	color: var(--primary-red);
}

/* 汉字核心卡片 */
.character-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-md);
	margin-bottom: 28px;
	border: 1px solid var(--border-light);
	position: relative;
	overflow: hidden;
}

.character-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-red), var(--accent-blue));
}

.character-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.character-title-group {
	flex: 1;
}

.character-title {
	font-size: 72px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 10px;
	line-height: 1;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	text-shadow: 2px 2px 4px rgba(44, 36, 22, 0.1);
}

.character-pinyin {
	font-size: 24px;
	color: var(--primary-red);
	font-weight: 600;
	margin-bottom: 6px;
	letter-spacing: 1px;
}

.character-pinyin a {
	color: inherit;
}

.character-pronunciation {
	font-size: 18px;
	color: var(--text-light);
	font-style: italic;
}

.character-actions {
	display: flex;
	gap: 10px;
}

.action-btn {
	border: 1px solid var(--border-medium);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
}

.action-btn:hover {
	color: var(--primary-red);
	border-color: var(--primary-red);
	background: var(--bg-card);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* 汉字基本信息 - 美化版 */
.character-basic-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 15px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed var(--border-light);
}

.info-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 15px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.info-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--primary-red);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.info-item:hover::before {
	transform: scaleX(1);
}

.info-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.info-icon {
	width: 40px;
	height: 40px;
	background: var(--primary-red);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	font-size: 16px;
}

.info-label {
	font-size: 12px;
	color: var(--text-light);
	font-weight: 500;
	margin-bottom: 5px;
}

.info-value {
	font-size: 15px;
	color: var(--text-primary);
	font-weight: 600;
}

/* 隐藏式超链接样式 */
.info-label a,
.info-value a {
	color: inherit;
 /* 继承父元素的颜色 */
	text-decoration: none;
 /* 移除下划线 */
	cursor: pointer;
 /* 保持默认光标 */
	transition: none;
 /* 移除过渡效果 */
}

.info-label a:hover,
.info-value a:hover {
	color: inherit;
 /* 悬停时保持相同颜色 */
	text-decoration: none;
 /* 悬停时无下划线 */
}

/* 确保有链接和无链接的样式完全一致 */
.info-label,
.info-value,
.info-label a,
.info-value a {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: inline;
 /* 确保内联显示 */
}


/* 笔顺演示 */
.stroke-order {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.stroke-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.stroke-animation {
	width: 200px;
	height: 200px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#hanzi-target {
	width: 100%;
	height: 100%;
}

.stroke-controls {
	display: flex;
	gap: 10px;
}

.stroke-btn {
	padding: 8px 16px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
}

.stroke-btn:hover {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
}

.stroke-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.stroke-btn:disabled:hover {
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border-color: var(--border-medium);
}

.stroke-steps {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.stroke-step {
	width: 40px;
	height: 40px;
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.3s ease;
}

.stroke-step:hover {
	background: var(--accent-blue);
	color: white;
}

.stroke-step.active {
	background: var(--primary-red);
	color: white;
}

.stroke-more {
	text-align: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed var(--border-light);
}

.stroke-more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--primary-red), var(--red-dark));
	color: white;
	text-decoration: none;
	border-radius: 25px;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(195, 39, 43, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;
}

.stroke-more a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.stroke-more a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(195, 39, 43, 0.4);
	color: white;
	text-decoration: none;
}

.stroke-more a:hover::before {
	left: 100%;
}

.stroke-more a:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(195, 39, 43, 0.3);
}

.stroke-more a i {
	font-size: 12px;
	transition: transform 0.3s ease;
}

.stroke-more a:hover i {
	transform: translateX(3px);
}

/* 汉字释义部分样式 - 针对采集的HTML结构 */
.content-card-body {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.zi-contents {
	margin-bottom: 30px;
}

.zi-content {
	margin-bottom: 25px;
}

/* ===== 汉字读音上标样式 ===== */
.zi-heading.main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.zi-heading.main h3.zi-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: "楷体", "KaiTi", "STKaiti", serif;
    line-height: 1;
    margin: 0;
}

/* 读音序号上标样式 */
.zi-heading.main > sup {
    position: relative;
    top: -1em;
    font-size: 60%;
    font-weight: 700;
    color: var(--primary-red);
    line-height: 0;
    vertical-align: baseline;
    margin-left: 4px;
    background: rgba(195, 39, 43, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(195, 39, 43, 0.2);
}

.zi-title {
	font-size: 36px;
	font-weight: 700;
	color: var(--text-primary);
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	margin-right: 15px;
}

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

.py {
	font-size: 20px;
	color: var(--primary-red);
	font-weight: 600;
}

.zy {
	font-size: 16px;
	color: var(--text-light);
	font-style: italic;
}

.zi-heading.secondary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0 15px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--border-light);
}

.zi-heading.secondary h4 {
	font-size: 18px;
	color: var(--text-primary);
	font-weight: 600;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-2 {
	margin-bottom: 10px !important;
}

.switch {
	display: none;
}

.switch + label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	color: var(--text-secondary);
	transition: color 0.3s ease;
}

.switch + label:before {
	content: "";
	display: inline-block;
	width: 36px;
	height: 20px;
	background: var(--bg-secondary);
	border-radius: 10px;
	margin-right: 8px;
	position: relative;
	transition: background 0.3s ease;
}

.switch + label:after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--text-light);
	border-radius: 50%;
	left: 2px;
	top: 2px;
	transition: transform 0.3s ease, background 0.3s ease;
}

.switch:checked + label:before {
	background: var(--primary-red);
}

.switch:checked + label:after {
	transform: translateX(16px);
	background: white;
}

.switch + label:hover {
	color: var(--primary-red);
}

/* 基本解释样式 */
.zi-basic-explain {
	margin-top: 15px;
}

.explain {
	margin-bottom: 12px;
	padding-left: 10px;
	border-left: 3px solid var(--accent-blue);
	padding: 12px 15px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	transition: all 0.3s ease;
}

.explain:hover {
	transform: translateX(3px);
	box-shadow: var(--shadow-sm);
}

.no {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: var(--primary-red);
	color: white;
	border-radius: 50%;
	text-align: center;
	line-height: 24px;
	font-size: 12px;
	font-weight: 600;
	margin-right: 10px;
}

.text {
	color: var(--text-primary);
	font-weight: 500;
}

.eg {
	display: block;
	margin-top: 8px;
	color: var(--text-secondary);
	font-size: 14px;
}

.eg label {
	display: inline-block;
	background: var(--accent-blue);
	color: white;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	font-size: 12px;
	margin-right: 8px;
}

.cixing {
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-red);
	margin: 20px 0 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--border-light);
}

/* 引证、例如、英文部分样式 - 统一设计 */
.extra {
	margin: 12px 0;
	padding: 12px 15px;
	border-radius: var(--radius-md);
	position: relative;
}

.extra label {
	font-weight: 600;
	display: inline-block;
	margin-bottom: 8px;
	font-size: 14px;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
}

.extra span {
	display: block;
	line-height: 1.6;
	margin-bottom: 6px;
}

.extra span:last-child {
	margin-bottom: 0;
}

/* 引证部分 - 红色系 */
.quotes {
	background: rgba(195, 39, 43, 0.05);
	border-left: 3px solid var(--primary-red);
}

.quotes label {
	background: rgba(195, 39, 43, 0.1);
	color: var(--primary-red);
}

.quotes span {
	padding-left: 10px;
	position: relative;
}

.quotes span::before {
	content: "▪";
	color: var(--primary-red);
	font-weight: bold;
	position: absolute;
	left: 0;
}

.author {
	font-style: italic;
	color: var(--text-light);
	margin-left: 5px;
	font-size: 14px;
}

/* 例如部分 - 蓝色系 */
.eg {
	background: rgba(42, 110, 187, 0.05);
	border-left: 3px solid var(--accent-blue);
}

.eg label {
	background: rgba(42, 110, 187, 0.1);
	color: var(--accent-blue);
}

.eg span {
	padding-left: 10px;
	position: relative;
}

.eg span::before {
	content: "•";
	color: var(--accent-blue);
	font-weight: bold;
	position: absolute;
	left: 0;
}

/* 英文部分 - 中性色系 */
.en {
	background: rgba(90, 77, 58, 0.05);
	border-left: 3px solid var(--neutral-dark);
	font-family: Arial, sans-serif;
	font-style: italic;
}

.en label {
	background: rgba(90, 77, 58, 0.1);
	color: var(--neutral-dark);
}

.en span {
	padding-left: 10px;
	position: relative;
}

.en span::before {
	content: "›";
	color: var(--neutral-dark);
	font-weight: bold;
	position: absolute;
	left: 0;
}

.zi-special {
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	color: var(--primary-red);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--border-light);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 汉字组词 */
.character-words {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.words-grid {
	display: grid;
	_grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.idioms-section, .words-section {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
}

.idioms-section {
	border-left: 4px solid var(--accent-blue);
}

.words-section {
	border-left: 4px solid var(--primary-red);
}

.words-title {
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.words-title i {
	color: var(--accent-blue);
}

.words-section .words-title i {
	color: var(--primary-red);
}

.words-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.word-item {
	padding: 8px 16px;
	background: var(--bg-card);
	color: var(--text-primary);
	text-decoration: none;
	border-radius: 20px;
	border: 1px solid var(--border-medium);
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 500;
}

.word-item:hover {
	background: var(--accent-blue);
	color: white;
	border-color: var(--accent-blue);
	transform: translateY(-2px);
}

.words-section .word-item:hover {
	background: var(--primary-red);
	border-color: var(--primary-red);
}

/* 近反义词样式 */
.character-synonyms-antonyms {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed var(--border-light);
}

.syn-ant-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.synonym-section, .antonym-section {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 18px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.synonym-section::before, .antonym-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	transition: all 0.3s ease;
}

.synonym-section::before {
	background: var(--accent-blue);
}

.antonym-section::before {
	background: var(--primary-red);
}

.synonym-section:hover, .antonym-section:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.syn-ant-title {
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.syn-ant-title i {
	color: var(--accent-blue);
}

.antonym-section .syn-ant-title i {
	color: var(--primary-red);
}

.syn-ant-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 近反义词列表项样式 - 保持原有悬停效果但不添加链接 */
.synonym-section .syn-ant-item,
.antonym-section .syn-ant-item {
	padding: 6px 14px;
	background: var(--bg-card);
	color: var(--text-primary);
	border-radius: 20px;
	border: 1px solid var(--border-medium);
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 500;
	display: inline-block;
 /* 确保span元素可以正确应用样式 */
	cursor: default;
 /* 使用默认光标，表示不可点击 */
}

/* 保持原有的悬停颜色效果 */
.synonym-section .syn-ant-item:hover {
	background: var(--accent-blue);
	color: white;
	border-color: var(--accent-blue);
	transform: translateY(-2px);
}

.antonym-section .syn-ant-item:hover {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
	transform: translateY(-2px);
}
/* 近反义词标题链接样式 */
.syn-ant-link {
	color: inherit;
 /* 继承父元素颜色 */
	text-decoration: none;
 /* 移除下划线 */
	font-weight: 600;
 /* 保持粗体 */
	transition: color 0.3s ease;
 /* 添加颜色过渡效果 */
}

.syn-ant-link:hover {
	color: var(--primary-red);
 /* 悬停时变为红色 */
	text-decoration: underline;
 /* 悬停时添加下划线 */
}
/* 空状态提示样式 */
.syn-ant-empty {
	padding: 6px 14px;
	color: var(--text-light);
	font-style: italic;
	font-size: 14px;
}
/* 标签样式 */
.character-tags {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed var(--border-light);
}

.tags-title {
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.tags-title i {
	color: var(--primary-red);
}

.tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tag-item {
	padding: 6px 14px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: 20px;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	font-size: 13px;
	font-weight: 500;
	position: relative;
	overflow: hidden;
}

.tag-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--accent-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.tag-item:hover {
	background: var(--accent-blue);
	color: white;
	border-color: var(--accent-blue);
	transform: translateY(-2px);
}

.tag-item:hover::before {
	transform: scaleX(1);
}

/* 笔顺演示部分样式 */
.stroke-order-section {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.stroke-order-section .section-header {
	font-size: 22px;
	color: var(--text-primary);
	margin-bottom: 25px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--primary-red);
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
}

.stroke-order-section .section-header i {
	color: var(--primary-red);
}

.stroke-order-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 20px;
	grid-template-areas: "animation controls"
        "steps explanation";
}

.stroke-animation-area {
	grid-area: animation;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.character-display {
	text-align: center;
	margin-bottom: 20px;
}

.character-large {
	font-size: 80px;
	font-weight: 700;
	color: var(--text-primary);
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	line-height: 1;
	margin-bottom: 5px;
}

.character-pinyin-large {
	font-size: 18px;
	color: var(--primary-red);
	font-weight: 600;
}

.stroke-canvas {
	width: 100%;
	height: 200px;
	background: white;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.stroke-placeholder {
	text-align: center;
	color: var(--text-light);
}

.stroke-placeholder i {
	font-size: 40px;
	margin-bottom: 10px;
	color: var(--border-medium);
}

.stroke-placeholder p {
	font-size: 14px;
	margin: 0;
}

.stroke-controls {
	grid-area: controls;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
}

.control-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 20px;
}

.control-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 15px;
	background: var(--bg-card);
	color: var(--text-secondary);
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
}

.control-btn:hover {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
	transform: translateY(-2px);
}

.play-btn:hover {
	background: var(--accent-blue);
	border-color: var(--accent-blue);
}

.speed-control {
	display: flex;
	align-items: center;
	gap: 10px;
}

.speed-label {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 500;
}

.speed-slider {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--border-light);
	outline: none;
	-webkit-appearance: none;
}

.speed-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--primary-red);
	cursor: pointer;
}

.speed-value {
	font-size: 14px;
	color: var(--text-secondary);
	min-width: 50px;
}

.stroke-steps {
	grid-area: steps;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
}

.steps-title {
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.steps-title i {
	color: var(--primary-red);
}

.steps-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 5px;
	background: var(--bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	cursor: pointer;
}

.step-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.step-item.active {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
}

.step-number {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 5px;
}

.step-desc {
	font-size: 12px;
	font-weight: 500;
}

.stroke-explanation {
	grid-area: explanation;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
}

.explanation-title {
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.explanation-title i {
	color: var(--primary-red);
}

.explanation-content {
	color: var(--text-secondary);
	line-height: 1.6;
}

.explanation-content p {
	margin-bottom: 10px;
}

.explanation-content ul {
	padding-left: 20px;
	margin: 0;
}

.explanation-content li {
	margin-bottom: 5px;
}

/* 页面标题 */
.page-title {
	font-size: 32px;
	color: var(--text-primary);
	margin-bottom: 10px;
	text-align: center;
	font-weight: 700;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.page-subtitle {
	font-size: 16px;
	color: var(--text-secondary);
	text-align: center;
	margin-bottom: 30px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* 拼音核心卡片 */
.pinyin-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-md);
	margin-bottom: 28px;
	border: 1px solid var(--border-light);
	position: relative;
	overflow: hidden;
}

.pinyin-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-red), var(--accent-blue));
}

.pinyin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

.pinyin-title-group {
	flex: 1;
}

.pinyin-hanzi {
	font-size: 72px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 10px;
	line-height: 1;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	text-shadow: 2px 2px 4px rgba(44, 36, 22, 0.1);
}

.pinyin-main {
	font-size: 32px;
	color: var(--primary-red);
	font-weight: 600;
	margin-bottom: 6px;
	letter-spacing: 1px;
}

.pinyin-details {
	font-size: 18px;
	color: var(--text-light);
	font-style: italic;
}

.pinyin-actions {
	display: flex;
	gap: 10px;
}

.action-btn {
	border: 1px solid var(--border-medium);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
}

.action-btn:hover {
	color: var(--primary-red);
	border-color: var(--primary-red);
	background: var(--bg-card);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* 拼音发音指南 */
.pronunciation-guide {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.pronunciation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.pronunciation-item {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
}

.pronunciation-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.pronunciation-label {
	font-size: 14px;
	color: var(--text-light);
	font-weight: 500;
	margin-bottom: 8px;
}

.pronunciation-value {
	font-size: 18px;
	color: var(--text-primary);
	font-weight: 600;
}

/* 拼音转换工具 */
.pinyin-tool {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.tool-description {
	color: var(--text-secondary);
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
}

.tool-form {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}

.tool-form input {
	flex: 1;
	padding: 12px 18px;
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
	background: var(--bg-secondary);
	color: var(--text-primary);
	font-size: 15px;
	transition: all 0.3s ease;
}

.tool-form input:focus {
	outline: none;
	border-color: var(--primary-red);
	box-shadow: 0 0 0 3px rgba(195, 39, 43, 0.1);
}

.tool-form button {
	background: var(--primary-red);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	padding: 0 30px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tool-form button:hover {
	background: var(--red-dark);
	transform: translateY(-2px);
}

.tool-result {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	min-height: 60px;
	font-size: 18px;
	color: var(--text-primary);
	font-weight: 600;
	text-align: center;
}

/* 最新拼音查询 */
.recent-queries {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.queries-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
}

.query-item {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 18px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
}

.query-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-red);
}

.query-hanzi {
	font-size: 24px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 5px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.query-pinyin {
	font-size: 16px;
	color: var(--primary-red);
	font-weight: 500;
}

/* 拼音学习指南 */
.learning-guide {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.guide-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.guide-item {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 18px;
	border-left: 4px solid var(--accent-blue);
	transition: all 0.3s ease;
}

.guide-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.guide-title {
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.guide-title i {
	color: var(--accent-blue);
}

.guide-content {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
}

/* 近义词展示 */
.synonyms-section {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.section-title {
	font-size: 22px;
	color: var(--text-primary);
	margin-bottom: 25px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--primary-red);
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
}

.section-title i {
	color: var(--primary-red);
}
/* 新增样式：实现左右对齐 */
.section-title.with-more-link {
	justify-content: space-between;
}

.section-title .title-text {
	flex-shrink: 0;
}

.more-link {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--primary-red);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	transition: color 0.3s;
}

.more-link:hover {
	color: #c0392b;
}

.synonyms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

.synonym-card {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.synonym-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--accent-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.synonym-card:hover::before {
	transform: scaleX(1);
}

.synonym-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.synonym-link {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
}

.synonym-hanzi {
	font-size: 36px;
	color: var(--text-primary);
	font-weight: 600;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	transition: color 0.3s ease;
}

.synonym-card:hover .synonym-hanzi {
	color: var(--accent-blue);
}
/* 相关成语 */
.related-idioms {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin-bottom: 30px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.idioms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

.idiom-card {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 18px;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.idiom-card a {
	color: inherit;
	text-decoration: none;
}

.idiom-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--primary-red);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.idiom-card:hover::before {
	transform: scaleX(1);
}

.idiom-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.idiom-hanzi {
	font-size: 20px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 5px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.idiom-pinyin {
	font-size: 14px;
	color: var(--primary-red);
	font-weight: 500;
	margin-bottom: 10px;
}

.idiom-meaning {
	font-size: 14px;
	color: var(--text-light);
	line-height: 1.4;
}        

/* 最新近义词查询 */

.query-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.query-list .query-item {
	display: flex;
	align-items: center;
	padding: 15px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
}

.query-list .query-item:hover {
	transform: translateX(5px);
	box-shadow: var(--shadow-sm);
}

.query-list .query-hanzi {
	font-size: 20px;
	color: var(--text-primary);
	font-weight: 600;
	margin-right: 15px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	min-width: 40px;
}

.query-list .query-pinyin {
	font-size: 14px;
	color: var(--primary-red);
	font-weight: 500;
	margin-right: 15px;
	min-width: 80px;
}

.query-list .query-meaning {
	flex: 1;
	font-size: 14px;
	color: var(--text-secondary);
}

.query-list .query-time {
	font-size: 12px;
	color: var(--text-light);
	font-style: italic;
}
        
/* 汉字超链接样式 */
.hanzi-link {
	color: var(--text-primary);
	text-decoration: none;
	font-size: 20px;
	font-weight: 600;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	padding: 2px 4px;
	border-radius: 4px;
}

/* 鼠标悬停效果 */
.hanzi-link:hover {
	color: var(--primary-red);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(195, 39, 43, 0.2);
	background-color: rgba(195, 39, 43, 0.05);
}

/* 点击效果 */
.hanzi-link:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(195, 39, 43, 0.2);
}

/* 为汉字链接添加优雅的下划线效果 */
.hanzi-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 50%;
	background-color: var(--primary-red);
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.hanzi-link:hover::after {
	width: 100%;
}

       /* 多音字核心卡片 */
.polyphone-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-md);
	margin-bottom: 28px;
	border: 1px solid var(--border-light);
	position: relative;
	overflow: hidden;
}

.polyphone-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-red), var(--accent-blue));
}

.polyphone-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.polyphone-title-group {
	flex: 1;
}

.polyphone-title {
	font-size: 38px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 10px;
	line-height: 1.2;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	text-shadow: 1px 1px 2px rgba(44, 36, 22, 0.1);
}

.polyphone-subtitle {
	font-size: 18px;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.polyphone-actions {
	display: flex;
	gap: 10px;
}

.action-btn {
	border: 1px solid var(--border-medium);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
}

.action-btn:hover {
	color: var(--primary-red);
	border-color: var(--primary-red);
	background: var(--bg-card);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

        /* 多音字核心信息 */
.polyphone-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
	margin-bottom: 28px;
	padding: 22px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	padding: 14px;
	background: var(--bg-card);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
}

.info-label {
	font-size: 13px;
	color: var(--text-light);
	font-weight: 500;
}

.info-value {
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 600;
}

        /* 多音字读音切换标签 */
.pronunciation-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 25px;
	border-bottom: 2px solid var(--border-light);
	padding-bottom: 10px;
}

.pronunciation-tab {
	padding: 12px 24px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	font-weight: 500;
	position: relative;
	cursor: pointer;
}

.pronunciation-tab:hover {
	background: var(--bg-tertiary);
	color: var(--text-primary);
}

.pronunciation-tab.active {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
	box-shadow: var(--shadow-sm);
}

.pronunciation-tab.active::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--primary-red);
}
       /* 组词内容区域 */
.word-group-section {
	margin-bottom: 30px;
}

.section-header {
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border-medium);
	position: relative;
}

.section-header::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 80px;
	height: 2px;
	background: var(--primary-red);
}

.section-header h2 {
	font-size: 22px;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.section-header i {
	color: var(--primary-red);
}

.pronunciation-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	padding: 15px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--primary-red);
}

.pinyin-badge {
	background: var(--primary-red);
	color: white;
	padding: 8px 16px;
	border-radius: var(--radius-md);
	font-size: 18px;
	font-weight: 600;
	box-shadow: var(--shadow-sm);
}

.pronunciation-desc {
	font-size: 15px;
	color: var(--text-secondary);
}        
        /* 组词网格 */
/* 隐藏非激活的组词区域 */
.word-group-section {
	display: none;
}

.word-group-section.active {
	display: block;
}

.words-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
}

.word-item {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 18px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}

.word-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--primary-red);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.word-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-red);
}

.word-item:hover::before {
	transform: scaleX(1);
}

.word-item .chinese {
	font-size: 22px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 8px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.word-item .pinyin {
	font-size: 14px;
	color: var(--primary-red);
	font-weight: 500;
	margin-bottom: 6px;
}

.word-item .meaning {
	font-size: 13px;
	color: var(--text-light);
	line-height: 1.4;
}

        /* 多音字辨析区域 */
.polyphone-analysis {
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin: 30px 0;
	border: 1px solid var(--border-light);
}

.analysis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
}

.analysis-card {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.analysis-card h3 {
	font-size: 18px;
	color: var(--text-primary);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	gap: 8px;
}

.analysis-card h3 i {
	color: var(--primary-red);
}

.usage-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.usage-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
}

.usage-item i {
	color: var(--primary-red);
	margin-top: 2px;
	flex-shrink: 0;
}

.usage-item span {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
}

        /* 相关多音字推荐 */
.related-polyphones {
	margin: 30px 0;
}

.polyphones-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
}

.polyphone-item {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
}

.polyphone-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-red);
}

.polyphone-item .character {
	font-size: 28px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 8px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.polyphone-item .pinyin-list {
	font-size: 13px;
	color: var(--primary-red);
	line-height: 1.4;
}        

        /* 相关汉字推荐 */
.related-characters {
	margin: 30px 0;
}

.characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 15px;
}

.character-item {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
}

.character-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-red);
}

.character-item .character {
	font-size: 32px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 8px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.character-item .wuxing {
	font-size: 13px;
	color: var(--primary-red);
	font-weight: 500;
}

        /* 学习扩展区域 */
.learning-extension {
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin: 30px 0;
	border: 1px solid var(--border-light);
}

.extension-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.extension-card {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.extension-card h3 {
	font-size: 18px;
	color: var(--text-primary);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	gap: 8px;
}

.extension-card h3 i {
	color: var(--primary-red);
}
 







        /* 部首查询卡片 */
.radical-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-md);
	margin-bottom: 28px;
	border: 1px solid var(--border-light);
	position: relative;
	overflow: hidden;
}

.radical-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-red), var(--accent-blue));
}

.radical-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.radical-title-group {
	flex: 1;
}

.radical-title {
	font-size: 38px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 10px;
	line-height: 1.2;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	text-shadow: 1px 1px 2px rgba(44, 36, 22, 0.1);
}

.radical-subtitle {
	font-size: 20px;
	color: var(--primary-red);
	font-weight: 600;
	margin-bottom: 6px;
	letter-spacing: 1px;
}

.radical-pronunciation {
	font-size: 15px;
	color: var(--text-light);
	font-style: italic;
}

.radical-actions {
	display: flex;
	gap: 10px;
}

.action-btn {
	border: 1px solid var(--border-medium);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
}

.action-btn:hover {
	color: var(--primary-red);
	border-color: var(--primary-red);
	background: var(--bg-card);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

        /* 部首核心信息 */
.radical-core-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 28px;
	padding: 22px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.radical-info-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	padding: 14px;
	background: var(--bg-card);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
}

.radical-info-label {
	font-size: 13px;
	color: var(--text-light);
	font-weight: 500;
}

.radical-info-value {
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 600;
}

        /* 部首详细信息 */
.radical-detail {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 30px;
	margin-top: 25px;
}

.radical-visual {
	text-align: center;
	padding: 20px;
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.radical-character {
	font-size: 120px;
	color: var(--text-primary);
	font-family: "楷体", "KaiTi", "STKaiti", serif;
	margin-bottom: 15px;
	text-shadow: 2px 2px 4px rgba(44, 36, 22, 0.1);
}

.radical-name {
	font-size: 24px;
	color: var(--primary-red);
	font-weight: 600;
	margin-bottom: 10px;
}

.radical-stroke {
	font-size: 16px;
	color: var(--text-secondary);
}

.radical-explanation {
	padding: 20px;
	background: var(--bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.explanation-title {
	font-size: 18px;
	color: var(--text-primary);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
	font-weight: 600;
}

.explanation-content {
	color: var(--text-secondary);
	line-height: 1.7;
	font-size: 15px;
}

.explanation-content p {
	margin-bottom: 15px;
}

        /* 同部首汉字区域 */
.same-radical-section {
	margin: 30px 0;
}

.characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
}

.character-item {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 15px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
}

.character-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-red);
}

.character-item .chinese {
	font-size: 28px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 5px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.character-item .pinyin {
	font-size: 13px;
	color: var(--primary-red);
	font-weight: 500;
}

        /* 最新查询区域 */
.recent-queries {
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin: 30px 0;
	border: 1px solid var(--border-light);
}

.queries-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
}

.query-item {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 15px;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
}

.query-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.query-question {
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 8px;
}
/* 最新查询区域链接样式 */
.query-question a {
	color: inherit;
 /* 继承父级颜色 */
	text-decoration: none;
 /* 去掉下划线 */
	font-weight: inherit;
 /* 继承父级字重 */
	font-size: inherit;
 /* 继承父级字号 */
	transition: all 0.3s ease;
 /* 添加平滑过渡效果 */
}

.query-question a:hover {
	color: var(--primary-red);
 /* 悬停时变为主题红色 */
	text-decoration: underline;
 /* 悬停时显示下划线 */
	transform: translateX(2px);
 /* 轻微位移效果 */
}

.query-answer {
	font-size: 14px;
	color: var(--text-secondary);
}

.query-answer strong {
	color: var(--primary-red);
}

        /* 部首知识区域 */
.radical-knowledge {
	margin: 30px 0;
}

.knowledge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.knowledge-card {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.knowledge-card h3 {
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	gap: 8px;
}

.knowledge-card h3 i {
	color: var(--primary-red);
}

.knowledge-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.knowledge-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px;
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
}

.knowledge-item i {
	color: var(--primary-red);
	margin-top: 2px;
	flex-shrink: 0;
}

.knowledge-item span {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
} 
/* 结构分解容器 */
.structure-container {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: 25px;
	margin: 25px 0;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

/* 结构分解网格 */
.structure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 15px;
	margin: 20px 0;
}

/* 结构部件卡片 */
.component-card {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 15px;
	text-align: center;
	border: 1px solid var(--border-light);
	transition: all 0.3s ease;
	cursor: pointer;
}

.component-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-red);
}

/* 部件字符展示 */
.component-char {
	font-size: 32px;
	color: var(--text-primary);
	font-weight: 700;
	margin-bottom: 8px;
	font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.component-name {
	font-size: 13px;
	color: var(--text-secondary);
	margin-bottom: 5px;
}

.component-role {
	font-size: 12px;
	color: var(--primary-red);
	font-weight: 500;
}

/* 笔画顺序区域 */
.stroke-order-section {
	margin: 30px 0;
}

.stroke-canvas {
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	padding: 20px;
	border: 1px solid var(--border-light);
	margin-bottom: 20px;
	text-align: center;
}

/* 笔画控制 */
.stroke-controls {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 15px 0;
}

.stroke-btn {
	padding: 8px 16px;
	background: var(--bg-card);
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
}

.stroke-btn:hover {
	background: var(--bg-tertiary);
}

.stroke-btn.active {
	background: var(--primary-red);
	color: white;
	border-color: var(--primary-red);
}
/* 响应式设计 */
@media (max-width: 1024px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.special-grid {
		grid-template-columns: 1fr;
	}

	.footer-content {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.hc-nav {
		flex-direction: column;
		gap: 16px;
	}

	.hc-nav-main {
		order: 3;
		width: 100%;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.hc-search {
		width: 100%;
	}

	.hc-search input {
		width: 100%;
	}

	.hero-title {
		font-size: 36px;
	}

	.hero-subtitle {
		font-size: 18px;
	}

	.hero-search {
		flex-direction: column;
	}

	.hero-search-btn {
		padding: 15px;
	}

	.features-grid {
		grid-template-columns: 1fr;
	}

	.content-grid {
		grid-template-columns: 1fr;
	}

	.footer-content {
		grid-template-columns: 1fr;
	}

	.character-header {
		flex-direction: column;
		gap: 16px;
	}

	.character-actions {
		align-self: flex-end;
	}

	.character-basic-info {
		grid-template-columns: repeat(2, 1fr);
	}

	.zi-heading.secondary {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.extra {
		padding: 10px 12px;
	}

	.syn-ant-container {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.syn-ant-list, .tags-list {
		gap: 8px;
	}

	.syn-ant-item, .tag-item {
		padding: 5px 12px;
		font-size: 13px;
	}

	.stroke-order-container {
		grid-template-columns: 1fr;
		grid-template-areas: "animation"
            "controls"
            "steps"
            "explanation";
	}

	.steps-container {
		grid-template-columns: repeat(4, 1fr);
	}

	.control-buttons {
		grid-template-columns: 1fr;
	}

	.pinyin-header {
		flex-direction: column;
		gap: 16px;
	}

	.pinyin-actions {
		align-self: flex-end;
	}

	.tool-form {
		flex-direction: column;
	}

	.queries-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.guide-list {
		grid-template-columns: 1fr;
	}

	.synonyms-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.idioms-grid {
		grid-template-columns: 1fr;
	}

	.hanzi-link {
		font-size: 18px;
	}

	.polyphone-header {
		flex-direction: column;
		gap: 16px;
	}

	.polyphone-actions {
		align-self: flex-end;
	}

	.polyphone-info {
		grid-template-columns: 1fr;
	}

	.pronunciation-tabs {
		flex-wrap: wrap;
	}

	.words-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.analysis-grid {
		grid-template-columns: 1fr;
	}

	.polyphones-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.extension-grid {
		grid-template-columns: 1fr;
	}

	.characters-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}

	.features-grid {
		grid-template-columns: 1fr;
	}

	.recommendation-grid {
		grid-template-columns: 1fr;
	}

	.wuxing-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.radical-header {
		flex-direction: column;
		gap: 16px;
	}

	.radical-actions {
		align-self: flex-end;
	}

	.radical-detail {
		grid-template-columns: 1fr;
	}

	.characters-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}

	.queries-grid {
		grid-template-columns: 1fr;
	}

	.knowledge-grid {
		grid-template-columns: 1fr;
	}

	.query-question a {
		padding: 4px 0;
		display: inline-block;
	}

	.stroke-more a {
		padding: 10px 20px;
		font-size: 13px;
	}

	.stroke-more {
		margin-top: 15px;
		padding-top: 15px;
	}
}

@media (max-width: 480px) {
	.hc-header, .hero-section, .features-section, .popular-section, .special-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	.hero-title {
		font-size: 28px;
	}

	.section-title {
		font-size: 28px;
	}

	.feature-card {
		padding: 30px 20px;
	}

	.character-title {
		font-size: 60px;
	}

	.character-basic-info {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.info-item {
		padding: 12px 8px;
	}

	.info-icon {
		width: 32px;
		height: 32px;
		font-size: 13px;
	}

	.info-label {
		font-size: 11px;
	}

	.info-value {
		font-size: 13px;
	}

	.zi-title {
		font-size: 28px;
	}

	.py {
		font-size: 16px;
	}

	.zy {
		font-size: 14px;
	}

	.syn-ant-item, .tag-item {
		padding: 4px 10px;
		font-size: 12px;
	}

	.steps-container {
		grid-template-columns: repeat(3, 1fr);
	}

	.character-large {
		font-size: 60px;
	}

	.pinyin-hanzi {
		font-size: 60px;
	}

	.queries-list {
		grid-template-columns: 1fr;
	}

	.synonyms-grid {
		grid-template-columns: 1fr;
	}

	.query-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.hanzi-link {
		font-size: 16px;
	}

	.polyphone-title {
		font-size: 32px;
	}

	.words-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.polyphones-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.radical-title {
		font-size: 32px;
	}

	.radical-character {
		font-size: 80px;
	}

	.characters-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}