:root {
    /* 使用相近色系的平滑渐变，避免对比色带来的脏感 */
    --primary-sunset: linear-gradient(135deg, #F2613F 0%, #FFB067 100%);
    --accent-orange: #F2613F;
    --bg-dark: #121517; /* 提取自 back.jpg 的深青黑 */
    --text-white: #F5F5F7;
    --glass-bg: rgba(242, 97, 63, 0.05);
    --glass-border: rgba(242, 97, 63, 0.2);
    --accent-orange: #F2613F;
}
/* ================= 基础重置 ================= */
body {
    margin: 0;
    background: var(--bg-dark); /* 扁平化深色基调 */
    overflow-x: hidden;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-white);
}

/* 噪点滤镜层 */
body::after {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
    opacity: 0.12; pointer-events: none; z-index: 10000;
}

/* ================= 预加载容器 ================= */
.preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: linear-gradient(135deg, #B46F47 0%, #7F2F19 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 9999;
}

.loader-wrapper { display: flex; flex-direction: column; align-items: center; gap: 30px; }

/* ================= 滚轮数字 ================= */
.odometer-container {
    display: flex; height: 60px; overflow: hidden;
    font-size: 3.5rem; font-weight: 700; line-height: 60px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}
.digit-col { width: 40px; text-align: center; }
.digit-strip { display: flex; flex-direction: column; }
.digit-strip span { height: 60px; display: block; }
.percent-sign { width: 40px; text-align: left; color: rgba(255,255,255,0.3); font-size: 2.5rem; }

/* ================= 波浪进度条 ================= */
.loader-content { width: 300px; height: 40px; position: relative; display: flex; align-items: center; }
.squiggly-container { filter: url(#squiggle); }
.track-line { position: absolute; width: 100%; height: 2px; background: rgba(255,255,255,0.1); }
.mask { position: absolute; height: 100%; width: 0%; overflow: hidden; background: #9A4F33; }
.wave-svg { width: 300px; height: 40px; }
.wave-path { fill: none; stroke-width: 3px; }

/* ================= 2.5D 英雄区布局 ================= */
/* 路径修复：使用 ../img 替代 /static/img */
.layer-bg { background-image: url('../img/back.jpg'); z-index: 1; }
.layer-figure { background-image: url('../img/figure.png'); z-index: 2; transform: scale(1.1); }

.hero-section {
    position: relative; width: 100%; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

.hero-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0;
}

.reveal-title {
    position: relative; z-index: 10; font-size: 8vw; font-weight: 900;
    text-transform: uppercase; clip-path: inset(0 50% 0 50%);
    white-space: nowrap;
    color: #ffffff; /* 恢复纯白，确保第一张图清晰 */
}

.reveal-subtitle {
    position: absolute; bottom: 20%; z-index: 10;
    font-size: 1rem; letter-spacing: 0.3em; color: rgba(255,255,255,0.6);
    opacity: 0; transform: translateY(20px);
}

/* ================= 横向滚动布局 ================= */
* { box-sizing: border-box; }

.horizontal-scroll-section { position: relative; width: 100%; overflow: hidden; }

.horizontal-wrapper {
    display: flex; width: max-content; height: 100vh;
    align-items: center; padding: 0 10vw; gap: 5vw;
}

.work-card {
    width: 80vw !important; height: 70vh !important;
    flex-shrink: 0;
    position: relative;
    cursor: zoom-in;
}

.glass-container {
    width: 100%; height: 100%;
    border-radius: 18px;
    overflow: hidden;

    /* 1. 提高基础亮度，彻底告别隐形和脏色 */
    background: linear-gradient(135deg, rgba(242, 97, 63, 0.12) 0%, rgba(242, 97, 63, 0.02) 100%);

    /* 2. 核心：加粗并提亮基础边框，让方块在不 Hover 时也清晰可见 */
    border: 1px solid rgba(242, 97, 63, 0.35);

    /* 3. 移除无效的 blur，用一点物理阴影把它从背景里“拔”出来 */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

    display: flex; flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================= 悬停状态：纯正的外部光圈 ================= */
.work-card:hover .glass-container {
    background: linear-gradient(135deg, rgba(242, 97, 63, 0.18) 0%, rgba(242, 97, 63, 0.05) 100%);
    transform: translateY(-8px);

    /* 1. 边框变为 100% 纯色的落日橙实线 */
    border: 1px solid #F2613F;

    /* 2. 纯粹的【外部光圈】，去掉任何 inset 内部阴影，光全部向外发散 */
    box-shadow:
        0 0 25px rgba(242, 97, 63, 0.6),   /* 近距离的强光圈 */
        0 0 80px rgba(242, 97, 63, 0.15),  /* 远距离的氛围光散布 */
        0 20px 40px rgba(0, 0, 0, 0.8);    /* 底部加深黑影，增强悬浮立体感 */
}
/* ================= 业务版块样式 ================= */
.directory-style {
    padding: 60px !important; justify-content: space-around;
    align-items: center; flex-direction: row;
}

.dir-section span { color: rgba(255,255,255,0.4); font-size: 0.8rem; letter-spacing: 3px; display: block; margin-bottom: 20px; }
.dir-section ul { list-style: none; padding: 0; margin: 0; }
.dir-section li { font-size: 2rem; margin-bottom: 15px; font-weight: 700; opacity: 0.8; transition: 0.3s; }
.dir-section li:hover { opacity: 1; transform: translateX(10px); }


.about-quote-content { padding: 80px; text-align: right; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.main-quote { font-size: 2.8rem; font-weight: 400; line-height: 1.3; margin-bottom: 40px; }
.signature-box { display: flex; flex-direction: column; align-items: flex-end; }
.signature-img { width: 220px; margin-bottom: 10px; opacity: 0.9; }

/* 简历卡片布局 */
.bio-layout { display: grid; grid-template-columns: 1fr 2fr 1fr; padding: 50px; height: 100%; gap: 30px; }
.avatar-circle { width: 180px;height: 180px;border-radius: 50%;  /* 这个属性让它变成圆的 */
    border: 10px solid #E6A03D;
    overflow: hidden;
}
.avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 这个神级属性会自动把 800px 的图完美缩放并填满 180px 的框，不会变形 */
}
.name-en { font-size: 2.5rem; font-weight: 900; color: #E6A03D; margin-bottom: 20px; }

.info-list { list-style: none; padding: 0; }
.info-list li { margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; font-size: 0.9rem; }
.info-list span { display: block; font-size: 0.7rem; opacity: 0.5; }

.exp-date { font-weight: 700; color: #E6A03D; margin-bottom: 5px; }
.skill-tag { display: inline-block; padding: 6px 12px; background: rgba(255,255,255,0.1); border-radius: 6px; margin: 0 5px 5px 0; font-size: 0.8rem; }

/* ================= 全屏放大预览 ================= */
.full-screen-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20000; background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: zoom-out;
}
.full-screen-overlay.active { opacity: 1; visibility: visible; }
.overlay-content-host { width: 90vw; height: 85vh; max-width: 1600px; transform: scale(0.9); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.full-screen-overlay.active .overlay-content-host { transform: scale(1); }

/* 放大后的版式微调 */
.expanded-view .bio-layout {
    grid-template-columns: 1.2fr 2.5fr; /* 左侧个人信息，右侧项目列表 */
    padding: 80px;
    gap: 80px;
}
.expanded-view .directory-style {
    padding: 100px;
}

/* 2. 放大状态下的二维码样式 */
.expanded-view .qr-item {
    width: 150px;        /* 容器变宽 */
    height: 150px;       /* 容器变高 */
    border-radius: 20px; /* 圆角变得更柔和 */
}
.expanded-view .qr-item img {
    width: 90px;         /* 内部图片变大 */
    height: 90px;
    padding: 8px;
    margin-bottom: 10px;
}
.expanded-view .qr-item p {
    font-size: 0.95rem;  /* 底部文字微微变大 */
    letter-spacing: 2px;
}

/* ================= 转场卡片样式 ================= */
.snap-box { background: rgba(0, 0, 0, 0.2) !important; overflow: hidden; position: relative; }
.snap-box canvas { display: block; width: 100% !important; height: 100% !important; }

.footer-section { height: 100vh; display: flex; justify-content: center; align-items: center; }

/* 全屏垂直转场样式 */
.vertical-snap-section {
    width: 100%;
    height: 100vh; /* 占满一屏 */
    position: relative;
    background: transparent; /* 透出背景渐变 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* 确保它在普通内容之上 */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.vertical-snap-section .snap-box {
    width: 100%;
    height: 100%;
    background: transparent !important;
}

/* 确保 Canvas 能够随屏幕缩放 */
.snap-box canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ================= 作品网格 (2排4列) ================= */
.project-grid-section {
    padding: 100px 5vw;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f2f5 100%); /* 深色背景增强对比 */
}

.rect-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列 */
    grid-template-rows: repeat(2, 1fr);    /* 2排 */
    grid-gap: 30px;
}

.grid-item {
    aspect-ratio: 4 / 3;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    color: white;
}

.grid-item:hover {
    transform: translateY(-10px) scale(1.02);
    border: 1px solid #E6A03D; /* 使用你的橙色主题色 */
}

.grid-thumb {
    width: 100%; height: 75%;
    background-size: cover; background-position: center;
}

.grid-info {
    padding: 15px;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: space-between; align-items: center;
}
.grid-info h4 { margin: 0; font-size: 0.9rem; letter-spacing: 1px; }
.grid-info span { font-size: 0.7rem; opacity: 0.4; }

/* ================= 详情页 (PDF 极简风) ================= */
.detail-body { background: #EFEFEF; color: #111; font-family: 'Space Grotesk', sans-serif; }
.detail-header { padding: 80px 5vw; border-bottom: 2px solid #ddd; }
.detail-header h1 { font-size: 10vw; font-weight: 900; margin: 0; line-height: 0.85; letter-spacing: -5px; }

.detail-columns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; padding: 100px 5vw; }
.detail-columns h3 { font-size: 2.5rem; margin-top: 0; }
.detail-columns p { font-size: 1.1rem; line-height: 1.8; color: #444; }

.detail-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 5vw 100px; }
.showcase-img { width: 100%; border-radius: 10px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); }

/* ================= 极简海报风作品网格 ================= */
.project-grid-section {
    padding: 150px 5vw;
    background: transparent;
}

.rect-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 80px; /* 【配合卡片变大，拉开呼吸间距】从 60px 增加到 80px */
    max-width: 1600px; /* 【核心放大魔法】：从 1200px 放宽到 1600px，相当于画面直接放大了约 33%！ */
    margin: 0 auto;
}

/* 整体卡片容器 (包含图片和底部文字) */
.portfolio-item {
    display: flex;
    flex-direction: column;
    gap: 24px; /* 图文间距微微拉大 */
    text-decoration: none;
    color: var(--text-white);
    cursor: pointer;
}

/* 单独的图片容器 */
.portfolio-visual {
    aspect-ratio: 16 / 9;
    background: rgba(242, 97, 63, 0.02);
    border: 1px solid rgba(242, 97, 63, 0.15);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 悬停时的外发光仅作用于图片容器 */
.portfolio-item:hover .portfolio-visual {
    transform: translateY(-12px);
    border-color: #F2613F;
    box-shadow: 0 0 40px rgba(242, 97, 63, 0.3);
}

/* 图片缩放交互 */
.grid-thumb {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: grayscale(0.8) contrast(1.1);
    transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item:hover .grid-thumb {
    filter: grayscale(0) contrast(1);
    transform: scale(1.05);
}

/* 底部文字排版 - 同步放大 */
.portfolio-meta {
    padding: 0 5px;
}

.portfolio-meta h4 {
    margin: 0 0 10px 0;
    font-size: 1.6rem; /* 【字号放大】：从 1.2rem 提升到 1.6rem，压住大图的阵脚 */
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-white);
    transition: color 0.3s;
}

.portfolio-meta span {
    font-size: 0.95rem; /* 【字号放大】：从 0.85rem 提升到 0.95rem */
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.portfolio-item:hover .portfolio-meta h4 {
    color: #F2613F;
}

/* ========================================================= */
/* ================= PDF 极简画廊风格 (Detail Page) ======== */
/* ========================================================= */

/* 强制重置详情页的背景为纸张白，文字为高级黑 */
body.pdf-theme {
    background: #F4F4F5; /* 微微偏暖的高级纸张灰白 */
    color: #111111;
    overflow-x: hidden;
    overflow-y: auto; /* 允许正常上下滚动 */
}

/* 顶部导航 */
.pdf-nav {
    display: flex;
    justify-content: space-between;
    padding: 30px 5vw;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.back-btn { text-decoration: none; color: #111; transition: opacity 0.3s; }
.back-btn:hover { opacity: 0.5; }

/* 核心内容容器 */
.pdf-container {
    padding: 0 5vw;
    max-width: 1800px;
    margin: 0 auto;
}

/* 巨型标题区 */
.pdf-header {
    padding: 80px 0 40px 0;
}
.pdf-title {
    font-size: 9vw;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -4px;
    margin: 0;
    text-transform: uppercase;
}

/* Meta 信息栏 (PDF 典型的细线分割) */
.pdf-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid #111;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding: 30px 0;
    margin-bottom: 80px;
}
.meta-item { display: flex; flex-direction: column; gap: 8px; }
.meta-label { font-size: 0.75rem; font-weight: 700; opacity: 0.5; letter-spacing: 1px; }
.meta-value { margin: 0; font-size: 1.1rem; font-weight: 700; }

/* 两栏阅读区 */
.pdf-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    margin-bottom: 100px;
}
.pdf-col-left h2 {
    font-size: 3rem; margin: 0; line-height: 1; letter-spacing: -1px;
}
.pdf-col-right p {
    font-size: 1.1rem; line-height: 1.8; color: #444; margin-bottom: 20px;
}
.pdf-col-right .lead-text {
    font-size: 1.8rem; line-height: 1.5; color: #111; font-weight: 700; margin-bottom: 40px;
}

/* 画廊图片 */
.pdf-gallery {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 100px;
}
.pdf-img {
    width: 100%;
    height: auto;
    background: #E0E0E0; /* 图片加载前的占位色 */
}

/* 底部下一个项目 */
.pdf-footer {
    padding: 80px 0;
    border-top: 2px solid #111;
    text-align: right;
    font-size: 3vw;
    font-weight: 900;
}
.pdf-footer a { color: #111; text-decoration: none; transition: color 0.3s; }
.pdf-footer a:hover { color: #F2613F; /* 悬停时透出你的主色调落日橙 */ }

/* PC端隐藏静态插图 */
.mobile-only-img { display: none; }

/* 响应式调整 (手机端) */
@media (max-width: 768px) {
    .pdf-meta { grid-template-columns: 1fr 1fr; gap: 20px; }
    .pdf-body { grid-template-columns: 1fr; gap: 40px; }
    .pdf-title { font-size: 15vw; letter-spacing: -2px; }
}

/* ================= 3D 爬虫矩阵动画板块 ================= */
.crawler-3d-section {
    /* 这个高度决定了你需要滚动多久才能看完整个粒子变形动画 */
    /* 300vh 意味着你要滚动 3 个屏幕的高度 */
    height: 600vh;
    position: relative;
    background: #000; /* 纯黑背景让白色的发光粒子更明显 */
}

.crawler-sticky-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh; /* 始终占满当前屏幕 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#crawler-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 悬浮在 3D 画布上的 UI */
.crawler-ui-layer {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* 默认不挡住鼠标操作 */
}

.crawler-title {
    font-size: 5vw;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
    opacity: 0; /* 初始隐藏，等 3D 动画变形完再用 GSAP 显现 */
}

.crawler-subtitle {
    color: #F2613F;
    letter-spacing: 5px;
    font-size: 1rem;
    margin-bottom: 40px;
    opacity: 0;
}

/* 赛博朋克风搜索框 */
.crawler-search-box {
    display: flex;
    gap: 15px;
    pointer-events: auto; /* 恢复搜索框的点击和输入功能 */
    opacity: 0;
}

.cyber-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 15px 30px;
    width: 400px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    outline: none;
}
.cyber-input:focus { border-color: #F2613F; }

.cyber-btn {
    background: #F2613F;
    border: none;
    color: white;
    padding: 15px 30px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}
.cyber-btn:hover { background: #fff; color: #F2613F; }

/* ================= 爬虫结果面板样式 ================= */
.cyber-results-container {
    position: relative;
    z-index: 999 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;

    /* 【核心修复】：必须限制最大高度，才能触发内部的滚动条！ */
    max-height: 50vh; /* 最高只占屏幕的一半高度 */
    width: 100%;
    max-width: 1050px; /* 限制最大宽度，让排版更集中高级 */
    margin-top: 30px;
    padding-right: 10px; /* 给右侧的橙色滚动条留出一点呼吸空间 */
}

/* 允许终端日志也正常滚动且不穿透 */
.cyber-terminal {
    position: relative;
    z-index: 999 !important;
    pointer-events: auto !important;
    overscroll-behavior: contain !important;
}

/* 确保每一行数据都不会被拦截鼠标 */
.cyber-result-item {
    pointer-events: auto !important;
}

/* 2. 定制面板滚动条 (橙色) */
.cyber-results-container::-webkit-scrollbar {
    width: 6px;
}
.cyber-results-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.cyber-results-container::-webkit-scrollbar-thumb {
    background: rgba(242, 97, 63, 0.8);
    border-radius: 4px;
}
.cyber-results-container::-webkit-scrollbar-thumb:hover {
    background: rgba(242, 97, 63, 1);
}

/* 3. 定制绿字黑客终端滚动条 (绿色) */
.terminal-body::-webkit-scrollbar {
    width: 6px;
}
.terminal-body::-webkit-scrollbar-track {
    background: rgba(0, 15, 0, 0.5);
}
.terminal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.5);
}
.terminal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 0, 1);
}

/* 隐藏状态 */
.cyber-results-container.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.95);
}

.result-header {
    color: #F2613F;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(242, 97, 63, 0.3);
    padding-bottom: 10px;
}

.cyber-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 确保垂直居中 */
    padding: 15px 20px;
    margin-bottom: 12px;
    background: rgba(10, 15, 12, 0.95); /* 【核心修正】：极其深邃的底色，几乎不透明 */
    backdrop-filter: blur(8px); /* 毛玻璃滤镜，糊掉背后的发光粒子 */
    border: 1px solid rgba(242, 97, 63, 0.4);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9); /* 【核心修正】：强烈的黑色外阴影，把卡片拔出来 */
}

.cyber-result-item:hover {
    border-color: #00ff00; /* 鼠标放上去变成极客绿 */
    background: rgba(0, 20, 0, 0.98);
    transform: translateX(5px);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.cyber-label { font-size: 0.75rem; opacity: 0.6; letter-spacing: 1px; color: #fff; }
.cyber-value { font-size: 1.1rem; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); } /* 给文字加点黑底阴影防撞色 */

/* ================= 新增：不同平台来源的专属标签 ================= */
.source-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    white-space: nowrap;
    letter-spacing: 1px;
}
/* 用左侧的边框颜色来区分不同的数据源 */
.source-ncss { border-left: 3px solid #00ff00; }     /* 国家平台：绿色 */
.source-zhaopin { border-left: 3px solid #00aaff; }  /* 智联招聘：蓝色 */
.source-wellcee { border-left: 3px solid #a6dfd8; }  /* 唯心所寓：粉色 */

/* ================= 极客实时终端 ================= */
.cyber-terminal {
    margin-top: 20px;
    width: 100%;
    max-width: 600px;
    background: rgba(0, 15, 0, 0.85); /* 极深的暗绿色 */
    border: 1px solid #00ff00;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace; /* 黑客打字机字体 */
    color: #00ff00;
    text-align: left;
    transition: all 0.3s;
}
.cyber-terminal.hidden { opacity: 0; pointer-events: none; transform: translateY(10px); display: none; }
.terminal-header { background: rgba(0, 255, 0, 0.2); padding: 5px 15px; font-size: 0.8rem; font-weight: bold; }
.terminal-body { padding: 15px; height: 160px; overflow-y: auto; font-size: 0.85rem; line-height: 1.6; }
.terminal-body div { margin-bottom: 5px; }
.log-warn { color: #ff4444; } /* 红色报警字 */
.log-success { color: #00ff00; text-shadow: 0 0 5px #00ff00; }

/* ================= 赛博风下拉选择框 ================= */
.cyber-select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0 20px;
    height: 52px; /* 和 input 保持同高 */
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    outline: none;
    cursor: pointer;
    appearance: none; /* 隐藏默认箭头，显得更硬核 */
    -webkit-appearance: none;
}
.cyber-select:focus { border-color: #F2613F; }

/* 展开后的选项底色 (必须是不透明深色，否则看不清字) */
.cyber-select option {
    background: #121517;
    color: white;
    padding: 10px;
}

/* 1. 【极度重要】强制恢复鼠标事件，允许拖动滑动条！ */
.cyber-results-container, .cyber-terminal {
    pointer-events: auto !important;
}

/* 2. 定制面板滚动条 (橙色) */
.cyber-results-container::-webkit-scrollbar {
    width: 6px; /* 稍微变细一点，显得高级 */
}
.cyber-results-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.cyber-results-container::-webkit-scrollbar-thumb {
    background: rgba(242, 97, 63, 0.8); /* 你的主题橙色 */
    border-radius: 4px;
}
.cyber-results-container::-webkit-scrollbar-thumb:hover {
    background: rgba(242, 97, 63, 1);
}

/* 3. 定制绿字黑客终端滚动条 (绿色) */
.terminal-body::-webkit-scrollbar {
    width: 6px;
}
.terminal-body::-webkit-scrollbar-track {
    background: rgba(0, 15, 0, 0.5);
}
.terminal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.5);
}
.terminal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 0, 1);
}

/* 1. 微调三列比例，给中间的3个项目方块留出更多空间 */
.bio-layout {
    display: grid;
    grid-template-columns: 1fr 2.2fr; /* 左侧偏窄，右侧分配更多空间给长条形卡片 */
    padding: 50px;
    height: 100%;
    gap: 60px;
}

/* --- 左侧区域：利用 Flexbox 把二维码推到最底下 --- */
.bio-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 关键：自动把顶部信息和底部二维码拉开距离 */
    height: 100%;
}

/* 左下角二维码容器 */
.qr-container {
    display: flex;
    gap: 15px;
    margin-top: auto; /* 强制将容器推至底部 */
}

/* 正方形、带圆角的二维码卡片 */
.qr-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px; /* 圆角 */
    width: 110px;        /* 固定宽度 */
    height: 110px;       /* 固定高度，形成正方形 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.qr-item:hover {
    border-color: #F2613F;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}
.qr-item img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: #fff;
    padding: 5px;
}
.qr-item p {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #F2613F;
    letter-spacing: 1px;
}

/* --- 右侧区域：横向长条形项目 --- */
.bio-right-projects {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.section-title {
    color: #E6A03D;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* 项目列表容器：上下排列 */
.text-projects-column {
    display: flex;
    flex-direction: column; /* 让内部卡片上下排布 */
    gap: 20px;              /* 卡片之间的间距 */
    flex-grow: 1;
    justify-content: center;
}

/* 横向长条形卡片 */
.text-project-block {
    width: 100%; /* 占满右侧宽度 */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px 30px;
    display: flex;             /* 让卡片内部文字和按钮左右排布 */
    flex-direction: row;
    align-items: center;       /* 垂直居中对齐 */
    justify-content: space-between; /* 文字在左，按钮在右 */
    transition: all 0.3s;
}
.text-project-block:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #F2613F;
    transform: translateX(10px); /* 悬停时微微向右滑动，很优雅 */
}

/* 卡片内部文字区域 */
.tp-content {
    flex: 1;
    padding-right: 30px; /* 给右边按钮留点呼吸空间 */
}
.tp-year { font-family: 'Courier New', monospace; color: #F2613F; font-size: 0.75rem; margin-bottom: 8px; }
.tp-title { font-size: 1.3rem; font-weight: 900; margin: 0 0 8px 0; color: white; text-transform: uppercase; letter-spacing: 1px;}
.tp-desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; margin: 0; }

/* 右侧的探索按钮 */
.tp-link {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid rgba(242, 97, 63, 0.5);
    padding: 12px 24px;
    border-radius: 8px;
    transition: 0.3s;
    white-space: nowrap; /* 确保按钮文字不会换行 */
}
.tp-link:hover {
    background: #F2613F;
    border-color: #F2613F;
    color: white;
}

/* ================= 详情页：可滚动极客代码块 ================= */
.scrollable-code-container {
    width: 100%;
    background: #121517; /* 与你网站的深色背景呼应 */
    border: 1px solid rgba(242, 97, 63, 0.3); /* 你的主题橙色边框 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    margin-bottom: 40px;
}

/* 仿 MacOS 窗口顶部栏 */
.code-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.code-header .dot { width: 12px; height: 12px; border-radius: 50%; }
.code-header .red { background: #ff5f56; }
.code-header .yellow { background: #ffbd2e; }
.code-header .green { background: #27c93f; }
.code-header .file-name {
    margin-left: 15px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* 滚动代码区域 */
.scrollable-code-container pre {
    margin: 0;
    padding: 30px;
    max-height: 65vh; /* 核心：限制最高高度，占屏幕65% */
    overflow-y: auto; /* 核心：超出高度后允许在框内滚动 */
    overflow-x: auto; /* 允许横向滚动以防代码过长 */
    color: #00ff00; /* 黑客绿字体 */
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* 定制代码块专属的橙色滚动条 */
.scrollable-code-container pre::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollable-code-container pre::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.scrollable-code-container pre::-webkit-scrollbar-thumb { background: rgba(242, 97, 63, 0.5); border-radius: 4px; }
.scrollable-code-container pre::-webkit-scrollbar-thumb:hover { background: rgba(242, 97, 63, 1); }

/* ================= 详情页：主图与更多详情网格 ================= */
.main-showcase-img {
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); /* 给主图加一点高级的纸张阴影 */
}

.more-details-section {
    margin-top: 80px;
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* PDF风格的分割线 */
    padding-top: 40px;
}

.more-title {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 40px;
    letter-spacing: 2px;
    color: #111; /* 深灰色标题 */
}

/* 详情页里的小方块网格，每排2个 */
.detail-mini-grid {
    grid-gap: 30px;
}

/* 强制缩略图容器为特定比例 (4:3)，并在亮色背景下调整边框 */
.square-visual {
    aspect-ratio: 4 / 3 !important;
    border-color: rgba(0, 0, 0, 0.1) !important; /* 亮色主题下的浅色边框 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 鼠标悬停时的放大与发光效果 (适配详情页亮色背景) */
.portfolio-item.mini-card:hover .square-visual {
    border-color: #F2613F !important;
    box-shadow: 0 15px 35px rgba(242, 97, 63, 0.2) !important;
    transform: translateY(-8px);
}

/* ================= 3D 滚动阶段文字样式 ================= */
.phase-text-container {
    position: absolute;
    top: 50%;
    left: 8vw; /* 靠左放置，给右边的粒子留出呼吸空间 */
    transform: translateY(-50%);
    width: 35vw; /* 限制宽度，防止文字拉得太长 */
    max-width: 500px;
    z-index: 20;
    pointer-events: none; /* 防止挡住鼠标的滚动和点击 */
    opacity: 0; /* 初始状态完全透明 */
}

.phase-text-container h3 {
    color: #F2613F; /* 使用你的主题橙色 */
    font-size: 1rem;
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace; /* 极客代码字体 */
}

.phase-text-container p {
    color: #F5F5F7;
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 300;
    margin: 0;
}

/* 手机端适配：屏幕窄时，文字放上面，粒子放下面 */
@media (max-width: 768px) {
    .phase-text-container {
        top: 20%;
        left: 5vw;
        width: 90vw;
    }
    .phase-text-container p {
        font-size: 1.2rem;
    }
}

    /* =======================================
       9. 详情页图片点击全屏放大 (Lightbox)
       ======================================= */
    /* 给图片加上“放大镜”的鼠标指针暗示 */
    .main-showcase-img, .grid-thumb {
        cursor: zoom-in !important;
    }

    /* 遮罩层基础样式 */
.image-lightbox {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(10, 12, 14, 0.97); /* 极暗背景 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 999999; /* 确保在最顶层 */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    cursor: zoom-out;
}

    /* 激活状态 */
    .image-lightbox.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* 图片动画：从 90% 大小丝滑弹出 */
    .image-lightbox img {
        max-width: 95vw;
        max-height: 95vh;
        object-fit: contain;
        transform: scale(0.9);
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: 0 20px 50px rgba(0,0,0,0.6);
        border-radius: 8px;
    }

    .image-lightbox.active img {
        transform: scale(1);
    }

    /* 旋转提示词样式 */
.rotate-tip {
    position: absolute;
    top: 30px;
    color: #F2613F;
    font-size: 0.8rem;
    letter-spacing: 2px;
    border: 1px solid rgba(242, 97, 63, 0.4);
    padding: 8px 15px;
    border-radius: 20px;
    display: none; /* 默认隐藏 */
}

/* 📱 移动端适配：仅在竖屏时显示旋转提示 */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .rotate-tip {
        display: block;
        animation: pulseTip 2s infinite;
    }
}

@keyframes pulseTip {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

    /* =======================================
       📱 移动端专属响应 (放入你最底部的 @media 里)
       ======================================= */
    @media screen and (max-width: 768px) {
        .rotate-tip {
            display: block !important; /* 手机端显现横屏提示 */
        }
        .image-lightbox img {
            max-width: 100vw !important; /* 手机端完全贴边，更沉浸 */
            border-radius: 0 !important;
        }
    }

/* ================= 极简版底部带视频的联系模块 ================= */
.contact-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 0;
}

.texture-video-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

.bg-texture-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* 【核心修改：扒掉高斯模糊，只留极浅的黑底保证白字能看清】 */
.video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.15); /* 几乎透明的 15% 黑底 */
    /* 彻底删除了 backdrop-filter 的高斯模糊！ */
}

.contact-content-wrapper.minimalist-contact {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}

/* 视觉绝对的焦点：排版张力拉满的巨大邮箱 */
.huge-email {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    letter-spacing: -2px;
    margin-bottom: 120px;
    transition: color 0.4s ease, transform 0.4s ease;
}

.huge-email:hover {
    color: var(--accent-orange);
    transform: translateY(-5px);
}

.footer-bottom {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

.footer-links a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s;
}

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

/* 适配移动端 */
@media (max-width: 768px) {
    .huge-email { font-size: 2rem; letter-spacing: 0; }
    .footer-bottom { flex-direction: column; align-items: center; gap: 20px; }
}

/* ================= 终极版：右侧悬浮赛博发光切换器 ================= */
.lang-switch-container {
    position: fixed; /* 始终悬浮于整个画面之上 */
    top: 40px;
    right: 50px;     /* 固定在右上角 */
    display: flex;
    align-items: center;
    gap: 12px;

    /* 圆角矩形与毛玻璃质感 */
    background: rgba(18, 21, 23, 0.65); /* 极暗的透明底色，融入背景 */
    padding: 10px 20px;
    border-radius: 50px; /* 完美的圆角胶囊形状 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 9999; /* 保证永远在最顶层 */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 整个矩形的悬浮发光特效 */
.lang-switch-container:hover {
    border-color: rgba(242, 97, 63, 0.4); /* 边框变成半透明主题橙 */
    background: rgba(18, 21, 23, 0.85);
    box-shadow: 0 0 25px rgba(242, 97, 63, 0.25), /* 外发光 */
                inset 0 0 10px rgba(242, 97, 63, 0.1); /* 内发光 */
    transform: translateY(-2px); /* 微微上浮 */
}

.lang-btn {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

/* 鼠标悬停在字母上时变亮 */
.lang-btn:hover {
    color: #ffffff;
}

/* 当前激活语言的高亮 + 赛博霓虹文字阴影 */
.lang-btn.active {
    color: var(--accent-orange);
    text-shadow: 0 0 12px rgba(242, 97, 63, 0.8);
}

.lang-divider {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
    user-select: none; /* 防止鼠标选中斜杠 */
}

/* ==========================================
   移动端专属结界 (PC端绝对免疫)
   ========================================== */
    @media screen and (max-width: 768px) {



    /* 1. 终极修复：大字适配与“悬浮呼吸”动效 */
    .reveal-title {
        position: absolute !important;
        left: 0 !important;
        width: 100vw !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 10vw !important; /* 调整为精致的10vw */
        line-height: 1.1 !important;
        padding: 0 !important;
        margin: 0 !important;
        top: 42% !important; /* 稍微往上抬一点点 */
        animation: floatTitle 3.5s infinite alternate ease-in-out 2s !important;
    }

    @keyframes floatTitle {
        0% { top: 42%; }
        100% { top: 38%; } /* 向上悬浮 4% 的距离 */
    }

    .reveal-subtitle {
        position: absolute !important;
        left: 0 !important;
        width: 100vw !important;
        text-align: center !important;
        font-size: 1rem !important;
        letter-spacing: 0.2em !important;
        padding: 0 !important;
        margin: 0 !important;
        bottom: 25% !important;
        animation: floatSub 3.5s infinite alternate ease-in-out 2s !important;
    }

    @keyframes floatSub {
        0% { bottom: 25%; }
        100% { bottom: 21%; } /* 向下沉 4% 的距离 */
    }

    /* 2. 隐藏人物，背景呼吸 */
    .layer-figure {
        display: none !important;
    }

    .layer-bg {
        background-position: center center !important;
        background-size: cover !important;
        animation: bgBreathe 8s infinite alternate ease-in-out !important;
    }

    @keyframes bgBreathe {
        0% { transform: scale(1); }
        100% { transform: scale(1.15); }
    }

    /* 3. 放大右上角语言切换按钮 */
    .lang-switch-container {
        top: 25px !important;
        right: 20px !important;
        padding: 12px 24px !important;
        transform: scale(1.15);
        transform-origin: top right;
    }

    .lang-btn {
        font-size: 1.2rem !important;
    }

    .lang-divider {
        font-size: 1.2rem !important;
    }

    /* 4. 底部爬虫区的静态背景 (替代 3D 黑洞) */
    .mobile-static-crawler {
        background: radial-gradient(circle at center, #1a1e21 0%, #000000 100%);
        position: relative;
    }

    /* --------------------------------------
       5. 中间 3 个大模块：自由上下滑 + 内部左右抽卡
       -------------------------------------- */
    .horizontal-scroll-section {
        height: auto !important; /* 解除高度限制，允许上下自由滑动 */
        padding: 50px 0 !important;
        position: relative;
    }

    /* 底部“滑动提示文字”与闪烁动画 */
    .horizontal-scroll-section::after {
        content: "← SWIPE TO EXPLORE →";
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.75rem;
        letter-spacing: 2px;
        pointer-events: none;
        animation: pulseSwipeHint 2s infinite ease-in-out;
    }

    @keyframes pulseSwipeHint {
        0%, 100% { opacity: 0.2; }
        50% { opacity: 0.8; }
    }

    .horizontal-wrapper {
        display: flex !important;
        flex-direction: row !important;
        width: 100vw !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;

        /* 👇 修改这里：把第一项的 0 改成 30px，给顶部光晕留出呼吸空间 */
        padding: 30px 5vw 40px 5vw !important;

        gap: 15px !important;
    }

    .horizontal-wrapper::-webkit-scrollbar { display: none; }

    /* 修复全屏闪烁大字（PIPELINE / VISION 等）上下黑边太长 */
    .vertical-snap-section {
        height: 40vh !important; /* 【核心修改】：从 100vh 压缩为 40vh，让页面更紧凑 */
        min-height: 300px !important;
    }

    /* 重置三大卡片的尺寸 */
    .work-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        height: 65vh !important; /* 【核心修改】：固定为屏幕高度的 65%，让它们一样大 */
        min-height: 450px !important; /* 保底高度 */
        max-height: 600px !important; /* 限制最高高度 */
        scroll-snap-align: center !important;
    }

    /* 【核心魔法】：让卡片内部可以独立滑动，并阻止滑动穿透 */
    .work-card .glass-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important; /* 划到底时，网页不会跟着往下跑，锁死在卡片内 */
    }

    /* 美化并隐藏卡片内部的滚动条，保持赛博风的干净 */
    .work-card .glass-container::-webkit-scrollbar {
        width: 4px !important;
    }
    .work-card .glass-container::-webkit-scrollbar-track {
        background: transparent !important;
    }
    .work-card .glass-container::-webkit-scrollbar-thumb {
        background: rgba(242, 97, 63, 0.3) !important;
        border-radius: 4px !important;
    }

    /* 重置卡片内部排版 */
    .directory-style {
        padding: 30px !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .about-quote-content { padding: 30px !important; }
    .main-quote { font-size: 1.8rem !important; margin-bottom: 20px !important; }

    .bio-layout {
        display: flex !important;
        flex-direction: column !important;
        padding: 25px !important;
        gap: 20px !important;
        overflow-y: auto !important;
    }
    .bio-left { align-items: center; text-align: center; }
    .avatar-circle { width: 120px !important; height: 120px !important; margin: 0 auto 15px !important; }
    .qr-container { justify-content: center !important; margin-top: 20px !important; }

    /* --------------------------------------
       6. 作品集 12 个网格：从堆叠变成“横向滑动抽卡”
       -------------------------------------- */
    .rect-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important; /* 【核心修改】：卡片之间的上下间距从 50px 缩小到 30px */
        padding: 10px 5vw 40px 5vw !important; /* 顶部预留稍微变小一点 */
        overflow: visible !important;
    }

    .portfolio-item {
        width: 100% !important;
        height: auto !important;
        flex: none !important;
        scroll-snap-align: none !important;
        gap: 12px !important; /* 【核心修改】：图片与下方标题的间距从 24px 缩小到 12px */
    }

    /* 保证单列状态下，图片的比例完美展示 */
    .portfolio-item .portfolio-visual {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9; /* 保持绝佳的宽银幕比例 */
    }

    /* ==========================================
       Section: 3D 爬虫响应式优化 (手机端专属)
       ========================================== */

    /* 1. 全局控制：PC端结构隐藏，移动端卡片容器显示 */
    .pc-only-container { display: none !important; }
    .mobile-only-container { display: flex !important; }

    /* 2. 重置父容器：关闭 sticky 效果，取消 600vh 的超长空白 */
    .crawler-3d-section {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        background: transparent;
        padding-bottom: 60px;
    }

    /* --------------------------------------
       3. 移动端爬虫区：实现横向滑动毛玻璃卡片
       -------------------------------------- */
    .crawler-mobile-flex-container {
        align-items: center !important;
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        width: 100vw !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 5vw 40px 5vw !important;
        gap: 20px !important;
        box-sizing: border-box !important;
        z-index: 10;
    }

    .crawler-mobile-flex-container::-webkit-scrollbar { display: none; }

    /* 4. 每一个阶段的文字和最终UI，变成一张毛玻璃质感卡片 */
    .phase-text-container, .crawler-ui-layer {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        flex: 0 0 88vw !important;
        width: 88vw !important;

        /* 🌟 核心修复：锁死卡片高度！这就是内部滑动的前提 */
        height: 70vh !important;         /* 占屏幕 70% 高度 */
        max-height: 650px !important;    /* 最高不超过 650px */
        min-height: 480px !important;    /* 最矮不低于 480px */
        overflow-y: auto !important;     /* 内容超出时开启上下滚动 */
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important; /* 🌟 神级属性：卡片滑到底时，绝不带着整个网页一起跑！ */

        border-radius: 20px;
        scroll-snap-align: center !important;
        background: rgba(18, 21, 23, 0.75) !important;
        border: 1px solid rgba(242, 97, 63, 0.3) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 40px 30px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 单独让最后一个控制台面板居中，且剥离厚重底色 */
    .crawler-ui-layer {
        align-items: center !important;
        background: rgba(18, 21, 23, 0.2) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border: 1px solid rgba(242, 97, 63, 0.5) !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important; /* 保证底部留白，滑到底部好看 */
    }

    /* 🌟 新增：定制卡片内部的高级隐形滚动条 */
    .phase-text-container::-webkit-scrollbar,
    .crawler-ui-layer::-webkit-scrollbar {
        width: 4px !important;
    }
    .phase-text-container::-webkit-scrollbar-track,
    .crawler-ui-layer::-webkit-scrollbar-track {
        background: transparent !important;
    }
    .phase-text-container::-webkit-scrollbar-thumb,
    .crawler-ui-layer::-webkit-scrollbar-thumb {
        background: rgba(242, 97, 63, 0.4) !important;
        border-radius: 4px !important;
    }

    /* 5. 展现手机专属抠图 PNG */
    .mobile-only-img {
        display: block !important;
        width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: contain;
        margin-top: auto; /* 把图片挤到卡片最下面 */
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    }

    /* --------------------------------------
       🚨 修复：手机端卡片放大后的高度压迫与重叠
       -------------------------------------- */
    .overlay-content-host.expanded-view {
        width: 90vw !important;
        height: 80vh !important;
        max-height: 80vh !important;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #121517 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .expanded-view .bio-layout,
    .expanded-view .directory-style,
    .expanded-view .about-quote-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px !important;
        gap: 20px !important;
        overflow: visible !important;
    }

    .expanded-view .bio-left,
    .expanded-view .bio-right-projects {
        width: 100% !important;
        height: auto !important;
        flex: none !important;
    }

    /* 🎯 文字极限瘦身：绝对精致小巧 */
    .expanded-view * { white-space: normal !important; }
    .expanded-view .dir-section span { font-size: 0.7rem !important; letter-spacing: 2px !important; margin-bottom: 10px !important; }
    .expanded-view .dir-section li { font-size: 1rem !important; margin-bottom: 12px !important; line-height: 1.3 !important; }
    .expanded-view .tp-title { font-size: 0.95rem !important; margin-bottom: 5px !important;}
    .expanded-view .main-quote { font-size: 1.1rem !important; line-height: 1.4 !important; }
    .expanded-view .name-en { font-size: 1.4rem !important; }
    .expanded-view .qr-item { width: 90px !important; height: 90px !important; }
    .expanded-view .qr-item img { width: 50px !important; height: 50px !important; padding: 4px !important;}

    /* --------------------------------------
       🚨 柔化：手机端小方块（作品集）的生硬发光
       -------------------------------------- */
    /* 手机端干掉生硬边框，改成极其微弱的弥散薄雾光 */
    .portfolio-item:hover .portfolio-visual,
    .portfolio-item:active .portfolio-visual {
        transform: translateY(-6px) !important; /* 恢复适度的上浮感，统一手感 */
        border-color: rgba(242, 97, 63, 0.4) !important; /* 边框清晰可见，但不是死板实线 */
        box-shadow: 0 10px 30px rgba(242, 97, 63, 0.25) !important; /* 光晕收拢并提亮，确保绝对能看到高级的氛围光 */
    }

    .portfolio-item:hover .grid-thumb,
    .portfolio-item:active .grid-thumb {
        filter: grayscale(0) contrast(1) !important; /* 恢复点按时的彩色效果 */
        transform: scale(1.05) !important; /* 恢复图片的微距放大效果 */
    }

    .mobile-only-img {
        display: block !important;
        width: 100%;
        height: auto;
        max-height: 250px; /* 限制图片最大高度防止把文字顶飞 */
        object-fit: contain;
        margin-top: auto; /* 把图片挤到卡片最下面 */
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); /* 加点悬浮阴影 */
    }

    .phase-text-container {
        justify-content: flex-start !important; /* 让文字靠上，图片靠下 */
        padding-bottom: 20px !important;
    }

    /* =======================================
       6. 修复第4张卡片（控制台）的移动端排版
       ======================================= */
    .crawler-ui-layer .crawler-title,
    .crawler-ui-layer .crawler-subtitle {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .crawler-ui-layer .crawler-title {
        font-size: 8vw !important;
        line-height: 1.1 !important;
        margin-bottom: 5px !important;
        white-space: normal !important;
    }

    .crawler-ui-layer .crawler-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 30px !important;
    }

    /* 容器控制 */
    .crawler-search-box {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        width: 100% !important;
        row-gap: 15px !important;  /* 第一行和第二行的呼吸间距 */
        column-gap: 0 !important;
        background: transparent !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* 视觉重排 */
    .cyber-select#engine-select { order: 1 !important; }
    .cyber-input#city-input     { order: 2 !important; }
    .cyber-select#edu-select    { order: 3 !important; }
    .cyber-input#crawl-input    { order: 4 !important; }
    .cyber-btn#crawl-btn        { order: 5 !important; }

    /* =======================================
       🌟 第一行三兄弟：视觉欺骗，层叠卡片魔法
       ======================================= */
    .cyber-select#engine-select,
    .cyber-input#city-input,
    .cyber-select#edu-select {
        height: 48px !important;
        border: none !important;
        margin: 0 !important;
        font-size: 0.85rem !important;
        font-weight: 900 !important; /* 🌟 修复1：全部加粗，增加辨识度 */
        color: #F2613F !important;   /* 🌟 修复2：全部换成高亮主题橙色！ */
        text-align: center !important;
        text-align-last: center !important;
        padding: 0 !important;
        position: relative !important;
        transition: all 0.3s ease !important;
    }

    /* 如果有 placeholder (比如城市输入框)，也换成带点透明的橙色 */
    .cyber-input#city-input::placeholder {
        color: rgba(242, 97, 63, 0.6) !important;
    }

    /* 1. 左侧龙头：最高层级，最亮眼！ */
    .cyber-select#engine-select {
        width: 36% !important;
        background: #fff !important;
        border-radius: 24px !important;
        z-index: 3 !important;
        box-shadow: 4px 0 15px rgba(0,0,0,0.3) !important;
    }

    /* 2. 中间身子：中等透明度，往死里藏！ */
    .cyber-input#city-input {
        width: 50% !important;
        background: rgba(255, 255, 255, 0.25) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 24px !important;
        margin-left: -60px !important;
        padding-left: 45px !important;
        z-index: 2 !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        border-left: none !important;
        box-shadow: 3px 0 12px rgba(0,0,0,0.15) !important;
    }

    /* 3. 右侧尾巴：极低透明度，往死里藏！ */
    .cyber-select#edu-select {
        width: 70% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border-radius: 24px !important;
        margin-left: -120px !important;
        padding-left: 70px !important;
        z-index: 1 !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-left: none !important;
    }

    /* =======================================
       🌟 修复3：找回丢失的第二行排版代码！
       ======================================= */
    .cyber-input#crawl-input {
        width: 68% !important; /* 让出空间给按钮 */
        height: 50px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 14px !important;
        padding: 0 15px !important;
        margin: 0 !important;
        font-size: 0.85rem !important;
        color: #fff !important;
    }

    .cyber-input#crawl-input::placeholder {
        color: rgba(255,255,255,0.4) !important;
    }

    .cyber-btn#crawl-btn {
        width: 28% !important;
        height: 50px !important;
        padding: 0 !important; /* 🌟 修复1：扒掉默认内边距，释放内部空间 */
        margin: 0 !important;
        border: none !important;
        border-radius: 14px !important;
        background: #F2613F !important;
        color: #fff !important;
        font-size: 0.9rem !important; /* 稍微缩小一点点字号，显得更精致 */
        font-weight: 900 !important;
        box-shadow: 0 4px 15px rgba(242, 97, 63, 0.4) !important;

        /* 🌟 修复2：Flex 魔法，强行让文字水平和垂直绝对居中！ */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        white-space: nowrap !important; /* 🌟 修复3：打死不准换行！ */
    }

    /* =======================================
       🌟 终极交互魔法：点击谁，谁就独占整行，兄弟隐身！
       ======================================= */

    /* 1. 核心侦测：只要第一排有任何一个被点击聚焦(focus)，就把没被点击的兄弟强行隐藏！ */
    .crawler-search-box:has(#engine-select:focus, #city-input:focus, #edu-select:focus) #engine-select:not(:focus),
    .crawler-search-box:has(#engine-select:focus, #city-input:focus, #edu-select:focus) #city-input:not(:focus),
    .crawler-search-box:has(#engine-select:focus, #city-input:focus, #edu-select:focus) #edu-select:not(:focus) {
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }

    /* 2. 主角光环：被点击的那个框，瞬间解除束缚，撑满 100% 宽度 */
    .crawler-search-box #engine-select:focus,
    .crawler-search-box #city-input:focus,
    .crawler-search-box #edu-select:focus {
        width: 100% !important;
        margin-left: 0 !important; /* 清除重叠的负边距 */
        padding-left: 20px !important; /* 文字靠左，留出舒适边距 */
        border-radius: 12px !important; /* 恢复完美的独立圆角 */
        z-index: 10 !important;
        text-align: left !important;
        text-align-last: left !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; /* 展开时加一点高级的悬浮阴影 */
    }

    /* 3. 质感微调：保持展开时的颜色对冲 */
    .crawler-search-box #engine-select:focus {
        background: #fff !important;
        color: #F2613F !important;
    }

    .crawler-search-box #city-input:focus,
    .crawler-search-box #edu-select:focus {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important; /* 边框提亮，突出焦点 */
        color: #fff !important;
    }

    /* =======================================
       7. 移动端爬虫结果面板 & 终端深度优化
       ======================================= */
    /* 终端日志高度微调 */
    .cyber-terminal {
        width: 100% !important;
        margin-top: 20px !important;
    }
    .terminal-body {
        height: 120px !important; /* 手机端终端稍微矮一点，留出空间 */
    }

    /* 爬虫结果大容器：解除高度限制，交给外层卡片去滚动 */
    .cyber-results-container {
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 20px !important;
        padding-right: 0 !important; /* 去除原本给 PC 滚动条留的缝隙 */
    }

    /* 🎯 核心魔法：将原本横排的数据打碎，变成上下排布的移动端卡片 */
    .cyber-result-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 15px !important;
    }

    /* 内部每一行变成：左边标签，右边数值 */
    .cyber-result-item > div {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .cyber-label {
        font-size: 0.8rem !important;
        opacity: 0.7 !important;
        min-width: 60px !important; /* 固定左边标签的宽度 */
    }

    .cyber-value {
        font-size: 0.95rem !important;
        text-align: right !important; /* 数值全部靠右 */
        max-width: 70% !important;
        white-space: normal !important;
        word-break: break-all !important;
    }

    /* 数据来源标签(如：智联招聘) 单独排布在最底下，加一条虚线分割 */
    .cyber-result-item > div:last-child {
        margin-top: 8px !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(255,255,255,0.1) !important;
        justify-content: flex-end !important;
    }

    /* =======================================
       8. 首页大标题：移动端换行与排版优化
       ======================================= */
    .reveal-title {
        white-space: normal !important;
        font-size: 16vw !important;
        line-height: 1.1 !important;
        padding: 0 20px !important;     /* 左右加点内边距，防止文字绝对贴边 */
        text-align: center !important;  /* 确保多行文字依然完美居中 */
    }

    /* 顺便稍微调整一下副标题的位置，防止被换行后变高的大标题压到 */
    .reveal-subtitle {
        margin-top: 20px !important;
    }

}

/* ================= 性能优化：延迟渲染屏幕外的内容 ================= */
.project-grid-section,
.vertical-snap-section,
.crawler-3d-section,
.contact-section {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

/* ================= 性能优化：为测速机器人瞬间开启首屏 ================= */
html.is-bot .preloader { display: none !important; }
html.is-bot .hero-layer { opacity: 1 !important; }
html.is-bot .reveal-title,
html.is-bot .reveal-subtitle {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
}