/* =========================================
           1. 全局与重置 (保留并增强 - Liquid Glass 基础)
           ========================================= */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
        
        /* Liquid Glass 核心背景体系 
           - 动态流体渐变
           - 400% 尺寸实现平滑流动
        */
        body { 
            color: #333; 
            line-height: 1.6; 
            -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */
            min-height: 100vh;
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* 防止流光动画导致横向滚动条 */
        }

        a { text-decoration: none; color: inherit; cursor: pointer; transition: 0.3s; }
        ul { list-style: none; }
        
        :root {
            /* 核心色板 - 液态化调整 */
            --primary-blue: #1e5bbf; /* 更清透的蓝色 */
            --accent-blue: #3b82f6; 
            --light-blue-bg: rgba(239, 246, 255, 0.5); /* 半透明化 */
            
            /* 渐变与遮罩 - 深度强化 */
            --mask-gradient: linear-gradient(135deg, rgba(30, 91, 191, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
            
            /* 按钮液体玻璃质感 */
            --btn-glass: linear-gradient(135deg, rgba(30, 91, 191, 0.85), rgba(59, 130, 246, 0.75));
            --btn-glass-hover: linear-gradient(135deg, rgba(43, 108, 224, 0.95), rgba(96, 165, 250, 0.85));
            
            /* 文本颜色 - 高对比度适配玻璃背景 */
            --text-dark: #1f2937; 
            --text-grey: #4b5563; 
            --white: #ffffff; 
            
            /* 14光球背景颜色变量 */
            --color-bg: #e3f2fd;       /* 浅蓝色基底 */
            --color-royal: #64b5f6;    /* 浅皇家蓝 */
            --color-cyan: #4fc3f7;     /* 浅青色 */
            --color-teal: #4db6ac;     /* 浅蓝绿色 */
            --color-azure: #90caf9;    /* 浅天蓝色 */
            --color-light: #b3e5fc;    /* 浅青亮色 */
            --color-purple-light: #ce93d8; /* 浅亮紫色 */
            --color-purple-deep: #9c27b0;  /* 浅深紫色 */
            --color-white-glow: #ffffff;   /* 纯白高光 */
            
            /* 玻璃质感变量 */

        .background-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1; 
            background-color: var(--color-bg); 
            overflow: hidden;
        }

        .noise-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.06; 
            z-index: 10;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        .blobs-container {
            filter: blur(60px); 
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            mix-blend-mode: screen; /* 滤色模式 */
            opacity: 0.6; 
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        /* --- 动画与样式定义 (共14个光球) --- */

        /* 1. 主体深蓝 - 左上 */
        .blob-1 {
            background: var(--color-royal);
            width: 60vw;
            height: 60vw;
            top: -10%;
            left: -10%;
            animation: moveVertical 12s infinite alternate;
            opacity: 0.5;
        }

        /* 2. 亮青色 - 右下 */
        .blob-2 {
            background: var(--color-cyan);
            width: 45vw;
            height: 45vw;
            bottom: -10%;
            right: -10%;
            animation: moveHorizontal 10s infinite alternate;
            opacity: 0.4;
        }

        /* 3. 天蓝色 - 漂浮游动 */
        .blob-3 {
            background: var(--color-azure);
            width: 35vw;
            height: 35vw;
            top: 30%;
            left: 20%;
            animation: moveCircular 15s infinite linear;
            opacity: 0.4;
        }

        /* 4. 蓝绿色 - 增加层次 */
        .blob-4 {
            background: var(--color-teal);
            width: 30vw;
            height: 30vw;
            top: 10%;
            right: 20%;
            animation: moveDiagonal 13s infinite alternate-reverse;
            opacity: 0.3;
        }

        /* 5. 浅色高光 - 视觉焦点 */
        .blob-5 {
            background: var(--color-light);
            width: 25vw;
            height: 25vw;
            bottom: 20%;
            left: 40%;
            animation: movePulse 9s infinite alternate;
            opacity: 0.5;
        }

        /* 6. 亮紫色 - 上方漂浮 */
        .blob-6 {
            background: var(--color-purple-light);
            width: 38vw;
            height: 38vw;
            top: 5%;
            right: 15%;
            animation: moveCircular 18s infinite reverse;
            opacity: 0.45;
        }

        /* 7. 深紫色 - 左侧游动 */
        .blob-7 {
            background: var(--color-purple-deep);
            width: 45vw;
            height: 45vw;
            bottom: -15%;
            left: 5%;
            animation: moveVertical 14s infinite alternate-reverse;
            opacity: 0.4;
        }

        /* 8. 蓝色光球 - 右上角活跃 */
        .blob-8 {
            background: var(--color-cyan);
            width: 30vw;
            height: 30vw;
            top: -5%;
            right: -5%;
            animation: movePulse 11s infinite alternate;
            opacity: 0.5;
        }

        /* 9. 紫色光球 - 左下角点缀 */
        .blob-9 {
            background: var(--color-purple-light);
            width: 32vw;
            height: 32vw;
            bottom: -5%;
            left: -5%;
            animation: moveHorizontal 15s infinite alternate;
            opacity: 0.4;
        }

        /* 10. 白色光球 1 - 极速穿梭 (中部) */
        .blob-10 {
            background: var(--color-white-glow);
            width: 15vw;
            height: 15vw;
            top: 40%;
            left: 40%;
            animation: moveErratic 8s infinite alternate;
            opacity: 0.5;
            filter: blur(40px);
        }

        /* 11. 白色光球 2 - 活跃游走 (右下) */
        .blob-11 {
            background: var(--color-white-glow);
            width: 18vw;
            height: 18vw;
            bottom: 30%;
            right: 20%;
            animation: moveCircular 10s infinite linear reverse;
            opacity: 0.4;
        }

        /* 12. 白色光球 3 - 广域巡航 (上部横扫) */
        .blob-12 {
            background: var(--color-white-glow);
            width: 14vw;
            height: 14vw;
            top: 15%;
            left: 50%; 
            transform: translate(-50%, 0);
            animation: moveWideSweep 14s infinite ease-in-out;
            opacity: 0.45;
            filter: blur(35px);
        }

        /* 13. 新增：紫色光球 - 左上角聚集 */
        .blob-13 {
            background: var(--color-purple-light);
            width: 28vw;
            height: 28vw;
            top: -5%;
            left: -5%;
            animation: movePulse 13s infinite alternate-reverse;
            opacity: 0.45;
        }

        /* 14. 新增：白色光球 - 左上角活跃 */
        .blob-14 {
            background: var(--color-white-glow);
            width: 12vw;
            height: 12vw;
            top: 5%;
            left: 5%;
            animation: moveCircular 12s infinite linear;
            opacity: 0.5;
            filter: blur(45px);
        }

        /* 关键帧动画 */
        
        @keyframes moveWideSweep {
            0% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(35vw, 15vh) scale(1.2); } 
            50% { transform: translate(0, 25vh) scale(0.9); }    
            75% { transform: translate(-35vw, 15vh) scale(1.1); } 
            100% { transform: translate(0, 0) scale(1); }
        }

        @keyframes moveVertical {
            0% { transform: translateY(-30%) scale(1); }
            100% { transform: translateY(30%) scale(1.1); }
        }

        @keyframes moveHorizontal {
            0% { transform: translateX(-35%) rotate(0deg); }
            100% { transform: translateX(35%) rotate(25deg); }
        }

        @keyframes moveCircular {
            0% { transform: rotate(0deg) translate(180px) rotate(0deg); }
            100% { transform: rotate(360deg) translate(180px) rotate(-360deg); }
        }

        @keyframes moveDiagonal {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(-20vw, 25vh) scale(1.2); }
        }

        @keyframes movePulse {
            0% { transform: scale(1) translate(0, 0); }
            50% { transform: scale(1.4) translate(80px, -80px); }
            100% { transform: scale(1) translate(0, 0); }
        }

        @keyframes moveErratic {
            0% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(10vw, -10vh) scale(1.2); }
            50% { transform: translate(-5vw, 15vh) scale(0.8); }
            75% { transform: translate(-15vw, -5vh) scale(1.1); }
            100% { transform: translate(5vw, 5vh) scale(1); }
        }

        /* 确保页面容器显示在背景之上 */
        .page-container {
            position: relative;
            z-index: 1;
        }

        /* #home模块保持浅色背景 */
        #home {
            background: transparent;
        }

        /* 为四大模块添加液态玻璃效果 */
        #home .b-title {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 10px 20px;
            margin-bottom: 15px;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        #home .b-title:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px) scale(1.05);
            border-color: rgba(255, 255, 255, 0.6);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* 为图标添加活泼的动画效果 */
        #home .b-title i {
            font-size: 20px;
            margin-right: 10px;
            transition: all 0.5s ease;
        }

        #home .b-title:hover i {
            transform: rotate(360deg) scale(1.2);
            color: #007bff;
        }

        /* 其他模块使用透明背景，与#home一致 */
        #jobs, #stories, #auth, #login-page, #events, #services {
            background: transparent;
            min-height: 120vh;
            margin: 0;
            padding: 0;
            position: relative;
            overflow: hidden;
        }

        /* 子模块使用透明背景 */
        #jobs .li-page-bg, #stories .li-page-bg, #auth .li-page-bg, 
        #login-page .li-page-bg, #events .li-page-bg, #services .li-page-bg {
            background: transparent;          /* 背景变为全透明 */
            backdrop-filter: none;            /* 移除模糊滤镜 */
            -webkit-backdrop-filter: none;    /* 移除兼容性模糊滤镜 */
            box-shadow: none;                 /* 移除阴影 */
            border: none;                     /* 移除边框 */
            /* 保留了高度和内边距设置，确保布局不乱 */
            min-height: calc(120vh - 80px);
            margin: 0;
            padding-top: 85px;
            padding-bottom: 80px;
        }

        /* 玻璃质感变量 */
            --glass-border: 1px solid rgba(255, 255, 255, 0.6);
            --glass-bg: rgba(255, 255, 255, 0.35);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
            --glass-inner-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
            
            /* 边框与背景 (旧变量兼容) */
            --form-border: rgba(255, 255, 255, 0.5);
            --card-border: rgba(255, 255, 255, 0.4);
            
            /* 社交版块专用颜色 */
            --li-bg: transparent; /* 透明以显示body背景 */
            --li-card-bg: rgba(255, 255, 255, 0.25); 
            --li-border: rgba(255, 255, 255, 0.4);
        }

        /* =========================================
           动画库 (Liquid Glass 动效)
           ========================================= */
        
        /* 1. 基础淡入 */
        @keyframes fadeIn { 
            from { opacity: 0; transform: translateY(10px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

        /* 2. 液态光泽流光 (Shimmer) */
        @keyframes shimmer { 
            0% { transform: translateX(-150%) skewX(-20deg); } 
            100% { transform: translateX(300%) skewX(-20deg); } 
        }

        /* 3. 背景流动 (Liquid Gradient) */
        @keyframes liquidGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 4. 图标轻微浮动 */
        @keyframes floatIcon {
            0% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0); }
        }

        /* 5. 极致版颜料流动动画 (保持并增强透明度适配) */
        @keyframes richLiquidFlow {
            0% { background-position: 0% 50%, center center; }
            25% { background-position: 50% 0%, center center; }
            50% { background-position: 100% 50%, center center; }
            75% { background-position: 50% 100%, center center; }
            100% { background-position: 0% 50%, center center; }
        }

        /* 6. 弹性跳动动画 (Bounce - 新增) */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px) scale(1.05); }
        }

        /* 7. 彩虹流光 (Rainbow Shimmer - 新增) */
        @keyframes rainbowShimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* =========================================
           2. 导航栏 (Header - 磨砂玻璃化)
           ========================================= */
        .header { 
            background-color: rgba(30, 91, 191, 0.65) !important; /* 半透明主色 */
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            height: 70px; 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            padding: 0 5%; 
            position: sticky; /* 粘性定位 */
            top: 0; 
            z-index: 1000; 
            box-shadow: 0 4px 30px rgba(0,0,0,0.1); 
            border-bottom: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            overflow: visible; /* 允许下拉菜单显示 */
        }
        
        /* 导航栏流光效果 */
        .header::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: skewX(-20deg) translateX(-150%);
            animation: shimmer 10s infinite linear;
            pointer-events: none;
        }
        
        .logo-area { display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; z-index: 2; }
        .logo-img { 
            height: 40px; width: 40px; 
            background: rgba(255,255,255,0.9); 
            border-radius: 50%; padding: 2px; 
            object-fit: contain; 
            transition: transform 0.3s; 
            box-shadow: 0 0 15px rgba(255,255,255,0.3);
        }
        .logo-area:hover .logo-img { transform: rotate(15deg); } 
        .logo-text { 
            color: white; 
            font-size: 22px; font-weight: bold; letter-spacing: 1px; 
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .nav-links { display: flex; gap: 30px; align-items: center; position: relative; }
        .nav-item { 
            color: rgba(255,255,255,0.9); 
            font-size: 16px; 
            font-weight: 500; 
            position: relative;
            padding: 5px 0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        /* 导航下划线动效 - 发光 */
        .nav-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            background-color: white;
            box-shadow: 0 0 8px rgba(255,255,255,0.8);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        .nav-item:hover, .nav-item.active { color: #fff; font-weight: bold; }
        .nav-item:hover::after, .nav-item.active::after { width: 100%; }

        .lang-switch { display: flex; gap: 5px; color: rgba(255,255,255,0.7); font-size: 14px; margin-right: 15px; border-right: 1px solid rgba(255,255,255,0.3); padding-right: 15px; position: relative; z-index: 2; }
        .lang-opt { cursor: pointer; transition: 0.3s; }
        .lang-opt:hover, .lang-opt.active { color: white; font-weight: bold; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
        
        /* 导航栏按钮 - 液体玻璃风格 */
        .auth-btn { 
            background: rgba(255,255,255,0.15); 
            backdrop-filter: blur(10px);
            color: white; 
            padding: 8px 24px; 
            border-radius: 20px; 
            font-size: 14px; 
            border: 1px solid rgba(255,255,255,0.4); 
            cursor: pointer; 
            position: relative;
            overflow: hidden; 
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            z-index: 2;
        }
        .auth-btn:hover { 
            background: rgba(255,255,255,0.3); 
            box-shadow: 0 0 15px rgba(255,255,255,0.4);
            transform: translateY(-1px);
        }
        .auth-btn:active { transform: scale(0.95); }

        /* =========================================
           3. 页面容器与通用组件
           ========================================= */
        .page-container { display: none; padding-bottom: 100px; animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); height: auto; overflow: visible; }
        .page-container.active { display: block; }
        /* 增强特异性：确保#auth和#login-page容器正确隐藏 */
        #auth.page-container, 
        #login-page.page-container { 
            display: none !important; 
        }
        #auth.page-container.active, 
        #login-page.page-container.active { 
            display: block !important; 
        }
        
        /* 通用按钮流光动效 - 升级 */
        .btn-glow-effect { position: relative; overflow: hidden; }
        .btn-glow-effect::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            z-index: 1;
            transition: none;
        }
        .btn-glow-effect:hover::after { animation: shineMove 0.8s; }

        /* =========================================
           4. 注册/登录 (玻璃卡片重构)
           ========================================= */
        .register-wrapper { 
            display: flex; 
            width: 90%; 
            max-width: 1200px; 
            margin: 40px auto; 
            
            /* 玻璃质感核心 */
            background: var(--glass-bg);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: var(--glass-border);
            box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
            
            border-radius: 24px; /* 更大圆角 */
            overflow: hidden; 
            min-height: 750px; 
            transition: transform 0.3s ease;
            position: relative;
        }
        /* 卡片流光 */
        .register-wrapper::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: skewX(-20deg) translateX(-150%);
            animation: shimmer 12s infinite linear;
            pointer-events: none;
            z-index: 0;
        }

        .register-wrapper:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(31, 38, 135, 0.25); }

        .register-info { 
            flex: 1; 
            background: linear-gradient(160deg, rgba(30, 91, 191, 0.85) 0%, rgba(30, 41, 59, 0.85) 100%); /* 增加透明度 */
            color: var(--white); 
            padding: 60px 50px; 
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
            position: relative;
            backdrop-filter: blur(10px); /* 内部模糊 */
            border-right: 1px solid rgba(255,255,255,0.1);
        }
        
        .register-info::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at top right, rgba(255,255,255,0.15) 0%, transparent 60%);
            pointer-events: none;
        }

        .reg-header h2 { font-size: 32px; line-height: 1.3; margin-bottom: 10px; font-weight: 800; z-index: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
        .benefit-list { list-style: none; z-index: 1; }
        .benefit-item { display: flex; gap: 15px; margin-bottom: 25px; transition: transform 0.3s; }
        .benefit-item:hover { transform: translateX(10px); } 
        
        .benefit-icon { 
            width: 28px; height: 28px; 
            background: rgba(255,255,255,0.25); 
            border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            flex-shrink: 0; margin-top: 2px; 
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border: 1px solid rgba(255,255,255,0.3);
        }
        .benefit-text h4 { font-size: 18px; font-weight: bold; margin-bottom: 4px; }
        .benefit-text p { font-size: 13px; opacity: 0.9; line-height: 1.5; color: rgba(255,255,255,0.85); }
        
        .testimonial { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); font-style: italic; font-size: 14px; opacity: 0.95; z-index: 1; }
        
        .register-form-container { 
            flex: 1.2; 
            padding: 50px 60px; 
            overflow-y: auto; 
            background-color: transparent; /* 透明以透出玻璃 */
            position: relative;
            z-index: 1;
        }
        
        .form-header h1 { font-size: 28px; color: var(--primary-blue); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(255,255,255,0.5); }
        .form-row { display: flex; gap: 20px; margin-bottom: 20px; }
        .form-group { margin-bottom: 20px; width: 100%; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-dark); font-size: 14px; }
        .required::after { content: " *"; color: #e74c3c; }
        
        /* 输入框 - 光晕与玻璃感 */
        .register-form input, .register-form select { 
            width: 100%; 
            padding: 12px 15px; 
            background: rgba(255, 255, 255, 0.4); /* 半透明白 */
            border: 1px solid rgba(255, 255, 255, 0.5); 
            border-radius: 12px; 
            font-size: 14px; 
            outline: none; 
            transition: all 0.3s; 
            backdrop-filter: blur(10px);
            color: #1f2937;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
        }
        .register-form input:hover, .register-form select:hover { background-color: rgba(255, 255, 255, 0.6); }
        .register-form input:focus, .register-form select:focus { 
            border-color: #fff; 
            background-color: rgba(255, 255, 255, 0.8); 
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), inset 0 2px 4px rgba(0,0,0,0.05); /* 光晕 */
            transform: translateY(-2px);
        }
        
        /* 提交按钮 - 液态玻璃 */
        .btn-submit { 
            width: 100%; 
            padding: 15px; 
            background: var(--btn-glass); 
            backdrop-filter: blur(20px);
            color: white; 
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 12px; 
            font-size: 16px; 
            font-weight: bold; 
            cursor: pointer; 
            transition: all 0.3s; 
            margin-top: 10px; 
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.5);
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        /* 继承 shimmer */
        .btn-submit::after {
            content: '';
            position: absolute;
            top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
        }
        .btn-submit:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 8px 35px rgba(30, 91, 191, 0.3), inset 0 1px 0 rgba(255,255,255,0.6); 
            background: var(--btn-glass-hover);
        }
        .btn-submit:hover::after { animation: shineMove 0.8s; }

        /* =========================================
           5. 首页 #home (深度优化重点)
           ========================================= */
        /* Banner 优化 - 保持图片但增加质感 */
        .common-banner { 
            position: relative; 
            height: 420px; 
            background-color: #334155; 
            background-size: cover; 
            background-position: center; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            text-align: center; 
            color: white; 
        }
        /* 增加一层纹理遮罩 */
        .common-banner::before { 
            content: ''; 
            position: absolute; 
            top: 0; left: 0; width: 100%; height: 100%; 
            background: var(--mask-gradient); 
            backdrop-filter: blur(2px); /* 轻微模糊背景图，突出文字 */
            z-index: 1; 
        }
        .banner-content { position: relative; z-index: 10; max-width: 900px; padding: 0 20px; animation: fadeIn 0.8s ease-out; }
        .banner-title { 
            font-size: 48px; 
            font-weight: 800; 
            margin-bottom: 15px; 
            letter-spacing: 2px; 
            text-shadow: 0 4px 15px rgba(0,0,0,0.4); 
        }
        .banner-sub { font-size: 20px; opacity: 0.95; margin-bottom: 30px; font-weight: 300; text-shadow: 0 2px 5px rgba(0,0,0,0.3); }
        
        /* Tags 优化：玻璃胶囊 */
        .banner-tags span { 
            border: 1px solid rgba(255,255,255,0.4); 
            background: rgba(255,255,255,0.15); 
            backdrop-filter: blur(10px);
            padding: 8px 20px; 
            border-radius: 50px; 
            font-size: 14px; 
            margin: 0 8px; 
            display: inline-block; 
            transition: all 0.3s;
            cursor: default;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .banner-tags span:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-3px);
            border-color: rgba(255,255,255,0.8);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }

        /* 快捷导航栏优化 - 悬浮玻璃条 */
        .quick-nav-bar { 
            background: var(--glass-bg); 
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            width: 85%; 
            margin: -60px auto 50px; 
            border-radius: 24px; 
            box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
            border: var(--glass-border);
            display: flex; 
            justify-content: space-around; 
            padding: 20px; 
            position: relative; 
            z-index: 20; 
            gap: 15px; 
            overflow: hidden;
        }
        /* 流光 */
        .quick-nav-bar::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: skewX(-20deg) translateX(-150%);
            animation: shimmer 10s infinite linear;
            pointer-events: none;
        }
        
        .quick-item { 
            text-align: center; 
            cursor: pointer; 
            flex: 1; 
            border-right: none; 
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            padding: 20px 10px;
            border-radius: 16px;
            background: transparent;
            position: relative;
            z-index: 1;
        }
        .quick-item:hover { 
            background: rgba(255, 255, 255, 0.4);
            box-shadow: 0 10px 25px rgba(30, 91, 191, 0.1);
            transform: translateY(-8px); 
            border: 1px solid rgba(255,255,255,0.5);
        }
        
        /* 图标优化：水晶球底座 */
        .quick-icon { 
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            background: rgba(239, 246, 255, 0.6);
            backdrop-filter: blur(5px);
            border-radius: 50%;
            font-size: 28px; 
            color: var(--primary-blue); 
            margin-bottom: 15px; 
            transition: all 0.5s ease;
            box-shadow: inset 0 2px 5px rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.05);
            border: 1px solid rgba(255,255,255,0.5);
        }
        .quick-item:hover .quick-icon {
            background: var(--btn-glass);
            color: white;
            transform: rotate(360deg) scale(1.1); 
            box-shadow: 0 8px 20px rgba(30, 91, 191, 0.4), inset 0 2px 5px rgba(255,255,255,0.4);
            border-color: rgba(255,255,255,0.2);
        }
        /* 图标发光 */
        .quick-icon i { filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }

        .quick-h { font-size: 18px; font-weight: 800; color: var(--text-dark); margin-bottom: 5px; }
        .quick-p { font-size: 13px; color: var(--text-grey); font-weight: 500; }
        
        .section-wrapper { width: 85%; margin: 0 auto; display: flex; flex-direction: column; gap: 50px; } 
        
        /* 内容卡片优化 - 玻璃块 */
        .content-block { 
            background: var(--glass-bg);
            backdrop-filter: blur(60px) saturate(200%);
            -webkit-backdrop-filter: blur(60px) saturate(200%);
            border: var(--glass-border);
            box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
            border-radius: 24px; 
            overflow: hidden; 
            display: flex; 
            height: 380px; 
            transition: all 0.4s ease;
            position: relative;
        }
        .content-block::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: skewX(-20deg) translateX(-150%);
            animation: shimmer 12s infinite linear;
            pointer-events: none;
            z-index: 1;
        }

        .content-block:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(31, 38, 135, 0.15);
            border-color: rgba(255, 255, 255, 0.6);
        }

        .content-block:nth-child(even) { flex-direction: row-reverse; }
        
        .block-info { 
            flex: 1; 
            padding: 60px; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            background-color: transparent; /* 透出玻璃背景 */
            position: relative;
            z-index: 2;
        }
        
        .block-img { 
            flex: 1.2; 
            background-color: #ddd; 
            background-size: cover; 
            background-position: center; 
            transition: transform 0.6s ease;
            position: relative; z-index: 0;
        }
        .content-block:hover .block-img {
            transform: scale(1.05); 
        }

        .b-title { 
            font-size: 30px; 
            font-weight: 800; 
            margin-bottom: 20px; 
            color: var(--primary-blue); 
            display: flex; 
            align-items: center; 
            gap: 15px; 
            text-shadow: 0 1px 1px rgba(255,255,255,0.8);
        }
        .b-title i {
            /* 标题图标装饰 */
            background: rgba(255, 255, 255, 0.5);
            width: 45px; height: 45px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            box-shadow: inset 0 1px 3px rgba(255,255,255,0.8), 0 2px 5px rgba(0,0,0,0.05);
            border: 1px solid rgba(255,255,255,0.6);
        }

        .b-desc { font-size: 18px; font-weight: 500; color: #333; margin-bottom: 30px; line-height: 1.6; }
        
        /* 数据标签化 */
        .b-data { 
            font-size: 13px; 
            color: var(--text-dark); 
            margin-bottom: 10px; 
            display: inline-flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.5);
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            border: 1px solid rgba(255, 255, 255, 0.6);
            width: fit-content;
            backdrop-filter: blur(5px);
        }
        .b-data::before {
            content: '';
            display: inline-block;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--accent-blue);
            margin-right: 8px;
            box-shadow: 0 0 5px var(--accent-blue);
        }
        
        /* 首页专用按钮 - 液体玻璃 */
        .btn-job-special { 
            margin-top: 35px; 
            padding: 14px 35px; 
            background: var(--btn-glass); 
            backdrop-filter: blur(20px);
            color: white; 
            border-radius: 50px; 
            border: 1px solid rgba(255,255,255,0.3);
            width: fit-content; 
            cursor: pointer; 
            font-weight: bold; 
            font-size: 15px; 
            transition: 0.3s; 
            box-shadow: 0 6px 25px rgba(30, 91, 191, 0.25), inset 0 1px 0 rgba(255,255,255,0.5);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 8px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .btn-job-special::after {
            content: '';
            position: absolute;
            top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
        }
        .btn-job-special:hover { 
            transform: translateY(-3px); 
            background: var(--btn-glass-hover);
            box-shadow: 0 12px 35px rgba(30, 91, 191, 0.35), inset 0 1px 0 rgba(255,255,255,0.6); 
        }
        .btn-job-special:hover::after { animation: shineMove 0.8s; }
        .btn-job-special i.fa-arrow-right { transition: transform 0.3s; }
        .btn-job-special:hover i.fa-arrow-right { transform: translateX(5px); }


        /* =========================================
           6. 社交/招聘样式 (Liquid Glass 2.0 - Reverted Background)
           ========================================= */

        /* 个人空间页面样式 */
        #personal-space {
            height: auto !important;
            overflow: visible !important;
            min-height: 100vh;
            position: relative;
            padding-bottom: 100px;
        }
        
        /* 移除了白色高亮蒙版，保持深邃通透 */

        .li-page-bg { 
            background: transparent;          /* 再次确认为透明 */
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding-top: 20px; 
            min-height: 100vh;
            padding-bottom: 80px; 
            border-bottom: none;
        }

        .li-search-header { 
            width: 90%; 
            max-width: 1200px; 
            margin: 0 auto 20px; 
            display: flex; 
            gap: 15px; 
            align-items: center; 
        }

        .li-search-box { 
            flex: 1; 
            background: rgba(255, 255, 255, 0.4); 
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5); 
            border-radius: 12px; 
            padding: 12px 20px; 
            display: flex; 
            align-items: center; 
            gap: 10px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05), inset 0 2px 4px rgba(0,0,0,0.02); 
            transition: all 0.3s;
        }
        /* 活泼光晕：Focus 时彩虹光晕 */
        .li-search-box:focus-within {
            background: rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 0 20px rgba(147, 51, 234, 0.3), inset 0 2px 4px rgba(0,0,0,0.05);
            border-color: #fff;
        }
        .li-search-box input { background: transparent; border: none; outline: none; width: 100%; font-size: 14px; color: #333; }
        
        /* 搜索按钮 - 彩虹流光 */
        .li-search-btn { 
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            backdrop-filter: blur(10px);
            color: white; 
            border: 1px solid rgba(255,255,255,0.3); 
            padding: 12px 28px; 
            border-radius: 12px; 
            font-weight: bold; 
            cursor: pointer; 
            box-shadow: 0 4px 15px rgba(0, 51, 153, 0.2), inset 0 1px 0 rgba(255,255,255,0.5); 
            position: relative;
            overflow: hidden;
            transition: 0.3s;
        }
        .li-search-btn:hover { transform: translateY(-2px) scale(1.05); }
        /* 彩虹流光动画 */
        .li-search-btn::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 200%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), rgba(255,255,255,0.8), rgba(255,255,255,0.4), transparent);
            background-size: 200% 100%;
            animation: rainbowShimmer 3s infinite linear;
            transform: skewX(-20deg);
        }

        .li-view { width: 90%; max-width: 1200px; margin: 0 auto; display: none; animation: fadeIn 0.3s ease-out; }
        .li-view.active { display: grid; }
        
        #jobs-feed-view.active { 
            display: grid; 
            grid-template-columns: 320px 1fr; 
            gap: 24px; 
            align-items: flex-start; 
        }
        
        /* 核心升级：Liquid Glass 卡片
           - 高斯模糊提升至 60px
           - 增加饱和度折射
           - 添加 12s 循环流光 shimmer
        */
        .li-card, .li-sub-page { 
            background: rgba(255, 255, 255, 0.35); /* 更清透 */
            backdrop-filter: blur(60px) saturate(200%);
            -webkit-backdrop-filter: blur(60px) saturate(200%);
            border-radius: 20px; 
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 1px 0 rgba(255,255,255,0.6); 
            border: 1px solid rgba(255, 255, 255, 0.6); /* 高光边框 */
            overflow: hidden; 
            margin-bottom: 24px; 
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动效 */
            position: relative;
        }
        /* 卡片流光 - 对标首页 */
        .li-card::before, .li-sub-page::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transform: skewX(-20deg) translateX(-150%);
            animation: shimmer 12s infinite linear;
            pointer-events: none;
            z-index: 0;
        }
        /* 内容层级提升 */
        .li-card > *, .li-sub-page > * { position: relative; z-index: 1; }

        .li-card:hover {
            transform: translateY(-8px) scale(1.02); /* 悬浮放大 */
            box-shadow: 0 25px 50px rgba(31, 38, 135, 0.15);
            border-color: rgba(255,255,255,0.9);
        }

        /* 左侧栏样式 */
        .li-profile-bg { height: 80px; background: url('https://picsum.photos/id/1018/300/100') center/cover; cursor: pointer; position: relative; }
        
        /* 头像动效升级 */
        .li-avatar { 
            width: 72px; height: 72px; 
            border-radius: 50%; 
            border: 3px solid white; 
            margin: -36px auto 10px; 
            display: block; 
            background: #eee; 
            object-fit: cover; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
            cursor: pointer; 
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative; 
            z-index: 2; 
        }
        .li-card:hover .li-avatar:hover { 
            transform: scale(1.15) rotate(8deg); /* 旋转缩放 */
            box-shadow: 0 0 20px rgba(255,255,255,0.8); /* 发光 */
        }

        .li-profile-info { text-align: center; padding: 0 15px 15px; border-bottom: 1px solid rgba(0,0,0,0.05); cursor: pointer; }
        .li-profile-name { font-weight: bold; font-size: 18px; margin-bottom: 4px; color: #111; }
        .li-profile-headline { font-size: 13px; color: #555; margin-bottom: 5px; }
        .li-stats { padding: 15px; }
        .li-stat-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; color: #555; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.2s; }
        .li-stat-row:hover { background: rgba(255,255,255,0.4); }
        .li-stat-row:hover .li-stat-num { color: var(--accent-blue); }
        .li-stat-num { color: var(--primary-blue); font-weight: bold; }
        
        .li-menu-item { 
            padding: 15px; 
            border-top: 1px solid rgba(0,0,0,0.05); 
            font-size: 14px; 
            font-weight: 600; 
            color: #444; 
            display: flex; align-items: center; gap: 10px; 
            cursor: pointer; 
            transition: 0.2s; 
        }
        .li-menu-item:hover { background-color: rgba(255,255,255,0.4); color: var(--primary-blue); padding-left: 20px; }

        /* 模块标题 - 渐变色文字 */
        .li-module-title { 
            font-size: 15px; font-weight: bold; padding: 15px 15px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); margin: 0; 
            background: linear-gradient(90deg, #1e40af, #7c3aed); 
            -webkit-background-clip: text; 
            color: transparent; 
            text-shadow: none;
        }
        
        .li-progress-item { padding: 12px 15px; }
        .li-progress-item span { font-size: 12px; color: #555; display: block; margin-bottom: 6px; font-weight: 500; }
        .li-progress-bar { height: 8px; background: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
        /* 进度条 - 荧光渐变 */
        .li-progress-bar div { 
            height: 100%; 
            background: linear-gradient(90deg, #10b981, #3b82f6); 
            border-radius: 4px; 
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); 
        }
        
        .li-visa-status { padding: 15px; display: flex; gap: 12px; align-items: center; background: linear-gradient(to right, rgba(255, 251, 235, 0.6), rgba(255, 255, 255, 0.6)); }
        .li-visa-status i { font-size: 26px; color: var(--accent-blue); filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.4)); }
        .li-visa-status div { font-size: 12px; display: flex; flex-direction: column; }

        /* 中间动态 (Feed) */
        .li-feed-create { padding: 20px; }
        
        /* 帖子列表滚动容器 - iOS 26 液态玻璃窗口 */
        .li-feed-scroll {
            height: 900px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 15px;
            background: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(60px) saturate(200%);
            -webkit-backdrop-filter: blur(60px) saturate(200%);
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 30px 30px -25px rgba(0,0,0,0.25), inset 0 -30px 30px -25px rgba(0,0,0,0.25);
            border: 1px solid rgba(255, 255, 255, 0.6);
            position: relative;
        }
        .li-feed-scroll::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transform: skewX(-20deg) translateX(-150%);
            animation: shimmer 12s infinite linear;
            pointer-events: none;
            z-index: 0;
            border-radius: 20px;
        }
        .li-feed-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .li-feed-scroll::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 3px;
            margin: 15px 0;
        }
        .li-feed-scroll::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), rgba(30, 64, 175, 0.6));
            border-radius: 3px;
            backdrop-filter: blur(4px);
        }
        .li-feed-scroll::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.8), rgba(30, 64, 175, 0.8));
        }
        
        /* Stories 板块滚动容器 - 与 Jobs 一致但高度不同 */
        .stories-feed-scroll {
            height: 1100px;
        }
        
        .li-fc-top { display: flex; gap: 15px; margin-bottom: 15px; }
        /* 输入框升级 */
        .li-fc-input { 
            flex: 1; 
            border: 1px solid rgba(255,255,255,0.5); 
            border-radius: 30px; 
            padding: 12px 20px; 
            font-size: 14px; 
            color: #555; 
            cursor: pointer; 
            background: rgba(255,255,255,0.5); 
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-align: left; 
            backdrop-filter: blur(10px);
        }
        .li-fc-input:hover { 
            background-color: rgba(255,255,255,0.8); 
            border-color: #fff; 
            transform: scale(1.01);
        }
        
        .li-fc-actions { display: flex; justify-content: space-between; padding-top: 5px; }
        .li-fc-btn { 
            display: flex; align-items: center; gap: 6px; 
            padding: 6px 12px; border-radius: 8px; 
            cursor: pointer; color: #555; font-size: 14px; font-weight: 500; 
            background: none; border: none; transition: background 0.2s;
        }
        .li-fc-btn:hover { background-color: rgba(255,255,255,0.3); }
        
        .li-post { 
            padding: 0; 
            cursor: pointer; 
            transition: transform 0.2s, box-shadow 0.2s; 
            margin-bottom: 24px; 
        }
        .li-post:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(31, 38, 135, 0.15); border-color: rgba(255,255,255,0.6); }
        
        .li-post-header { padding: 15px 20px; display: flex; gap: 12px; align-items: flex-start; }
        .li-poster-info h4 { font-size: 15px; font-weight: 700; margin: 0; color: #222; }
        .li-poster-info span { font-size: 12px; color: #666; display: block; margin-top: 2px; }
        
        .li-post-content { padding: 0 20px 15px; font-size: 15px; color: #333; line-height: 1.7; }
        
        .li-job-embed { 
            display: flex; gap: 15px; padding: 15px; margin-top: 15px; 
            background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.4); 
            border-radius: 12px; align-items: center; 
            cursor: pointer; transition: 0.2s; 
            backdrop-filter: blur(5px);
        }
        .li-job-embed:hover { border-color: var(--primary-blue); background: rgba(255,255,255,0.5); }
        .li-job-logo { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,0.5); }
        .li-job-detail { flex: 1; }
        .li-job-title { font-size: 15px; font-weight: bold; color: var(--primary-blue); margin-bottom: 4px; }
        .li-job-meta { font-size: 13px; color: #555; }
        
        /* 申请按钮 - 鲜艳渐变+弹跳 */
        .li-btn-apply { 
            padding: 6px 20px; 
            border-radius: 50px; /* 胶囊形 */
            border: none; 
            color: white; 
            font-weight: bold; 
            font-size: 13px; 
            background: linear-gradient(135deg, #3b82f6, #8b5cf6); /* 鲜艳渐变 */
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer; 
            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
        }
        .li-btn-apply:hover { 
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(139, 92, 246, 0.4); 
            animation: bounce 0.5s; 
        }
        
        .li-post-img { width: 100%; height: auto; display: block; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); margin-top: 10px; }
        
        .li-action-bar { display: flex; border-top: 1px solid rgba(255,255,255,0.3); padding: 8px 15px; gap: 15px; }
        .li-act-btn { 
            flex: 1; padding: 8px; border-radius: 8px; 
            border: none; background: transparent; 
            color: #555; font-weight: 600; font-size: 14px; 
            display: flex; align-items: center; justify-content: center; gap: 8px; 
            cursor: pointer; transition: 0.2s;
        }
        .li-act-btn:hover { background-color: rgba(255,255,255,0.4); color: var(--primary-blue); }
        /* 增加图标浮动动效 */
        .li-act-btn:hover i { animation: floatIcon 0.5s ease-in-out; }

        /* 图标灵动化 - 为所有 FontAwesome 图标添加阴影和交互 */
        #jobs i { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); transition: transform 0.2s; }
        #jobs i:hover { transform: scale(1.1); }

        /* 推荐列表优化 */
        .li-rec-list { list-style: none; padding: 0 15px 15px; }
        .li-rec-item { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; }
        .li-rec-logo-sm { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.5); transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .li-rec-item:hover .li-rec-logo-sm { transform: scale(1.1); }
        .li-rec-text { flex: 1; }
        .li-rec-text h5 { font-size: 14px; margin: 0 0 4px; font-weight: 600; cursor: pointer; color: #222; }
        .li-rec-text h5:hover { color: var(--primary-blue); text-decoration: underline; }
        .li-rec-text p { font-size: 12px; color: #666; margin: 0 0 8px; line-height: 1.3; }
        
        .btn-outline-sm { 
            padding: 4px 14px; 
            border-radius: 15px; 
            border: 1px solid #9ca3af; 
            background: transparent; 
            color: #666; 
            font-weight: 600; 
            font-size: 12px; 
            cursor: pointer; 
            display: inline-flex; align-items: center; gap: 5px; 
            transition: 0.2s;
        }
        .btn-outline-sm:hover { border-color: var(--primary-blue); color: var(--primary-blue); background: rgba(255,255,255,0.5); }

        /* 故事页 Grid */
        #stories-feed-view.active { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: flex-start; }

        /* 子页面通用 */
        .li-sub-page { 
            /* 已在 .li-card 中通用定义，这里仅补充 */
            padding: 40px; 
            min-height: 600px; 
        }
        .li-page-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.3); }
        .li-back-btn { 
            font-size: 16px; color: #666; cursor: pointer; transition: 0.2s; 
            width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.5); 
            display: flex; align-items: center; justify-content: center; 
            border: 1px solid rgba(255,255,255,0.5);
        }
        .li-back-btn:hover { background: var(--primary-blue); color: white; transform: rotate(-90deg); border-color: transparent; }
        .li-page-title { font-size: 26px; font-weight: 800; margin: 0; color: var(--primary-blue); text-shadow: 0 1px 1px rgba(255,255,255,0.8); }

        .app-item { 
            display: flex; justify-content: space-between; align-items: center; 
            padding: 20px; border: 1px solid rgba(255,255,255,0.5); border-radius: 12px; 
            margin-bottom: 15px; transition: all 0.2s; background: rgba(255,255,255,0.4);
            backdrop-filter: blur(10px);
        }
        .app-item:hover { border-color: var(--primary-blue); transform: translateX(8px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); background: rgba(255,255,255,0.6); }
        .app-status { font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 20px; }
        .status-active { background: rgba(219, 234, 254, 0.7); color: #1e40af; }
        .status-review { background: rgba(254, 243, 199, 0.7); color: #92400e; }

        .editor-box textarea { width: 100%; height: 300px; border: 1px solid rgba(255,255,255,0.5); padding: 20px; font-size: 16px; border-radius: 12px; resize: none; outline: none; margin-bottom: 20px; background: rgba(255,255,255,0.3); backdrop-filter: blur(10px); }
        .editor-box textarea:focus { border-color: var(--primary-blue); background: rgba(255,255,255,0.6); }

        /* Job Detail / Company Profile */
        .jd-header { text-align: center; margin-bottom: 40px; animation: fadeIn 0.5s; }
        .jd-logo { width: 90px; height: 90px; border-radius: 16px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.5); }
        .jd-title { font-size: 32px; font-weight: bold; margin-bottom: 10px; color: #111; }
        .jd-meta { color: #555; font-size: 15px; margin-bottom: 25px; }
        .jd-body h3 { margin: 30px 0 15px; font-size: 20px; color: #222; border-left: 5px solid var(--primary-blue); padding-left: 15px; font-weight: 700; }
        .jd-body p, .jd-body li { color: #444; font-size: 16px; line-height: 1.8; margin-bottom: 12px; }
        .jd-body .content { color: #444; font-size: 16px; line-height: 1.8; }
        .jd-body .content h2 { font-size: 18px; margin: 20px 0 10px; color: #222; }
        .jd-body .content ul { padding-left: 20px; margin: 10px 0; }
        .jd-body .content li { margin-bottom: 8px; }
        .jd-body .content hr { border: none; border-top: 1px solid #eee; margin: 20px 0; }

        /* 标签活泼化 */
        .tag-story { 
            background: linear-gradient(135deg, #ec4899, #f97316); 
            color: white; 
            border: none; 
            font-size: 11px; padding: 2px 8px; border-radius: 6px; margin-left: 8px; vertical-align: middle; 
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(236, 72, 153, 0.4);
        }
        .comment-sec { background: rgba(249, 250, 251, 0.5); padding: 20px; margin-top: 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.4); }
        .comment-item { display: flex; gap: 12px; margin-bottom: 15px; }
        .comment-avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); }
        .comment-content { font-size: 14px; background: rgba(255,255,255,0.5); padding: 10px 15px; border-radius: 0 12px 12px 12px; border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 2px 5px rgba(0,0,0,0.02); }

        /* --- 7. 个人简历专用样式 --- */
        .resume-container { padding: 0 10px; }
        
        .resume-header { display: flex; align-items: center; gap: 30px; border-bottom: 2px solid rgba(255,255,255,0.3); padding-bottom: 30px; margin-bottom: 30px; }
        .resume-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
        .resume-basic-info h1 { font-size: 36px; color: var(--primary-blue); margin-bottom: 8px; line-height: 1.2; text-shadow: 0 1px 1px rgba(255,255,255,0.5); }
        .resume-basic-info h1 small { display: none; }
        .resume-job-intent { font-size: 16px; color: #444; font-weight: 500; margin-bottom: 12px; display: inline-block; background: rgba(239, 246, 255, 0.6); padding: 6px 14px; border-radius: 6px; color: var(--primary-blue); border: 1px solid rgba(219, 234, 254, 0.6); }
        .resume-contacts { display: flex; gap: 25px; font-size: 14px; color: #555; flex-wrap: wrap; margin-top: 10px; }
        .resume-contacts span { display: flex; align-items: center; gap: 8px; transition: color 0.2s; cursor: pointer; }
        .resume-contacts span:hover { color: var(--primary-blue); }
        .resume-contacts i { color: var(--primary-blue); }

        /* 签证状态卡片优化 */
        .visa-card { 
            background: linear-gradient(135deg, rgba(255, 251, 235, 0.7) 0%, rgba(255, 247, 237, 0.7) 100%); 
            backdrop-filter: blur(10px);
            border: 1px solid #fcd34d; 
            border-radius: 12px; 
            padding: 20px 25px; 
            display: flex; align-items: center; gap: 20px; 
            margin-bottom: 35px; color: #92400e; 
            box-shadow: 0 4px 15px rgba(217, 119, 6, 0.1); 
            position: relative; overflow: hidden;
        }
        .visa-card::after {
            content: ''; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; 
            background: rgba(251, 191, 36, 0.2); border-radius: 50%;
        }
        .visa-card i { font-size: 32px; color: #d97706; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)); }
        .visa-info strong { font-size: 18px; display: block; margin-bottom: 4px; }
        .visa-info span { font-size: 14px; opacity: 0.9; }

        .resume-body { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; }
        
        .resume-section { margin-bottom: 40px; }
        .resume-section-title { 
            font-size: 20px; color: #1f2937; 
            border-left: 5px solid var(--primary-blue); 
            padding-left: 15px; margin-bottom: 25px; 
            font-weight: 800; display: flex; align-items: center; 
            background: linear-gradient(90deg, rgba(248, 250, 252, 0.5) 0%, transparent 100%);
            padding-top: 5px; padding-bottom: 5px;
            border-radius: 0 8px 8px 0;
        }
        
        .resume-item { margin-bottom: 25px; position: relative; padding-left: 25px; border-left: 2px solid rgba(229, 231, 235, 0.6); margin-left: 8px; padding-bottom: 10px; }
        .resume-item::before { 
            content: ''; position: absolute; left: -7px; top: 6px; 
            width: 12px; height: 12px; background: var(--white); 
            border: 3px solid var(--primary-blue); border-radius: 50%; 
            box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
        }
        .resume-item:last-child { border-left: 2px solid transparent; }
        .resume-item.lang-item { border-left: none; }
        
        .ri-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
        .ri-title { font-size: 17px; font-weight: 700; color: #111; }
        .ri-company { font-size: 15px; font-weight: 600; color: #4b5563; margin-bottom: 8px; }
        .ri-date { font-size: 13px; color: #6b7280; font-family: monospace; background: rgba(243, 244, 246, 0.6); padding: 2px 6px; border-radius: 4px; }
        .ri-desc { font-size: 14px; color: #4b5563; line-height: 1.7; text-align: justify; }
        .ri-desc ul { list-style: disc; padding-left: 18px; margin-top: 8px; }
        .ri-desc li { margin-bottom: 5px; }

        .skill-tag { 
            display: inline-block; background: rgba(255,255,255,0.6); 
            padding: 5px 12px; border-radius: 6px; 
            font-size: 13px; color: #4b5563; margin: 0 6px 10px 0; 
            border: 1px solid rgba(229, 231, 235, 0.6); box-shadow: 0 2px 5px rgba(0,0,0,0.03); 
            transition: 0.2s; backdrop-filter: blur(5px);
        }
        .skill-tag:hover { border-color: var(--primary-blue); color: var(--primary-blue); transform: translateY(-2px); background: #fff; }
        
        /* 其他子页面 Grid */
        .events-grid { width: 85%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
        .event-item { 
            background: rgba(255, 255, 255, 0.25); 
            backdrop-filter: blur(40px);
            border-radius: 16px; overflow: hidden; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; 
            border: 1px solid rgba(255,255,255,0.4);
        }
        .event-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: rgba(255,255,255,0.6); }
        .event-img { height: 250px; background-color:#ccc; background-size: cover; background-position: center; transition: transform 0.5s; }
        .event-item:hover .event-img { transform: scale(1.05); }
        .event-info { padding: 25px; position: relative; background: transparent; }
        
        .service-grid { width: 85%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .service-item { 
            background: rgba(255, 255, 255, 0.25); 
            backdrop-filter: blur(40px);
            border-radius: 20px; overflow: hidden; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; 
            border: 1px solid rgba(255,255,255,0.4);
        }
        .service-item:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
        .s-header { height: 160px; display: flex; align-items: center; justify-content: center; transition: background 0.3s; background: rgba(255,255,255,0.2) !important; } /* 强制覆盖内联样式以统一玻璃感 */
        .s-body { padding: 30px; text-align: center; }
        .s-body h3 { margin-bottom: 15px; }

        /* Footer & Modal */
        footer { 
            background: rgba(31, 41, 55, 0.95); 
            backdrop-filter: blur(20px);
            color:#9ca3af; padding:60px 5%; margin-top:20px; font-size:14px; border-top: 5px solid var(--primary-blue); 
        }
        #successModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(15px); z-index: 1200; align-items: center; justify-content: center; }
        /* 模态框玻璃化 */
        #successModal > div {
            background: rgba(255, 255, 255, 0.6) !important;
            backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.5);
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
            border-radius: 24px !important;
        }
        #modalTitle { color: var(--primary-blue); font-weight: 800; margin-bottom: 10px; }

        /* ==========================================================================
           iOS 26 Liquid Glass - Advanced Button Interactions (Jobs & Stories Scope)
           ========================================================================== */
        
        /* 1. Base Glass Texture & Physics */
        #jobs button, #stories button,
        #jobs .li-search-btn, #stories .li-search-btn,
        #jobs .li-btn-apply, #stories .li-btn-apply,
        #jobs .btn-outline-sm, #stories .btn-outline-sm,
        #jobs .li-act-btn, #stories .li-act-btn,
        #jobs .li-fc-btn, #stories .li-fc-btn,
        #jobs .li-fc-input { /* Include input trigger */
            /* Glassmorphism Core */
            background: rgba(255, 255, 255, 0.25) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            
            /* Border & Highlights */
            border: 1px solid rgba(255, 255, 255, 0.4) !important;
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.6), /* Inner Highlight */
                0 4px 15px rgba(0,0,0,0.05),         /* Ambient Shadow */
                0 2px 4px rgba(0,0,0,0.05) !important;
            
            /* Typography & Layout Preservation */
            color: #1f2937 !important; /* Force dark text for contrast on glass */
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
            position: relative;
            overflow: hidden;
            z-index: 10;
            cursor: pointer;
            
            /* Physics Engine */
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Elastic Bezier */
            transform: translateZ(0); /* GPU Trigger */
            will-change: transform, box-shadow, background-color;
        }

        /* Special Override for Primary Action Buttons Text Color */
        #jobs .li-search-btn, #stories .li-search-btn,
        #jobs .li-btn-apply, #stories .li-btn-apply {
            color: var(--primary-blue) !important;
            font-weight: 800 !important;
        }

        /* 2. Liquid Hover State (Elastic & Glow) */
        #jobs button:hover, #stories button:hover,
        #jobs .li-search-btn:hover, #stories .li-search-btn:hover,
        #jobs .li-btn-apply:hover, #stories .li-btn-apply:hover,
        #jobs .btn-outline-sm:hover, #stories .btn-outline-sm:hover,
        #jobs .li-act-btn:hover, #stories .li-act-btn:hover,
        #jobs .li-fc-btn:hover, #stories .li-fc-btn:hover,
        #jobs .li-fc-input:hover {
            /* Elastic Levitation */
            transform: translateY(-3px) scale(1.02) !important;
            
            /* Deepening Refraction */
            background-color: rgba(255, 255, 255, 0.4) !important;
            border-color: rgba(255, 255, 255, 0.8) !important;
            
            /* Glowing Diffusion */
            box-shadow: 
                0 8px 30px rgba(59, 130, 246, 0.25), /* Blue Glow */
                0 0 0 1px rgba(255,255,255,0.6),     /* Sharp Rim */
                inset 0 1px 0 rgba(255,255,255,0.6) !important;
        }

        /* 3. Shimmer Sweep Animation (Pseudo-element) */
        #jobs button::before, #stories button::before,
        #jobs .li-search-btn::before, #stories .li-search-btn::before,
        #jobs .li-btn-apply::before, #stories .li-btn-apply::before,
        #jobs .btn-outline-sm::before, #stories .btn-outline-sm::before,
        #jobs .li-act-btn::before, #stories .li-act-btn::before,
        #jobs .li-fc-btn::before, #stories .li-fc-btn::before {
            content: '';
            position: absolute;
            top: 0; left: -150%; width: 100%; height: 100%;
            /* 45deg Linear Light Beam */
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            transform: skewX(-25deg);
            pointer-events: none;
            transition: none;
            z-index: 11;
        }

        /* Trigger Shimmer on Hover */
        #jobs button:hover::before, #stories button:hover::before,
        #jobs .li-search-btn:hover::before, #stories .li-search-btn:hover::before,
        #jobs .li-btn-apply:hover::before, #stories .li-btn-apply:hover::before,
        #jobs .btn-outline-sm:hover::before, #stories .btn-outline-sm:hover::before,
        #jobs .li-act-btn:hover::before, #stories .li-act-btn:hover::before,
        #jobs .li-fc-btn:hover::before, #stories .li-fc-btn:hover::before {
            animation: glassShimmer 0.6s ease-in-out;
            left: 150%;
        }

        /* 4. Active/Click State (Liquid Compression) */
        #jobs button:active, #stories button:active,
        #jobs .li-search-btn:active, #stories .li-search-btn:active,
        #jobs .li-btn-apply:active, #stories .li-btn-apply:active,
        #jobs .btn-outline-sm:active, #stories .btn-outline-sm:active,
        #jobs .li-act-btn:active, #stories .li-act-btn:active,
        #jobs .li-fc-btn:active, #stories .li-fc-btn:active,
        #jobs .li-fc-input:active {
            transform: translateY(1px) scale(0.98) !important;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
            transition: transform 0.1s !important;
        }

        /* Keyframes for Interaction */
        @keyframes glassShimmer {
            0% { left: -100%; opacity: 0; }
            50% { opacity: 1; }
            100% { left: 200%; opacity: 0; }
        }

        @keyframes ripple {
            0% { transform: scale(0); opacity: 0.5; }
            100% { transform: scale(4); opacity: 0; }
        }

        /* Maintain Icon Colors */
        #jobs .li-act-btn i, #stories .li-act-btn i {
            color: var(--primary-blue);
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.5) translateY(-10px);
            }
            50% {
                opacity: 0.8;
                transform: scale(1.1) translateY(0);
            }
            70% {
                opacity: 1;
                transform: scale(0.95) translateY(-2px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }


/* ========== 求职意向选择器Modal样式 ========== */
.job-intent-option {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.job-intent-option:hover {
    transform: translateX(5px);
}

#jobIntentModal .modal-content {
    background: white;
    border-radius: 20px;
    padding: 30px;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#jobIntentModal .modal-content h2 {
    margin: 0;
    color: var(--text-dark);
}

#jobIntentModal #selectedPath {
    padding: 15px;
    background: rgba(30, 91, 191, 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
    color: var(--text-dark);
    font-weight: 500;
}

#jobIntentModal .option-column {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px;
}

#jobIntentModal .option-column:first-child {
    padding-left: 0;
}

#jobIntentModal .option-column:last-child {
    padding-right: 0;
}

#level1Options, #level2Options, #level3Options {
    max-height: 400px;
    overflow-y: auto;
}

#jobIntentModal button {
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

#confirmJobIntentBtn {
    background: var(--primary-blue);
    color: white;
    border: none;
}

#confirmJobIntentBtn:hover {
    background: var(--primary-dark);
}