/* ================================================================
   Zy工作室 · 设计系统 v4 —— 精致化改版层
   在 v3 基础上重构：色彩 / 排版 / 间距 / 层次 / 交互
   设计取向：克制的蓝、更暖的中性色、柔和层次、大留白
   ================================================================ */

/* ---------------------------------------------------------------
   1. 设计令牌（覆盖 v3 变量）
   --------------------------------------------------------------- */
:root {
    /* 主色：更沉稳的靛蓝，降低饱和度，去掉荧光感 */
    --color-primary: #1d4ed8;
    --color-primary-dark: #172f8f;
    --color-primary-light: #3b6ef5;
    --color-primary-lighter: #a8c0fa;
    --color-primary-soft: #eef3ff;

    /* 辅助色 */
    --color-cyan: #3b6ef5;
    --color-cyan-light: #a8c0fa;
    --color-accent: #c98a2b;
    --color-accent-light: #e5b768;
    --color-green: #158f6b;

    /* 中性色：微暖灰，比纯灰更自然 */
    --color-dark: #101828;
    --color-dark-2: #344054;
    --color-gray: #667085;
    --color-gray-light: #e4e7ec;
    --color-bg: #f7f8fa;
    --color-white: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #fbfcfd;

    /* 层次：多层柔和阴影替代单层硬阴影 */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.07);
    --shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 18px 40px rgba(16, 24, 40, 0.10);
    --shadow-brand: 0 8px 24px rgba(29, 78, 216, 0.16);
    --shadow-brand-lg: 0 14px 36px rgba(29, 78, 216, 0.22);

    /* 圆角：更柔和，层级分明 */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --transition: 0.32s cubic-bezier(0.4, 0, 0.2, 1);

    /* 版心 */
    --max-width: 1160px;

    /* v3 别名同步 */
    --primary: #1d4ed8;
    --primary-dark: #172f8f;
    --primary-light: #3b6ef5;
    --primary-lighter: #a8c0fa;
    --accent: #3b6ef5;
    --bg: #f7f8fa;
    --bg2: #ffffff;
    --bg3: #eef3ff;
    --bg4: #dfe8ff;
    --text: #101828;
    --text2: #475467;
    --text3: #98a2b3;
    --border: #e4e7ec;
    --gradient: linear-gradient(135deg, #1d4ed8, #3b6ef5);
    --gradient-dark: linear-gradient(135deg, #172f8f, #1d4ed8);

    /* 新增：排版比例 */
    --fs-display: clamp(2.4rem, 5.2vw, 4rem);
    --fs-h2: clamp(1.6rem, 2.6vw, 2.15rem);
    --fs-h3: 1.25rem;
    --fs-body: 0.975rem;
}

/* ---------------------------------------------------------------
   2. 基础排版
   --------------------------------------------------------------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', sans-serif;
    color: var(--color-dark);
    background: var(--color-bg);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--fs-body);
    /* 极淡的顶部氛围，避免大面积纯色死板 */
    background-image:
        radial-gradient(1100px 380px at 50% -8%, rgba(29, 78, 216, 0.05), transparent 70%);
    background-attachment: fixed;
}

/* 正文中文段落：呼吸感更好 */
p { line-height: 1.85; }

::selection {
    background: rgba(29, 78, 216, 0.14);
    color: var(--color-dark);
}

/* 细滚动条（桌面端） */
@media (hover: hover) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: #d3d8e0;
        border-radius: 10px;
        border: 3px solid var(--color-bg);
    }
    ::-webkit-scrollbar-thumb:hover { background: #b6bec9; }
}

.container {
    max-width: var(--max-width);
    padding: 0 24px;
}

/* ---------------------------------------------------------------
   3. 导航栏 —— 更薄、更有层次
   --------------------------------------------------------------- */
.navbar {
    height: 68px;
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid transparent;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transition: background var(--transition), box-shadow var(--transition),
        border-color var(--transition), height var(--transition);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(16, 24, 40, 0.06);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.05);
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    background: linear-gradient(140deg, #2563eb, #1d4ed8 55%, #1e3a8a);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform var(--transition), box-shadow var(--transition);
}

.nav-logo:hover .logo-icon {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.logo-text {
    font-size: 1.075rem;
    font-weight: 650;
    letter-spacing: 0.2px;
}

.nav-list { gap: 2px; }

.nav-link {
    position: relative;
    padding: 8px 14px;
    font-size: 0.925rem;
    font-weight: 500;
    color: var(--color-dark-2);
    border-radius: var(--radius-sm);
    letter-spacing: 0.1px;
}

/* 悬停：底部细线指示，替代整块背景 */
.nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 1.5px;
    background: var(--color-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.nav-link:hover {
    color: var(--color-primary);
    background: transparent;
}

.nav-link:hover::after { transform: scaleX(0.55); }

.nav-btn-join {
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 999px;
    background: transparent;
    color: inherit !important;
    box-shadow: none;
    letter-spacing: 0.2px;
}

.nav-btn-join::after { display: none; }

.nav-btn-join:hover {
    background: var(--color-primary);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand-lg);
}

.nav-btn-active {
    color: var(--color-primary) !important;
    font-weight: 600;
}

.nav-btn-active::after { transform: scaleX(0.55); }

/* 下拉菜单 */
.dropdown-menu {
    min-width: 232px;
    padding: 6px;
    border-radius: var(--radius);
    border: 1px solid rgba(16, 24, 40, 0.06);
    box-shadow: var(--shadow-lg);
    transform: translateX(-50%) translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.dropdown-menu li a {
    padding: 9px 16px;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

.dropdown-menu li a:hover {
    background: var(--color-primary-soft);
    padding-left: 20px;
}

/* 汉堡按钮 */

/* ============================================================
   校徽头部（参照学校官网：校徽+中英文校名居中，下方导航）
   ============================================================ */
/* 校徽条高度变量 */
:root { --school-bar-h: 92px; }

/* 校徽条与导航的滚动分层 */
.school-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid rgba(16, 24, 40, .06);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    transition: height var(--transition), opacity var(--transition),
        transform var(--transition), border-color var(--transition);
    overflow: hidden;
    z-index: 1001;
}

/* 校徽条占位说明见 --school-bar-h，无需额外占位元素 */

.school-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 20px 10px;
}

/* 校徽主体：中英文校名在上、校徽在下，纵向堆叠后整体居中
   （参照学校官网首页版式：校名居中，校徽作为其下方一层的身份标识） */
.school-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 校徽：置于校名下方一层的身份标识，刻意做小、做淡，接近水印质感，
   避免与校名抢视觉重心 */
.school-emblem {
    height: 30px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    order: 2;
    opacity: .3;
    filter: grayscale(.15);
    transition: opacity var(--transition);
}

.school-brand:hover .school-emblem { opacity: .48; }

.school-names {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    align-items: center;
}

.school-name-cn {
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #6b2a8f;
    line-height: 1.2;
}

.school-name-en {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #8b5fb0;
    line-height: 1.35;
}

/* 工作室副标题 */
.school-sub {
    margin-top: 4px;
    font-size: 0.74rem;
    letter-spacing: 2.5px;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-sub::before,
.school-sub::after {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gray-light), transparent);
}

/* 滚动后：校徽条收起并上移，只留导航，避免占用过多首屏空间 */
.school-bar.collapsed {
    height: 0;
    opacity: 0;
    transform: translateY(-100%);
    border-bottom-color: transparent;
}

/* navbar 固定在校徽条下方；校徽条收起后导航回到顶部 */
body.has-school-bar .navbar { top: var(--school-bar-h, 88px); }
body.has-school-bar.has-collapsed .navbar { top: 0; }

/* 内容区整体下移，给「校徽条 + 导航」留出等高空间 */
body.has-school-bar .page-wrapper { padding-top: calc(var(--school-bar-h, 88px) + 68px); }
body.has-school-bar.has-collapsed .page-wrapper { padding-top: 68px; }

@media (max-width: 992px) {
    body.has-school-bar { --school-bar-h: 68px; }
}

@media (max-width: 480px) {
    body.has-school-bar { --school-bar-h: 58px; }
}

@media (max-width: 992px) {
    .school-bar-inner { padding: 10px 16px 9px; }
    .school-emblem { height: 42px; }
    .school-name-cn { font-size: 1.1rem; letter-spacing: 2px; }
    .school-name-en { font-size: 0.56rem; }
    .school-sub { font-size: 0.68rem; letter-spacing: 1.6px; margin-top: 2px; }
}

@media (max-width: 480px) {
    .school-brand { gap: 10px; }
    .school-emblem { height: 34px; }
    .school-name-cn { font-size: 0.95rem; letter-spacing: 1px; }
    .school-name-en { font-size: 0.48rem; letter-spacing: 0.3px; }
}
.hamburger { gap: 5px; }

.hamburger span {
    height: 1.75px;
    border-radius: 2px;
    background: var(--color-dark);
    transition: var(--transition);
}

/* ---------------------------------------------------------------
   4. 首屏 Hero —— 克制、有纵深
   --------------------------------------------------------------- */
.hero {
    height: 100vh;
    min-height: 620px;
    max-height: 940px;
}

/* 统一的底部渐隐，让文字区更沉静 */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(9, 14, 28, 0.34) 0%, rgba(9, 14, 28, 0.12) 45%, rgba(9, 14, 28, 0.46) 100%);
    pointer-events: none;
    z-index: 2;
}

.hero-slide { transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1); }

.hero-content {
    animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    padding: 0 24px;
}

.hero-title {
    font-size: var(--fs-display);
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 22px;
    text-shadow: 0 4px 32px rgba(0, 0, 0, 0.28);
}

/* 标题下方细装饰线 */
.hero-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
}

.hero-subtitle {
    font-size: clamp(0.95rem, 1.9vw, 1.2rem);
    font-weight: 350;
    letter-spacing: 3px;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.hero-arrow {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0.75;
}

.hero-arrow:hover {
    background: rgba(255, 255, 255, 0.22);
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
}

.hero-prev { left: 40px; }
.hero-next { right: 40px; }

/* 圆点：更细长，低调 */
.hero-dots { bottom: 44px; gap: 10px; }

.hero-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.32);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-dot:hover { background: rgba(255, 255, 255, 0.6); }

.hero-dot.active {
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.95);
}

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

/* ---------------------------------------------------------------
   5. 板块通用 —— 留白与标题
   --------------------------------------------------------------- */
.section {
    padding: 68px 0;
    position: relative;
}

/* 相邻板块交替底色，形成呼吸节奏 */
.section.tint {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.section-header {
    margin-bottom: 38px;
    text-align: center;
}

.section-title {
    font-size: var(--fs-h2);
    font-weight: 650;
    letter-spacing: 1.5px;
    color: var(--color-dark);
    line-height: 1.4;
}

.section-title h2 {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.section-title p {
    color: var(--color-gray);
    margin-top: 10px;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

/* 标题装饰：小短线 + 渐隐，避免生硬的粗块 */
.section-title .line,
.section-divider {
    width: 40px;
    height: 2px;
    margin: 18px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* 通用「眉标 + 标题 + 说明」组合 */
.section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* 无眉标时，标题与正文之间留白更小，避免空旷 */
.section-lead {
    max-width: 640px;
    margin: 10px auto 0;
    color: var(--color-gray);
    font-size: 0.92rem;
    line-height: 1.85;
}

/* 仅标题、无 lead 的板块不必占满 header 高度 */
.section-header.tight { margin-bottom: 30px; }

/* 滚动出场：更柔和的位移 */
.fade-in {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------
   6. 团队板块
   --------------------------------------------------------------- */
.team-section { background: var(--color-white); }

.team-photo {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: 44px;
}

/* 图片内描边细节 */
.team-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(16, 24, 40, 0.06);
    pointer-events: none;
}

/* 团队合影图片样式（替代原内联 style） */
.team-photo img,
.team-photo-img {
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.team-photo:hover img { transform: scale(1.012); }

/* 四项特质：横向网格卡片 */
.team-tags {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 940px;
    margin: 0 auto;
}

.team-tag {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    padding: 26px 24px;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.team-tag:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-lighter);
}

/* 图标：柔和底衬 + 圆角方形，比大实心圆更精致 */
.team-tag .tag-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transition: background var(--transition), color var(--transition),
        transform var(--transition);
}

.team-tag:hover .tag-icon {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.06);
}

.team-tag .tag-text {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-dark);
}

/* 团队简介文字 */
.team-desc {
    text-align: center;
    color: var(--color-gray);
    font-size: 0.95rem;
    max-width: 780px;
    margin: 30px auto 0;
    line-height: 2;
}

/* ---------------------------------------------------------------
   6b. 核心数据条
   --------------------------------------------------------------- */
.stats-section {
    padding: 0;
    background: var(--color-bg);
}

.stats-band {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 44px 40px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

/* 顶部一道极淡的品牌色，暗示层次但不抢眼 */
.stats-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), transparent);
}

.stat-item { text-align: center; }

.stat-item .stat-num {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-item .stat-num::after {
    content: '+';
    -webkit-text-fill-color: var(--color-primary-light);
    font-weight: 600;
}

.stat-item .stat-label {
    font-size: 0.85rem;
    color: var(--color-gray);
    margin-top: 8px;
    letter-spacing: 0.5px;
}

/* 竖向分隔线 */
.stat-divider {
    width: 1px;
    height: 42px;
    background: var(--border);
}

/* ---------------------------------------------------------------
   6c. 培养体系（四步）
   --------------------------------------------------------------- */
.track-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.track-card {
    position: relative;
    padding: 30px 26px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.track-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.track-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-lighter);
}

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

/* 右上角的大号数字作为水印 */
.track-no {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.07;
    letter-spacing: -1px;
}

.track-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.track-desc {
    font-size: 0.875rem;
    color: var(--color-gray);
    line-height: 1.85;
}

/* ---------------------------------------------------------------
   6d. 培养方向
   --------------------------------------------------------------- */
.dir-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/* 方向卡：序号 + 标题 + 说明 + 标签，纵向递进 */
.dir-card {
    padding: 22px 20px 20px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition), border-left-color var(--transition);
    border-left: 2px solid transparent;
}

.dir-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-lighter);
    border-left-color: var(--color-primary);
}

/* 序号水印：右上角淡色数字 */
.dir-no {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    opacity: .16;
    letter-spacing: -.5px;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
    transition: opacity var(--transition);
}

.dir-card:hover .dir-no { opacity: .3; }

.dir-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.dir-card:hover .dir-icon {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.06);
}

.dir-title {
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 7px;
    letter-spacing: 0.3px;
}

.dir-desc {
    font-size: 0.8rem;
    color: var(--color-gray);
    line-height: 1.75;
    margin-bottom: 12px;
}

/* 方向卡底部的小标签 */
.dir-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.dir-tags span {
    font-size: .7rem;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    white-space: nowrap;
}

/* 方向条：培养体系板块底部的紧凑标签行 */
.dir-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 18px 24px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.dir-bar-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-dark-2);
    letter-spacing: 1px;
    flex-shrink: 0;
    position: relative;
    padding-right: 18px;
}

.dir-bar-label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--border);
}

.dir-bar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.dir-chip {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid rgba(29, 78, 216, 0.12);
    padding: 5px 14px;
    border-radius: 999px;
    transition: all var(--transition);
}

.dir-chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------------------------------------------------------------
   6e. 荣誉成果条
   --------------------------------------------------------------- */
.honor-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* 改为横向条状：徽标在左，信息在右，比大竖卡更紧凑 */
.honor-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 6px 16px;
    align-items: center;
    padding: 20px 20px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

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

.honor-badge {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 34px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-gold {
    background: #fef4e2;
    color: #92600e;
}

.badge-silver {
    background: #f1f3f6;
    color: #4a5567;
}

.honor-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.55;
    margin-bottom: 5px;
}

.honor-meta {
    font-size: 0.8rem;
    color: var(--color-gray);
    line-height: 1.6;
}

/* ---------------------------------------------------------------
   6f. 纳新CTA
   --------------------------------------------------------------- */
.cta-section { padding-top: 20px; padding-bottom: 72px; }

.cta-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    padding: 52px 54px;
    border-radius: var(--radius-xl);
    background: linear-gradient(140deg, #16264d 0%, #1d3f8f 52%, #1d4ed8 100%);
    box-shadow: var(--shadow-brand-lg);
    overflow: hidden;
    color: #fff;
}

/* 右下角光晕，增加纵深 */
.cta-card::before {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 68%);
    pointer-events: none;
}

/* 细网格纹理 */
.cta-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(115deg, #000 10%, transparent 70%);
    -webkit-mask-image: linear-gradient(115deg, #000 10%, transparent 70%);
    pointer-events: none;
}

.cta-text, .cta-side { position: relative; z-index: 1; }

.cta-card .section-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.cta-title {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 650;
    letter-spacing: 2px;
    line-height: 1.45;
    margin-bottom: 16px;
}

.cta-desc {
    font-size: 0.925rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px;
}

.cta-actions {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.cta-actions .btn-primary {
    background: #fff;
    color: var(--color-primary-dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.cta-actions .btn-primary:hover {
    background: #fff;
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

.cta-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.cta-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

/* 右侧要点列表 */
.cta-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.cta-point {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cta-point-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
}

.cta-point-value {
    font-size: 0.95rem;
    font-weight: 550;
    color: #fff;
    line-height: 1.6;
}

/* ---------------------------------------------------------------
   6g. 占位框（待填充内容指引）
   虚线框 + 用途说明，后续替换真实内容时删掉 .ph 外层即可
   --------------------------------------------------------------- */
.ph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px 28px;
    border: 1.5px dashed #c3cddd;
    border-radius: var(--radius-lg);
    background:
        repeating-linear-gradient(45deg, #f8fafc 0 10px, #fbfcfe 10px 20px);
    color: var(--color-gray);
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
}

.ph:hover { border-color: var(--color-primary-lighter); }

/* 占位框左上角的用途标签 */
.ph-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #fff;
    background: var(--color-primary);
    padding: 4px 11px;
    border-radius: 999px;
}

.ph-tag.gray { background: #98a2b3; }
.ph-tag.amber { background: var(--color-accent); }

.ph-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark-2);
    letter-spacing: 0.5px;
}

.ph-hint {
    font-size: 0.8rem;
    color: var(--text3);
    line-height: 1.75;
    max-width: 420px;
}

.ph-icon { color: #c3cddd; }

/* 图片位：固定高度，便于按视觉需要替换 */
.ph.media { min-height: 260px; }
.ph.media-tall { min-height: 380px; }
.ph.media-short { min-height: 180px; }

/* 纯文字位 */
.ph.text { padding: 30px 32px; align-items: flex-start; text-align: left; }

/* 占位网格 */
.ph-grid {
    display: grid;
    gap: 20px;
}

.ph-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ph-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ph-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------------
   7. 动态列表 —— 行式条目，更像内容站
   --------------------------------------------------------------- */
.news-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 860px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* news.html 的两列卡片布局保持不变 */
.news-list.grid-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    background: none;
    border: none;
    box-shadow: none;
    max-width: none;
    overflow: visible;
}

/* 列表内的裸 <a> 作为一行 */
.news-list > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), padding-left var(--transition);
}

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

.news-list > a:hover {
    background: var(--color-surface-2);
    padding-left: 32px;
}

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

/* 日期做成等宽胶囊，右侧对齐更整齐 */
.news-list > a .news-date {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--color-gray);
    font-variant-numeric: tabular-nums;
    padding: 3px 10px;
    border-radius: 6px;
    background: #f2f4f7;
    letter-spacing: 0.3px;
}

/* 标题：主标题 + 可选摘要 */
.news-list > a .news-title {
    font-size: 0.975rem;
    color: var(--color-dark);
    font-weight: 500;
    line-height: 1.6;
    margin-right: auto;
    transition: color var(--transition);
    min-width: 0;
}

/* 首页「查看全部」链接做成按钮 */
.section-more { margin-top: 36px; }

/* ============================================================
   首页最新动态：三列卡片（区别于新闻页的列表样式）
   ============================================================ */
.home-news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.home-news-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 22px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

/* 顶部品牌色渐隐条 */
.home-news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #60a5fa);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.home-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-lighter);
}

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

.home-news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-news-tag {
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    letter-spacing: .02em;
}

.home-news-date {
    font-size: .76rem;
    color: var(--color-gray);
    font-variant-numeric: tabular-nums;
}

.home-news-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-dark);
    transition: color var(--transition);
}

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

.home-news-desc {
    font-size: .82rem;
    line-height: 1.85;
    color: var(--color-gray);
    margin-bottom: 2px;
}

.home-news-more {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    font-size: .82rem;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-news-more::after {
    content: '→';
    transition: transform var(--transition);
}

.home-news-card:hover .home-news-more::after { transform: translateX(4px); }

@media (max-width: 992px) {
    .home-news { grid-template-columns: 1fr; }
}

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.more-link::after { content: '→'; transition: transform var(--transition); }

.more-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-brand);
    transform: translateY(-2px);
}

.more-link:hover::after { transform: translateX(4px); }

/* 新闻卡片（news.html） */
.news-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-lighter);
}

.news-body { padding: 22px 24px; }

/* ---------------------------------------------------------------
   8. 通用卡片 / 网格
   --------------------------------------------------------------- */
.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
    background: var(--color-surface);
}

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

.card-body { padding: 24px; }

.card-body h3 {
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
}

.card-body p { font-size: 0.9rem; line-height: 1.8; }

.grid { gap: 24px; }

/* 系统卡片 */
.sys-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 36px 30px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.sys-card::before {
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.sys-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-lighter);
}

.sys-card .sys-icon {
    width: 60px;
    height: 60px;
    border-radius: 17px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 1.6rem;
}

.sys-card:hover .sys-icon { transform: scale(1.06); }

.sys-card h3 { font-size: 1.08rem; font-weight: 600; }

.sys-card p { line-height: 1.8; }

.sys-card .sys-btn {
    border-radius: 999px;
    padding: 8px 20px;
    background: var(--color-primary-soft);
}

.sys-card:hover .sys-btn {
    background: var(--color-primary);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

/* 友情链接 */
.friend-link {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 38px 22px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.friend-link-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: var(--color-primary-soft);
}

.friend-link:hover { transform: translateY(-5px); }

.friend-link-text { font-size: 0.925rem; font-weight: 550; }

/* 荣誉墙 */
.honor-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.honor-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-lighter);
}

.honor-photo { height: 220px; background: #f2f4f7; }

.honor-info { padding: 22px; }

.honor-info h3 { font-weight: 600; letter-spacing: 0.2px; }

/* ---------------------------------------------------------------
   9. 子页面页头
   --------------------------------------------------------------- */
.page-wrapper { padding-top: 68px; }

.page-header {
    padding: 96px 0 74px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.page-header::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 28px 28px);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    opacity: 0.75;
}

.page-header h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 650;
    letter-spacing: 3px;
}

.page-header p {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 3px;
    opacity: 0.88;
    margin-top: 10px;
}

/* ---------------------------------------------------------------
   10. 表单
   --------------------------------------------------------------- */
.form-card {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 44px;
    background: var(--color-surface);
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--color-dark-2);
    letter-spacing: 0.3px;
}

.form-control {
    padding: 12px 15px;
    border: 1px solid var(--border);
    /* v3 用 2px 边框，视觉过重，这里改为 1px + 聚焦时显色 */
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    transition: border-color var(--transition), box-shadow var(--transition),
        background var(--transition);
}

.form-control:hover { border-color: #d0d5dd; }

.form-control:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.09);
}

.checkbox-item {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px;
    background: var(--color-surface);
}

.checkbox-item.checked {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.form-section {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--color-surface);
    padding: 30px 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

/* 外层 section 只是容器，内含 form-card 时不再重复画卡片，避免双层描边 */
.form-section:has(> .form-card) {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

.form-section:has(> .form-card) > .form-card { margin: 0; }

.form-submit-btn {
    border-radius: 999px;
    padding: 14px 40px;
    font-weight: 600;
    letter-spacing: 1px;
    background: var(--color-primary);
    box-shadow: var(--shadow-brand);
    transition: all var(--transition);
}

.form-submit-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-lg);
}

/* 倒计时 */
.countdown-box {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-brand);
    padding: 38px;
}

.countdown-item .num { font-weight: 700; letter-spacing: 1px; }

/* ---------------------------------------------------------------
   11. 按钮
   --------------------------------------------------------------- */
.btn {
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.btn-primary { box-shadow: var(--shadow-brand); }

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-brand-lg);
    transform: translateY(-2px);
}

.btn-outline {
    border: 1.5px solid var(--color-primary);
    background: transparent;
}

.btn-outline:hover {
    background: var(--color-primary);
    box-shadow: var(--shadow-brand);
    transform: translateY(-2px);
}

.btn-more {
    border-radius: 999px;
    box-shadow: var(--shadow-brand);
    font-weight: 600;
}

.btn-more:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-brand-lg);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   12. FAQ / 时间线 / 数据块
   --------------------------------------------------------------- */
.faq-tabs { gap: 10px; }

.faq-tab {
    border-radius: 999px;
    padding: 8px 20px;
    border: 1px solid var(--border);
    background: var(--color-surface);
    font-weight: 550;
}

.faq-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand);
}

.faq-list { gap: 14px; }

.faq-item {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--color-surface);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.faq-item.open {
    border-color: var(--color-primary-lighter);
    box-shadow: var(--shadow-md);
}

.faq-question { padding: 20px 24px; font-weight: 550; }

/* 关于页 */
.about-block h3 {
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: 0.5px;
    border-left: 3px solid var(--color-primary);
    padding-left: 14px;
}

.about-block p, .about-block li { line-height: 2.1; }

.about-highlight {
    background: var(--color-primary-soft);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-primary);
    padding: 24px 28px;
}

.timeline::before { background: linear-gradient(180deg, var(--color-primary-lighter), var(--border)); }

.timeline-item::before {
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--color-primary-lighter);
    width: 12px;
    height: 12px;
}

.timeline-item .tl-year { font-weight: 650; letter-spacing: 0.5px; }

.stat-box {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.stat-box .stat-num {
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 培养规划流程（替代 about.html 内联样式） */
.planning-flow {
    margin: 0;
    padding: 32px 28px;
    background: linear-gradient(140deg, #f7f9ff 0%, #eef3ff 100%);
    border: 1px solid #e0e9ff;
    border-radius: var(--radius-xl);
}

.planning-flow-title {
    text-align: center;
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    margin-bottom: 32px;
}

.planning-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: start;
}

.planning-step {
    text-align: center;
    padding: 0 6px;
    position: relative;
}

/* 步骤之间的连接线 */
.planning-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(50% + 44px);
    width: calc(100% - 88px);
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary-lighter), rgba(168, 192, 250, 0.35));
}

.planning-step-num {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: linear-gradient(140deg, #2563eb, #1d4ed8);
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    position: relative;
    z-index: 1;
}

.planning-step-title {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.95rem;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.planning-step-desc {
    color: var(--color-gray);
    font-size: 0.82rem;
    line-height: 1.75;
}

/* 红头文件风格正文块：改为居中窄栏 + 更克制的装帧 */
.red-header-doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 44px 48px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    position: relative;
}

/* 顶部一条细红线，替代原来沉重的卡片感 */
.red-header-doc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d64545, transparent);
    opacity: 0.55;
}

.red-header-doc-title {
    text-align: center;
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 8px 0 26px;
    letter-spacing: 2px;
    font-family: 'SimSun', 'STSong', '宋体', serif;
    line-height: 1.9;
    position: relative;
    padding-bottom: 20px;
}

/* 标题下的分隔线：中间实、两端渐隐 */
.red-header-doc-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gray-light) 20%, var(--color-gray-light) 80%, transparent);
}

.red-header-doc-body {
    font-family: 'SimSun', 'STSong', '宋体', serif;
    font-size: 0.92rem;
    line-height: 2.25;
    color: #3d3d3d;
    text-align: justify;
}

/* 正文内各级小标题 */
.red-header-doc-body > div > div[style*="bold"] { font-weight: 700; }

.red-header-doc-body > div > div {
    margin-bottom: 6px;
    text-indent: 2em;
}

.red-header-doc-body p {
    text-indent: 2em;
    margin-bottom: 6px;
}

.red-header-doc-sign {
    text-align: right;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-light);
    font-family: 'SimSun', 'STSong', '宋体', serif;
    font-size: 0.9rem;
    color: #3d3d3d;
    line-height: 1.9;
}

/* ---------------------------------------------------------------
   12b. 关于页：高级排版
   --------------------------------------------------------------- */

/* 导语区：左文右图的双栏 */
.about-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

.about-hero-text h2 {
    font-size: var(--fs-h2);
    font-weight: 650;
    letter-spacing: 1px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.about-hero-text p {
    font-size: 0.95rem;
    color: var(--color-gray);
    line-height: 2.1;
}

.about-hero-text p + p { margin-top: 14px; }

.about-hero-figure {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.about-hero-figure img { width: 100%; height: 420px; object-fit: cover; }

/* 图片上的渐变压角，呼应页头风格 */
.about-hero-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 14, 28, 0.4), transparent 55%);
    pointer-events: none;
}

/* 理念卡片：三列 */
.philo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.philo-card {
    position: relative;
    padding: 36px 30px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.philo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-lighter);
}

/* 顶部品牌色细条 */
.philo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}

.philo-card:hover::before { opacity: 1; }

.philo-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background var(--transition), color var(--transition),
        transform var(--transition);
}

.philo-card:hover .philo-icon {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.06);
}

.philo-index {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-primary-light);
    margin-bottom: 8px;
}

.philo-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.philo-desc {
    font-size: 0.885rem;
    color: var(--color-gray);
    line-height: 1.95;
}

/* 培养目标：左侧大序号 + 右侧文字 */
.goal-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.goal-item {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 30px;
    align-items: start;
    padding: 30px 34px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.goal-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-lighter);
}

.goal-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(140deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
}

.goal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

.goal-desc {
    font-size: 0.91rem;
    color: var(--color-gray);
    line-height: 1.95;
}

/* 附录标题：红头文件作为「正式文件」附录呈现 */
.appendix-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
}

.appendix-head h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    border-left: none;
}

.appendix-head span {
    font-size: 0.8rem;
    color: var(--text3);
    letter-spacing: 0.5px;
}

/* ---------------------------------------------------------------
   12c. 答疑页：留言板
   --------------------------------------------------------------- */
.board-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 26px;
    align-items: start;
}

.board-form-card,
.board-list-card {
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 32px 30px;
}

.board-form-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: 0.8px;
    margin-bottom: 24px;
}

.board-form-title svg { color: var(--color-primary); }

.board-form .form-group { margin-bottom: 18px; }

.board-form label { font-size: 0.825rem; margin-bottom: 7px; }

.board-form .form-control { padding: 10px 14px; font-size: 0.9rem; }

textarea.form-control { min-height: 118px; line-height: 1.8; }

/* 字数计数器 */
.board-counter {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text3);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.board-submit {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: all var(--transition);
}

.board-submit:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-lg);
}

.board-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.board-tip {
    margin-top: 14px;
    font-size: 0.775rem;
    color: var(--text3);
    line-height: 1.7;
    text-align: center;
}

/* 列表区 */
.board-list-card {
    padding: 32px 30px;
    position: sticky;
    top: 88px;
}

.board-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.board-list-head .board-form-title { margin-bottom: 0; }

.board-count {
    font-size: 0.78rem;
    color: var(--color-gray);
    background: #f2f4f7;
    padding: 3px 11px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.board-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 640px;
    overflow-y: auto;
    padding-right: 4px;
}

.msg-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.msg-item:hover {
    border-color: var(--color-primary-lighter);
    box-shadow: var(--shadow-sm);
}

.msg-q { padding: 18px 20px 16px; }

.msg-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 11px;
}

.msg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.msg-author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
}

.msg-cat {
    font-size: 0.7rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 2px 9px;
    border-radius: 999px;
}

.msg-time {
    font-size: 0.75rem;
    color: var(--text3);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.msg-text {
    font-size: 0.885rem;
    color: var(--color-dark-2);
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 回复区：左侧竖线 + 浅底 */
.msg-a {
    padding: 15px 20px;
    background: var(--color-surface-2);
    border-top: 1px solid var(--border);
    border-left: 3px solid var(--color-primary);
}

.msg-a-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 7px;
}

.msg-a .msg-text { color: var(--color-dark-2); font-size: 0.87rem; }

.msg-a-time { margin-top: 8px; margin-left: 0; }

/* ---------------------------------------------------------------
   13b. 招募信息（join.html）
   --------------------------------------------------------------- */
.recruit-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.recruit-card {
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 42px 46px;
    margin-bottom: 28px;
}

.recruit-title {
    color: var(--color-primary);
    font-size: 1.22rem;
    font-weight: 650;
    letter-spacing: 1px;
    margin-bottom: 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

/* 标题下的短装饰线，比通栏粗线更精致 */
.recruit-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}

.recruit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 44px;
}

.recruit-grid + .recruit-extra { margin-top: 26px; }

.recruit-label {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recruit-text {
    color: var(--color-gray);
    font-size: 0.95rem;
    line-height: 1.9;
}

.recruit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.recruit-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid rgba(29, 78, 216, 0.12);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
}

.recruit-tag:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------------------------------------------------------------
   14. 分页 / 后台 / 通用小件
   --------------------------------------------------------------- */
.pagination { gap: 10px; }

.pagination a {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--color-surface);
    font-weight: 550;
    transition: all var(--transition);
}

.pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.pagination a.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand);
}

.admin-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 26px;
}

.data-table th { border-bottom: 1px solid var(--border); font-weight: 600; }

.data-table tbody tr { transition: background var(--transition); }

.admin-login .login-box {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.back-to-top {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.back-to-top:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand-lg);
    transform: translateY(-3px);
}

/* ---------------------------------------------------------------
   14. 页脚 —— 更沉稳的双层次结构
   --------------------------------------------------------------- */
.footer {
    background: #0d1526;
    padding: 72px 0 0;
    color: rgba(255, 255, 255, 0.62);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-top {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 56px;
    margin-bottom: 52px;
    padding-bottom: 0;
}

.footer-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 22px;
    padding-bottom: 0;
}

/* 用小圆点替代粗下划线，更精致 */
.footer-subtitle::after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary-light);
    bottom: 3px;
}

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

.footer-links li a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--transition), padding-left var(--transition);
}

.footer-links li a:hover {
    color: #fff;
    padding-left: 5px;
}

.footer-contact li {
    margin-bottom: 16px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
}

.footer-contact li svg { color: var(--color-primary-light); opacity: 0.85; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 24px 0;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.36);
    letter-spacing: 0.5px;
}

/* 页脚品牌区（部分页面有） */
.footer-brand .footer-title,
.footer-top .footer-logo { font-weight: 650; letter-spacing: 0.5px; }

.footer-desc,
.footer-brand p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    line-height: 1.95;
}

/* ---------------------------------------------------------------
   15. 移动端菜单
   --------------------------------------------------------------- */
.mobile-menu { top: 68px; }

.mobile-menu .m-item > a {
    font-weight: 550;
    font-size: 0.975rem;
    padding: 16px 16px;
}

/* ---------------------------------------------------------------
   17b. 学习资源：上传区说明与文件类型图标
   --------------------------------------------------------------- */
.lr-upload-hint {
    margin-top: 16px;
    padding: 10px 16px;
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--color-gray);
    background: rgba(29, 78, 216, 0.05);
    border: 1px solid rgba(29, 78, 216, 0.1);
    border-radius: var(--radius-sm);
    max-width: 620px;
}

.lr-hint-em {
    color: var(--color-primary);
    font-weight: 600;
}

/* 拖拽悬停时提示区域一起高亮 */
.lr-upload-area.drag .lr-upload-hint {
    background: rgba(29, 78, 216, 0.1);
    border-color: var(--color-primary-lighter);
}

/* 压缩包类文件图标用琥珀色区分 */
.lr-file-icon[data-type="zip"],
.lr-file-icon[data-type="rar"],
.lr-file-icon[data-type="7z"] {
    background: #fef4e2;
    color: #92600e;
}

/* ---------------------------------------------------------------
   16. 响应式
   --------------------------------------------------------------- */
@media (max-width: 992px) {
    .nav-menu { top: 68px; height: calc(100vh - 68px); }

    .section { padding: 72px 0; }

    .section-header { margin-bottom: 42px; }

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

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

    .ph-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .ph-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }

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

    .honor-strip { grid-template-columns: 1fr; }

    .dir-bar { padding: 16px 20px; }

    .stats-band { padding: 36px 28px; gap: 8px; }

    .stat-divider { height: 36px; }

    .cta-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 36px;
    }

    .cta-side {
        padding-left: 0;
        padding-top: 28px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

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

    .about-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-hero-figure img { height: 300px; }

    .board-layout { grid-template-columns: 1fr; }

    .board-list-card { position: static; }

    .board-list { max-height: none; }

    .board-form-card,
    .board-list-card { padding: 26px 22px; border-radius: var(--radius-lg); }

    .goal-item { grid-template-columns: 56px 1fr; gap: 20px; }

    .goal-num { font-size: 1.9rem; }

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

    .planning-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 8px; }

    /* 两列时不需要连接线 */
    .planning-step::after { display: none; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }

    .hero-prev { left: 16px; }
    .hero-next { right: 16px; }

    .form-card { padding: 34px; }

    .red-header-doc { padding: 40px 34px; }
}

@media (max-width: 600px) {
    .container { padding: 0 18px; }

    .section { padding: 56px 0; }

    .section-header { margin-bottom: 34px; }

    .section-title { letter-spacing: 1px; }

    .team-tags {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 380px;
    }

    /* 数据条转为 2×2 网格 */
    .stats-band {
        grid-template-columns: 1fr 1fr;
        gap: 24px 8px;
        padding: 30px 22px;
    }

    .stat-divider { display: none; }

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

    .philo-card { padding: 28px 24px; }

    .goal-list { gap: 14px; }

    .goal-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 24px 22px;
    }

    .goal-num { font-size: 1.6rem; }

    .about-hero-figure img { height: 220px; }

    .track-grid,
    .dir-grid,
    .honor-strip { grid-template-columns: 1fr; }

    .ph-grid.cols-2,
    .ph-grid.cols-3,
    .ph-grid.cols-4 { grid-template-columns: 1fr; }

    .dir-bar { flex-direction: column; align-items: flex-start; gap: 12px; }

    .dir-bar-label { padding-right: 0; }

    .dir-bar-label::after { display: none; }

    .ph.media { min-height: 200px; }
    .ph.media-tall { min-height: 240px; }

    .track-card { padding: 26px 22px; }

    .dir-card {
        display: grid;
        grid-template-columns: 46px 1fr;
        gap: 4px 16px;
        padding: 22px;
        align-items: center;
    }

    .dir-icon { margin-bottom: 0; grid-row: span 2; }

    .dir-title { margin-bottom: 2px; }

    .cta-card { padding: 32px 24px; }

    .cta-actions .btn { flex: 1; min-width: 140px; }

    .team-tag {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 18px 22px;
    }

    .team-desc { margin-top: 24px; font-size: 0.9rem; }

    /* 动态列表：标题与日期改为上下排 */
    .news-list > a {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 18px 20px;
    }

    .news-list > a:hover { padding-left: 24px; }

    .news-list > a .news-date {
        padding: 0;
        background: none;
        order: -1;
    }

    .planning-flow { padding: 28px 18px; }

    .planning-steps { grid-template-columns: 1fr; gap: 28px; }

    .planning-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 16px;
        text-align: left;
        align-items: center;
    }

    .planning-step-num {
        width: 56px;
        height: 56px;
        margin: 0;
        font-size: 1.1rem;
    }

    .planning-step-title { margin-bottom: 4px; }

    .form-card { padding: 24px; border-radius: var(--radius-lg); }

    .form-section { padding: 22px 20px; }

    .red-header-doc { padding: 28px 22px; }

    .red-header-doc-title { font-size: 1.2rem; letter-spacing: 1.5px; }

    .footer { padding-top: 52px; }

    .footer-top { grid-template-columns: 1fr; gap: 32px; }

    .honor-photo { height: 190px; }

    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .hero-dots { bottom: 28px; }
}
/* ============================================================
   新闻详情页（doc-article 系列）
   ============================================================ */
.doc-article {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 48px 52px;
}

.doc-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-gray-light);
}

.doc-tag {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 999px;
    background: rgba(29, 78, 216, .08);
    color: var(--color-primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.doc-date {
    font-size: .85rem;
    color: #667085;
    font-variant-numeric: tabular-nums;
}

.doc-lead {
    margin: 0 0 30px;
    padding: 20px 22px;
    background: linear-gradient(180deg, #f8fafc, #fbfcfe);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 1.03rem;
    line-height: 1.95;
    color: #344054;
}

/* 数据概览 */
.doc-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0 0 34px;
}

.doc-stat {
    padding: 20px 16px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.doc-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(29, 78, 216, .28);
    box-shadow: var(--shadow-md);
}

.doc-stat-num {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    word-break: break-all;
}

.doc-stat-label {
    margin-top: 5px;
    font-size: .84rem;
    color: #667085;
}

/* 正文标题与段落 */
.doc-article .doc-h2 {
    margin: 34px 0 14px;
    padding-left: 14px;
    position: relative;
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.5;
}

.doc-article .doc-h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: .28em;
    bottom: .28em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--color-primary), #60a5fa);
}

.doc-article p {
    margin: 0 0 15px;
    font-size: .97rem;
    line-height: 2.05;
    color: #475467;
    text-align: justify;
}

.doc-article p strong { color: var(--color-dark); }

/* 列表 */
.doc-ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.doc-ul li {
    position: relative;
    padding: 12px 18px 12px 42px;
    margin-bottom: 10px;
    background: #f8fafc;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    line-height: 1.9;
    color: #475467;
}

.doc-ul li::before {
    content: counter(doc-li);
    counter-increment: doc-li;
    position: absolute;
    left: 15px;
    top: 13px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(29, 78, 216, .1);
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

.doc-ul { counter-reset: doc-li; }

.doc-ul li strong { color: var(--color-dark); }

/* 提示块 */
.doc-callout {
    margin: 28px 0;
    padding: 20px 24px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(29, 78, 216, .07), rgba(96, 165, 250, .05));
    border: 1px solid rgba(29, 78, 216, .18);
}

.doc-callout p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.95;
    color: #344054;
}

.doc-callout a {
    color: var(--color-primary);
    font-weight: 600;
}

/* 图片 */
.doc-figure {
    margin: 22px 0 0;
}

.doc-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-sm);
}

.doc-figure figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: .85rem;
    color: #98a2b3;
}

/* 底部导航 */
.doc-footer-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-gray-light);
}

.doc-footer-nav .more-link { margin-right: auto; }

.doc-back {
    font-size: .92rem;
    color: #667085;
    text-decoration: none;
    transition: color .2s ease;
}

.doc-back:hover { color: var(--color-primary); }

/* 响应式 */
@media (max-width: 768px) {
    .doc-article { padding: 32px 24px; }
    .doc-stat-row { grid-template-columns: 1fr; gap: 10px; }
    .doc-stat { padding: 16px 14px; }
    .doc-footer-nav { flex-direction: column; align-items: flex-start; gap: 12px; }
    .doc-footer-nav .more-link { margin-right: 0; }
}

/* ============================================================
   成员登录页
   ============================================================ */
body.login-page { background: #fff; }

.login-shell {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 100vh;
}

/* 左侧品牌区 */
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 48px 56px;
    background: linear-gradient(155deg, #101828 0%, #1e3a8a 55%, #1d4ed8 100%);
    color: #fff;
    overflow: hidden;
}

.login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 30% 25%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 25%, #000 10%, transparent 72%);
}

.login-brand::after {
    content: '';
    position: absolute;
    right: -120px;
    bottom: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, .28), transparent 68%);
}

.login-brand > * { position: relative; z-index: 1; }

.login-brand-top {
    display: flex;
    align-items: center;
    gap: 13px;
}

.login-emblem {
    height: 46px;
    width: auto;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
}

.login-school-cn {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    line-height: 1.3;
}

.login-school-en {
    font-size: .58rem;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.4;
    max-width: 300px;
}

.login-brand-main { margin: auto 0; padding: 40px 0; }

.login-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    font-size: .76rem;
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.login-title {
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.login-desc {
    font-size: .95rem;
    line-height: 1.95;
    color: rgba(255, 255, 255, .78);
    max-width: 430px;
    margin-bottom: 26px;
}

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

.login-points li {
    position: relative;
    padding: 8px 0 8px 26px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.7;
}

.login-points li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, .22);
}

.login-brand-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.login-brand-foot a { color: #fff; font-weight: 500; }
.login-brand-foot a:hover { color: #93c5fd; }

/* 右侧表单区 */
.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.login-card { width: 100%; max-width: 400px; }

.login-card-head { margin-bottom: 32px; }

.login-card-head h2 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
    letter-spacing: .5px;
}

.login-card-head p { font-size: .9rem; color: var(--color-gray); }

.login-field { margin-bottom: 20px; }

.login-field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-dark-2);
    margin-bottom: 8px;
}

.login-input-wrap { position: relative; display: flex; align-items: center; }

.login-input-icon {
    position: absolute;
    left: 14px;
    color: #98a2b3;
    pointer-events: none;
}

.login-input-wrap input {
    width: 100%;
    padding: 13px 46px 13px 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: .93rem;
    color: var(--color-dark);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.login-input-wrap input::placeholder { color: #b8c0cc; }

.login-input-wrap input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.login-eye {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #98a2b3;
    padding: 4px;
    display: flex;
}

.login-eye:hover { color: var(--color-primary); }

.login-error {
    padding: 11px 15px;
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: .86rem;
}

.login-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand-lg);
}

.login-submit:disabled { opacity: .68; cursor: not-allowed; }

.login-hint {
    margin-top: 22px;
    font-size: .82rem;
    color: #98a2b3;
    text-align: center;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-brand { padding: 32px 26px; }
    .login-brand-main { padding: 26px 0; }
    .login-points { display: none; }
    .login-form-side { padding: 40px 24px 60px; }
}

/* ============================================================
   登录页：图形验证码
   ============================================================ */
.captcha-row { display: flex; align-items: stretch; gap: 10px; }

.captcha-input { flex: 1; }

.captcha-box {
    position: relative;
    width: 120px;
    height: 46px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #f1f5fb;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.captcha-box:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .1);
}

.captcha-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.captcha-loading,
.captcha-fail {
    font-size: .72rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.35;
}

.login-field .required {
    color: #e5484d;
    margin-left: 2px;
}

/* 刷新时的加载态遮罩 */
.captcha-box.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
}

/* ============================================================
   文件空间（学习资源 · 仅成员可见）
   ============================================================ */

/* ---------- 未登录门禁 ---------- */
.lock-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 44px 42px;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.lock-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.lock-title {
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 14px;
    letter-spacing: .5px;
}

.lock-desc {
    font-size: .93rem;
    line-height: 1.95;
    color: var(--color-gray);
    margin-bottom: 30px;
}

.lock-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.lock-hint {
    font-size: .84rem;
    color: #98a2b3;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-light);
}

/* ---------- 工具栏 ---------- */
.fs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin-bottom: 18px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.fs-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .92rem;
}

.fs-crumb {
    cursor: pointer;
    color: var(--color-gray);
    transition: color var(--transition);
    padding: 2px 4px;
    border-radius: 5px;
}

.fs-crumb:hover { color: var(--color-primary); }
.fs-crumb.current { color: var(--color-dark); font-weight: 600; cursor: default; }
.fs-sep { color: #cbd5e1; }

.fs-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fs-user {
    font-size: .86rem;
    color: var(--color-dark-2);
    padding: 5px 12px;
    background: var(--color-primary-soft);
    border-radius: 999px;
}

.fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-dark-2);
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.fs-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.fs-btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.fs-btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.fs-btn-ghost { color: var(--color-gray); }

/* ---------- 布局 ---------- */
.fs-layout {
    display: grid;
    grid-template-columns: 244px 1fr;
    gap: 18px;
    align-items: start;
}

/* ---------- 左侧树 ---------- */
.fs-sidebar {
    position: sticky;
    top: 100px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.fs-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-gray-light);
}

.fs-sidebar-head h3 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: .5px;
}

.fs-add-folder {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.fs-add-folder:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.fs-tree { list-style: none; margin: 0; padding: 8px; max-height: 460px; overflow-y: auto; }

.fs-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .875rem;
    color: var(--color-dark-2);
    transition: background var(--transition), color var(--transition);
}

.fs-tree-item:hover { background: #f2f4f7; }

.fs-tree-item.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}

.fs-tree-child { padding-left: 24px; font-size: .84rem; }

.fs-tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fs-tree-count {
    font-size: .72rem;
    color: var(--color-gray);
    background: #f2f4f7;
    padding: 1px 7px;
    border-radius: 999px;
}

.fs-tree-item.active .fs-tree-count { background: rgba(29,78,216,.14); color: var(--color-primary); }

.fs-sidebar-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--color-gray-light);
    font-size: .78rem;
    color: var(--color-gray);
    line-height: 1.85;
    background: #fbfcfe;
}

.fs-sidebar-foot strong { color: var(--color-primary); }

/* ---------- 右侧主区 ---------- */
.fs-main { min-width: 0; }

.fs-subfolders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.fs-folder-card {
    padding: 18px 16px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.fs-folder-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary-lighter);
    box-shadow: var(--shadow-md);
}

.fs-folder-icon { font-size: 1.7rem; margin-bottom: 10px; line-height: 1; }

.fs-folder-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-folder-meta { font-size: .75rem; color: var(--color-gray); }

/* ---------- 上传区 ---------- */
.fs-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(29,78,216,.05), rgba(96,165,250,.03));
    border: 1px dashed rgba(29,78,216,.28);
    border-radius: var(--radius);
}

.fs-upload-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fs-upload-info strong { font-size: .93rem; color: var(--color-dark); }
.fs-upload-hint { font-size: .78rem; color: var(--color-gray); }

.fs-upload-actions { display: flex; gap: 10px; flex-shrink: 0; }

.fs-progress {
    width: 100%;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px dashed rgba(29,78,216,.2);
}

.fs-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: #e4e7ec;
    overflow: hidden;
    margin-bottom: 8px;
}

.fs-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width .2s ease;
}

.fs-progress-text { font-size: .8rem; color: var(--color-gray); }
.fs-progress-done { font-size: .85rem; color: #067647; font-weight: 500; }
.fs-progress-err { font-size: .85rem; color: #b42318; }

/* ---------- 文件列表 ---------- */
.fs-files {
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.fs-files-head {
    display: flex;
    justify-content: space-between;
    padding: 11px 20px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: .78rem;
    color: var(--color-gray);
    font-weight: 600;
    letter-spacing: .5px;
}

.fs-file-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #f2f4f7;
    transition: background var(--transition);
}

.fs-file-row:last-child { border-bottom: none; }
.fs-file-row:hover { background: #fbfcfe; }

.fs-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .3px;
    flex-shrink: 0;
}

.fs-file-main { flex: 1; min-width: 0; }

.fs-file-name {
    font-size: .9rem;
    font-weight: 500;
    color: var(--color-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}

.fs-file-meta { font-size: .76rem; color: var(--color-gray); }

.fs-file-ops { display: flex; gap: 8px; flex-shrink: 0; }

.fs-file-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    color: var(--color-dark-2);
    background: #fff;
    cursor: pointer;
    transition: all var(--transition);
}

.fs-file-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.fs-file-del:hover {
    border-color: #f04438;
    color: #d92d20;
    background: #fef3f2;
}

.fs-loading, .fs-empty {
    padding: 56px 20px;
    text-align: center;
    color: var(--color-gray);
    font-size: .88rem;
}

.fs-empty-icon { font-size: 2.6rem; margin-bottom: 14px; opacity: .5; }
.fs-empty p { font-size: .95rem; color: var(--color-dark-2); margin-bottom: 6px; }
.fs-empty span { font-size: .82rem; color: #98a2b3; }

/* ---------- 弹窗 ---------- */
.fs-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(16,24,40,.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.fs-modal[hidden] { display: none; }

.fs-modal-card {
    width: 100%;
    max-width: 440px;
    padding: 30px 32px 26px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: fsPop .22s ease;
}

@keyframes fsPop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.fs-modal-title { font-size: 1.14rem; font-weight: 700; color: var(--color-dark); margin-bottom: 6px; }

.fs-modal-desc { font-size: .84rem; color: var(--color-gray); margin-bottom: 22px; line-height: 1.7; }

.fs-modal-field { margin-bottom: 16px; }

.fs-modal-field label {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--color-dark-2);
    margin-bottom: 7px;
}

.fs-modal-field .req { color: #e5484d; }

.fs-modal-field input,
.fs-modal-field select {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .89rem;
    color: var(--color-dark);
    background: #fff;
}

.fs-modal-field input:focus,
.fs-modal-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

.fs-modal-error {
    padding: 10px 13px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: .84rem;
}

.fs-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .fs-layout { grid-template-columns: 1fr; }
    .fs-sidebar { position: static; }
    .fs-tree { max-height: 260px; }
    .lock-card { padding: 36px 24px 32px; }
    .lock-actions { flex-direction: column; }
    .fs-toolbar { flex-direction: column; align-items: flex-start; }
    .fs-upload { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   后台：成员管理页
   ============================================================ */
.am-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 32px;
    background: #fff;
    border-bottom: 1px solid var(--color-gray-light);
    position: sticky;
    top: 0;
    z-index: 100;
}

.am-topbar-left { display: flex; align-items: center; gap: 12px; }
.am-emblem { height: 38px; width: auto; flex-shrink: 0; }
.am-title { font-size: 1.05rem; font-weight: 700; color: var(--color-dark); letter-spacing: .5px; }
.am-sub { font-size: .76rem; color: var(--color-gray); margin-top: 2px; }

.am-topbar-right { display: flex; align-items: center; gap: 10px; }
.am-user { font-size: .85rem; color: var(--color-dark-2); }

.am-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-dark-2);
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.am-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.am-btn:disabled { opacity: .6; cursor: not-allowed; }

.am-btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.am-btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    color: #fff;
}

.am-btn-ghost { color: var(--color-gray); }

/* 统计条 */
.am-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.am-stat {
    padding: 20px 16px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.am-stat-num {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.am-stat-label { font-size: .82rem; color: var(--color-gray); margin-top: 4px; }

/* 卡片 */
.am-card {
    padding: 24px 26px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.am-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.am-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 5px;
    letter-spacing: .3px;
}

.am-card-desc { font-size: .84rem; color: var(--color-gray); margin-bottom: 20px; line-height: 1.75; }
.am-card-desc code { background: #f2f4f7; padding: 1px 6px; border-radius: 4px; font-size: .82rem; }

/* 表单 */
.am-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    align-items: end;
}

.am-field { position: relative; }

.am-field label {
    display: block;
    font-size: .83rem;
    font-weight: 600;
    color: var(--color-dark-2);
    margin-bottom: 7px;
}

.am-field .req { color: #e5484d; }

.am-field input,
.am-field select {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .88rem;
    color: var(--color-dark);
    background: #fff;
}

.am-field input:focus,
.am-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

.am-field-btn { display: flex; align-items: flex-end; }

.am-mini-btn {
    position: absolute;
    right: 8px;
    bottom: 9px;
    padding: 4px 9px;
    border: none;
    border-radius: 5px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: .72rem;
    cursor: pointer;
    transition: background var(--transition);
}

.am-mini-btn:hover { background: var(--color-primary); color: #fff; }

.am-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .87rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--color-dark);
    resize: vertical;
    line-height: 1.85;
}

.am-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

.am-bulk-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.am-hint { font-size: .79rem; color: var(--color-gray); }

/* 提示 */
.am-msg {
    padding: 11px 15px;
    margin-top: 16px;
    border-radius: var(--radius-sm);
    font-size: .86rem;
}

.am-msg.ok { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.am-msg.err { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; }

.am-detail {
    padding: 12px 15px;
    margin-top: 12px;
    background: #fffaeb;
    border: 1px solid #fedf89;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    color: #93370d;
    line-height: 1.9;
}

/* 表格 */
.am-table-wrap {
    overflow-x: auto;
    margin-top: 14px;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
}

.am-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 720px; }

.am-table thead { background: #fbfcfe; }

.am-table th {
    padding: 11px 16px;
    text-align: left;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-gray);
    letter-spacing: .5px;
    border-bottom: 1px solid var(--color-gray-light);
    white-space: nowrap;
}

.am-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f2f4f7;
    color: var(--color-dark-2);
    vertical-align: middle;
}

.am-table tr:last-child td { border-bottom: none; }
.am-table tbody tr:hover { background: #fbfcfe; }

.am-uid {
    background: #f2f4f7;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: .82rem;
    color: var(--color-dark);
}

.am-date { font-size: .8rem; color: var(--color-gray); white-space: nowrap; }
.am-td-center { text-align: center; color: var(--color-gray) !important; padding: 32px 16px !important; }

.am-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.am-badge-on { background: #ecfdf3; color: #067647; }
.am-badge-off { background: #f2f4f7; color: #667085; }
.am-badge-admin { background: var(--color-primary-soft); color: var(--color-primary); }

.am-ops { white-space: nowrap; }

.am-link {
    border: none;
    background: none;
    padding: 0 8px 0 0;
    margin-right: 8px;
    color: var(--color-primary);
    font-size: .82rem;
    cursor: pointer;
    transition: color var(--transition);
}

.am-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.am-link-danger { color: #d92d20; }
.am-link-danger:hover { color: #b42318; }

/* 留言板（实名） */
.am-msg-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

.am-msg-item {
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}

.am-msg-q {
    padding: 16px 20px;
    background: #fbfcfe;
    border-bottom: 1px solid #f2f4f7;
}

.am-msg-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.am-msg-author {
    font-size: .86rem;
    font-weight: 600;
    color: var(--color-dark);
}

.am-msg-author::before {
    content: '👤 ';
    font-size: .8rem;
}

.am-msg-cat {
    font-size: .72rem;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.am-msg-time { font-size: .75rem; color: #98a2b3; margin-left: auto; }

.am-msg-text {
    font-size: .9rem;
    line-height: 1.85;
    color: #344054;
    white-space: pre-wrap;
    word-break: break-word;
}

.am-msg-contact {
    margin-top: 8px;
    font-size: .78rem;
    color: var(--color-gray);
}

.am-msg-a {
    padding: 16px 20px;
    background: rgba(29,78,216,.03);
    border-left: 3px solid var(--color-primary);
}

.am-msg-a .am-msg-text { color: #344054; }

.am-msg-a-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .82rem;
    color: var(--color-primary);
    font-weight: 600;
}

.am-msg-a-head .am-msg-time { margin-left: auto; font-weight: 400; }

.am-msg-actions { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid #f2f4f7; }

.am-reply-box { padding: 16px 20px; border-top: 1px solid #f2f4f7; }

.am-reply-box textarea {
    width: 100%;
    min-height: 84px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .87rem;
    color: var(--color-dark);
    resize: vertical;
    line-height: 1.8;
}

.am-reply-box textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

.am-reply-actions { display: flex; gap: 10px; margin-top: 10px; }

@media (max-width: 768px) {
    .am-stats { grid-template-columns: repeat(2, 1fr); }
    .am-topbar { padding: 14px 18px; }
}

/* ============================================================
   群公告弹窗（参照教务系统的通知公告）
   ============================================================ */
.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(16, 24, 40, .5);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.notice-modal[hidden] { display: none; }

.notice-card {
    position: relative;
    width: 100%;
    max-width: 620px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .24);
    overflow: hidden;
    animation: fsPop .24s ease;
}

/* 顶部品牌色条 */
.notice-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), #60a5fa);
}

.notice-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 28px 32px 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .5px;
}

.notice-title {
    padding: 16px 32px 0;
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--color-dark);
    text-align: center;
    line-height: 1.5;
    letter-spacing: .3px;
}

.notice-rule {
    width: 68%;
    height: 1px;
    margin: 16px auto 0;
    background: linear-gradient(90deg, transparent, var(--color-gray-light), transparent);
}

.notice-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 14px 32px 0;
    font-size: .82rem;
    color: var(--color-gray);
}

.notice-meta strong { color: var(--color-dark-2); font-weight: 600; }

.notice-body {
    padding: 20px 32px 26px;
    font-size: .93rem;
    line-height: 2.05;
    color: #344054;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 120px;
    max-height: 46vh;
    overflow-y: auto;
}

.notice-actions {
    display: flex;
    justify-content: center;
    padding: 0 32px 30px;
}

.notice-btn {
    min-width: 128px;
    padding: 11px 30px;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-primary);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.notice-btn:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(29, 78, 216, .26);
}

@media (max-width: 600px) {
    .notice-label { margin: 20px 20px 0; }
    .notice-title { padding: 14px 20px 0; font-size: 1.12rem; }
    .notice-meta { padding: 12px 20px 0; gap: 12px; }
    .notice-body { padding: 16px 20px 20px; }
    .notice-actions { padding: 0 20px 22px; }
}

/* ============================================================
   登录页：保持登录勾选
   ============================================================ */
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
  font-size: 0.86rem;
  color: #4a5568;
  cursor: pointer;
  user-select: none;
}
.login-remember input { width: 15px; height: 15px; accent-color: #6b2a8f; cursor: pointer; }
.login-remember em { font-style: normal; color: #94a3b8; font-size: 0.78rem; }

/* ============================================================
   文件空间：账号菜单（修改密码 / 退出登录）
   ============================================================ */
.fs-account { position: relative; }

.fs-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fs-user-btn:hover { border-color: #c4b5d8; box-shadow: 0 4px 12px rgba(107, 42, 143, 0.1); }
.fs-user-btn .fs-user { color: #2d3748; font-weight: 600; }
.fs-caret { color: #94a3b8; transition: transform 0.2s; }
.fs-user-btn[aria-expanded="true"] .fs-caret { transform: rotate(180deg); }

.fs-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b2a8f, #8b5fb0);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fs-avatar-lg { width: 40px; height: 40px; font-size: 1.05rem; }

.fs-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 244px;
  background: #fff;
  border: 1px solid #e8e4ef;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(45, 31, 61, 0.16);
  padding: 8px;
  z-index: 40;
  animation: fsMenuIn 0.18s ease;
}
@keyframes fsMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.fs-account-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid #f0edf5;
  margin-bottom: 6px;
}
.fs-account-head strong { display: block; font-size: 0.95rem; color: #2d3748; }
.fs-account-head span:not(.fs-avatar) { font-size: 0.76rem; color: #8b7aa8; }

.fs-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4a5568;
  font-size: 0.88rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.fs-menu-item:hover { background: #f7f4fb; color: #6b2a8f; }
.fs-menu-danger { color: #c53030; }
.fs-menu-danger:hover { background: #fff5f5; color: #9b2c2c; }

.fs-menu-note {
  margin: 4px 10px 6px;
  font-size: 0.72rem;
  color: #a0aec0;
  line-height: 1.5;
}

/* ============================================================
   文件空间：内部留言与解答
   ============================================================ */
.fs-board {
  margin-top: 28px;
  background: #fff;
  border: 1px solid #ece7f2;
  border-radius: 16px;
  padding: 22px 24px 24px;
  box-shadow: 0 4px 18px rgba(45, 31, 61, 0.04);
}
.fs-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f0f8;
}
.fs-board-head h3 { margin: 0 0 5px; font-size: 1.05rem; color: #2d3748; }
.fs-board-head p { margin: 0; font-size: 0.82rem; color: #94a3b8; line-height: 1.6; }

.fs-board-form { padding: 18px 0 20px; }
.fs-board-row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; }
.fs-board-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a5568;
}
.fs-board-field label .req { color: #c53030; }
.fs-board-field select,
.fs-board-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fdfcff;
  font-family: inherit;
  font-size: 0.88rem;
  color: #2d3748;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fs-board-field select { height: 40px; cursor: pointer; }
.fs-board-field textarea { resize: vertical; min-height: 78px; line-height: 1.6; }
.fs-board-field select:focus,
.fs-board-field textarea:focus {
  outline: none;
  border-color: #8b5fb0;
  box-shadow: 0 0 0 3px rgba(139, 95, 176, 0.12);
}

.fs-board-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
}
.fs-board-as { font-size: 0.78rem; color: #8b7aa8; margin-right: auto; }

.fs-board-msg {
  margin: 12px 0 0;
  padding: 9px 13px;
  border-radius: 9px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #22543d;
  font-size: 0.83rem;
}
.fs-board-msg.is-err { background: #fff5f5; border-color: #fed7d7; color: #9b2c2c; }

.fs-board-list { display: flex; flex-direction: column; gap: 12px; }
.fs-board-empty {
  padding: 26px;
  text-align: center;
  font-size: 0.86rem;
  color: #a0aec0;
  background: #faf9fc;
  border: 1px dashed #e4dced;
  border-radius: 12px;
}

.fs-msg {
  border: 1px solid #eee9f5;
  border-radius: 13px;
  padding: 15px 17px;
  background: #fdfcff;
}
.fs-msg.is-done { border-color: #ddd2ea; background: #fff; }

.fs-msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.fs-msg-cat {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3edfa;
  color: #6b2a8f;
  font-size: 0.74rem;
  font-weight: 600;
}
.fs-msg-status { font-size: 0.76rem; font-weight: 600; color: #dd6b20; }
.fs-msg.is-done .fs-msg-status { color: #2f855a; }
.fs-msg-time { margin-left: auto; font-size: 0.75rem; color: #a0aec0; }

.fs-msg-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #2d3748;
  white-space: pre-wrap;
  word-break: break-word;
}

.fs-msg-reply {
  margin-top: 12px;
  padding: 13px 15px;
  border-left: 3px solid #8b5fb0;
  border-radius: 0 10px 10px 0;
  background: #f9f6fd;
}
.fs-msg-reply-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #6b2a8f;
}
.fs-msg-reply p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #4a5568;
  white-space: pre-wrap;
  word-break: break-word;
}
.fs-msg-reply-time { display: block; margin-top: 8px; font-size: 0.73rem; color: #a0aec0; }

.fs-msg-pending {
  margin-top: 11px;
  font-size: 0.79rem;
  color: #a0aec0;
  font-style: italic;
}

@media (max-width: 768px) {
  .fs-board { padding: 18px 16px 20px; }
  .fs-board-row { grid-template-columns: 1fr; }
  .fs-board-head { flex-direction: column; }
  .fs-user-btn .fs-user { display: none; }
  .fs-account-menu { width: 214px; }
}

/* temp-shot */
.fade-in{opacity:1 !important;transform:none !important}

/* ============================================================
   首页 · 工作室动态（左头条 + 右列表）
   版式参照高校官网新闻中心：左侧大图头条，右侧单行列表
   ============================================================ */
.news-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-primary);
}
.news-masthead-l { display: flex; flex-direction: column; gap: 8px; }
.news-masthead .section-title { margin: 0; }
.news-masthead .more-link { margin: 0; }

.news-portal {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* ---- 左侧头条 ---- */
.news-lead {
    display: block;
    border: 1px solid #e9edf3;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 32, 64, .05);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s;
}
.news-lead:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(16, 32, 64, .12);
}
.news-lead-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.news-lead-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.news-lead:hover .news-lead-cover img { transform: scale(1.05); }
.news-lead-tag {
    position: absolute;
    top: 14px; left: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(29, 78, 216, .35);
}
.news-lead-body { padding: 22px 24px 24px; }
.news-lead-title {
    margin: 0 0 12px;
    font-size: 1.28rem;
    font-weight: 650;
    line-height: 1.5;
    color: var(--color-dark);
    transition: color .2s;
}
.news-lead:hover .news-lead-title { color: var(--color-primary); }
.news-lead-desc {
    margin: 0 0 16px;
    font-size: .93rem;
    line-height: 1.85;
    color: var(--color-gray);
}
.news-lead-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8rem;
    color: #9aa5b4;
}
.news-lead-src {
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(29, 78, 216, .09);
    color: var(--color-primary);
    font-weight: 600;
}

/* ---- 右侧列表 ---- */
.news-side {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eaeef4;
}
.news-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 17px 4px;
    border-bottom: 1px solid #eef1f6;
    transition: background .2s, padding-left .2s;
}
.news-row:hover { background: #f7faff; padding-left: 10px; }
.news-row-src {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-primary-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-row-title {
    font-size: .95rem;
    color: var(--color-dark);
    line-height: 1.55;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: color .2s;
}
.news-row:hover .news-row-title { color: var(--color-primary); }
.news-row-date { font-size: .78rem; color: #9aa5b4; white-space: nowrap; }

@media (max-width: 992px) {
    .news-portal { grid-template-columns: 1fr; gap: 26px; }
    .news-row { grid-template-columns: 104px minmax(0, 1fr) auto; padding: 15px 4px; }
    .news-masthead { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
    .news-lead-body { padding: 18px 18px 20px; }
    .news-lead-title { font-size: 1.1rem; }
    .news-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .news-row-src { grid-column: 1 / -1; }
}

/* ============================================================
   学习资源 · 本地文件方式打开时的部署提示
   ============================================================ */
.lock-file-tip {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid #fbd38d;
    border-left: 4px solid #ed8936;
    border-radius: 12px;
    background: #fffaf0;
    text-align: left;
}
.lock-file-tip strong {
    display: block;
    margin-bottom: 8px;
    font-size: .95rem;
    color: #9c4221;
}
.lock-file-tip p {
    margin: 0 0 10px;
    font-size: .86rem;
    line-height: 1.75;
    color: #744210;
}
.lock-file-tip code {
    display: block;
    padding: 11px 14px;
    border-radius: 9px;
    background: #2d3748;
    color: #9ae6b4;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: .88rem;
    letter-spacing: .5px;
}
.lock-file-tip-sub { margin: 10px 0 0 !important; }
.lock-file-tip-sub b { color: #9c4221; }

/* ============================================================
   工作室动态页 · 时间线（左侧竖线 + 右侧内容）
   ============================================================ */
.news-count { font-size: .82rem; color: #9aa5b4; white-space: nowrap; }

.timeline {
    position: relative;
    padding-left: 128px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 96px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-primary), rgba(29, 78, 216, .12));
}

.tl-item {
    position: relative;
    margin-bottom: 22px;
}
.tl-item:last-child { margin-bottom: 0; }

.tl-date {
    position: absolute;
    left: -128px;
    top: 2px;
    width: 78px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}
.tl-date strong { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); }
.tl-date span { font-size: .8rem; color: #9aa5b4; }

.tl-item::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 12px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .1);
}

.tl-body {
    padding: 20px 24px 22px;
    border: 1px solid #e9edf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(16, 32, 64, .045);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s, border-color .26s;
}
.tl-item:hover .tl-body {
    transform: translateX(5px);
    border-color: #cfdcf7;
    box-shadow: 0 12px 30px rgba(16, 32, 64, .1);
}

.tl-tag {
    display: inline-block;
    margin-bottom: 9px;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(29, 78, 216, .09);
    color: var(--color-primary);
    font-size: .76rem;
    font-weight: 600;
}
.tl-title {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.55;
    color: var(--color-dark);
}
.tl-desc {
    margin: 0;
    font-size: .89rem;
    line-height: 1.85;
    color: var(--color-gray);
}

@media (max-width: 768px) {
    .timeline { padding-left: 0; }
    .timeline::before { left: 6px; }
    .tl-date {
        position: static;
        width: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 8px;
    }
    .tl-date strong { font-size: 1rem; }
    .tl-item { padding-left: 28px; margin-bottom: 18px; }
    .tl-item::before { left: 0; top: 10px; }
    .tl-body { padding: 16px 18px 18px; }
    .tl-title { font-size: 1rem; }
}

/* ============================================================
   学习资源 · 未登录门禁面板（内嵌登录）
   ============================================================ */
.gate-panel {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    max-width: 940px;
    margin: 0 auto;
    border: 1px solid #e7eaf0;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 60px rgba(16, 32, 64, .1);
}

/* ---- 左侧品牌区 ---- */
.gate-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: 40px 36px 32px;
    background: linear-gradient(158deg, #17254d 0%, #1d3f8f 52%, #2f5fc4 100%);
    color: #fff;
}
.gate-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 72%);
    pointer-events: none;
}
.gate-aside > * { position: relative; z-index: 1; }
.gate-aside-top { text-align: center; }
.gate-emblem { height: 54px; width: auto; opacity: .5; margin-bottom: 14px; object-fit: contain; }
.gate-brand { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: 4px; }
.gate-brand-sub { margin: 0; font-size: .76rem; letter-spacing: 1.6px; opacity: .72; }

.gate-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.gate-points li { padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .3); }
.gate-points strong { display: block; margin-bottom: 5px; font-size: .95rem; letter-spacing: .6px; }
.gate-points span { font-size: .8rem; line-height: 1.65; opacity: .74; }
.gate-aside-foot { margin: 0; font-size: .76rem; letter-spacing: 1.4px; opacity: .58; text-align: center; }

/* ---- 右侧表单区 ---- */
.gate-main { padding: 42px 44px 36px; }
.gate-title { margin: 0 0 8px; font-size: 1.42rem; font-weight: 650; color: #1a2233; }
.gate-desc { margin: 0 0 28px; font-size: .87rem; color: #8b95a5; }

.gate-form { display: flex; flex-direction: column; gap: 17px; }
.gate-field label {
    display: block;
    margin-bottom: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: #4a5568;
}

.gate-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fbfcfe;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.gate-input-wrap:focus-within {
    border-color: #4b7bf0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(75, 123, 240, .13);
}
.gate-icon { color: #a8b3c4; flex-shrink: 0; }
.gate-input-wrap input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: .92rem;
    color: #1a2233;
    outline: none;
}
.gate-input-wrap input::placeholder { color: #b6bfcc; }
.gate-eye {
    border: 0;
    background: transparent;
    color: #a8b3c4;
    cursor: pointer;
    padding: 3px;
    display: inline-flex;
    transition: color .2s;
}
.gate-eye:hover { color: #4b7bf0; }

.gate-captcha-row { display: grid; grid-template-columns: 1fr 122px; gap: 11px; }
.gate-captcha-box {
    position: relative;
    height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f4f1f8;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, box-shadow .2s;
}
.gate-captcha-box:hover { border-color: #b9a3d6; box-shadow: 0 3px 10px rgba(107, 42, 143, .12); }
.gate-captcha-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-captcha-loading,
.gate-captcha-fail {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    line-height: 1.5;
    color: #8b7aa8;
    background: #f4f1f8;
}

.gate-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    color: #4a5568;
    cursor: pointer;
    user-select: none;
}
.gate-remember input { width: 15px; height: 15px; accent-color: #4b7bf0; cursor: pointer; }
.gate-remember em { font-style: normal; font-size: .76rem; color: #a8b3c4; }

.gate-error {
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    color: #9b2c2c;
    font-size: .84rem;
    line-height: 1.6;
}

.gate-actions { display: flex; gap: 12px; margin-top: 4px; }
.gate-btn {
    flex: 1;
    height: 45px;
    border: 0;
    border-radius: 11px;
    font-family: inherit;
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s, color .2s;
}
.gate-btn-primary {
    background: linear-gradient(135deg, #1d4ed8, #3b6ff5);
    color: #fff;
    box-shadow: 0 6px 18px rgba(29, 78, 216, .3);
}
.gate-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(29, 78, 216, .38); }
.gate-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.gate-btn-ghost {
    flex: 0 0 96px;
    background: #f3f5f9;
    color: #5a6474;
}
.gate-btn-ghost:hover { background: #e8ecf3; color: #1d4ed8; }

.gate-extra {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #f0f2f6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .8rem;
}
.gate-link { color: #4b7bf0; text-decoration: none; font-weight: 600; }
.gate-link:hover { text-decoration: underline; }
.gate-sep { color: #d3d9e2; }
.gate-note { color: #9aa5b4; }

@media (max-width: 900px) {
    .gate-panel { grid-template-columns: 1fr; }
    .gate-aside { padding: 30px 26px 26px; }
    .gate-points { display: none; }
    .gate-aside-foot { display: block; }
    .gate-main { padding: 32px 24px 28px; }
}
@media (max-width: 480px) {
    .gate-captcha-row { grid-template-columns: 1fr 104px; }
    .gate-actions { flex-direction: column; }
    .gate-btn-ghost { flex: 1; }
}

/* ============================================================
   导航栏 · 校徽背景水印 + 菜单真正居中
   校徽作为导航栏的底纹铺在导航文字下方，淡到几乎只是氛围，
   不占据独立行，导航项始终压在它上面居中排列。
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
}

/* 校徽（ZY 工作室徽章）：与导航同一块区域，导航文字在上、徽章垫在下方当水印。
   要点：
   1) 徽章高度必须小于导航高度，否则会被裁掉一半，看起来像没显示；
   2) 用「去色 + 适度提亮 + multiply」而不是极端 brightness，否则等于全白；
   3) opacity 要给到 .1 左右才看得见轮廓，.02 级别等于不存在。 */
.nav-emblemmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 导航高 76px，徽章取 56px：完整落在导航内且留出上下余量 */
    height: 56px;
    width: 56px;
    object-fit: contain;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
    filter: grayscale(1) brightness(1.35) contrast(.55);
    mix-blend-mode: multiply;
}

/* 文字层必须压在徽记之上 */
.navbar .nav-container {
    position: relative;
    z-index: 5;
}
.navbar .nav-link,
.navbar .logo-icon,
.navbar .logo-text,
.navbar .hamburger { position: relative; z-index: 5; }

/* 三段式：logo 靠左、菜单真正居中、按钮靠右 */
.navbar .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 16px;
}
.navbar .nav-logo { grid-column: 1; justify-self: start; }
.navbar .nav-menu { grid-column: 2; justify-self: center; }
.navbar .hamburger { grid-column: 3; justify-self: end; }

/* 加入我们 / 友情链接所在段的右对齐靠 grid 第三列的自动留白实现，
   这里给 nav-menu 右侧留出与 logo 等宽的空间，保证菜单居中 */
.navbar .nav-list { justify-content: center; }

/* 滚动后压实背景，水印同步淡出，避免干扰阅读 */
.navbar.scrolled .nav-emblemmark { opacity: .07; }
.navbar.scrolled {
    background-color: rgba(255, 255, 255, .93);
}

@media (max-width: 992px) {
    .nav-emblemmark { height: 92px; opacity: .07; }
}
@media (max-width: 768px) {
    .navbar .nav-container { grid-template-columns: 1fr auto; }
    .navbar .nav-menu { display: none; }
    .nav-emblemmark { height: 66px; opacity: .06; }
}

/* ===== ZY 工作室专属徽章 ===== */
.gate-emblem {
    height: 96px;
    width: auto;
    opacity: 1;
    margin-bottom: 12px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(10, 22, 56, .35));
}
.gate-motto {
    margin: 10px 0 0;
    display: inline-block;
    padding: 5px 14px;
    font-size: .8rem;
    letter-spacing: 3px;
    color: #f3f7ff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

/* 文件空间内的徽章水印 */
.fs-watermark {
    position: fixed;
    right: 24px;
    bottom: 20px;
    width: 190px;
    height: 190px;
    object-fit: contain;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
    filter: grayscale(1);
    mix-blend-mode: multiply;
}

/* ===== 关于页宗旨与指导教师 ===== */
.about-motto-line {
    margin: 0 0 18px !important;
    font-size: .95rem !important;
    letter-spacing: 2px;
    color: #24409b;
}
.about-motto-line b { font-weight: 700; }

/* ==========================================================================
   动态详情页 · 活动纪要组件
   用于「什么时间、在哪、开展了什么、讲述了什么、产出是什么」的纪实排版
   ========================================================================== */

/* 信息条：时间 / 地点 / 参与方 */
.doc-info-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 26px 0 34px;
    background: var(--line, #e4e8f2);
    border: 1px solid var(--line, #e4e8f2);
    border-radius: 12px;
    overflow: hidden;
}
.doc-info-cell {
    background: #fff;
    padding: 18px 20px;
}
.doc-info-cell dt {
    margin: 0 0 6px;
    font-size: .72rem;
    letter-spacing: 2px;
    color: #8b93a8;
    text-transform: uppercase;
}
.doc-info-cell dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.6;
}
.doc-info-cell dd span {
    display: block;
    font-size: .82rem;
    font-weight: 400;
    color: #6b7386;
    margin-top: 2px;
}

/* 议程时间线 */
.doc-agenda {
    margin: 20px 0 30px;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--line, #e4e8f2);
}
.doc-agenda-item {
    position: relative;
    padding: 0 0 24px 26px;
}
.doc-agenda-item:last-child { padding-bottom: 0; }
.doc-agenda-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2f5cc0;
}
.doc-agenda-item.is-key::before { background: #2f5cc0; }
.doc-agenda-time {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 9px;
    border-radius: 5px;
    background: #eef3fd;
    color: #24409b;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.doc-agenda-title {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #16295c;
}
.doc-agenda-title em {
    font-style: normal;
    margin-left: 8px;
    font-size: .78rem;
    font-weight: 500;
    color: #8b93a8;
    letter-spacing: 1px;
}
.doc-agenda-desc {
    margin: 0;
    font-size: .93rem;
    line-height: 1.95;
    color: #4b5565;
}

/* 讲述要点卡片：谁讲了什么 */
.doc-speech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0 32px;
}
.doc-speech {
    padding: 20px 22px;
    border: 1px solid var(--line, #e4e8f2);
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcff, #f6f8fd);
}
.doc-speech-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.doc-speech-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #24409b;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.doc-speech-who { line-height: 1.35; }
.doc-speech-who b { display: block; font-size: .95rem; color: #16295c; }
.doc-speech-who span { font-size: .78rem; color: #8b93a8; letter-spacing: 1px; }
.doc-speech-topic {
    margin: 0 0 8px;
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
}
.doc-speech-desc {
    margin: 0;
    font-size: .89rem;
    line-height: 1.9;
    color: #4b5565;
}
.doc-speech-points {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: .87rem;
    color: #4b5565;
}
.doc-speech-points li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    line-height: 1.75;
}
.doc-speech-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2f5cc0;
}

/* 成果数据条 */
.doc-outcome {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0 32px;
}
.doc-outcome-item {
    text-align: center;
    padding: 20px 12px;
    border: 1px solid var(--line, #e4e8f2);
    border-radius: 12px;
    background: #fff;
}
.doc-outcome-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: #24409b;
    font-variant-numeric: tabular-nums;
}
.doc-outcome-label {
    margin-top: 6px;
    font-size: .8rem;
    color: #6b7386;
    letter-spacing: 1px;
}

/* 附件/材料清单 */
.doc-attach {
    margin: 20px 0 30px;
    border: 1px solid var(--line, #e4e8f2);
    border-radius: 12px;
    overflow: hidden;
}
.doc-attach-head {
    padding: 12px 18px;
    background: #f4f7fd;
    border-bottom: 1px solid var(--line, #e4e8f2);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #24409b;
}
.doc-attach-list { margin: 0; padding: 0; list-style: none; }
.doc-attach-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line, #e4e8f2);
    font-size: .9rem;
    color: #374151;
}
.doc-attach-list li:last-child { border-bottom: 0; }
.doc-attach-ico {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: #2f5cc0;
}
.doc-attach-meta {
    margin-left: auto;
    font-size: .78rem;
    color: #8b93a8;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .doc-info-bar { grid-template-columns: 1fr; }
    .doc-speech-grid { grid-template-columns: 1fr; }
    .doc-outcome { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .doc-outcome { grid-template-columns: 1fr; }
    .doc-attach-list li { flex-wrap: wrap; }
    .doc-attach-meta { margin-left: 40px; }
}

/* ==========================================================================
   学习资源 · 未登录时的整屏登录闸门
   需求：整页蓝色背景 + 中央大卡片 + 徽章作水印居中铺底
   ========================================================================== */

/* 闸门本身铺满可视区（fixed 盖在页面上方，点击范围外无效） */
#gateSection {
    position: fixed;
    inset: 0;
    z-index: 900;
    min-height: 100vh;
    background:
        radial-gradient(1100px 620px at 50% 8%, #2f5cc0 0%, #1c3c8c 45%, #12265c 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#gateSection .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px 24px 64px;
}

/* 徽章作水印：铺在整块蓝色背景中央，很淡但看得见 */
.gate-bgmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 82vw);
    height: min(760px, 82vw);
    object-fit: contain;
    opacity: .1;
    pointer-events: none;
    filter: grayscale(1) brightness(2.1) contrast(.4);
    mix-blend-mode: screen;
    z-index: 0;
}

/* 居中登录卡片 */
.gate-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    width: min(1020px, 100%);
    max-width: 1020px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 34px 90px rgba(6, 16, 44, .5);
}

/* ---- 左侧品牌区：深蓝，与卡片同色系 ---- */
.gate-aside {
    position: relative;
    padding: 52px 44px;
    background: linear-gradient(165deg, #24409b 0%, #1a3278 55%, #14265c 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
}
.gate-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 78% 14%, rgba(255,255,255,.13), transparent 52%);
    pointer-events: none;
}
.gate-aside > * { position: relative; z-index: 1; }
.gate-aside-top { text-align: center; margin-bottom: 34px; }
.gate-emblem {
    height: 128px;
    width: 128px;
    object-fit: contain;
    margin: 0 auto 16px;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .38));
}
.gate-brand {
    margin: 0 0 6px;
    font-size: 1.72rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: #fff;
}
.gate-brand-sub {
    margin: 0;
    font-size: .74rem;
    letter-spacing: 2.4px;
    color: rgba(255, 255, 255, .72);
    text-transform: uppercase;
}
.gate-motto {
    display: inline-block;
    margin: 14px 0 0;
    padding: 5px 15px;
    font-size: .82rem;
    letter-spacing: 3px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
}
.gate-points { list-style: none; margin: 0 0 auto; padding: 0; }
.gate-points li {
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.gate-points li:first-child { border-top: 0; }
.gate-points strong {
    display: block;
    margin-bottom: 4px;
    font-size: .97rem;
    font-weight: 700;
    color: #fff;
}
.gate-points span {
    font-size: .84rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .72);
}
.gate-aside-foot {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .76rem;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, .62);
    text-align: center;
}

/* ---- 右侧表单区：留白更宽，居中 ---- */
.gate-main {
    padding: 52px 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gate-title {
    margin: 0 0 8px;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #16295c;
    text-align: center;
}
.gate-desc {
    margin: 0 0 30px;
    font-size: .87rem;
    color: #7a849c;
    text-align: center;
    letter-spacing: .6px;
}
.gate-form { width: 100%; }
.gate-field { margin-bottom: 20px; }
.gate-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #4a5570;
}
.gate-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 52px;
    background: #f6f8fc;
    border: 1px solid #dfe4ee;
    border-radius: 10px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.gate-input-wrap:focus-within {
    background: #fff;
    border-color: #2f5cc0;
    box-shadow: 0 0 0 3px rgba(47, 92, 192, .14);
}
.gate-input-wrap input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 1rem;
    color: #1f2937;
    outline: none;
}
.gate-input-wrap input::placeholder { color: #a8b0c4; }
.gate-icon { color: #93a0bd; flex: 0 0 auto; }
.gate-eye {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #93a0bd;
    cursor: pointer;
    border-radius: 6px;
}
.gate-eye:hover { color: #2f5cc0; background: #eef2fb; }

/* 验证码行 */
.gate-captcha-row { display: flex; gap: 12px; align-items: stretch; }
.gate-captcha-row .gate-input-wrap { flex: 1; }
.gate-captcha-box {
    flex: 0 0 128px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe4ee;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.gate-captcha-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-captcha-loading,
.gate-captcha-fail {
    font-size: .74rem;
    color: #93a0bd;
    text-align: center;
    line-height: 1.3;
    padding: 0 4px;
}
.gate-captcha-fail { color: #c2410c; }
.gate-captcha-box.is-loading { background: #f6f8fc; }

/* 保持登录 */
.gate-remember {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 2px 0 24px;
    cursor: pointer;
    user-select: none;
}
.gate-remember input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: #2f5cc0; }
.gate-remember span { font-size: .85rem; color: #4a5570; font-weight: 600; }
.gate-remember em {
    display: block;
    font-style: normal;
    font-size: .74rem;
    color: #93a0bd;
    margin-top: 2px;
}

/* 主按钮组：登录 + 退出 */
.gate-actions { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.gate-btn {
    height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform .12s, box-shadow .18s, background .18s;
    white-space: nowrap;
}
.gate-btn-submit {
    background: linear-gradient(135deg, #2f5cc0, #1e3f8e);
    color: #fff;
    box-shadow: 0 10px 24px rgba(47, 92, 192, .3);
}
.gate-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(47, 92, 192, .38); }
.gate-btn-submit:active { transform: translateY(0); }
.gate-btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.gate-btn-ghost {
    background: #fff;
    color: #5a647e;
    border: 1px solid #dfe4ee;
    box-shadow: none;
}
.gate-btn-ghost:hover { background: #f4f6fb; color: #2f5cc0; border-color: #c3cee6; }

.gate-error {
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 9px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: .86rem;
    line-height: 1.6;
}
.gate-note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid #eef1f7;
    font-size: .78rem;
    line-height: 1.9;
    color: #93a0bd;
    text-align: center;
}
.gate-note a { color: #2f5cc0; font-weight: 600; }

@media (max-width: 992px) {
    .gate-panel { grid-template-columns: 1fr; max-width: 480px; }
    .gate-aside { padding: 38px 30px 30px; }
    .gate-emblem { height: 96px; width: 96px; }
    .gate-points { display: none; }
    .gate-main { padding: 34px 28px 32px; }
    .gate-bgmark { width: min(520px, 88vw); height: min(520px, 88vw); }
}
@media (max-width: 600px) {
    #gateSection .container { padding: 76px 16px 40px; }
    .gate-actions { grid-template-columns: 1fr; }
    .gate-btn-ghost { height: 44px; }
}

/* --------------------------------------------------------------------------
   登录闸门 · 单栏版（徽章 + 登录框）
   需求：整页蓝色，徽章居中，下面就是登录框，不要多余说明块
   -------------------------------------------------------------------------- */
.gate-panel {
    grid-template-columns: 1fr;
    width: min(500px, 100%);
    max-width: 500px;
    padding: 46px 48px 40px;
    text-align: center;
}

.gate-top { margin-bottom: 30px; }
.gate-emblem {
    height: 132px;
    width: 132px;
    object-fit: contain;
    margin: 0 auto 18px;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .42));
}
.gate-brand {
    margin: 0 0 8px;
    font-size: 1.86rem;
    font-weight: 800;
    letter-spacing: 5px;
    color: #16295c;
}
.gate-brand-sub {
    margin: 0;
    font-size: .74rem;
    letter-spacing: 2.6px;
    color: #9aa3b8;
    text-transform: uppercase;
}
.gate-motto {
    display: inline-block;
    margin: 16px 0 0;
    padding: 5px 16px;
    font-size: .82rem;
    letter-spacing: 3.5px;
    color: #24409b;
    border: 1px solid #d5ddf0;
    border-radius: 999px;
    background: #f3f6fd;
}

/* 表单区：去掉左侧栏的深蓝底，改为白底卡片内的居中表单 */
.gate-main { padding: 0; }
.gate-title {
    margin: 0 0 6px;
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #16295c;
}
.gate-desc {
    margin: 0 0 28px;
    font-size: .84rem;
    color: #8a93a8;
}
.gate-form { text-align: left; }
.gate-field > label { text-align: left; }

@media (max-width: 600px) {
    .gate-panel { padding: 34px 22px 28px; }
    .gate-emblem { height: 104px; width: 104px; }
    .gate-brand { font-size: 1.5rem; letter-spacing: 3px; }
}

/* ==========================================================================
   动态列表可点击样式（news.html 时间线）
   ========================================================================== */
a.tl-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 26px;
    padding: 26px 28px;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    margin-bottom: 16px;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
a.tl-item:last-child { margin-bottom: 0; }
a.tl-item:hover {
    border-color: #c3cee6;
    box-shadow: 0 12px 30px rgba(24, 42, 92, .09);
    transform: translateY(-2px);
}
a.tl-item:hover .tl-title { color: #24409b; }
a.tl-item:hover .tl-more { opacity: 1; }

.tl-more {
    display: inline-block;
    margin-top: 12px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #24409b;
    opacity: 0;
    transition: opacity .18s;
}

@media (max-width: 600px) {
    a.tl-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
    }
    .tl-more { opacity: 1; }
}

/* --------------------------------------------------------------------------
   验证码「加载中」提示：它是 img 的兄弟节点，不会被 JS 移除，
   所以图片渲染出来后用 CSS 自动隐藏，避免一直压在验证码上。
   -------------------------------------------------------------------------- */
.gate-captcha-box { position: relative; }
.gate-captcha-box img { position: relative; z-index: 1; }
.gate-captcha-loading,
.gate-captcha-fail {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 图片一旦有 src 就盖住提示文字 */
.gate-captcha-box img[src] ~ .gate-captcha-loading { opacity: 0; }

/* ==========================================================================
   登录闸门 · 虚拟机开机登录界面版
   参照虚拟机控制台的登录页：整块蓝底直接铺内容，不要白色方框卡片。
   元素只有：校徽 + 「ZY 工作室」+ 学号 + 密码 + 验证码 + 小号登录按钮
   ========================================================================== */

#gateSection .container { padding: 96px 24px 72px; }

/* 去掉卡片感：整块内容直接坐在蓝底上 */
.gate-panel {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

/* ---- 徽章 ---- */
.gate-emblem {
    width: 122px;
    height: 122px;
    margin: 0 auto 22px;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45));
}

/* ---- 标题 ---- */
.gate-brand {
    margin: 0 0 10px;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 8px;
    color: #fff;
    text-indent: 8px; /* 抵消末字右侧字距，保持视觉居中 */
}
.gate-brand-sub {
    display: none; /* 「成员内部空间 · Member Area」在登录界面里是冗余信息 */
}
.gate-motto {
    display: inline-block;
    margin: 0 0 40px;
    padding: 5px 16px;
    font-size: .78rem;
    letter-spacing: 3.5px;
    color: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

/* ---- 表单 ---- */
.gate-main { padding: 0; }
.gate-title,
.gate-desc { display: none; } /* 标题已在上面用 .gate-brand 呈现过 */

.gate-form { text-align: left; }
.gate-field { margin-bottom: 16px; }
.gate-field > label {
    margin-bottom: 7px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .72);
}

/* 输入框改成虚拟机登录风格：透明底 + 白色描边 + 白色文字 */
.gate-input-wrap {
    height: 48px;
    padding: 0 15px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 9px;
    transition: background .18s, border-color .18s, box-shadow .18s;
}
.gate-input-wrap:focus-within {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}
.gate-input-wrap input { color: #fff; font-size: .98rem; }
.gate-input-wrap input::placeholder { color: rgba(255, 255, 255, .5); }
.gate-icon { color: rgba(255, 255, 255, .72); }
.gate-eye { color: rgba(255, 255, 255, .72); }
.gate-eye:hover { color: #fff; background: rgba(255, 255, 255, .16); }

/* 验证码框同样透明化 */
.gate-captcha-box {
    height: 48px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 9px;
}

/* ---- 保持登录 ---- */
.gate-remember { margin: 4px 0 22px; }
.gate-remember span { color: rgba(255, 255, 255, .88); }
.gate-remember em { color: rgba(255, 255, 255, .55); }
.gate-remember input { accent-color: #fff; }

/* ---- 按钮：小尺寸，居中，不用撑满 ---- */
.gate-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.gate-btn {
    height: 40px;
    padding: 0 30px;
    border-radius: 8px;
    font-size: .92rem;
    letter-spacing: 4px;
    text-indent: 4px;
}
.gate-btn-submit {
    background: #fff;
    color: #1b3576;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.gate-btn-submit:hover {
    background: #eef2fb;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
}
.gate-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .4);
}
.gate-btn-ghost:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

/* ---- 错误与提示 ---- */
.gate-error {
    margin-top: 18px;
    background: rgba(255, 255, 255, .95);
    border-color: transparent;
    color: #b91c1c;
}
.gate-note {
    margin: 30px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .6);
}
.gate-note a { color: #fff; font-weight: 600; }

/* 徽章水印：蓝底上要更淡，避免和前景徽章打架 */
.gate-bgmark {
    opacity: .07;
    filter: grayscale(1) brightness(2.4) contrast(.35);
}

.lock-file-tip {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .3) !important;
    color: rgba(255, 255, 255, .9) !important;
}

@media (max-width: 600px) {
    .gate-panel { max-width: 100%; }
    .gate-brand { font-size: 1.5rem; letter-spacing: 5px; text-indent: 5px; }
    .gate-motto { margin-bottom: 30px; font-size: .72rem; letter-spacing: 2.5px; }
    .gate-btn { flex: 1; padding: 0 18px; }
}

/* 彻底清除早期版本遗留的卡片边框与内边距 */
.gate-panel {
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* 水印徽章只留一点点轮廓，不能看出是徽章，只能感觉到底纹 */
.gate-bgmark { opacity: .045 !important; }

/* ==========================================================================
   登录闸门 · 最终版：去掉徽章与口号后，整体收紧
   参照虚拟机开机登录界面：标题、学号、密码、验证码、小号登录按钮
   ========================================================================== */

#gateSection .container { padding: 48px 24px 48px; }

.gate-panel { max-width: 360px; }

/* 标题为唯一的视觉主体，紧凑排布 */
.gate-top { margin-bottom: 30px; }
.gate-brand {
    margin: 0;
    font-size: 1.72rem;
    font-weight: 600;
    letter-spacing: 7px;
    text-indent: 7px;
    color: #fff;
}

.gate-form { text-align: left; }

.gate-field { margin-bottom: 13px; }
.gate-field > label {
    margin-bottom: 6px;
    font-size: .72rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .68);
}

.gate-input-wrap { height: 44px; }
.gate-captcha-box { height: 44px; flex-basis: 116px; }
.gate-captcha-row { gap: 10px; }

.gate-remember { margin: 2px 0 18px; }
.gate-remember em { display: none; } /* 说明文字太占位置，收起 */

.gate-actions { gap: 10px; }
.gate-btn { height: 38px; padding: 0 26px; font-size: .88rem; }

.gate-note {
    margin: 22px 0 0;
    padding-top: 16px;
    font-size: .74rem;
    line-height: 1.8;
}

@media (max-width: 600px) {
    #gateSection .container { padding: 40px 18px; }
    .gate-panel { max-width: 100%; }
    .gate-brand { font-size: 1.4rem; letter-spacing: 4px; text-indent: 4px; }
    .gate-btn { flex: 1; padding: 0 16px; }
}

/* 登录按钮再收窄：虚拟机登录界面里按钮不会撑满 */
.gate-panel { max-width: 330px; }
.gate-btn { padding: 0 22px; font-size: .85rem; letter-spacing: 3px; text-indent: 3px; }
.gate-btn-submit { flex: 0 0 auto; }

/* 收窄后密码框的显示密码按钮被裁掉，这里保证它完整可见 */
.gate-eye {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    overflow: visible;
}
.gate-eye svg { display: block; }

/* ============================================================
   登录闸门 · 最终版：参照 Windows 登录界面
   面板放宽 / 输入框加高 / 字号放大 / 间距舒适
   ============================================================ */

#gateSection .container {
    padding: 40px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gate-panel {
    max-width: 420px;
    width: 100%;
}

.gate-top {
    margin-bottom: 34px;
    text-align: center;
}

.gate-brand {
    font-size: 2.15rem;
    font-weight: 500;
    letter-spacing: 8px;
    text-indent: 8px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.gate-form { text-align: left; }

.gate-field { margin-bottom: 20px; }

.gate-field > label {
    display: block;
    margin-bottom: 9px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, .82);
}

.gate-input-wrap {
    height: 52px;
    padding: 0 8px 0 14px;
    gap: 11px;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    transition: background .18s, border-color .18s, box-shadow .18s;
}

.gate-input-wrap:hover { background: rgba(255, 255, 255, .16); }

.gate-input-wrap:focus-within {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}

.gate-icon { width: 19px; height: 19px; color: rgba(255, 255, 255, .74); flex: 0 0 auto; }

.gate-input-wrap input {
    font-size: 1.04rem;
    color: #fff;
    min-width: 0;
}
.gate-input-wrap input::placeholder { color: rgba(255, 255, 255, .5); }

.gate-eye {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: visible;
    border-radius: 5px;
    color: rgba(255, 255, 255, .74);
}
.gate-eye:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.gate-eye svg { display: block; width: 19px; height: 19px; }

.gate-captcha-row { gap: 12px; }
.gate-captcha-box {
    height: 52px;
    flex: 0 0 142px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .3);
    overflow: hidden;
}

.gate-remember { margin: 6px 0 24px; }
.gate-remember input { width: 16px; height: 16px; accent-color: #fff; }
.gate-remember span { font-size: .9rem; color: rgba(255, 255, 255, .9); }
.gate-remember em { display: inline; font-size: .78rem; color: rgba(255, 255, 255, .55); }

.gate-actions { gap: 12px; }
.gate-btn {
    height: 46px;
    padding: 0 28px;
    font-size: 1rem;
    letter-spacing: 4px;
    text-indent: 4px;
    border-radius: 5px;
}
.gate-btn-submit { flex: 0 0 auto; }

.gate-note {
    margin-top: 26px;
    padding-top: 20px;
    font-size: .85rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, .68);
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.gate-note a { color: #fff; font-weight: 600; }

@media (max-width: 600px) {
    #gateSection .container { padding: 28px 18px; }
    .gate-brand { font-size: 1.75rem; letter-spacing: 6px; text-indent: 6px; }
    .gate-btn { flex: 1; padding: 0 16px; }
    .gate-captcha-box { flex: 0 0 118px; }
}

/* ============================================================
   登录闸门 · 修正版
   1) 标题不再被顶部导航遮住
   2) 标签与输入框同行水平排列（Windows 登录界面样式）
   ============================================================ */

#gateSection {
    padding-top: 116px;
    overflow-y: auto;
}

#gateSection .container {
    padding: 30px 24px 56px;
    min-height: 100%;
    align-items: center;
}

.gate-panel { max-width: 480px; }

.gate-top { margin-bottom: 40px; }

.gate-brand {
    font-size: 2.3rem;
    line-height: 1.35;
    margin: 0;
}

/* 每一行：标签在左，控件在右，水平对齐 */
.gate-field {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.gate-field > label {
    flex: 0 0 62px;
    width: 62px;
    margin: 0;
    text-align: right;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

/* 学号 / 密码：控件占满剩余宽度 */
.gate-field > .gate-input-wrap { flex: 1; min-width: 0; }

/* 验证码行：标签 + 输入框 + 验证码图，整体一行 */
.gate-captcha-row { flex: 1; min-width: 0; }

.gate-captcha-box { height: 52px; flex: 0 0 138px; }

/* 保持登录与按钮区也改成水平排布 */
.gate-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 26px;
}
.gate-remember input { flex: 0 0 auto; margin: 0; }
.gate-remember span { font-size: .92rem; }
.gate-remember em { font-size: .8rem; }

.gate-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.gate-btn {
    height: 46px;
    min-width: 150px;
    padding: 0 20px;
    font-size: 1rem;
    letter-spacing: 4px;
    text-indent: 4px;
}

@media (max-width: 600px) {
    #gateSection { padding-top: 92px; }
    .gate-brand { font-size: 1.8rem; }
    .gate-field { gap: 10px; }
    .gate-field > label { flex: 0 0 44px; width: 44px; font-size: .85rem; }
    .gate-btn { min-width: 0; flex: 1; }
    .gate-captcha-box { flex: 0 0 108px; }
    .gate-remember em { display: none; }
}

/* 移动端防溢出：面板不超宽，验证码图不被裁，按钮同行 */
.gate-panel { max-width: 480px; width: 100%; box-sizing: border-box; }
.gate-field, .gate-input-wrap, .gate-captcha-row { box-sizing: border-box; min-width: 0; }
.gate-actions { flex-wrap: nowrap; }

@media (max-width: 600px) {
    #gateSection .container { padding: 24px 16px 48px; }
    .gate-panel { max-width: 100%; }
    .gate-captcha-box { flex: 0 0 96px; }
    .gate-captcha-row { gap: 8px; }
    .gate-input-wrap { padding: 0 6px 0 10px; gap: 8px; }
    .gate-btn { min-width: 0; flex: 1 1 0; padding: 0 10px; letter-spacing: 2px; text-indent: 2px; }
}

/* ===== 收尾修正：整屏不外溢 + 按钮撑满 ===== */
/* 固定层自身不再加 padding（会撑破 100vh 导致露出页脚），改由内层 container 让出导航高度 */
#gateSection {
    padding-top: 0 !important;
    height: 100vh;
    max-height: 100vh;
}
#gateSection .container {
    box-sizing: border-box;
    height: 100%;
    min-height: 100%;
    padding: 104px 24px 48px !important;
}

/* 按钮明确撑开 */
.gate-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 14px;
}
.gate-actions .gate-btn {
    flex: 0 0 auto;
    width: 168px;
    min-width: 168px;
    max-width: 168px;
}

@media (max-width: 600px) {
    #gateSection .container { padding: 88px 16px 36px !important; }
    .gate-actions .gate-btn { width: auto; min-width: 0; max-width: none; flex: 1 1 0; }
}

/* ===== 强制覆盖：旧 grid 布局残留 ===== */
.gate-actions {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100%;
}
.gate-actions .gate-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px;
    font-size: 1rem;
    letter-spacing: 4px;
    text-indent: 4px;
}
@media (min-width: 601px) {
    .gate-actions .gate-btn { flex: 0 0 168px !important; }
}

/* ===== 按钮区最终方案：显式两列网格 ===== */
.gate-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100%;
    margin: 0;
}
.gate-actions .gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    height: 50px;
    padding: 0 12px;
    font-size: 1rem;
    letter-spacing: 4px;
    text-indent: 4px;
    white-space: nowrap;
}

/* 品牌标题下的英文副标 */
.gate-brand-en {
    margin: 12px 0 0;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-indent: 5px;
    color: rgba(255, 255, 255, .62);
    text-transform: uppercase;
}

/* ==========================================================================
   动态时间线 · 重写（修复竖排错乱）
   日期改为网格第一列，不再绝对定位；竖线与圆点由 ::before/::after 绘制
   ========================================================================== */
.timeline {
    position: relative;
    padding-left: 0;
}
.timeline::before { display: none; }

/* 单条动态：左日期 + 右内容，两列并排 */
a.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: start;
    gap: 26px;
    padding: 24px 28px;
    margin-bottom: 18px;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 3px 14px rgba(16, 32, 64, .045);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

/* 左侧竖线：贯穿每条卡片 */
a.tl-item::before {
    content: '';
    position: absolute;
    left: 82px;
    top: -18px;
    bottom: -18px;
    width: 2px;
    background: linear-gradient(180deg, rgba(29, 78, 216, .35), rgba(29, 78, 216, .1));
}
a.tl-item:first-child::before { top: 34px; }
a.tl-item:last-child::before { bottom: 50%; }

/* 圆点：压在竖线上 */
a.tl-item::after {
    content: '';
    position: absolute;
    left: 77px;
    top: 30px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .1);
}

/* 日期列：正常流，不再绝对定位 */
a.tl-item .tl-date {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.25;
    padding-top: 2px;
}
a.tl-item .tl-date strong {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: .5px;
}
a.tl-item .tl-date span { font-size: .82rem; color: #8b95a8; }

/* 内容列 */
a.tl-item .tl-body {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
}

a.tl-item .tl-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #24409b;
    background: #eef2fd;
    border-radius: 999px;
    padding: 4px 12px;
}

a.tl-item .tl-title {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 650;
    line-height: 1.5;
    color: #16203a;
}

a.tl-item .tl-desc {
    margin: 0;
    font-size: .93rem;
    line-height: 1.85;
    color: #5a657c;
}

.tl-more {
    display: inline-block;
    margin-top: 14px;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #24409b;
    opacity: 0;
    transition: opacity .18s;
}
a.tl-item:hover { border-color: #c3cee6; box-shadow: 0 12px 30px rgba(24, 42, 92, .09); transform: translateY(-2px); }
a.tl-item:hover .tl-title { color: #24409b; }
a.tl-item:hover .tl-more { opacity: 1; }

@media (max-width: 760px) {
    a.tl-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 22px;
    }
    a.tl-item::before,
    a.tl-item::after { display: none; }
    a.tl-item .tl-date { flex-direction: row; align-items: baseline; gap: 8px; }
    a.tl-item .tl-date strong { font-size: 1.1rem; }
    .tl-more { opacity: 1; }
}

/* ==========================================================================
   学习资源：登录区改为「标题栏下方」布局，不再整屏盖住页头
   ========================================================================== */
#gateSection {
    position: absolute !important;
    inset: auto !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 1;
}

.page-wrapper { position: relative; }

/* 标题栏保持在文档流里，正常显示 */
.page-wrapper > .page-header {
    position: relative;
    z-index: 2;
}

/* 登录区整体高度 = 视口高度 - 标题栏高度 */
#gateSection .container {
    box-sizing: border-box;
    min-height: 620px;
    height: calc(100vh - 210px);
    padding: 24px 24px 56px !important;
    align-items: center;
}

.gate-top { margin-bottom: 34px; }

@media (max-width: 760px) {
    #gateSection .container {
        height: auto;
        min-height: 0;
        padding: 26px 16px 44px !important;
    }
}

/* 时间线竖线与圆点微调：对齐到日期列右侧 */
a.tl-item::before { left: 126px; }
a.tl-item::after { left: 121px; top: 31px; }

/* ==========================================================================
   学习资源 · 整屏登录（隐藏大图页头，只留 ZY 工作室 + 表单）
   ========================================================================== */

/* 注：此处曾有一条 `.page-wrapper > .page-header { display: none }`，
   它把 faq / news / about 等所有内页的大图页头一起隐藏了，已删除。
   现在只在 body.gate-open（学习资源未登录）时隐藏。 */

#gateSection {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 900;
}

#gateSection .container {
    box-sizing: border-box;
    height: 100%;
    min-height: 100%;
    /* 顶部让开导航栏高度，标题不会被导航压住 */
    padding: 104px 24px 48px !important;
    align-items: center;
    justify-content: center;
}

.gate-panel { max-width: 440px; }

.gate-top {
    margin-bottom: 36px;
    text-align: center;
}

.gate-brand {
    font-size: 2.35rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 8px;
    text-indent: 8px;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

.gate-brand-en {
    margin: 10px 0 0;
    font-size: .74rem;
    letter-spacing: 4.5px;
    text-indent: 4.5px;
    color: rgba(255, 255, 255, .58);
    text-transform: uppercase;
}

.gate-field {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.gate-field > label {
    flex: 0 0 60px;
    width: 60px;
    margin: 0;
    text-align: right;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

.gate-field > .gate-input-wrap { flex: 1; min-width: 0; }
.gate-captcha-row { flex: 1; min-width: 0; display: flex; gap: 12px; }

.gate-input-wrap {
    height: 50px;
    padding: 0 8px 0 14px;
    gap: 11px;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    box-sizing: border-box;
    transition: background .18s, border-color .18s, box-shadow .18s;
}
.gate-input-wrap:hover { background: rgba(255, 255, 255, .16); }
.gate-input-wrap:focus-within {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}
.gate-input-wrap input { font-size: 1.02rem; color: #fff; min-width: 0; }

.gate-icon { width: 19px; height: 19px; color: rgba(255, 255, 255, .74); flex: 0 0 auto; }

.gate-eye {
    width: 32px; height: 32px; flex: 0 0 32px;
    overflow: visible; border-radius: 5px;
    color: rgba(255, 255, 255, .74);
}
.gate-eye svg { display: block; width: 19px; height: 19px; }
.gate-eye:hover { color: #fff; background: rgba(255, 255, 255, .16); }

.gate-captcha-box {
    height: 50px;
    flex: 0 0 136px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .3);
    overflow: hidden;
}

.gate-remember { display: flex; align-items: center; gap: 10px; margin: 6px 0 24px; }
.gate-remember input { flex: 0 0 auto; margin: 0; width: 16px; height: 16px; accent-color: #fff; }
.gate-remember span { font-size: .9rem; color: rgba(255, 255, 255, .9); }
.gate-remember em { font-size: .78rem; color: rgba(255, 255, 255, .55); }

.gate-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100%;
}
.gate-actions .gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px;
    padding: 0 12px;
    font-size: 1rem;
    letter-spacing: 4px;
    text-indent: 4px;
    border-radius: 5px;
}

.gate-note {
    margin-top: 24px;
    padding-top: 18px;
    font-size: .84rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, .66);
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.gate-note a { color: #fff; font-weight: 600; }

@media (max-width: 760px) {
    #gateSection .container { padding: 92px 16px 40px !important; }
    .gate-brand { font-size: 1.8rem; letter-spacing: 6px; text-indent: 6px; }
    .gate-brand-en { font-size: .66rem; letter-spacing: 3px; text-indent: 3px; }
    .gate-field { gap: 10px; }
    .gate-field > label { flex: 0 0 42px; width: 42px; font-size: .86rem; }
    .gate-captcha-box { flex: 0 0 100px; }
    .gate-input-wrap { padding: 0 6px 0 10px; gap: 8px; }
    .gate-remember em { display: none; }
    .gate-actions .gate-btn { letter-spacing: 2px; text-indent: 2px; }
}

/* 页头只在「未登录闸门显示时」隐藏；登录后文件空间仍显示页头 */
body.gate-open .page-wrapper > .page-header { display: none !important; }

/* ==========================================================================
   导航字号整体调大
   ========================================================================== */
.nav-link {
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: .3px;
}
.nav-logo .logo-text { font-size: 1.16rem; }
.nav-cta,
.nav-item > a.nav-cta { font-size: 1.02rem; }
.m-item a { font-size: 1.04rem; }

@media (min-width: 1100px) {
    .nav-link { font-size: 1.1rem; }
}

/* 修掉右侧裁切：容器禁止横向溢出，面板宽度收进视口 */
html, body { overflow-x: hidden; }

#gateSection .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(24px, env(safe-area-inset-left)) !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
}

.gate-panel {
    width: 100%;
    max-width: 440px !important;
    box-sizing: border-box;
    margin: 0 auto;
}

/* 表单内部一律不允许溢出 */
.gate-form, .gate-field, .gate-input-wrap, .gate-captcha-row, .gate-actions {
    max-width: 100%;
    min-width: 0;
}
.gate-input-wrap input { width: 100%; min-width: 0; }

/* ==========================================================================
   首页动态区：去掉头条灰色摘要，卡片与右侧列表等高
   ========================================================================== */
.news-lead-desc { display: none !important; }

.news-portal { align-items: stretch; }

.news-side {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    align-content: stretch;
    height: 100%;
}

/* 头条卡片整体撑满与右侧同高 */
.news-lead {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 封面图按剩余空间自适应，并设最小高度 */
.news-lead-cover {
    flex: 1 1 auto;
    min-height: 260px;
    aspect-ratio: auto;
}
.news-lead-body { flex: 0 0 auto; }

/* 列表行在等高网格里垂直居中 */
.news-row { align-content: center; }

@media (max-width: 900px) {
    .news-side { grid-template-rows: none; height: auto; }
    .news-lead-cover { min-height: 200px; }
}

/* ==========================================================================
   学习资源：标题别被导航压住
   ========================================================================== */
#gateSection .container {
    padding-top: 128px !important;
}
@media (max-width: 760px) {
    #gateSection .container { padding-top: 104px !important; }
}

/* ==========================================================================
   登录区小标题：在「ZY 工作室」与学号框之间
   ========================================================================== */
.gate-title,
.gate-desc { display: block !important; }

.gate-title {
    margin: 0 0 8px;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-indent: 3px;
    text-align: center;
    color: rgba(255, 255, 255, .95);
}

.gate-desc {
    margin: 0 0 34px;
    font-size: .88rem;
    line-height: 1.7;
    text-align: center;
    color: rgba(255, 255, 255, .66);
}

/* 顶部品牌区与表单之间的呼吸感 */
.gate-top { margin-bottom: 30px; }
.gate-main { text-align: left; }

@media (max-width: 760px) {
    .gate-title { font-size: 1.02rem; letter-spacing: 2px; text-indent: 2px; }
    .gate-desc { font-size: .8rem; margin-bottom: 28px; }
}

/* 去掉英文副标，只保留中文 */
.gate-brand-en { display: none !important; }

/* ==========================================================================
   登录区配色升级：加入计算机/科技感色彩
   主色深靛蓝 #14246b → 电光青 #22d3ee → 荧光紫 #7c5cff
   ========================================================================== */

/* 隐藏已删除的说明文字残留 */
.gate-brand-en,
.gate-title,
.gate-desc,
.gate-note { display: none !important; }

/* 整屏背景：多层次科技感渐层 */
#gateSection {
    background:
        /* 右上角电光青光晕 */
        radial-gradient(760px 520px at 84% 12%, rgba(34, 211, 238, .28) 0%, rgba(34, 211, 238, 0) 62%),
        /* 左下角荧光紫光晕 */
        radial-gradient(720px 560px at 12% 88%, rgba(124, 92, 255, .3) 0%, rgba(124, 92, 255, 0) 64%),
        /* 中央品牌蓝光 */
        radial-gradient(1000px 620px at 50% 42%, rgba(37, 99, 235, .42) 0%, rgba(37, 99, 235, 0) 70%),
        /* 底色：深靛蓝 */
        linear-gradient(165deg, #1a2f7a 0%, #14246b 42%, #0e1a4d 100%) !important;
}

/* 网格纹理：像代码编辑器 / 机房 */
#gateSection::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(34, 211, 238, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 82% 68% at 50% 46%, #000 12%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 82% 68% at 50% 46%, #000 12%, transparent 78%);
}

/* 扫描光带：缓慢下移的科技感高光 */
#gateSection::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 220px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, .07) 50%, transparent 100%);
    animation: gateScan 9s linear infinite;
}
@keyframes gateScan {
    0%   { top: -240px; }
    100% { top: 100%; }
}

/* 内容层要压在纹理之上 */
#gateSection .container { position: relative; z-index: 2; }

/* 标题：白字 + 青蓝辉光 */
.gate-brand {
    background: linear-gradient(180deg, #ffffff 30%, #a5e8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 3px 22px rgba(34, 211, 238, .45));
}

/* 标题上方加一条科技感短装饰线 */
.gate-top { position: relative; }
.gate-top::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    width: 62px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #22d3ee, #7c5cff, transparent);
}

/* 输入框：深色玻璃质感 + 青色描边 */
.gate-input-wrap {
    background: rgba(9, 18, 48, .5) !important;
    border: 1px solid rgba(34, 211, 238, .32) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.gate-input-wrap:hover {
    background: rgba(9, 18, 48, .66) !important;
    border-color: rgba(34, 211, 238, .6) !important;
}
.gate-input-wrap:focus-within {
    background: rgba(9, 18, 48, .78) !important;
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .18), 0 0 22px rgba(34, 211, 238, .22) !important;
}

.gate-icon { color: rgba(34, 211, 238, .78) !important; }
.gate-eye { color: rgba(34, 211, 238, .72) !important; }
.gate-eye:hover { color: #22d3ee !important; background: rgba(34, 211, 238, .16) !important; }

/* 标签：淡青 */
.gate-field > label { color: rgba(165, 232, 255, .95) !important; }

/* 验证码框：紫色描边，与输入框区分 */
.gate-captcha-box {
    border: 1px solid rgba(124, 92, 255, .55) !important;
    background: rgba(20, 16, 56, .6);
    box-shadow: inset 0 0 14px rgba(124, 92, 255, .18);
}

/* 主按钮：青→紫渐变，发光 */
.gate-btn-submit {
    background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #7c5cff 100%) !important;
    color: #061033 !important;
    font-weight: 700;
    border: none !important;
    box-shadow: 0 8px 24px rgba(34, 211, 238, .32);
    transition: transform .18s, box-shadow .18s, filter .18s;
}
.gate-btn-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 14px 34px rgba(34, 211, 238, .45);
}

/* 次按钮：紫色描边幽灵按钮 */
.gate-btn-ghost {
    background: rgba(124, 92, 255, .1) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(124, 92, 255, .55) !important;
    transition: background .18s, border-color .18s, color .18s;
}
.gate-btn-ghost:hover {
    background: rgba(124, 92, 255, .22) !important;
    border-color: #7c5cff !important;
    color: #ddd6fe !important;
}

/* 复选框与提示 */
.gate-remember span { color: rgba(224, 242, 254, .92) !important; }
.gate-remember em { color: rgba(165, 232, 255, .55) !important; }
.gate-remember input { accent-color: #22d3ee !important; }

/* 错误提示：亮红 */
.gate-error {
    background: rgba(220, 38, 38, .16) !important;
    border: 1px solid rgba(248, 113, 113, .45) !important;
    color: #fca5a5 !important;
}

/* ==========================================================================
   登录区 · 居中「屏幕」方框
   参照电脑显示器：整块蓝底 = 桌面，中央亮框 = 屏幕内容区
   ========================================================================== */
#gateSection {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

#gateSection .container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 92px 20px 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 中央屏幕框 */
.gate-panel {
    width: 100%;
    max-width: 430px !important;
    margin: 0 auto;
    padding: 40px 38px 36px !important;
    box-sizing: border-box;
    background: rgba(10, 20, 56, .55) !important;
    border: 1px solid rgba(34, 211, 238, .26) !important;
    border-radius: 16px;
    box-shadow:
        0 30px 80px rgba(2, 8, 30, .55),
        0 0 0 1px rgba(124, 92, 255, .14),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
}

/* 屏幕四角科技感标记 */
.gate-panel::before,
.gate-panel::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(34, 211, 238, .55);
    pointer-events: none;
}
.gate-panel::before {
    top: 12px; left: 12px;
    border-right: 0; border-bottom: 0;
    border-top-left-radius: 6px;
}
.gate-panel::after {
    bottom: 12px; right: 12px;
    border-left: 0; border-top: 0;
    border-bottom-right-radius: 6px;
}

/* 标题区上移一点，给表单留空间 */
.gate-top {
    margin: 0 0 32px !important;
    text-align: center;
}
.gate-top::before { top: -18px; }

.gate-brand {
    font-size: 2.1rem;
    letter-spacing: 7px;
    text-indent: 7px;
}

.gate-form { width: 100%; }

@media (max-width: 760px) {
    #gateSection .container { padding: 82px 16px 28px !important; }
    .gate-panel { padding: 32px 22px 28px !important; border-radius: 14px; }
    .gate-brand { font-size: 1.68rem; letter-spacing: 5px; text-indent: 5px; }
}

/* 验证码没加载出来时给个占位背景，不显示破图图标 */
.gate-captcha-box {
    background: rgba(20, 16, 56, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='20' y='26' font-size='16' text-anchor='middle' fill='%23a78bfa' font-family='serif'%3E?%3C/text%3E%3C/svg%3E") center/24px no-repeat !important;
}
.gate-captcha-box img { color: transparent; }

/* ==========================================================================
   登录区 · 去框，纯 C 位对称居中
   ========================================================================== */
.gate-panel {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    max-width: 420px !important;
}
.gate-panel::before,
.gate-panel::after { display: none !important; }

/* 上下左右完全对称：整块内容在可用区域正中央 */
#gateSection .container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 86px 20px 86px !important;
}

.gate-top {
    margin: 0 0 30px !important;
    text-align: center;
}
.gate-top::before { top: -20px; }

/* 表单整体也居中对齐 */
.gate-form {
    width: 100%;
    text-align: center;
}

/* 标签与输入框同行，但整行水平居中、两侧对齐 */
.gate-field {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.gate-field > label {
    flex: 0 0 58px;
    width: 58px;
    text-align: right;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(165, 232, 255, .95) !important;
    white-space: nowrap;
}
.gate-field > .gate-input-wrap,
.gate-captcha-row { flex: 1; min-width: 0; }

/* 保持登录与按钮同样居中 */
.gate-remember {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 10px 0 22px;
}

.gate-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100%;
}

@media (max-width: 760px) {
    #gateSection .container { padding: 78px 16px 40px !important; }
    .gate-brand { font-size: 1.72rem; letter-spacing: 6px; text-indent: 6px; }
}

/* ==========================================================================
   登录区 · 最终收尾
   1) 装饰线 / 边框全部去掉，只留干净文字
   2) 整块内容垂直居中偏下一点，标题不再被顶到上缘
   ========================================================================== */

/* 去掉标题上方那条装饰线 */
.gate-top::before { display: none !important; }

/* 输入框、验证码框统一改为无边框，只有底部细线 */
.gate-input-wrap {
    background: rgba(9, 18, 48, .34) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(34, 211, 238, .45) !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: none !important;
}
.gate-input-wrap:hover { border-bottom-color: rgba(34, 211, 238, .75) !important; }
.gate-input-wrap:focus-within {
    border-bottom-color: #22d3ee !important;
    box-shadow: 0 1px 0 rgba(34, 211, 238, .5), 0 8px 22px rgba(34, 211, 238, .16) !important;
}

.gate-captcha-box {
    border: 0 !important;
    border-bottom: 1px solid rgba(124, 92, 255, .5) !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: none !important;
}
.gate-captcha-box:hover { border-bottom-color: rgba(124, 92, 255, .85) !important; }

/* 上下留白一致 → 内容真正居中；顶部多让一点避免贴导航 */
#gateSection .container {
    padding: 104px 20px 76px !important;
}

/* 标题与表单之间再拉开一点呼吸感 */
.gate-top { margin: 0 0 40px !important; }
.gate-brand { line-height: 1.45; }

/* 保持登录里的说明文字收掉，减少杂乱 */
.gate-remember em { display: none !important; }

/* 退出按钮弱化，登录按钮为主 */
.gate-btn-ghost {
    background: transparent !important;
    color: rgba(196, 181, 253, .8) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(124, 92, 255, .55) !important;
    border-radius: 3px !important;
}
.gate-btn-ghost:hover {
    background: rgba(124, 92, 255, .16) !important;
    border-bottom-color: #7c5cff !important;
}

@media (max-width: 760px) {
    #gateSection .container { padding: 96px 16px 40px !important; }
    .gate-top { margin-bottom: 32px !important; }
}

/* ==========================================================================
   登录区 · 输入框彻底去框：不要矩形底色，只留一条底部细线
   ========================================================================== */
.gate-input-wrap {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(34, 211, 238, .4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.gate-input-wrap:hover { background: transparent !important; border-bottom-color: rgba(34, 211, 238, .7) !important; }
.gate-input-wrap:focus-within {
    background: transparent !important;
    border-bottom-color: #22d3ee !important;
    box-shadow: 0 1px 0 rgba(34, 211, 238, .6) !important;
}

/* 验证码图同理，去掉底色只留底线 */
.gate-captcha-box {
    background: rgba(9, 14, 40, .3) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(124, 92, 255, .45) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.gate-captcha-box img { border-radius: 0; }

/* 图标颜色压低，避免抢视线 */
.gate-icon { color: rgba(34, 211, 238, .55) !important; }
.gate-eye { color: rgba(34, 211, 238, .55) !important; }

/* 标签颜色再淡一点 */
.gate-field > label { color: rgba(165, 232, 255, .8) !important; }

/* ==========================================================================
   登录区 · 修正标题被裁 + 提示文字移到一侧
   ========================================================================== */

/* 容器允许内容完整显示，不裁顶部 */
#gateSection {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
}

#gateSection .container {
    /* 上下留白一致 → 真正垂直居中；顶部只需避开导航 */
    padding: 100px 24px 56px !important;
    min-height: 100vh !important;
    height: auto !important;
    box-sizing: border-box;
    align-items: center !important;
}

/* 标题不再被裁：给足行高与溢出可见 */
.gate-brand {
    line-height: 1.6 !important;
    padding: 6px 0 2px;
    overflow: visible !important;
    white-space: nowrap;
}

/* 标题与表单拉开距离 */
.gate-top { margin: 0 0 34px !important; }

/* 提示文字（lock-file-tip 等）挪到屏幕底部，不占中央位置 */
.lock-file-tip {
    position: fixed !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    width: min(560px, calc(100vw - 40px)) !important;
    z-index: 950;
    margin: 0 !important;
    font-size: .8rem !important;
    line-height: 1.7;
    opacity: .92;
}

@media (max-width: 760px) {
    #gateSection .container { padding: 94px 16px 40px !important; }
    .gate-brand { font-size: 1.66rem; letter-spacing: 5px; text-indent: 5px; }
}

/* ==========================================================================
   验证码样式：放大、去掉底色、只在底部留一条紫线
   ========================================================================== */
.gate-captcha-box {
    background: rgba(12, 16, 46, .42) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(124, 92, 255, .5) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    cursor: pointer;
}
.gate-captcha-box:hover { background: rgba(12, 16, 46, .62) !important; }
.gate-captcha-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent !important;
}

/* ==========================================================================
   全站科技感配色升级
   在原有蓝色体系上加入电光青 #06b6d4 与 靛紫 #7c5cff，
   用于标题装饰、卡片悬停、按钮、图标、分隔线等处，避免大面积纯白显得寡淡
   ========================================================================== */

:root {
    --tech-cyan: #06b6d4;
    --tech-cyan-soft: #cffafe;
    --tech-indigo: #4f46e5;
    --tech-violet: #7c5cff;
    --tech-violet-soft: #ede9fe;
    --tech-grad: linear-gradient(135deg, #06b6d4 0%, #4f46e5 55%, #7c5cff 100%);
    --tech-grad-soft: linear-gradient(135deg, #ecfeff 0%, #eef2ff 50%, #f5f3ff 100%);
}

/* ---- 1. 分区底色：白 → 极淡青紫渐层，避免整站死白 ---- */
.section.tint,
.section.alt {
    background:
        linear-gradient(180deg, rgba(6, 182, 212, .045) 0%, rgba(124, 92, 255, .05) 100%),
        #fbfcfe !important;
}

body { background: #fdfdff; }

/* ---- 2. 章节标题：加一条科技渐变短杠 ---- */
.section-title { position: relative; }

.section-eyebrow {
    background: var(--tech-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ---- 3. 卡片：极淡青紫底 + 悬停时渐变描边 ---- */
.feature-card,
.value-card,
.join-card,
.doc-attach,
.faq-item,
.notice-item,
.member-card,
.stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border: 1px solid #e4e9f2 !important;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.feature-card:hover,
.value-card:hover,
.member-card:hover,
.stat-card:hover {
    border-color: rgba(6, 182, 212, .5) !important;
    box-shadow: 0 14px 34px rgba(79, 70, 229, .12) !important;
    transform: translateY(-3px);
}

/* ---- 4. 按钮：主按钮用科技渐变 ---- */
.btn-primary,
.btn {
    background: var(--tech-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .26);
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-primary:hover,
.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 32px rgba(79, 70, 229, .34) !important;
}

/* 次级按钮：紫色描边 */
.btn-outline,
.btn-secondary {
    background: transparent !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(124, 92, 255, .5) !important;
    transition: background .2s, border-color .2s;
}
.btn-outline:hover,
.btn-secondary:hover {
    background: rgba(124, 92, 255, .1) !important;
    border-color: #7c5cff !important;
}

/* ---- 5. 导航：选中项与主按钮用渐变 ---- */
.nav-link:hover,
.nav-item.active > .nav-link { color: #4f46e5 !important; }

.nav-link::after,
.nav-item.active .nav-link::after {
    background: var(--tech-grad) !important;
}

.nav-cta {
    background: var(--tech-grad) !important;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
}

/* ---- 6. 分隔线：细渐变线 ---- */
.section-head,
.divider {
    border-color: transparent !important;
}
.section-head {
    background-image: linear-gradient(90deg, rgba(6,182,212,0), rgba(6,182,212,.35), rgba(124,92,255,.35), rgba(124,92,255,0));
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 2px;
}

/* ---- 7. 链接 hover 变色 ---- */
a:hover { color: #4f46e5; }

/* ---- 8. 数据/标签小徽章 ---- */
.tag,
.badge,
.pill {
    background: var(--tech-grad-soft) !important;
    color: #4338ca !important;
    border: 1px solid rgba(124, 92, 255, .22) !important;
}

/* ---- 9. 页脚：深色科技底 ---- */
.footer {
    background:
        radial-gradient(700px 400px at 15% 0%, rgba(6, 182, 212, .18) 0%, rgba(6,182,212,0) 60%),
        radial-gradient(700px 400px at 85% 100%, rgba(124, 92, 255, .2) 0%, rgba(124,92,255,0) 60%),
        linear-gradient(165deg, #101c3f 0%, #0c1430 100%) !important;
    color: #c7d2fe;
}
.footer a { color: #a5b4fc; }
.footer a:hover { color: #67e8f9; }

/* ---- 10. 页头大图：叠一层科技渐层 ---- */
.page-header {
    background-blend-mode: multiply;
}
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(6, 182, 212, .3) 0%, rgba(79, 70, 229, .28) 55%, rgba(124, 92, 255, .32) 100%);
}

/* ---- 11. 图片占位/装饰图标配色 ---- */
.icon-box,
.feature-icon {
    background: var(--tech-grad-soft) !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6, 182, 212, .2) !important;
}

/* ---- 12. 表格与代码块 ---- */
table th {
    background: var(--tech-grad-soft) !important;
    color: #3730a3 !important;
    border-color: rgba(124, 92, 255, .2) !important;
}
code, pre {
    background: #f5f7ff !important;
    color: #4338ca !important;
    border-color: rgba(124, 92, 255, .2) !important;
}

/* ---- 13. 时间线圆点与竖线：科技渐变 ---- */
.timeline::before,
a.tl-item::before {
    background: linear-gradient(180deg, #06b6d4, #7c5cff) !important;
}
.tl-item::before,
a.tl-item::after {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .12) !important;
}
.tl-date strong, a.tl-item .tl-date strong { color: #4f46e5 !important; }
.tl-tag, a.tl-item .tl-tag {
    background: var(--tech-grad-soft) !important;
    color: #4338ca !important;
    border: 1px solid rgba(124, 92, 255, .22) !important;
}

/* ---- 14. 首页动态区：头条标签、列表来源 ---- */
.news-lead-tag,
.news-row-src {
    background: var(--tech-grad) !important;
    color: #fff !important;
    /* 方形板块 + 四角圆润弧度 */
    display: inline-block;
    border-radius: 9px !important;
    padding: 4px 12px !important;
    text-align: center;
    line-height: 1.6;
}
.news-row:hover { background: #f5f9ff !important; }
.news-row:hover .news-row-title { color: #4f46e5 !important; }

/* ---- 15. 滚动条 ---- */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #06b6d4, #7c5cff);
    border-radius: 8px;
}
::-webkit-scrollbar-track { background: #f1f5f9; }

::selection { background: rgba(124, 92, 255, .24); }

/* ==========================================================================
   全站浅灰底 + 科技水印
   ========================================================================== */

/* 浅灰蓝底，替代纯白 */
body {
    background: #f4f6fb !important;
    background-image:
        radial-gradient(900px 520px at 12% 6%, rgba(6, 182, 212, .07) 0%, rgba(6,182,212,0) 60%),
        radial-gradient(820px 520px at 88% 12%, rgba(124, 92, 255, .08) 0%, rgba(124,92,255,0) 62%);
    background-attachment: fixed;
}

/* 科技水印：固定在视口右下，极淡 */
body::before {
    content: '';
    position: fixed;
    right: -60px;
    bottom: -40px;
    width: 520px;
    height: 520px;
    background: url('../images/computer-bg.jpg') center/cover no-repeat;
    opacity: .07;
    filter: grayscale(1) contrast(1.1);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

/* 主体内容压在水印之上 */
.page-wrapper, .section, .container, .site-nav, .footer {
    position: relative;
    z-index: 1;
}

/* 导航保持固定在最上 */
.site-nav { z-index: 1000; }

/* 白色区块改为半透明，让水印隐约透出 */
.section {
    background: rgba(255, 255, 255, .78) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.section.tint,
.section.alt {
    background:
        linear-gradient(180deg, rgba(6, 182, 212, .05) 0%, rgba(124, 92, 255, .06) 100%),
        rgba(248, 250, 253, .82) !important;
}

/* ===== 修正层级：水印在最底，页脚与内容正常流，登录区独立整屏 ===== */

/* 页脚不再压在登录区上 */
.footer { position: relative; z-index: 1; }

/* 登录闸门独占最上层，覆盖页脚 */
#gateSection {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 950 !important;
}

/* 恢复 hero 与区块的正常不透明，避免发灰 */
/* 注意：page-header 不能设 background-color: transparent —— 它由内联 background 简写提供底图，
   设成透明会让内联 background 整体失效，页头变成一片空白。 */
.hero, .hero-slider { background-color: transparent !important; }
.page-header { background-color: revert !important; }
.section { background: rgba(255, 255, 255, .82) !important; }
.hero-slider .slide::after { opacity: 1 !important; }

/* 首页首屏大图保持原有遮罩强度 */
.hero-overlay,
.hero .hero-overlay {
    background: linear-gradient(180deg, rgba(10, 20, 60, .35) 0%, rgba(10, 20, 60, .55) 100%) !important;
}

/* ===== 强制隔离：登录闸门永远在最上，其他一律降层 ===== */
#gateSection {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 99999 !important;
}

/* 闸门显示时，页面其余内容全部让位 */
body.gate-open .page-wrapper,
body.gate-open .footer,
body.gate-open .section {
    z-index: auto !important;
}
body.gate-open > *:not(#gateSection) { z-index: auto !important; }

/* ===== 登录闸门：整屏覆盖，但顶部让出导航条，导航仍可见可点 ===== */
#gateSection {
    top: var(--nav-h, 64px) !important;
    height: calc(100vh - var(--nav-h, 64px)) !important;
    min-height: 0 !important;
}
body.gate-open .site-nav,
body.gate-open .nav { z-index: 100000 !important; }

#gateSection .container {
    height: 100% !important;
    min-height: 0 !important;
    padding: 30px 24px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 760px) {
    #gateSection { top: 60px !important; height: calc(100vh - 60px) !important; }
    #gateSection .container { padding: 22px 16px !important; }
}

/* ===== 修正：水印不要压在大图上，改为页面底部渐隐出现 ===== */
body::before {
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 340px !important;
    background:
        linear-gradient(180deg, rgba(244, 246, 251, 0) 0%, rgba(244, 246, 251, .75) 55%, rgba(244, 246, 251, .9) 100%),
        url('../images/computer-bg.jpg') right bottom/cover no-repeat !important;
    opacity: 1 !important;
    filter: grayscale(1) contrast(.95) !important;
    mix-blend-mode: normal !important;
    border-radius: 0 !important;
    z-index: 0 !important;
}

/* 有大图的区块不要被水印压住 */
.hero, .hero-slider, .page-header, .banner { position: relative; z-index: 2 !important; }

/* 页脚保持不透明深色 */
.footer { background-color: #0c1430 !important; }

/* ===== 修正：区块恢复不透明浅色，卡片边界干净；水印只留在最底部 ===== */
.section {
    background: #f6f8fc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.section.tint,
.section.alt {
    background:
        linear-gradient(180deg, rgba(6, 182, 212, .06) 0%, rgba(124, 92, 255, .07) 100%),
        #f6f8fc !important;
}
/* 白底区块保持纯白，不透出水印 */
.section.white,
.section:not(.tint):not(.alt) {
    background: #ffffff !important;
}

/* 卡片恢复纯白 + 淡边框 */
.feature-card, .value-card, .join-card, .doc-attach,
.faq-item, .notice-item, .member-card, .stat-card {
    background: #ffffff !important;
    border: 1px solid #e6ebf3 !important;
}

/* ===== 修正：理念卡片不要过高，内容垂直居中更紧凑 ===== */
.value-card,
.feature-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 26px 26px 30px !important;
}
.value-card > p,
.feature-card > p { margin-bottom: 0; }

/* 若网格行被拉高，卡片自身跟随内容高度 */
.grid-3 > .value-card,
.values-grid > .value-card {
    align-self: start;
}

/* ===== 修正导航层级：导航永远可点，压在登录闸门之上 ===== */
body.gate-open .navbar {
    position: sticky !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
}
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000000 !important;
}

/* 闸门只占导航以下的区域，不覆盖导航 */
#gateSection {
    position: fixed !important;
    top: 64px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    z-index: 900 !important;
}
#gateSection .container {
    height: 100% !important;
    min-height: 0 !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 导航内部链接也要能点 */
.navbar a,
.navbar button,
.navbar .nav-link,
.navbar .nav-logo,
.navbar .nav-cta { pointer-events: auto !important; }

@media (max-width: 760px) {
    #gateSection { top: 60px !important; }
    #gateSection .container { padding: 18px 16px !important; }
}

/* ==========================================================================
   修复：内页大图页头（page-header）正常显示
   之前被「区块半透明 + 科技水印」规则压成一片空白
   ========================================================================== */
.page-header {
    position: relative !important;
    z-index: 2 !important;
    background-color: #14246b !important;
    background-size: cover !important;
    background-position: center !important;
    isolation: isolate;
}

/* 页头上的科技渐层（不影响底图显示） */
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(6, 182, 212, .26) 0%, rgba(79, 70, 229, .24) 55%, rgba(124, 92, 255, .28) 100%);
}

/* 页头文字保证可读 */
.page-header h1,
.page-header p {
    position: relative;
    z-index: 3;
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(4, 10, 30, .5);
}

/* 页头高度：不要过大，压缩空白 */
.page-header {
    padding: 96px 0 84px !important;
}

@media (max-width: 760px) {
    .page-header { padding: 66px 0 58px !important; }
}

/* ===== 修正：页头渐层改用正常层叠，不再用 z-index:-1 ===== */
.page-header::after {
    z-index: 0 !important;
    background:
        linear-gradient(120deg, rgba(6, 182, 212, .22) 0%, rgba(79, 70, 229, .2) 55%, rgba(124, 92, 255, .24) 100%);
}
.page-header > * {
    position: relative;
    z-index: 2 !important;
}
/* 页头内容直接铺在底图上（底图由内联 style 提供） */
.page-header {
    isolation: auto !important;
}

/* ===== 修正：取消「隐藏所有页头」的误伤规则 =====
   之前为了让学习资源登录页不显示页头，写了 .page-wrapper > .page-header{display:none}
   结果把 faq / news / about 等所有内页的大图页头一起干掉了。
   正确做法：只在 learning.html 的登录闸门显示时隐藏，用更精确的选择器。 */
body.gate-open .page-header {
    display: none !important;
}

/* 页头底图与遮罩一律交给内联 style 处理，这里不再覆盖 background */

/* ===== 友情链接：下拉可点区加大，别因为缝隙而丢失 hover ===== */
.nav-item.dropdown { position: relative; }

.nav-item.dropdown .dropdown-menu {
    padding-top: 10px;
    margin-top: 0;
}
.nav-item.dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.nav-item.dropdown .dropdown-menu li a { display: block; padding: 10px 18px; }