/* === 基础设置 === */
:root {
    --primary-color: #006e54;
    --dark-text: #222222;
    --gray-text: #555555;
    --light-gray: #888888;
    --border-color: #e5e5e5;
    --bg-white: #ffffff;
    --hover-bg: #f0f7f5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
    background-color: #f4f7f6;
    color: var(--dark-text);
    overflow-x: hidden;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

.container {
    width: 1600px;
    max-width: 96%;
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
}

/* ======================================= */
/* === 全站滑动动画 (Scroll Reveal) === */
/* ======================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

/* === 顶部信息栏 === */
.top-bar-wrapper {
    background-color: #f5f7f6;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}

.top-bar {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    color: var(--gray-text);
}

.top-bar span {
    margin-left: 20px;
    cursor: pointer;
    transition: 0.2s;
}

.top-bar span:hover {
    color: var(--primary-color);
}

/* === 导航栏 (Header) === */
header {
    background-color: var(--bg-white);
    height: 90px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.logo-area {
    display: flex;
    align-items: center;
}

.logo-text {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

.logo-text img {
    max-width: 100%;
    max-height: 85px;
}

.logo-divider {
    width: 1px;
    height: 40px;
    background-color: var(--border-color);
    margin: 0 20px;
}

.logo-tagline {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.5;
    letter-spacing: 1px;
}

.nav-menu {
    display: flex;
    height: 100%;
}

.nav-menu>li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.nav-menu>li>a {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    transition: color 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-menu>li>a i {
    transition: transform 0.3s ease;
}

.nav-menu>li:hover>a i {
    transform: rotate(180deg);
}

.nav-menu>li>a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.nav-menu>li:hover>a {
    color: var(--primary-color);
}

.nav-menu>li:hover>a::after {
    width: 100%;
}

/* PC 端 Dropdown 样式 */
.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--bg-white);
    min-width: 150px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 3px solid var(--primary-color);
    z-index: 1000;
}

.dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

.nav-menu>li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown li a {
    display: block;
    padding: 12px 25px;
    font-size: 15px;
    color: var(--gray-text);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.dropdown li a:hover {
    color: var(--primary-color);
    background-color: var(--hover-bg);
    padding-left: 30px;
    font-weight: 500;
}

.header-contact {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-menu-btn {
    display: none;
    font-size: 24px;
    color: var(--primary-color);
    cursor: pointer;
}

/* === 首屏主视觉 (Hero Section) === */
.hero {
    position: relative;
    height: 640px;
    background: linear-gradient(135deg, #fff3e0 0%, #ffebee 50%, #e0f7fa 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    background-position: center;
}

.hero-bg-img {
    position: absolute;
    right: -5%;
    bottom: 0;
    width: 65%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1542051841857-4190eeee7333?q=80&w=1000&auto=format&fit=crop') no-repeat bottom center;
    background-size: cover;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
}

/* .hero-wave-white {
    position: absolute;
    bottom: -60px;
    left: -10%;
    width: 120%;
    height: 180px;
    background: var(--bg-white);
    border-top-right-radius: 50% 120px;
    border-top-left-radius: 50% 120px;
    transform: rotate(-3deg);
    z-index: 2;
} */

.hero-wave-green {
    position: absolute;
    bottom: 0;
    right: -5%;
    width: 60%;
    height: 140px;
    background: var(--primary-color);
    border-top-left-radius: 100% 180px;
    z-index: 3;
}

.hero-content {
    position: relative;
    z-index: 10;
    padding-bottom: 50px;
}

.hero-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.35;
    color: #111;
    letter-spacing: 1px;
}

.hero-title .highlight {
    color: var(--primary-color);
    display: block;
    margin-top: 8px;
}

.hero-subtitle {
    font-size: 19px;
    color: #444;
    margin-top: 25px;
    font-weight: 500;
}

.hero-features {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--primary-color);
    border-radius: 4px;
    color: var(--primary-color);
    font-size: 12px;
}

.hero-btns {
    display: flex;
    gap: 15px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.btn-main {
    background: var(--primary-color);
    color: var(--bg-white);
    padding: 14px 38px;
    border-radius: 6px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 110, 84, 0.3);
}

.btn-main:hover {
    background: #005642;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 110, 84, 0.4);
}

.btn-outline {
    background: var(--bg-white);
    color: var(--primary-color);
    padding: 13px 38px;
    border: 1.5px solid var(--primary-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

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

/* === 右侧悬浮窗 === */
.float-menu {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-white);
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 4px 15px rgba(0, 0, 0, 0.06);
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: 90px;
}

.float-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    color: var(--primary-color);
    transition: 0.3s;
}

.float-item:first-child:hover {
    border-top-left-radius: 8px;
}

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

.float-item:hover {
    background: var(--hover-bg);
}

.float-item i {
    font-size: 24px;
    margin-bottom: 8px;
}

.float-item span {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.float-popup {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 15px;
    background: var(--bg-white);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: max-content;
    text-align: center;
    pointer-events: none;
}

.float-popup::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--bg-white);
}

.float-item:hover .float-popup {
    opacity: 1;
    visibility: visible;
    margin-right: 10px;
}

.wechat-popup img {
    width: 120px;
    height: 120px;
    display: block;
    margin-bottom: 8px;
    border-radius: 4px;
}

.wechat-popup p {
    font-size: 13px;
    color: var(--gray-text);
}

.phone-popup h3 {
    font-size: 22px;
    color: var(--primary-color);
    margin-top: 5px;
    font-weight: bold;
}

.phone-popup p {
    font-size: 13px;
    color: var(--gray-text);
}

#backToTop {
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#backToTop.show {
    display: flex;
    opacity: 1;
    border-top: 1px solid #f0f0f0;
}

/* === 在线客服模拟对话框 === */
.chat-widget {
    position: fixed;
    right: 110px;
    bottom: 80px;
    width: 320px;
    background: var(--bg-white);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 1000;
}

.chat-widget.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chat-header {
    background: var(--primary-color);
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}

.chat-header i {
    cursor: pointer;
}

.chat-body {
    padding: 20px;
    height: 250px;
    background: #f9f9f9;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-msg {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.msg-system {
    background: #e8f4f1;
    color: var(--primary-color);
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.chat-input {
    display: flex;
    border-top: 1px solid #eee;
    padding: 10px;
    background: #fff;
}

.chat-input input {
    flex: 1;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
    margin-right: 10px;
}

.chat-input button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0 15px;
    cursor: pointer;
    font-weight: bold;
}

/* === AI择校表单 === */
.ai-panel-wrapper {
    position: relative;
    z-index: 20;
    margin-top: -65px;
    margin-bottom: 30px;
}

.ai-panel {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 35px 40px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.ai-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.ai-desc {
    font-size: 14px;
    color: var(--gray-text);
    margin-bottom: 25px;
}

.ai-form {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
}

.btn-submit {
    background: var(--primary-color);
    color: var(--bg-white);
    height: 45px;
    padding: 0 30px;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-submit:hover {
    background: #005642;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 110, 84, 0.3);
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
}

.custom-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    padding: 0 15px;
    font-size: 14px;
    color: var(--gray-text);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.custom-select:hover,
.custom-select.active {
    border-color: var(--primary-color);
}

.custom-select i {
    font-size: 14px;
    color: var(--light-gray);
    transition: transform 0.3s ease;
}

.custom-select.active i {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.selected-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: var(--bg-white);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    overflow: hidden;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-option {
    padding: 12px 15px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.custom-option:hover {
    background-color: var(--hover-bg);
    color: var(--primary-color);
    font-weight: 500;
}

.custom-option.selected {
    background-color: var(--primary-color);
    color: var(--bg-white);
    font-weight: bold;
}

/* === 核心业务矩阵 === */
.service-matrix-wrapper {
    margin-bottom: 40px;
}

.service-matrix-panel {
    display: flex;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    padding: 35px 0;
}

.matrix-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
    border-right: 1px solid var(--border-color);
    transition: transform 0.3s ease;
}

.matrix-item:last-child {
    border-right: none;
}

.matrix-item:hover {
    transform: translateY(-6px);
}

.matrix-icon {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 15px;
    background: rgba(0, 110, 84, 0.06);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-title {
    font-size: 15px;
    font-weight: bold;
    color: #222;
    margin-bottom: 8px;
}

.matrix-desc {
    font-size: 12px;
    color: var(--light-gray);
    margin-bottom: 15px;
    line-height: 1.4;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-link {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: bold;
    transition: color 0.3s;
}

.matrix-item:hover .matrix-link {
    color: #004d3b;
}

/* === 数据统计横幅 === */
.stats-banner-wrapper {
    margin-bottom: 40px;
}

.stats-banner {
    background: linear-gradient(to right, #004d3b, #007a5e);
    border-radius: 12px;
    padding: 35px 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--bg-white);
    box-shadow: 0 10px 30px rgba(0, 110, 84, 0.2);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 18px;
}

.stat-icon {
    font-size: 40px;
    color: #e0f2ec;
}

.stat-icon.accent {
    color: #c4e8c2;
}

.stat-info {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.stat-number {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    opacity: 0.85;
    letter-spacing: 0.5px;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.15);
}

/* === 三大专栏板块 === */
.content-columns-wrapper {
    margin-bottom: 40px;
}

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

.column-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

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

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #111;
}

.card-more {
    font-size: 13px;
    color: var(--light-gray);
    transition: color 0.3s;
}

.card-more:hover {
    color: var(--primary-color);
}

.card-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.card-tabs .tab {
    font-size: 14px;
    color: var(--gray-text);
    padding-bottom: 10px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}

.card-tabs .tab.active {
    color: var(--primary-color);
    font-weight: bold;
}

.card-tabs .tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

.univ-list {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

.univ-list.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.univ-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-color);
}

.univ-list li:last-child {
    border-bottom: none;
}

.univ-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.univ-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
}

.univ-name h4 {
    font-size: 15px;
    color: #222;
    margin-bottom: 2px;
}

.univ-name p {
    font-size: 12px;
    color: var(--light-gray);
}

.univ-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rank-tag {
    background: #fff3e0;
    color: #e67e22;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.detail-link {
    font-size: 13px;
    color: var(--light-gray);
    transition: color 0.3s;
}

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

.news-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px dashed var(--border-color);
}

.news-list li:last-child {
    border-bottom: none;
}

.news-title {
    font-size: 14px;
    color: #333;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%;
}

.news-title::before {
    content: "•";
    color: var(--primary-color);
    font-size: 20px;
    margin-right: 8px;
    line-height: 1;
}

.news-title:hover {
    color: var(--primary-color);
}

.news-date {
    font-size: 12px;
    color: var(--light-gray);
}

.case-list li {
    display: flex;
    gap: 15px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--border-color);
}

.case-list li:last-child {
    border-bottom: none;
}

.case-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.case-info {
    flex: 1;
}

.case-header-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.case-header-info h4 {
    font-size: 14px;
    color: #222;
}

.case-header-info span {
    font-size: 12px;
    color: var(--gray-text);
}

.case-desc {
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
}

.case-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.case-tag {
    background: #e8f4f1;
    color: var(--primary-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.case-link {
    font-size: 12px;
    color: var(--primary-color);
    transition: opacity 0.3s;
}

.case-link:hover {
    opacity: 0.8;
}

/* === 底部备考资源与AI工具横幅 === */
.bottom-banners-wrapper {
    margin-bottom: 40px;
    display: flex;
    gap: 20px;
}

.bottom-banner-card {
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.resource-card {
    flex: 1.5;
    background: var(--bg-white);
}

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

.resource-title {
    font-size: 20px;
    font-weight: bold;
    color: #111;
}

.resource-more {
    font-size: 13px;
    color: var(--primary-color);
    transition: opacity 0.3s;
}

.resource-more:hover {
    opacity: 0.8;
}

.resource-desc {
    font-size: 13px;
    color: var(--gray-text);
    margin-bottom: 25px;
}

.resource-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.resource-tag {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 6px 15px;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.resource-tag i {
    color: var(--primary-color);
    font-size: 15px;
}

.resource-tag:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--hover-bg);
    transform: translateY(-2px);
}

.ai-tool-card {
    flex: 1;
    background: linear-gradient(135deg, #eaf6f3 0%, #d4ede6 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}

.ai-tool-content {
    z-index: 2;
}

.ai-tool-title {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
}

.ai-tool-desc {
    font-size: 13px;
    color: var(--gray-text);
    margin-bottom: 20px;
}

.ai-tool-btn {
    background: var(--primary-color);
    color: var(--bg-white);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 110, 84, 0.2);
}

.ai-tool-btn:hover {
    background: #005642;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 110, 84, 0.3);
}

.ai-tool-img {
    width: 110px;
    height: auto;
    z-index: 1;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* 合作院校容器布局，保持在一行 */
.partners-container {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.partners-header {
    flex-shrink: 0;
    margin: 0 20px;
    text-align: center;
    border-right: 1px solid #ddd;
    padding-right: 20px;
}

.partners-nav-btn {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    padding: 10px;
    transition: color 0.3s;
    flex-shrink: 0;
}

.partners-nav-btn:hover {
    color: #006e54; /* 主题绿 */
}

/* Swiper 容器占据剩余空间并限制宽度 */
.partnerSwiper {
    flex: 1;
    width: 100%;
    overflow: hidden; /* 防止溢出 */
}

/* 自定义 slide 的宽度，让内容居中或适配图片 */
.partnerSwiper .swiper-slide {
    width: auto; /* 让 slide 宽度自适应图片 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-logo {
    width: 160px;
    height: 50px;
    object-fit: contain;
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* === 深色底栏 (Footer) === */
footer {
    background-color: #044b3a;
    color: #ffffff;
    padding: 60px 0 0 0;
    font-size: 14px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
    width: 25%;
    padding-right: 30px;
}

.footer-logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-logo {
    max-width: 200px;

}

.footer-logo-text {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #fff;
}

.footer-brand p {
    font-size: 12px;
    color: #a0c9bf;
    line-height: 1.8;
    letter-spacing: 0.5px;
}

.footer-links-area {
    flex: 1;
    display: flex;
    justify-content: space-around;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-col h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffffff;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    font-size: 13px;
    color: #a0c9bf;
    transition: all 0.3s ease;
}

.footer-col ul li a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.footer-qr-area {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-left: 20px;
}

.qr-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.qr-text {
    text-align: right;
}

.qr-text h4 {
    font-size: 15px;
    margin-bottom: 5px;
}

.qr-text p {
    font-size: 12px;
    color: #a0c9bf;
}

.qr-image {
    width: 80px;
    height: 80px;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
}

.footer-bottom {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #a0c9bf;
}

.footer-bottom-links a {
    margin-left: 15px;
    transition: color 0.3s;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}


/* === 留学申请 Hero 版块 === */
.page-hero {
    position: relative;
    height: 400px;
    /* 移除 background: url(...)，只保留位置配置 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}

.page-hero-content {
    position: relative;
    z-index: 10;
    padding-left: 20px;
}

.page-hero-title {
    font-size: 48px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.page-hero-subtitle {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
}

.page-hero-desc {
    font-size: 15px;
    color: #555;
}

/* === 悬浮图标导航栏 === */
.icon-nav-wrapper {
    position: relative;
    z-index: 20;
    margin-top: -50px;
    margin-bottom: 50px;
}

.icon-nav-container {
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    padding: 25px 40px;
}

.icon-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.icon-nav-item:hover {
    transform: translateY(-5px);
}

.icon-nav-item i {
    font-size: 28px;
    color: var(--primary-color);
}

.icon-nav-item span {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* === 热门申请路径网格 === */
.paths-section {
    margin-bottom: 60px;
}

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

.section-title {
    font-size: 24px;
    font-weight: bold;
    color: #111;
}

.section-more {
    font-size: 14px;
    color: var(--light-gray);
    transition: color 0.3s;
}

.section-more:hover {
    color: var(--primary-color);
}

.paths-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.path-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.path-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #eaf6f3;
}

.path-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.path-card-header i {
    font-size: 22px;
    color: var(--primary-color);
}

.path-card-header h3 {
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

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

.path-list li a {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--gray-text);
    transition: color 0.3s;
}

.path-list li a::before {
    content: "•";
    color: #ccc;
    font-size: 18px;
    margin-right: 8px;
    line-height: 1;
}

.path-list li a:hover {
    color: var(--primary-color);
    font-weight: 500;
}

.path-list li a:hover::before {
    color: var(--primary-color);
}

/* === 底部 CTA 横幅 === */
.cta-banner-wrapper {
    margin-bottom: 60px;
}

.cta-banner {
    background: var(--primary-color);
    border-radius: 12px;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 110, 84, 0.2);
}

.cta-text {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}

.cta-btn {
    background: #d4a017;
    color: #fff;
    padding: 12px 35px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.cta-btn:hover {
    background: #b58812;
}


        /* === 语言培训 Hero 版块 === */
        .page-hero {
            position: relative;
            height: 450px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            display: flex;
            align-items: flex-start;
            padding-top: 80px;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(0, 110, 84, 0.9) 0%, rgba(0, 110, 84, 0.6) 40%, transparent 100%);
        }

        .page-hero-content {
            position: relative;
            z-index: 10;
            padding-left: 20px;
            color: #fff;
        }


        .page-hero-subtitle {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .page-hero-desc {
            font-size: 16px;
            opacity: 0.9;
        }

        /* === 核心内容卡片 (悬浮于大图上方) === */
        .training-main-wrapper {
            position: relative;
            z-index: 20;
            margin-top: -100px;
            margin-bottom: 40px;
        }

        .training-card {
            background: #fff;
            border-radius: 12px 12px 0 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        /* 顶部 Tab 导航 */
        .training-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            background: #fafafa;
        }

        .training-tab {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 10px;
            cursor: pointer;
            color: #666;
            transition: all 0.3s;
            position: relative;
        }

        .training-tab i {
            font-size: 24px;
            margin-bottom: 8px;
        }

        .training-tab span {
            font-size: 14px;
            font-weight: bold;
        }

        .training-tab.active {
            color: var(--primary-color);
            background: #fff;
        }

        .training-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }

        /* 主体内容区域 */
        .training-content-body {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
            padding: 40px;
        }

        /* 左侧：攻略区 */
        .section-title-sm {
            font-size: 20px;
            font-weight: bold;
            color: #222;
            margin-bottom: 20px;
        }

        /* JLPT 等级选择 */
        .level-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .level-btn {
            background: #f5f5f5;
            border-radius: 8px;
            padding: 12px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 80px;
        }

        .level-btn strong {
            display: block;
            font-size: 18px;
            color: #333;
        }

        .level-btn span {
            font-size: 12px;
            color: #888;
        }

        .level-btn.active {
            background: var(--primary-color);
        }

        .level-btn.active strong,
        .level-btn.active span {
            color: #fff;
        }

        /* 底部信息区块 */
        .info-split-layout {
            display: flex;
            gap: 30px;
        }

        .quick-links {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .quick-link-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            color: #444;
            padding: 12px 15px;
            background: #f9f9f9;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .quick-link-item:hover {
            background: #eef6f4;
            color: var(--primary-color);
        }

        .quick-link-item i {
            color: var(--primary-color);
            font-size: 18px;
        }

        .eju-box {
            flex: 1.5;
            background: #f4f8f7;
            border-radius: 12px;
            padding: 20px;
        }

        .eju-box h4 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #222;
        }

        .eju-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .eju-grid span {
            font-size: 14px;
            color: #555;
            display: flex;
            align-items: center;
        }
        
        .eju-grid span::before {
            content: "•";
            color: var(--primary-color);
            margin-right: 8px;
            font-size: 18px;
        }

        /* 右侧：课程推荐 */
        .course-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .course-card {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 10px;
            transition: all 0.3s;
        }

        .course-card:hover {
            border-color: var(--primary-color);
            box-shadow: 0 5px 15px rgba(0, 110, 84, 0.1);
        }

        .course-icon {
            width: 40px;
            height: 40px;
            background: #eef6f4;
            color: var(--primary-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
        }

        .course-info {
            flex: 1;
        }

        .course-info h4 {
            font-size: 15px;
            color: #222;
            margin-bottom: 4px;
        }

        .course-info p {
            font-size: 12px;
            color: #888;
        }

        .course-price {
            font-size: 16px;
            font-weight: bold;
            color: #d4a017;
        }

        .btn-view-more {
            display: block;
            width: 100%;
            padding: 12px;
            background: var(--primary-color);
            color: #fff;
            text-align: center;
            border-radius: 8px;
            font-weight: bold;
            margin-top: 10px;
            text-decoration: none;
            transition: background 0.3s;
        }

        .btn-view-more:hover {
            background: #005542;
        }

        /* 资源中心横幅 */
        .resource-bar {
            background: #fff;
            border-top: 1px dashed #eee;
            padding: 25px 40px;
            display: flex;
            align-items: center;
            border-radius: 0 0 12px 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            margin-top: -40px; /* 紧贴上方卡片 */
        }

        .resource-bar h4 {
            font-size: 16px;
            color: #222;
            margin-right: 30px;
            white-space: nowrap;
        }

        .resource-tags {
            display: flex;
            gap: 20px;
            flex: 1;
            flex-wrap: wrap;
        }

        .resource-tag {
            font-size: 14px;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }

        .resource-link {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
        
        .resource-link:hover {
            color: var(--primary-color);
        }

        /* === 底部 CTA 横幅 === */
        .cta-banner-wrapper {
            margin-bottom: 60px;
            margin-top: 30px;
        }

        .cta-banner {
            background: var(--primary-color);
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 10px 30px rgba(0, 110, 84, 0.2);
        }

        .cta-text {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            letter-spacing: 1px;
        }

        .cta-btn {
            background: #d4a017;
            color: #fff;
            padding: 12px 35px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }

        .cta-btn:hover {
            background: #b58812;
        }


        /* 复用 page-hero 基础结构，调整高度适配就职页面设计 */
        .page-hero {
            position: relative;
            height: 400px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            display: flex;
            align-items: center;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(0, 34, 46, 0.8) 0%, rgba(0, 34, 46, 0.4) 50%, transparent 100%);
        }

        .page-hero-content {
            position: relative;
            z-index: 10;
            padding-left: 20px;
            color: #fff;
        }

        .page-hero-title {
            font-size: 48px;
            font-weight: 900;
            margin-bottom: 15px;
            letter-spacing: 2px;
        }

        .page-hero-subtitle {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .page-hero-desc {
            font-size: 15px;
            opacity: 0.9;
        }

        /* 沿用悬浮导航，增加均分宽度 */
        .icon-nav-wrapper {
            position: relative;
            z-index: 20;
            margin-top: -50px;
            margin-bottom: 50px;
        }
        
        .icon-nav-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            display: flex;
            justify-content: space-around; /* 均分7个图标 */
            padding: 25px 20px;
        }

        .icon-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 10px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .icon-nav-item:hover {
            transform: translateY(-5px);
        }

        .icon-nav-item i {
            font-size: 28px;
            color: var(--primary-color);
        }

        .icon-nav-item span {
            font-size: 13px;
            font-weight: bold;
            color: #333;
        }

        /* 沿用热门路径卡片网格，修改为3列布局以匹配设计图 */
        .paths-section { margin-bottom: 60px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .section-title { font-size: 24px; font-weight: bold; color: #111; }
        
        .paths-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 调整为3列 */
            gap: 20px;
        }

        /* 最后一个元素横跨三列（国内就职） */
        .paths-grid .path-card:last-child {
            grid-column: 1 / -1; 
            display: grid;
            grid-template-columns: 1fr 3fr;
            align-items: start;
        }
        
        .paths-grid .path-card:last-child .path-list {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 5px;
        }

        .path-card {
            background: #fff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .path-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
            border-color: #eaf6f3;
        }

        .path-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .path-card-header i { font-size: 22px; color: var(--primary-color); }
        .path-card-header h3 { font-size: 18px; font-weight: bold; color: #222; }

        .path-list { display: flex; flex-direction: column; gap: 12px; }
        .path-list li a { display: flex; align-items: center; font-size: 14px; color: var(--gray-text); transition: color 0.3s; }
        .path-list li a::before { content: "•"; color: #ccc; font-size: 18px; margin-right: 8px; line-height: 1; }
        .path-list li a:hover { color: var(--primary-color); font-weight: 500; }
        .path-list li a:hover::before { color: var(--primary-color); }

        /* CTA 横幅沿用 */
        .cta-banner-wrapper { margin-bottom: 60px; }
        .cta-banner {
            background: var(--primary-color);
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 10px 30px rgba(0, 110, 84, 0.2);
        }
        .cta-text { font-size: 20px; font-weight: bold; color: #fff; }
        .cta-btn {
            background: #d4a017;
            color: #fff;
            padding: 12px 35px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }
        .cta-btn:hover { background: #b58812; }

        /* === Hero 版块 (沿用并调整对齐) === */
        .page-hero {
            position: relative;
            height: 400px;
            background-repeat: no-repeat;
            background-position: center right;
            background-size: cover;
            display: flex;
            align-items: center;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(0, 75, 58, 1) 0%, rgba(0, 110, 84, 0.85) 45%, transparent 100%);
        }

        .page-hero-content {
            position: relative;
            z-index: 10;
            padding-left: 20px;
            color: #fff;
            max-width: 600px;
        }

        .page-hero-title {
            font-size: 48px;
            font-weight: 900;
            margin-bottom: 15px;
            letter-spacing: 2px;
        }

        .page-hero-subtitle {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .page-hero-desc {
            font-size: 15px;
            opacity: 0.9;
        }

        /* === 热门专题 (图标网格) === */
        .topics-section {
            margin-top: -40px; /* 让卡片稍微上浮重叠在Banner上 */
            position: relative;
            z-index: 20;
            margin-bottom: 60px;
        }

        .topics-section .section-title {
            font-size: 24px;
            font-weight: bold;
            color: #111;
            margin-bottom: 25px;
            padding-left: 10px;
        }

        .topics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .topic-card {
            background: #fff;
            border-radius: 12px;
            padding: 35px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid transparent;
            cursor: pointer;
        }

        .topic-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            border-color: var(--primary-color);
        }

        .topic-icon {
            width: 50px;
            height: 50px;
            background: #eef6f4;
            color: var(--primary-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }

        .topic-card:hover .topic-icon {
            background: var(--primary-color);
            color: #fff;
        }

        .topic-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        /* === 文章与高频问题分栏 === */
        .article-faq-section {
            margin-bottom: 60px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }

        .box-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .box-title {
            font-size: 20px;
            font-weight: bold;
            color: #111;
        }

        .box-more {
            font-size: 14px;
            color: var(--light-gray);
            transition: color 0.3s;
        }

        .box-more:hover {
            color: var(--primary-color);
        }

        /* 左侧文章列表 */
        .article-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .article-list li {
            border-bottom: 1px dashed #eee;
            padding-bottom: 15px;
        }

        .article-list li:last-child {
            border-bottom: none;
        }

        .article-list li a {
            display: flex;
            align-items: center;
            font-size: 15px;
            color: #444;
            transition: color 0.3s;
        }

       

        .article-list li a:hover {
            color: var(--primary-color);
            font-weight: 500;
        }

        /* 右侧高频问题 */
        .faq-box {
            background: #f4f9f7;
            border-radius: 12px;
            padding: 25px;
            display: flex;
            flex-direction: column;
        }

        .faq-box .box-header {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 15px;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            flex: 1;
        }

        .faq-list li a {
            display: flex;
            align-items: flex-start;
            font-size: 14px;
            color: #444;
            line-height: 1.5;
            transition: color 0.3s;
        }

        .faq-list li a i {
            color: var(--primary-color);
            margin-right: 8px;
            margin-top: 3px;
            font-size: 12px;
        }

        .faq-list li a:hover {
            color: var(--primary-color);
            font-weight: bold;
        }

        .btn-faq-more {
            background: var(--primary-color);
            color: #fff;
            text-align: center;
            padding: 12px;
            border-radius: 6px;
            font-weight: bold;
            margin-top: 20px;
            display: block;
            transition: background 0.3s;
        }

        .btn-faq-more:hover {
            background: #005642;
        }

        /* CTA 横幅沿用 */
        .cta-banner-wrapper { margin-bottom: 60px; }
        .cta-banner {
            background: var(--primary-color);
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 10px 30px rgba(0, 110, 84, 0.2);
        }
        .cta-text { font-size: 20px; font-weight: bold; color: #fff; }
        .cta-btn {
            background: #d4a017;
            color: #fff;
            padding: 12px 35px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }
        .cta-btn:hover { background: #b58812; }


        /* === 知识库 Hero 版块 (带搜索) === */
        .kb-hero {
            background: linear-gradient(135deg, #eef2f5 0%, #e2e8f0 100%);
            padding: 70px 0 100px 0; /* 底部留白给悬浮卡片 */
            position: relative;
        }

        .kb-hero-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .kb-hero-text {
            flex: 1;
        }

        .kb-hero-text h1 {
            font-size: 42px;
            font-weight: 900;
            color: #222;
            margin-bottom: 12px;
            letter-spacing: 2px;
        }

        .kb-hero-text p {
            font-size: 16px;
            color: #555;
            font-weight: 500;
        }

        .kb-search-area {
            flex: 1.2;
            max-width: 650px;
        }

        .kb-search-bar {
            display: flex;
            background: #fff;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            height: 54px;
        }

        .kb-search-bar i {
            line-height: 54px;
            padding-left: 25px;
            color: #aaa;
            font-size: 16px;
        }

        .kb-search-bar input {
            flex: 1;
            border: none;
            padding: 0 15px;
            outline: none;
            font-size: 15px;
            color: #333;
        }

        .kb-search-bar input::placeholder {
            color: #999;
        }

        .kb-search-bar button {
            background: var(--primary-color);
            color: #fff;
            border: none;
            padding: 0 40px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }

        .kb-search-bar button:hover {
            background: #005642;
        }

        .kb-hot-searches {
            font-size: 13px;
            color: #666;
            margin-top: 15px;
            padding-left: 20px;
        }

        .kb-hot-searches span {
            margin-left: 10px;
            color: #888;
            cursor: pointer;
            transition: color 0.3s;
        }

        .kb-hot-searches span:hover {
            color: var(--primary-color);
        }

        /* === 图标导航卡片 === */
        .kb-nav-wrapper {
            margin-top: -50px;
            position: relative;
            z-index: 10;
        }

        .kb-nav-container {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            display: flex;
            justify-content: space-around;
            padding: 35px 20px;
        }

        .kb-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .kb-nav-item:hover {
            transform: translateY(-5px);
        }

        .kb-nav-item .icon-box {
            width: 50px;
            height: 50px;
            border: 2px solid var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--primary-color);
            transition: all 0.3s;
        }

        .kb-nav-item:hover .icon-box {
            background: var(--primary-color);
            color: #fff;
        }

        .kb-nav-item span {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }

        /* === 院校库内容区 === */
        .kb-section {
            padding: 60px 0;
            background: #fdfdfd;
        }

        .kb-section-header {
            display: flex;
            align-items: baseline;
            gap: 40px;
            margin-bottom: 35px;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 15px;
        }

        .kb-section-title {
            font-size: 26px;
            font-weight: bold;
            color: #111;
            margin: 0;
        }

        .kb-tabs {
            display: flex;
            gap: 25px;
        }

        .kb-tab {
            font-size: 16px;
            color: #666;
            cursor: pointer;
            padding-bottom: 16px;
            position: relative;
            margin-bottom: -16px; /* 贴紧边框 */
            transition: color 0.3s;
        }

        .kb-tab:hover {
            color: var(--primary-color);
        }

        .kb-tab.active {
            color: var(--primary-color);
            font-weight: bold;
        }

        .kb-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary-color);
            border-radius: 2px;
        }

        /* 院校网格 */
        .univ-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-bottom: 40px;
        }

        /* === 新增：Tab 内容切换控制与动画 === */
            .univ-grid-wrapper {
                display: none;
                animation: fadeInTab 0.4s ease-in-out;
            }

            .univ-grid-wrapper.active {
                display: block;
            }

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

        .univ-card {
            background: #fff;
            border-radius: 12px;
            padding: 30px 20px;
            border: 1px solid #f0f0f0;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
        }

        .univ-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
            border-color: #eaf6f3;
        }

        .univ-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        .univ-logo-img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: contain;
            background: #fff;
            border: 1px solid #f5f5f5;
        }

        .univ-name-cn {
            font-size: 18px;
            font-weight: bold;
            color: #222;
            margin-bottom: 4px;
        }

        .univ-name-en {
            font-size: 12px;
            color: #888;
            line-height: 1.2;
        }

        .univ-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .univ-tag {
            font-size: 12px;
            background: #f7f7f7;
            color: #666;
            padding: 5px 12px;
            border-radius: 15px;
        }

        .univ-card-footer a {
            font-size: 14px;
            color: var(--primary-color);
            font-weight: 500;
            transition: opacity 0.3s;
        }

        .univ-card-footer a:hover {
            opacity: 0.8;
        }

        .kb-view-more {
            text-align: center;
            margin-top: 10px;
        }

        .kb-view-more a {
            font-size: 15px;
            color: var(--primary-color);
            font-weight: bold;
            transition: opacity 0.3s;
        }

        .kb-view-more a:hover {
            opacity: 0.8;
        }


        /* === 页面整体背景 === */
        .tool-page-wrapper {
            background-color: #f4f7f6; /* 沿用整体灰底 */
            padding: 50px 0 80px 0;
            min-height: calc(100vh - 90px);
        }

        /* === 头部标题区域 === */
        .tool-header {
            margin-bottom: 35px;
        }

        .tool-header h1 {
            font-size: 32px;
            font-weight: bold;
            color: #111;
            margin-bottom: 10px;
        }

        .tool-header p {
            font-size: 16px;
            color: #555;
        }

        /* === 左右分栏布局 === */
        .tool-layout {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 25px;
            align-items: start;
        }

        /* === 左侧：工具网格 === */
        .tool-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 25px;
        }

        .tool-card {
            background: #fff;
            border-radius: 12px;
            padding: 30px 20px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
            transition: all 0.3s;
            border: 1px solid transparent;
            display: flex;
            flex-direction: column;
        }

        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            border-color: #eaf6f3;
        }

        .tool-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .tool-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        /* 为不同图标定制柔和背景色 */
        .icon-bg-1 { background: #eaf6f3; color: #006e54; }
        .icon-bg-2 { background: #edf2fc; color: #4a7ab5; }
        .icon-bg-3 { background: #eff7ed; color: #4b8d5a; }
        .icon-bg-4 { background: #fdf3e8; color: #d68922; }
        .icon-bg-5 { background: #fdf5e6; color: #d4a017; }
        .icon-bg-6 { background: #faeaeb; color: #c0392b; }

        .tool-title {
            font-size: 18px;
            font-weight: bold;
            color: #222;
        }

        .tool-desc {
            font-size: 13px;
            color: #888;
            line-height: 1.6;
            margin-bottom: 25px;
            flex-grow: 1;
        }

        .tool-link {
            font-size: 14px;
            color: var(--primary-color);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: opacity 0.3s;
        }

        .tool-link:hover {
            opacity: 0.8;
        }

        /* === 左侧底部：AI 智能规划助手横幅 === */
        .tool-ai-banner {
            background: url('https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1600&auto=format&fit=crop') center center / cover no-repeat;
            border-radius: 12px;
            padding: 35px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 110, 84, 0.2);
        }

        .tool-ai-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 86, 66, 0.95) 0%, rgba(0, 58, 44, 0.8) 100%);
            z-index: 1;
        }

        .ai-banner-content {
            position: relative;
            z-index: 2;
            color: #fff;
        }

        .ai-banner-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 8px;
            letter-spacing: 1px;
        }

        .ai-banner-desc {
            font-size: 14px;
            opacity: 0.9;
        }

        .ai-banner-btn {
            position: relative;
            z-index: 2;
            background: #fff;
            color: var(--primary-color);
            padding: 12px 30px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 15px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        .ai-banner-btn:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* === 右侧：侧边栏 === */
        .tool-sidebar {
            background: #fff;
            border-radius: 12px;
            padding: 30px 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
            height: fit-content;
        }

        .sidebar-title {
            font-size: 18px;
            font-weight: bold;
            color: #111;
            margin-bottom: 25px;
        }

        .sidebar-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-list li {
            border-bottom: 1px solid #f4f4f4;
        }

        .sidebar-list li:last-child {
            border-bottom: none;
        }

        .sidebar-list li a {
            display: flex;
            align-items: center;
            padding: 16px 0;
            font-size: 14px;
            color: #444;
            transition: all 0.3s;
        }

        .sidebar-list li a i {
            font-size: 12px;
            color: #ccc;
            margin-right: 12px;
            transition: transform 0.3s;
        }

        .sidebar-list li a:hover {
            color: var(--primary-color);
            font-weight: 500;
        }

        .sidebar-list li a:hover i {
            color: var(--primary-color);
            transform: translateX(4px);
        }


        /* === 关于我们 Hero 版块 === */
        .about-hero {
            position: relative;
            height: 450px;
            background-color: #f4f7f6;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .about-hero-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 60%;
            height: 100%;
            background-image: url('https://images.unsplash.com/photo-1573164713988-8665fc963095?q=80&w=1600&auto=format&fit=crop'); /* 占位团队图 */
            background-size: cover;
            background-position: center top;
            z-index: 1;
        }

        /* 渐变遮罩，使左侧文字清晰，右侧平滑过渡 */
        .about-hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #f4f7f6 0%, rgba(244, 247, 246, 0.8) 40%, transparent 100%);
        }

        .about-hero-content {
            position: relative;
            z-index: 10;
            max-width: 500px;
        }

        .about-hero-content h1 {
            font-size: 48px;
            font-weight: 900;
            color: #111;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        .about-hero-content p {
            font-size: 18px;
            color: #555;
            line-height: 1.6;
        }


        /* === 我们的服务 & 了解更多 (通用网格) === */
        .feature-section {
            padding: 20px 0 60px 0;
        }

        .feature-title {
            font-size: 22px;
            font-weight: bold;
            color: #222;
            margin-bottom: 30px;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 20px;
            margin-bottom: 50px;
        }

        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 15px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .feature-item:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 32px;
            color: var(--primary-color);
            transition: opacity 0.3s;
        }

        .feature-item:hover .feature-icon {
            opacity: 0.8;
        }

        .feature-text {
            font-size: 15px;
            font-weight: bold;
            color: #333;
        }

        /* 了解更多文本链接样式 */
        .link-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 20px;
        }

        .text-link-item {
            text-align: center;
            font-size: 15px;
            color: #555;
            padding: 15px 0;
            background: #fdfdfd;
            border-radius: 8px;
            transition: all 0.3s;
            cursor: pointer;
        }

        .text-link-item:hover {
            background: #f0f0f0;
            color: var(--primary-color);
            font-weight: bold;
        }


        /* 定义主色调 */
        :root {
            --primary-color: #006e54;
        }

        /* ================= 页面通用与 Hero ================= */
        .about-hero {
            position: relative;
            height: 450px;
            background-color: #00222e;
            background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1600&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
        }

        .about-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
        }

        .about-hero-content {
            position: relative;
            z-index: 10;
            max-width: 600px;
        }

        .about-hero-content h1 {
            font-size: 48px;
            font-weight: 900;
            color: #ffffff; 
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
        }

        .about-hero-content p {
            font-size: 18px;
            color: #ffffff; 
            opacity: 0.95;
            line-height: 1.6;
            text-shadow: 0 1px 8px rgba(0,0,0,0.5); 
        }

        /* ================= 吸顶次级导航 ================= */
        .about-subnav-wrapper {
            position: sticky;
            top: 0;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(8px); 
            z-index: 100;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s;
        }

        .about-subnav {
            display: flex;
            justify-content: flex-start;
            gap: 15px; 
            padding: 16px 8%;
            list-style: none;
            margin: 0;
            overflow-x: auto;
            white-space: nowrap;
        }

        .about-subnav li a {
            font-size: 16px;
            color: #555;
            font-weight: 600;
            padding: 8px 24px;
            border-radius: 30px; 
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .about-subnav li a:hover {
            color: var(--primary-color);
            background: #f4f9f7; 
        }

        .about-subnav li a.active {
            color: #fff;
            background: var(--primary-color);
            box-shadow: 0 4px 12px rgba(0, 110, 84, 0.25); 
        }

        /* ================= 通用版块样式 ================= */
        .section-block {
            padding: 80px 0;
            scroll-margin-top: 75px; 
        }
        
        .section-block.bg-light { background: #f9fbfc; }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 40px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .section-header h2 {
            font-size: 32px;
            font-weight: bold;
            color: #111;
            margin: 0;
        }

        .section-header p {
            font-size: 16px;
            color: #666;
            margin: 0;
        }

        .section-header.center-style {
            display: block;
            text-align: center;
            border-bottom: none;
            margin-bottom: 50px;
        }
        .section-header.center-style h2 { margin-bottom: 15px; }

        /* ================= 1. 公司介绍 ================= */
        .company-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: start; 
        }

        .company-slogan {
            font-size: 24px;
            font-weight: bold;
            color: #111;
            margin-bottom: 30px;
            position: relative;
            padding-left: 18px;
            line-height: 1.3;
        }

        .company-slogan::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 5px;
            background: var(--primary-color);
            border-radius: 3px;
        }

        .company-slogan span {
            display: block;
            font-size: 13px;
            color: #999;
            font-weight: normal;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 8px;
        }

        .company-text p {
            font-size: 16px;
            color: #444;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .company-img img {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

        /* ================= Swiper 通用样式 ================= */
        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background: #ccc;
            opacity: 0.6;
            transition: all 0.3s;
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: var(--primary-color);
            width: 25px;
            border-radius: 5px;
        }

        /* ================= 2. 团队介绍 ================= */
        .team-swiper-container {
            padding-bottom: 60px; 
        }
        .team-swiper-container .swiper-slide { height: auto; }

        .team-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
            transition: transform 0.3s;
            height: 100%; 
            display: flex;
            flex-direction: column;
        }
        .team-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }
        .team-img { height: 260px; background: #eee; overflow: hidden; }
        .team-img img { width: 100%; height: 100%; object-fit: cover; }
        .team-info { padding: 25px 20px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
        .team-name { font-size: 20px; font-weight: bold; color: #222; margin-bottom: 5px; }
        .team-title { font-size: 14px; color: var(--primary-color); font-weight: 500; margin-bottom: 15px; }
        .team-desc { font-size: 13px; color: #666; line-height: 1.5; text-align: justify; }

        /* ================= 3. 服务介绍 ================= */
        .service-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .service-card {
            background: #fff;
            padding: 40px 30px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid #eee;
            transition: all 0.3s;
        }

        .service-card:hover { border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0, 110, 84, 0.08); }
        .service-icon { font-size: 40px; color: var(--primary-color); margin-bottom: 20px; }
        .service-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #111; }
        .service-desc { font-size: 14px; color: #666; line-height: 1.6; }

        /* ================= 4. 成功案例 ================= */
        .cases-swiper-container {
            padding-bottom: 60px;
        }
        .cases-swiper-container .swiper-slide { height: auto; }

        .case-card {
            background: #fff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s;
        }
        
        .case-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }

        .case-quote-icon { position: absolute; top: 20px; right: 20px; font-size: 40px; color: #f4f7f6; z-index: 1; }
        
        .case-content { 
            position: relative; 
            z-index: 2; 
            font-size: 15px; 
            color: #555; 
            line-height: 1.6; 
            margin-bottom: 25px; 
            font-style: italic;
            flex-grow: 1;
        }
        
        .case-student { display: flex; align-items: center; gap: 15px; }
        .case-avatar { width: 50px; height: 50px; border-radius: 50%; background: #ddd; overflow: hidden; flex-shrink: 0; }
        .case-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .case-meta h4 { font-size: 16px; font-weight: bold; color: #222; margin-bottom: 3px; }
        .case-meta span { font-size: 13px; color: var(--primary-color); font-weight: 500; }

        /* ================= 5. 联系方式 ================= */
        .contact-layout {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 40px;
            background: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .contact-info-list { display: flex; flex-direction: column; gap: 30px; justify-content: center; }
        .contact-item { display: flex; align-items: flex-start; gap: 20px; }
        .contact-icon { width: 50px; height: 50px; border-radius: 50%; background: #eaf6f3; color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .contact-details h4 { font-size: 18px; font-weight: bold; color: #111; margin-bottom: 8px; }
        .contact-details p { font-size: 15px; color: #666; line-height: 1.5; }
        .contact-map { width: 100%; height: 350px; background: #eee; border-radius: 12px; overflow: hidden; }

        /* ================= 6. 加入我们 ================= */
        .join-banner {
            background: linear-gradient(135deg, var(--primary-color) 0%, #004b3a 100%);
            border-radius: 12px;
            padding: 60px 40px;
            text-align: center;
            color: #fff;
            box-shadow: 0 15px 40px rgba(0, 110, 84, 0.3);
        }

        .join-banner h2 { font-size: 32px; font-weight: bold; margin-bottom: 20px; }
        .join-banner p { font-size: 16px; opacity: 0.9; margin-bottom: 35px; max-width: 600px; margin-left: auto; margin-right: auto; }
        .join-btn { background: #d4a017; color: #fff; padding: 15px 40px; border-radius: 30px; font-size: 18px; font-weight: bold; border: none; cursor: pointer; transition: background 0.3s; }
        .join-btn:hover { background: #b58812; }

  /* ========================================================================= */
/* === 新增：日本本科专属样式 (Sub-Page Styles) === */
/* ========================================================================= */

/* 面包屑导航 */
.breadcrumb-wrapper { background-color: var(--bg-white); padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.breadcrumb { font-size: 13px; color: var(--light-gray); }
.breadcrumb a { transition: 0.3s; }
.breadcrumb a:hover { color: var(--primary-color); }
.breadcrumb span { color: var(--gray-text); font-weight: 500; }

/* Hero 区域及图片融合 */
.sub-hero { position: relative; background: var(--bg-white); padding: 0px 0 100px 0; overflow: hidden; }
.sub-hero-inner { display: flex; align-items: center; justify-content: space-between; }
.sub-hero-content { width: 45%; position: relative; z-index: 2; padding-left: 20px;}
.sub-hero-title { font-size: 46px; font-weight: 900; color: #111; margin-bottom: 15px; letter-spacing: 1px;}
.sub-hero-subtitle { font-size: 18px; color: var(--gray-text); margin-bottom: 35px; font-weight: bold; }

.hero-check-list { display: flex; flex-direction: column; gap: 18px; }
.hero-check-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: bold; color: #222; }
.hero-check-list li i { color: var(--primary-color); font-size: 20px; }

/* 使用渐变遮罩融合背景图（这里放了一张unsplash日本风景替代原画，您可以换成本地路径） */
.sub-hero-bg { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 65%; 
    height: 100%; 
    background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 35%), url('https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?q=80&w=1200&auto=format&fit=crop') no-repeat center center; 
    background-size: cover;
    z-index: 1;
}

/* 悬浮特色横幅 (上浮覆盖) */
.features-bar-wrapper { position: relative; z-index: 10; margin-top: -50px; margin-bottom: 50px; }
.features-bar { background: var(--bg-white); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); display: flex; justify-content: space-around; padding: 40px 20px; }
.feature-box { display: flex; flex-direction: column; align-items: center; text-align: center; width: 22%; }
.feature-box-icon { font-size: 36px; color: var(--primary-color); margin-bottom: 15px; }
.feature-box h4 { font-size: 17px; font-weight: bold; color: #222; margin-bottom: 8px; }
.feature-box p { font-size: 13px; color: var(--light-gray); }

/* 主体双栏布局 */
.page-content-wrapper { padding-bottom: 80px; }
.page-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }

/* 左侧：文章列表区 */
.main-col { display: flex; flex-direction: column; gap: 40px; }
.main-col .section-block { padding: 0; }
.main-col .section-block h3 { font-size: 20px; font-weight: bold; color: #111; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; }

.article-list { display: flex; flex-direction: column; gap: 10px; }
.article-list li { display: flex; align-items: center; border-bottom: 1px dashed #eaeaea; padding-bottom: 18px; padding-top: 8px;}
.article-list li::before { content: "•"; color: var(--light-gray); font-size: 24px; margin-right: 12px; line-height: 1; }
.article-list li a { font-size: 15px; color: #444; transition: 0.3s; flex: 1; }
.article-list li a:hover { color: var(--primary-color); font-weight: bold; }

.more-link-container { text-align: right; margin-top: 15px; }
.more-link { display: inline-block; font-size: 14px; color: var(--primary-color); font-weight: bold; transition: 0.3s; }
.more-link:hover { opacity: 0.8; }
.more-link.right-align { float: right; margin-top: 10px; }

/* 右侧：成功案例微件 */
.sidebar-col { display: flex; flex-direction: column; }
.success-case-widget { background: #fff; border-radius: 12px; padding: 30px; }
.success-case-widget h3 { font-size: 18px; font-weight: bold; color: #111; margin-bottom: 25px; }

.case-profile { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.case-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.case-info-text h4 { font-size: 15px; color: #222; margin-bottom: 5px; font-weight: bold;}
.case-info-text p { font-size: 13px; color: var(--gray-text); }

.case-scores { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; border-top: 1px dashed #dcdcdc; padding-top: 20px;}
.case-scores div { font-size: 14px; color: #444; }

/* ========================================================================= */
/* === 新增：分页与平行标题栏 专属样式 === */
/* ========================================================================= */

/* 标题栏（支持标题与“查看更多”平行排列） */
.section-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* 覆盖原有的 h3 样式，移除它自带的边框和内边距，交由 section-title-bar 处理 */
.main-col .section-block h3, 
.section-title-bar h3 {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 平行的查看更多链接样式 */
.section-title-bar .more-link {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: bold;
    transition: opacity 0.3s;
    margin-top: 0;
}

.section-title-bar .more-link:hover {
    opacity: 0.8;
}

/* 隐藏 WordPress 自动生成的屏幕阅读器标题 */
.pagination .screen-reader-text {
    display: none;
}

/* 将外层边距保留 */
.pagination {
    margin-top: 30px;
}

/* 将 flex 布局应用到 WordPress 真正的页码容器上 */
.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* 防止在手机端过长挤压 */
}

/* 统一设置所有的页码框（包括 a 链接和 span 当前页） */
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #555;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-decoration: none;
}

/* 鼠标悬停时的效果 (只针对可点击的 a 链接) */
.pagination a.page-numbers:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 当前高亮的页码 (WordPress 默认类名是 .current) */
.pagination .current {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: bold;
}

/* 省略号样式 (WordPress 默认类名是 .dots) */
.pagination .dots {
    border: none;
    background: transparent;
    color: #999;
    letter-spacing: 1px;
    padding: 0 5px;
}

/* ========================================================================= */
/* === 新增：资讯详情页 (Article Detail Page) 专属样式 === */
/* ========================================================================= */

/* 限制文章容器的阅读宽度，居中显示 */
.article-container {
    margin: 30px auto 80px auto;
    padding: 50px;
    background-color: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.02);
}

.article-header {
    margin-bottom: 30px;
}

.article-title {
    font-size: 32px;
    font-weight: bold;
    color: #111;
    line-height: 1.4;
    margin-bottom: 20px;
}

.article-meta {
    display: flex;
    gap: 25px;
    font-size: 14px;
    color: var(--light-gray);
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 顶部 Banner 大图 */
.article-banner {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 35px;
}

.article-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 浅绿色摘要框 */
.article-summary {
    background-color: var(--hover-bg);
    padding: 25px 35px;
    border-radius: 12px;
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 50px;
}

/* 正文排版 */
.article-content {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 60px;
}

.article-content h3 {
    font-size: 22px;
    font-weight: bold;
    color: #111;
    margin-top: 45px;
    margin-bottom: 20px;
}

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

.article-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.article-content ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}

.article-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--primary-color);
    font-size: 20px;
}

/* 相关资讯推荐版块 */
.article-related {
    background-color: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 35px 40px;
}

.related-title {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    margin-bottom: 25px;
}

.related-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.related-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-list li a {
    font-size: 15px;
    color: #444;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}

.related-list li a::before {
    content: "•";
    color: var(--primary-color);
    font-size: 20px;
    margin-right: 12px;
    line-height: 1;
}

.related-list li a:hover {
    color: var(--primary-color);
    font-weight: bold;
}

.related-list li .date {
    font-size: 14px;
    color: var(--light-gray);
}

/* ========================================================================= */
/* === 通用列表/产品展示页样式 (通用子栏目) === */
/* ========================================================================= */

/* 栏目头部区块 */
.category-header {
    background-color: var(--bg-white);
    padding: 50px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 40px;
    text-align: center;
}

.category-title {
    font-size: 32px;
    font-weight: bold;
    color: #111;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.category-desc {
    font-size: 15px;
    color: var(--gray-text);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.list-page-wrapper {
    margin-bottom: 80px;
}

/* 分类筛选标签 */
.list-filter {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.list-filter a {
    padding: 8px 24px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    font-size: 15px;
    color: #555;
    transition: all 0.3s;
}

.list-filter a:hover,
.list-filter a.active {
    background-color: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}

/* 网格列表布局 (1600px 宽屏下 4 列最美观) */
.list-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px;
}

/* 图文卡片样式 */
.list-card {
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
}

.list-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: #eaf6f3;
}

.card-img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #f4f4f4;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.list-card:hover .card-img-wrap img {
    transform: scale(1.05); /* 鼠标悬浮图片轻微放大 */
}

/* 卡片左上角角标 */
.card-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 110, 84, 0.9);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
}

.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
    line-height: 1.4;
    /* 限制2行，超出省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-desc {
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
    /* 限制3行，超出省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    font-size: 13px;
    color: var(--light-gray);
}

.card-action {
    color: var(--primary-color);
    font-weight: bold;
    transition: 0.3s;
}

.list-card:hover .card-action {
    color: #004d3b;
}

/* ========================================================================= */
/* === 通用图文列表页 (资讯/业务通用模板) === */
/* ========================================================================= */

/* 简易栏目头部 */
.generic-page-header {
    background-color: var(--bg-white);
    padding: 30px 0 40px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 40px;
}
.generic-page-header .breadcrumb { margin-bottom: 15px; }
.generic-page-title {
    font-size: 32px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
}
.generic-page-desc {
    font-size: 15px;
    color: var(--gray-text);
}

/* 主体双栏布局 */
.generic-list-layout {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 左侧列表占3，右侧侧边栏占1 */
    gap: 40px;
    margin-bottom: 80px;
    align-items: start;
}

/* === 左侧：图文列表 === */
.article-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.article-list-item {
    display: flex;
    background: var(--bg-white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.3s;
    border: 1px solid transparent;
    gap: 25px;
}

.article-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border-color: #eaf6f3;
}

.item-img {
    width: 280px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.article-list-item:hover .item-img img {
    transform: scale(1.05);
}

.item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.item-info h3 {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s;
}
.article-list-item:hover .item-info h3 {
    color: var(--primary-color);
}

.item-info p {
    font-size: 14px;
    color: var(--gray-text);
    line-height: 1.6;
    margin-bottom: 20px;
    /* 限制三行截断 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.item-meta {
    display: flex;
    gap: 25px;
    font-size: 13px;
    color: var(--light-gray);
    border-top: 1px dashed #eee;
    padding-top: 15px;
}
.item-meta span { display: flex; align-items: center; gap: 5px; }

/* === 右侧：侧边栏 === */
.generic-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-widget {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.widget-title {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.widget-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary-color);
}

/* 侧边栏同级导航 */
.sidebar-nav {
    display: flex;
    flex-direction: column;
}

.sidebar-nav li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-size: 15px;
    color: #444;
    border-bottom: 1px dashed #f0f0f0;
    transition: all 0.3s;
}
.sidebar-nav li:last-child a { border-bottom: none; padding-bottom: 0; }
.sidebar-nav li a i { font-size: 12px; color: #ccc; transition: transform 0.3s; }

.sidebar-nav li:hover a,
.sidebar-nav li.active a {
    color: var(--primary-color);
    font-weight: bold;
}
.sidebar-nav li:hover a i,
.sidebar-nav li.active a i {
    color: var(--primary-color);
    transform: translateX(4px);
}

/* 侧边栏咨询模块 */
.consult-box p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}
.consult-btn {
    width: 100%;
    background: var(--primary-color);
    color: #fff;
    padding: 12px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 15px;
}
.consult-btn:hover { background: #004d3b; }


/* ========================================================================= */
/* === 通用知识库/数据检索页 (院校/专业/教授/案例共用模板) === */
/* ========================================================================= */

.kb-content-wrapper {
    margin-bottom: 80px;
}

/* 顶部搜索横幅 */
.kb-page-hero {
    background: linear-gradient(135deg, #eef6f4 0%, #e2efe9 100%);
    padding: 60px 0;
    margin-bottom: 40px;
}

.kb-page-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.kb-page-hero-text {
    flex: 1;
}

.kb-page-hero-text h1 {
    font-size: 36px;
    font-weight: 900;
    color: #111;
    margin-bottom: 12px;
}

.kb-page-hero-text p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.kb-page-search {
    flex: 1.2;
}

.search-bar-ui {
    display: flex;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    height: 60px;
    border: 2px solid transparent;
    transition: border 0.3s;
}

.search-bar-ui:focus-within {
    border-color: var(--primary-color);
}

.search-bar-ui i {
    line-height: 60px;
    padding: 0 20px;
    color: #999;
    font-size: 18px;
}

.search-bar-ui input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
}

.search-bar-ui button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0 35px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.search-bar-ui button:hover {
    background: #005642;
}

/* 条件筛选区 */
.kb-filter-box {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 40px;
}

.filter-row {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dashed #f0f0f0;
    padding: 15px 0;
}

.filter-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-row:first-child {
    padding-top: 0;
}

.filter-label {
    width: 90px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    padding-top: 6px;
    flex-shrink: 0;
}

.filter-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.filter-items a {
    font-size: 14px;
    color: #555;
    padding: 6px 16px;
    border-radius: 4px;
    transition: all 0.3s;
}

.filter-items a:hover {
    color: var(--primary-color);
}

.filter-items a.active {
    background: var(--hover-bg);
    color: var(--primary-color);
    font-weight: bold;
}

/* 数据库卡片网格 (1600宽屏支持4列) */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.kb-card {
    background: var(--bg-white);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.kb-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 110, 84, 0.08);
    transform: translateY(-5px);
}

.kb-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.kb-card-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #f4f4f4;
}

.kb-card-title h3 {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    margin-bottom: 4px;
    transition: color 0.3s;
}

.kb-card:hover .kb-card-title h3 {
    color: var(--primary-color);
}

.kb-card-title p {
    font-size: 12px;
    color: var(--light-gray);
}

.kb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.kb-card-tags span {
    background: #f4f7f6;
    color: #666;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
}

.kb-card-desc {
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    /* 限制三行截断 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--primary-color);
    font-weight: bold;
    border-top: 1px dashed #eee;
    padding-top: 15px;
}

.kb-card-footer i {
    transition: transform 0.3s;
}

.kb-card:hover .kb-card-footer i {
    transform: translateX(5px);
}


/* ========================================================================= */
/* === 通用数据详情页 (院校/专业/教授库详情) 专属样式 === */
/* ========================================================================= */

/* --- 顶部名片 Hero --- */
.kb-detail-hero {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 50px 0;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.kb-detail-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.detail-profile {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1;
}

.detail-avatar {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-info {
    flex: 1;
}

.detail-title {
    font-size: 28px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.detail-title span {
    font-size: 16px;
    color: var(--light-gray);
    font-weight: normal;
}

.detail-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.detail-tags span {
    background: #eaf6f3;
    color: var(--primary-color);
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 500;
}

.detail-short-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* 核心数据统计区 */
.detail-stats {
    display: flex;
    gap: 30px;
    padding-left: 40px;
    border-left: 1px solid #eee;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-name {
    font-size: 13px;
    color: var(--gray-text);
}

/* --- 主体双栏布局 --- */
.kb-detail-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
    align-items: start;
}

/* 左侧正文区 */
.detail-main-col {
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    padding: 40px;
}

/* 锚点 Tab 导航 */
/* 1. 修复：锚点导航栏吸顶位置与纯色背景 */
.detail-tabs {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 40px;
    position: sticky;
    top: 0; /* 修复一：将 90px 改为 0，让它直接紧贴屏幕顶部吸顶 */
    background: #ffffff; /* 修复二：强制纯白底色，彻底遮挡滚过的底层文字 */
    z-index: 50;
    padding: 20px 0 10px 0; /* 修复三：增加顶部留白，让吸顶时文字不会贴着屏幕上边缘 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);

}



.detail-tabs a {
    font-size: 16px;
    color: #555;
    font-weight: bold;
    padding-bottom: 15px;
    position: relative;
    transition: color 0.3s;
    margin-bottom: -2px;
}

.detail-tabs a:hover,
.detail-tabs a.active {
    color: var(--primary-color);
}

.detail-tabs a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* 正文排版 */
.content-section {
    margin-bottom: 50px;
    scroll-margin-top: 150px; /* 锚点跳转时留出顶部距离 */
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section h2 {
    font-size: 22px;
    font-weight: bold;
    color: #111;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.content-section h2::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--primary-color);
    margin-right: 12px;
    border-radius: 2px;
}

.content-section p {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 15px;
}

.content-section ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.content-section ul li {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.content-section ul li::before {
    content: "•";
    color: var(--primary-color);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}

/* 简单的卡片网格用于展示院系/专业分类 */
.faculty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.faculty-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    transition: all 0.3s;
}

.faculty-card:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* --- 右侧侧边栏区 --- */
.detail-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 侧栏属性列表 */
.attr-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.attr-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px dashed #f0f0f0;
    padding-bottom: 15px;
}

.attr-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.attr-label {
    color: var(--gray-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.attr-label i {
    color: #ccc;
    width: 14px;
}

.attr-value {
    color: #222;
    font-weight: 500;
}

.attr-value a {
    color: var(--primary-color);
}

/* 侧边相关推荐列表 */
.related-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.related-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.3s;
}

.related-item:hover {
    background: #f9f9f9;
}

.related-item img {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #eee;
}

.related-item-info h4 {
    font-size: 15px;
    color: #111;
    margin-bottom: 3px;
    transition: color 0.3s;
}

.related-item:hover .related-item-info h4 {
    color: var(--primary-color);
}

.related-item-info span {
    font-size: 12px;
    color: var(--light-gray);
}

/* ========================================================================= */
/* === 单独 AI选校功能页 专属样式 === */
/* ========================================================================= */

/* 顶部科技感 Hero */
.ai-tool-hero {
    position: relative;
    background: linear-gradient(135deg, #004b3a 0%, #006e54 100%);
    padding: 70px 0 140px 0; /* 底部留白给表单卡片悬浮 */
    overflow: hidden;
}

.ai-tool-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    max-width: 800px;
    margin: 0 auto;
}

.ai-tool-hero-content h1 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.ai-tool-hero-content p {
    font-size: 18px;
    opacity: 0.9;
    line-height: 1.6;
}

/* 背景光晕装饰 */
.ai-hero-decoration {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* 悬浮交互表单卡片 */
.ai-eval-wrapper {
    position: relative;
    z-index: 20;
    margin-top: -80px;
    margin-bottom: 60px;
}

.ai-eval-card {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}

.ai-eval-header {
    background: #fcfdfd;
    border-bottom: 1px solid #eee;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-eval-header h3 {
    font-size: 20px;
    color: var(--primary-color);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.ai-eval-header span {
    font-size: 13px;
    color: var(--light-gray);
}

.ai-eval-form {
    padding: 40px;
}

.form-section-title {
    font-size: 16px;
    font-weight: bold;
    color: #111;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f4f4f4;
}

/* 双列网格表单 */
.ai-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 35px;
}

/* 复用已有 .form-group 与 .custom-select 样式，仅做微调以适应大表单 */
.ai-eval-form .form-group label {
    font-size: 15px;
    color: #333;
    margin-bottom: 12px;
    display: block;
}

.ai-eval-form .custom-select {
    height: 50px;
    font-size: 15px;
    background: #fdfdfd;
}

/* 提交按钮区域 */
.ai-submit-area {
    text-align: center;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px dashed #eee;
}

.btn-ai-generate {
    background: linear-gradient(135deg, var(--primary-color) 0%, #004d3b 100%);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 16px 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 110, 84, 0.25);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-ai-generate:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 110, 84, 0.35);
}

.ai-privacy-note {
    font-size: 13px;
    color: #999;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 底部三大优势说明 */
.ai-features-wrapper {
    margin-bottom: 80px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

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

.ai-feature-box {
    text-align: center;
    padding: 30px 20px;
    background: var(--bg-white);
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

.ai-feature-icon {
    width: 60px;
    height: 60px;
    background: #eaf6f3;
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px auto;
}

.ai-feature-box h4 {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
}

.ai-feature-box p {
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.6;
}


/* ========================================================================= */
/* === 单独 费用计算工具页 专属样式 === */
/* ========================================================================= */

/* 工具页通用 Hero (深蓝色调区分于AI选校) */
.tool-hero {
    position: relative;
    background: linear-gradient(135deg, #004b3a 0%, #006e54 100%);
    padding: 70px 0 140px 0;
    overflow: hidden;
}

.tool-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    max-width: 800px;
    margin: 0 auto;
}

.tool-hero-content h1 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.tool-hero-content p {
    font-size: 18px;
    opacity: 0.9;
    line-height: 1.6;
}

.tool-hero-decoration {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* 计算器主体卡片 */
.calc-wrapper {
    position: relative;
    z-index: 20;
    margin-top: -80px;
    margin-bottom: 60px;
}

.calc-card {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.calc-layout {
    display: flex;
    flex-direction: column;
}

/* 左侧表单区 */
.calc-form-area {
    padding: 45px 50px;
}

.calc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.calc-form-area .form-group label {
    font-size: 15px;
    color: #333;
    margin-bottom: 12px;
    display: block;
    font-weight: bold;
}

.calc-form-area .custom-select {
    height: 48px;
    background: #fdfdfd;
}

.calc-submit-area {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px dashed #eee;
}

.btn-calculate {
    background: linear-gradient(135deg, var(--primary-color) 0%, #004d3b 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 110, 84, 0.2);
    transition: all 0.3s;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 110, 84, 0.3);
}

/* 右侧账单结果面板 */
.calc-result-area {
    background: #f4f7fa;
    padding: 45px 40px;
    border-left: 1px solid #eee;
}

.result-receipt {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: sticky;
    top: 110px;
}

.receipt-title {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    text-align: center;
    margin-bottom: 5px;
}

.receipt-date {
    font-size: 12px;
    color: var(--light-gray);
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px dashed #eee;
}

.receipt-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.receipt-total span {
    font-size: 14px;
    color: var(--gray-text);
    margin-bottom: 5px;
}

.receipt-total strong {
    font-size: 42px;
    font-weight: 900;
    color: #e74c3c;
    line-height: 1;
}

.receipt-total strong span {
    font-size: 18px;
    color: #e74c3c;
    margin-left: 4px;
}

.receipt-breakdown {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.bd-label {
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bd-label i {
    color: #999;
    width: 16px;
    text-align: center;
}

.bd-value {
    font-weight: bold;
    color: #222;
}

.breakdown-item.offset .bd-value {
    color: var(--primary-color);
}

.receipt-footer {
    background: #fdfdfd;
    padding: 15px;
    border-radius: 8px;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    border: 1px solid #f0f0f0;
}
.receipt-footer i { color: #d4a017; margin-right: 5px; }

/* 底部费用参考指南 */
.cost-guide-wrapper { margin-bottom: 80px; }
.cost-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.cost-guide-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f9f9f9;
    transition: all 0.3s;
}

.cost-guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
    border-color: var(--primary-color);
}

.guide-icon {
    width: 50px;
    height: 50px;
    background: #edfcf0;
    color: #044b3a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.cost-guide-card h4 {
    font-size: 17px;
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
}

.cost-guide-card p {
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.6;
}

/* ========================================================================= */
/* === 在线打分式评估页面 专属样式 === */
/* ========================================================================= */

.scoring-panel {
    padding: 45px 50px;
}

.scoring-group {
    margin-bottom: 25px;
}

.scoring-group label {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
    display: block;
}

/* 打分选项网格布局 */
.score-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* 未选中的打分按钮 */
.score-chip {
    background: #fdfdfd;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 15px;
    font-size: 14px;
    color: #555;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-weight: 500;
}

.score-chip:hover {
    border-color: var(--primary-color);
    background: var(--hover-bg);
}

/* 选中的打分按钮 (品牌绿) */
.score-chip.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 110, 84, 0.2);
}

/* 全新白色极简成绩单卡片外观 (与右侧结果对应) */
.clean-report-card {
    padding: 40px 35px;
    border: 1px solid #eaeaea;
}

.report-divider {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #e0e0e0;
    margin: 20px 0 30px 0;
}

.report-grade-section {
    margin-bottom: 30px;
}

.report-grade-letter {
    font-size: 46px;
    font-weight: 900;
    color: var(--primary-color); 
    margin-bottom: 5px;
    line-height: 1;
}

.report-grade-text {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    letter-spacing: 0.5px;
}

.report-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 35px;
}

.report-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
}

.rl-label {
    color: #555;
    font-weight: 500;
}

.rl-value {
    color: #111;
    font-weight: bold;
}

/* 针对需要注意的项给予色彩提示 */
.rl-value.highlight-warning {
    color: #d4a017; 
}

.report-suggestion {
    background: #fdfcf9;
    border: 1px solid #f9eed6;
    border-radius: 8px;
    padding: 20px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.report-suggestion i {
    color: #d4a017;
    margin-right: 5px;
    font-size: 15px;
}

.report-suggestion strong {
    color: #222;
}

/* ========================================================================= */
/* === 打分评估互动状态与动画 补充样式 === */
/* ========================================================================= */

/* 占位状态面板 */
.report-placeholder {
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    background: #fdfdfd;
    padding: 40px;
}

.placeholder-icon {
    font-size: 50px;
    color: #e0e0e0;
    margin-bottom: 20px;
}

.report-placeholder h3 {
    font-size: 20px;
    color: #888;
    margin-bottom: 10px;
}

.report-placeholder p {
    font-size: 14px;
    color: #aaa;
    line-height: 1.6;
}

/* 按钮加载动画状态 */
.btn-calculate.loading {
    opacity: 0.8;
    pointer-events: none;
    cursor: wait;
}

.btn-calculate.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* 报告淡入动画 */
.clean-report-card {
    animation: fadeInReport 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInReport {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 报告项目高亮样式 */
.rl-value.excellent { color: var(--primary-color); font-weight: 900;}
.rl-value.warning { color: #d68922; }
.rl-value.danger { color: #c0392b; }


/* ========================================================================= */
/* === 时间规划工具页 专属样式 === */
/* ========================================================================= */

/* Hero 区域采用品牌绿渐变，并微调高度以适配悬浮主体 */
.time-hero {
    background: linear-gradient(135deg, #004b3a 0%, #006e54 100%);
    padding: 70px 0 100px 0;
}

.timeline-page-wrapper {
    position: relative;
    z-index: 20;
    margin-top: -50px;
    margin-bottom: 80px;
}

.timeline-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 40px;
    align-items: start;
}

/* 左侧主体内容区 */
.timeline-main-area {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    padding: 40px 50px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.timeline-header h3 {
    font-size: 22px;
    font-weight: bold;
    color: #111;
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-header h3 i {
    color: var(--primary-color);
}

/* Tab 切换样式 */
.timeline-tabs {
    display: flex;
    background: #f4f7f6;
    border-radius: 30px;
    padding: 4px;
}

.t-tab {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
}

.t-tab.active {
    background: var(--bg-white);
    color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* === 垂直时间轴核心样式 === */
.timeline-container {
    display: none;
    position: relative;
    padding-left: 30px;
    animation: fadeInTimeline 0.5s ease;
}

.timeline-container.active {
    display: block;
}

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

/* 垂直引导线 */
.timeline-line {
    position: absolute;
    left: 36px;
    top: 10px;
    bottom: 20px;
    width: 2px;
    background: #e5e5e5;
    z-index: 1;
}

/* 每个时间节点 */
.timeline-item {
    position: relative;
    padding-left: 45px;
    margin-bottom: 50px;
    z-index: 2;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* 时间圆点 */
.timeline-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 0 4px #eaf6f3;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 节点日期 */
.timeline-date {
    font-size: 18px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.timeline-date span {
    font-size: 14px;
    color: #888;
    font-weight: normal;
}

/* 节点内容框 */
.timeline-content {
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    padding: 20px 25px;
    border-radius: 8px;
    transition: all 0.3s;
}

.timeline-item:hover .timeline-content {
    border-color: #d4ede6;
    background: #fafdfc;
    box-shadow: 0 5px 15px rgba(0, 110, 84, 0.05);
}

.timeline-content h4 {
    font-size: 17px;
    font-weight: bold;
    color: #111;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* 提示框 */
.timeline-tips {
    margin-top: 15px;
    padding: 12px 15px;
    background: #fdf5e6;
    border-left: 3px solid #d4a017;
    font-size: 13px;
    color: #666;
    border-radius: 0 4px 4px 0;
}
.timeline-tips i, .timeline-tips strong { color: #d4a017; }

/* 冲刺高亮节点 */
.highlight-item .timeline-dot {
    border-color: #e74c3c;
    box-shadow: 0 0 0 4px #faeaeb;
}
.highlight-item .timeline-date { color: #e74c3c; }
.highlight-item:hover .timeline-content { border-color: #faeaeb; }

/* 最终成功节点 */
.success-item .timeline-dot {
    width: 26px;
    height: 26px;
    left: -6px;
    top: 0;
    background: var(--primary-color);
    color: #fff;
    border: none;
    font-size: 12px;
}

/* === 右侧：侧边悬浮表单 === */
.timeline-sidebar {
    position: relative;
}

.sticky-widget {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    padding: 30px;
    position: sticky;
    top: 110px; /* 吸顶距离 */
    border-top: 4px solid var(--primary-color);
}

.widget-header h3 {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
}

.widget-header p {
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.5;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}

.widget-form .form-group {
    margin-bottom: 20px;
}

.widget-form label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

/* 原生 Select 样式复用自定义输入框外观 */
.select-native {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}

.btn-generate-timeline {
    width: 100%;
    background: linear-gradient(135deg, #d4a017 0%, #b58812 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(212, 160, 23, 0.3);
    transition: all 0.3s;
    margin-top: 10px;
}

.btn-generate-timeline:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 160, 23, 0.4);
}

.privacy-text {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 15px;
}

/* ========================================================================= */
/* === 时间规划页 - 右侧悬浮表单 专属精细化样式 === */
/* ========================================================================= */

.timeline-sidebar {
    position: relative;
}

/* 白色卡片与阴影 */
.sticky-widget {
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 35px 30px;
    position: sticky;
    top: 110px; /* 吸顶距离 */
    /* 移除之前绿色的顶边框，保持纯白 */
    border-top: none; 
}

/* 标题区域与虚线分割 */
.widget-header h3 {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-header p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e0e0e0; /* 截图中的浅色虚线 */
}

/* 表单每一项的间距 */
.widget-form .form-group {
    margin-bottom: 22px;
}

/* 表单 Label 标题 */
.widget-form label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* 补全缺失的输入框与下拉框样式 */
.widget-form .custom-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #ccc; /* 截图中的灰色边框 */
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.widget-form .custom-input:focus {
    border-color: var(--primary-color);
}

/* 针对 Select 下拉框的重置 */
.widget-form select.custom-input {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}

/* 截图中的暗金色按钮及发光投影 */
.btn-generate-timeline {
    width: 100%;
    background: linear-gradient(135deg, #cca028 0%, #b8850b 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(184, 133, 11, 0.3);
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-generate-timeline:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(184, 133, 11, 0.45);
}

/* 底部安全提示文字 */
.privacy-text {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 18px;
}

.privacy-text i {
    margin-right: 5px;
}


/* ================= 顶部名片 Hero 区域 ================= */
        .school-hero-container {
            background: #fff;
            padding: 30px 40px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.03);
            margin: 20px auto 30px auto;
            max-width: 1200px;
        }
        .sh-header { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
        .sh-header h1 { font-size: 28px; font-weight: bold; color: #111; margin: 0; }
        .btn-status { background: var(--primary-color); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 14px; font-weight: bold; }
        
        .sh-tags { display: flex; gap: 10px; margin-bottom: 25px; }
        .sh-tags span { 
            padding: 4px 12px; 
            border-radius: 4px; 
            font-size: 13px; 
            font-weight: 500; 
            background: var(--hover-bg); 
            color: var(--primary-color); 
        }

        .sh-main { display: flex; gap: 30px; }
        .sh-left { flex: 1; }
        .sh-right { width: 400px; flex-shrink: 0; }

        /* 左侧：小花点评 */
        .review-box {
            border: 2px solid var(--primary-color);
            border-radius: 12px;
            padding: 30px 25px 20px 25px;
            position: relative;
            margin-bottom: 25px;
            background: #fdfdfd;
        }
        .review-box .rb-title {
            position: absolute;
            top: -16px;
            left: 20px;
            background: var(--primary-color);
            color: #fff;
            padding: 6px 20px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .review-box ul { padding-left: 0; margin-top: 10px; position: relative; z-index: 2; }
        .review-box ul li {
            position: relative;
            padding-left: 22px;
            margin-bottom: 12px;
            font-size: 14px;
            color: #444;
            line-height: 1.6;
        }
        .review-box ul li::before {
            content: "•";
            color: var(--primary-color);
            font-size: 24px;
            position: absolute;
            left: 0;
            top: -5px;
        }

        /* 左侧：4宫格信息 */
        .info-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .info-cell {
            background: #fdfdfd;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            padding: 20px;
        }
        .info-cell h4 {
            font-size: 15px;
            color: #111;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 0;
        }
        .info-cell h4 i { color: var(--primary-color); }
        .info-cell p { font-size: 13px; color: #666; line-height: 1.5; margin: 0; }

        /* ================= 右侧画廊与放大功能 ================= */
        .sh-gallery { display: flex; flex-direction: column; gap: 10px; }
        .sh-main-img-wrap {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        .sh-main-img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            transition: transform 0.4s ease;
            display: block;
        }
        .sh-main-img-wrap:hover .sh-main-img { transform: scale(1.03); }
        .sh-main-img-wrap::after {
            content: '\f00e';
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 28px;
            background: rgba(0, 0, 0, 0.4);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            opacity: 0;
            transition: 0.3s ease;
            pointer-events: none;
        }
        .sh-main-img-wrap:hover::after { opacity: 1; }

        .sh-thumbs {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 5px;
            scrollbar-width: thin;
            scrollbar-color: #ddd transparent;
        }
        .sh-thumbs::-webkit-scrollbar { height: 4px; }
        .sh-thumbs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
        
        .sh-thumb-item {
            width: calc(20% - 5px);
            min-width: 120px;
            height: 80px;
            flex-shrink: 0;
            border-radius: 6px;
            object-fit: cover;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s;
            opacity: 0.6;
        }
        .sh-thumb-item:hover { opacity: 0.9; }
        .sh-thumb-item.active {
            border-color: var(--primary-color);
            opacity: 1;
        }

        /* 放大灯箱 */
        .lightbox-overlay {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .lightbox-overlay.show { display: flex; opacity: 1; }
        .lightbox-content { max-width: 90%; max-height: 90%; position: relative; text-align: center; }
        .lightbox-img { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); object-fit: contain; }
        .lightbox-close {
            position: absolute; top: -40px; right: 0; color: #fff; font-size: 36px; cursor: pointer; transition: 0.3s; line-height: 1;
        }
        .lightbox-close:hover { color: var(--primary-color); }

        /* ================= 数据统计条与操作按钮 ================= */
        .sh-stats-row {
            display: flex;
            justify-content: space-around;
            margin-top: 35px;
            padding-top: 25px;
            border-top: 1px dashed #eee;
            background: #fdfdfd;
            border-radius: 8px;
            padding-bottom: 15px;
        }
        .stat-col { display: flex; flex-direction: column; align-items: center; }
        .stat-col span { font-size: 18px; font-weight: bold; margin-bottom: 5px; color: var(--primary-color); }
        .stat-col p { font-size: 13px; color: #888; margin: 0; }

        .sh-actions { display: flex; justify-content: center; gap: 15px; margin-top: 25px; }
        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #555;
            background: #fff;
            border: 1px solid #ddd;
            padding: 8px 18px;
            border-radius: 20px;
            transition: 0.3s;
        }
        .action-btn i { font-size: 16px; color: var(--primary-color); }
        .action-btn:hover { border-color: var(--primary-color); color: var(--primary-color); box-shadow: 0 2px 8px rgba(0,110,84,0.08); }

        /* ================= 锚点导航菜单 (吸顶) ================= */
        .detail-tabs-wrapper {
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
        }
        .detail-tabs { display: flex; gap: 40px; max-width: 1200px; width: 100%; padding: 0 15px; }
        .detail-tabs a {
            font-size: 16px; color: #333; font-weight: bold; padding: 20px 0; position: relative; transition: color 0.3s;
        }
        .detail-tabs a.active, .detail-tabs a:hover { color: var(--primary-color); }
        .detail-tabs a.active::after {
            content: '';
            position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;
            background: var(--primary-color); border-radius: 2px 2px 0 0;
        }

        /* ================= 详情主内容容器 ================= */
        .main-content-card {
            background: #fff;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.03);
            margin-bottom: 60px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .school-section-title {
            font-size: 20px;
            font-weight: bold;
            color: #111;
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .school-section-title::before {
            content: ""; display: inline-block; width: 28px; height: 6px; background: var(--primary-color); margin-right: 12px; border-radius: 3px;
        }

        .content-section { margin-bottom: 50px; scroll-margin-top: 80px; }
        .content-section:last-child { margin-bottom: 0; }
        
        .intro-text p { font-size: 15px; color: #444; line-height: 1.8; margin-bottom: 15px; }

        /* ================= 申请条件 ================= */
        .req-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .req-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 25px 20px;
            color: #333;
            display: flex;
            flex-direction: column;
            box-shadow: 0 5px 15px rgba(0,0,0,0.02);
            transition: all 0.3s ease;
        }
        .req-card:hover {
            border-color: var(--primary-color);
            box-shadow: 0 10px 25px rgba(0, 110, 84, 0.08);
            transform: translateY(-5px);
        }
        .req-card h3 {
            font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px;
            border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; margin-top: 0;
            color: var(--primary-color);
        }
        .req-card ul { padding: 0; margin-bottom: 20px; }
        .req-card ul li {
            font-size: 13px; color: #555; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;
        }
        .req-card ul li::before {
            content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; margin-top: 2px; color: var(--primary-color);
        }
        .req-card .btn-more {
            margin-top: auto; text-align: center; padding: 8px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: 0.3s;
            background: var(--hover-bg); color: var(--primary-color);
        }
        .req-card .btn-more:hover { background: var(--primary-color); color: #fff; }

        /* ================= 宿舍情况 (全新卡片列表) ================= */
        .dorm-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .dorm-card {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 25px;
            transition: all 0.3s ease;
        }
        .dorm-card:hover {
            border-color: var(--primary-color);
            box-shadow: 0 10px 25px rgba(0, 110, 84, 0.08);
        }
        .dorm-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-right: 30px;
        }
        .dorm-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--hover-bg);
            color: var(--primary-color);
            font-size: 18px;
            font-weight: bold;
            padding: 8px 20px;
            border-radius: 30px;
            width: fit-content;
            margin-bottom: 25px;
            border: 1px solid rgba(0, 110, 84, 0.2);
        }
        .dorm-fees {
            list-style: none;
            padding: 0;
            margin: 0 0 25px 0;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .dorm-fees li {
            font-size: 15px;
            color: #444;
            display: flex;
            align-items: center;
            line-height: 1;
        }
        /*.dorm-fees li::before {*/
        /*    content: "";*/
        /*    display: inline-block;*/
        /*    width: 7px;*/
        /*    height: 7px;*/
        /*    background-color: var(--primary-color);*/
        /*    margin-right: 12px;*/
        /*    border-radius: 1px; */
        /*}*/
        .dorm-total { margin-top: auto; }
        .dorm-total-label {
            font-size: 13px;
            color: var(--gray-text);
            margin-bottom: 5px;
            display: block;
        }
        .dorm-total-price {
            font-size: 26px;
            font-weight: 900;
            color: var(--primary-color);
            line-height: 1;
            letter-spacing: 0.5px;
        }
        .dorm-img-wrap {
            width: 320px;
            flex-shrink: 0;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #f0f0f0;
        }
        .dorm-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }
        .dorm-card:hover .dorm-img-wrap img { transform: scale(1.05); }

        /* ================= 学生评价 ================= */
        .review-list { display: flex; flex-direction: column; gap: 20px; }
        .review-item { display: flex; gap: 15px; align-items: flex-start; }
        .rev-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #f0f0f0; }
        .rev-content {
            background: #fff; border: 2px solid var(--primary-color); border-radius: 8px; padding: 15px 20px; position: relative; flex: 1;
        }
        .rev-content::before {
            content: ''; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; background: #fff;
            border-left: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color); transform: rotate(45deg);
        }
        .rev-name { font-size: 13px; color: #888; margin-bottom: 5px; display: block; }
        .rev-name strong { color: #111; margin-right: 10px; font-size: 15px;}
        .rev-content p { font-size: 15px; color: #333; line-height: 1.6; margin: 0; }

        /* ================= 学校周边信息 ================= */
        .surround-layout { display: flex; gap: 40px; background: #fdfdfd; border: 1px solid #eee; padding: 30px; border-radius: 12px; }
        .surround-info { flex: 1; }
        .si-item { margin-bottom: 25px; }
        .si-item h4 {
            font-size: 16px; color: #111; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; margin-top: 0;
        }
        .si-item h4 i { color: var(--primary-color); width: 16px; text-align: center; }
        .si-item p { font-size: 14px; color: #555; line-height: 1.6; padding-left: 24px; margin: 0; }
        .surround-map { width: 450px; border-radius: 8px; object-fit: cover; border: 1px solid #eee; }







/* === 微信二维码点击弹窗样式 === */
.wechat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 半透明黑色遮罩 */
    z-index: 99999; /* 确保层级最高，盖住底部导航栏 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 激活状态 */
.wechat-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.wechat-modal-content {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    transform: translateY(20px);
    transition: all 0.3s ease;
    width: 80%;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.wechat-modal-overlay.show .wechat-modal-content {
    transform: translateY(0); /* 配合透明度实现上浮淡入效果 */
}

/* 关闭按钮 */
.wechat-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.wechat-modal-close:hover {
    color: #333;
}

.wechat-modal-content h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: var(--primary-color, #006e54);
    font-weight: bold;
}

.wechat-modal-content img {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
}

.wechat-modal-content p {
    margin: 0;
    font-size: 13px;
    color: #666;
}