@font-face {
  font-family: "font1";
  src: url("../font/xialuweikai.ttf");
}

        /* ========== 全局变量与重置 ========== */
        :root {
            --bg-primary: #f2f9ff;
            --bg-secondary: rgba(255, 255, 255, 0.72);
            --bg-card: rgba(255, 255, 255, 0.82);
            --bg-nav: rgba(255, 255, 255, 0.55);
            --text-primary: #16324f;
            --text-secondary: #4e6e8c;
            --text-muted: #7a93ab;
            --accent: #3fa7f0;
            --accent-glow: rgba(63, 167, 240, 0.35);
            --accent-secondary: #7bd5f5;
            --border: rgba(63, 167, 240, 0.12);
            --card-border: rgba(63, 167, 240, 0.28);
            --shadow-sm: 0 2px 10px rgba(56, 130, 190, 0.06);
            --shadow-md: 0 10px 30px rgba(56, 130, 190, 0.1);
            --shadow-lg: 0 22px 55px rgba(56, 130, 190, 0.16);
            --shadow-glow: 0 0 40px rgba(63, 167, 240, 0.22);
            --shadow-neu: 8px 8px 20px rgba(56, 130, 190, 0.1), -8px -8px 20px rgba(255, 255, 255, 0.9);
            --shadow-neu-hover: 12px 12px 28px rgba(56, 130, 190, 0.14), -10px -10px 24px rgba(255, 255, 255, 1);
            --hero-bg: linear-gradient(150deg, #eaf6ff 0%, #dff0ff 20%, #f2fbff 40%, #e8f6ff 60%, #f0faff 80%, #e2f2ff 100%);
            --hero-text: #16324f;
            --hero-subtitle: #5a7d9d;
            --hero-desc: #6f8ca6;
            --hero-cta-bg: rgba(63, 167, 240, 0.08);
            --hero-cta-border: rgba(63, 167, 240, 0.25);
            --hero-cta-text: #2683cc;
            --hero-overlay-opacity: 0.0;
            --scroll-indicator-color: #6f8ca6;
            --nav-blur: blur(20px) saturate(180%);
            --card-blur: blur(14px);
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 32px;
            --radius-xl: 48px;
            --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	    --font-h1: 'Georgia', 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            --font-heading: 'font1', 'Georgia', 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            --font-body: 'font1', 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', sans-serif;
            --max-width: 1300px;
        }

/* 原来的 Hero 覆盖层（完全透明） */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* 删除原来的 background 属性 */
    z-index: 1;
    pointer-events: none;
    transition: background var(--transition-smooth);
}

/* 新增：根据不同主题设置半透明背景 */
[data-theme="light"] .hero-overlay {
    background: rgba(255, 255, 255, 0.45);  /* 浅色模式：白色半透明，提亮并柔化视频 */
}

[data-theme="dark"] .hero-overlay {
    background: rgba(0, 0, 0, 0.45);        /* 深色模式：黑色半透明，压暗视频保护文字 */
}

        .hero-video-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            display: block;
        }

        [data-theme="dark"] {
            --bg-primary: #0a1b2e;
            --bg-secondary: rgba(16, 36, 60, 0.72);
            --bg-card: rgba(18, 40, 66, 0.82);
            --bg-nav: rgba(10, 26, 46, 0.6);
            --text-primary: #e8f2ff;
            --text-secondary: #aec6e0;
            --text-muted: #7089a6;
            --accent: #58b4f5;
            --accent-glow: rgba(88, 180, 245, 0.45);
            --accent-secondary: #8adef6;
            --border: rgba(122, 197, 255, 0.14);
            --card-border: rgba(122, 197, 255, 0.24);
            --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 28px rgba(88, 180, 245, 0.16);
            --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.45), 0 0 40px rgba(88, 180, 245, 0.24);
            --shadow-glow: 0 0 50px rgba(88, 180, 245, 0.28);
            --shadow-neu: 0 0 12px rgba(88, 180, 245, 0.16), 0 0 24px rgba(88, 180, 245, 0.08);
            --shadow-neu-hover: 0 0 15px rgba(88, 180, 245, 0.26), 0 0 30px rgba(88, 180, 245, 0.12);
            --hero-bg: linear-gradient(150deg, #060e1c 0%, #07203a 20%, #0a2545 40%, #08203c 60%, #07182c 80%, #0a2038 100%);
            --hero-text: #e8f2ff;
            --hero-subtitle: #b8cfe6;
            --hero-desc: #90acc8;
            --hero-cta-bg: rgba(88, 180, 245, 0.1);
            --hero-cta-border: rgba(88, 180, 245, 0.3);
            --hero-cta-text: #8adef6;
            --hero-overlay-opacity: 0.0;
            --scroll-indicator-color: #aec6e0;
            --nav-blur: blur(20px) saturate(180%);
            --card-blur: blur(16px);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }
        a {
		text-decoration: none;
    		color: inherit;
	}
        body {
            font-family: var(--font-body);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: background-color var(--transition-smooth), color var(--transition-smooth);
            overflow-x: hidden;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body.loading-locked {
            overflow: hidden;
            height: 100vh;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 10px;
        }

        /* ============ 粒子 Canvas 背景 ============ */
        #particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.65;
            transition: opacity var(--transition-smooth);
        }
        [data-theme="dark"] #particleCanvas {
            opacity: 0.8;
        }

        /* ============ 加载页面 ============ */
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #0a0a16;
            transition: opacity 0.55s ease, visibility 0.55s ease;
            pointer-events: all;
            overflow: hidden;
        }
        [data-theme="light"] #loadingOverlay {
            background: #eaf6ff;
        }
        [data-theme="dark"] #loadingOverlay {
            background: #0a0a16;
        }
        #loadingOverlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .loader-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .loader-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            animation: orbFloat 3s ease-in-out infinite;
            opacity: 0.7;
        }
        .loader-orb:nth-child(1) { width: 220px; height: 220px; background: #3fa7f0; top: 15%; left: 10%; animation-duration: 3.5s; }
        .loader-orb:nth-child(2) { width: 180px; height: 180px; background: #7bd5f5; bottom: 20%; right: 12%; animation-duration: 3s; animation-delay: -1.2s; }
        .loader-orb:nth-child(3) { width: 150px; height: 150px; background: #aee6ff; top: 50%; left: 55%; animation-duration: 3.8s; animation-delay: -2s; }
        .loader-orb:nth-child(4) { width: 100px; height: 100px; background: #63b8f7; bottom: 10%; left: 30%; animation-duration: 2.8s; animation-delay: -0.6s; }
        .loader-orb:nth-child(5) { width: 130px; height: 130px; background: #3fa7f0; top: 30%; right: 25%; animation-duration: 3.3s; animation-delay: -1.8s; }
        @keyframes orbFloat {
            0%,100% { transform: translate(0,0) scale(1); opacity: 0.7; }
            33% { transform: translate(40px,-30px) scale(1.2); opacity: 0.55; }
            66% { transform: translate(-25px,20px) scale(0.85); opacity: 0.8; }
        }

        .loader-ring-container {
            position: relative;
            z-index: 1;
            width: 90px;
            height: 90px;
            margin-bottom: 30px;
        }
        .loader-ring-container .ring-track {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2.5px solid rgba(255, 255, 255, 0.1);
        }
        [data-theme="light"] .loader-ring-container .ring-track { border-color: rgba(0, 0, 0, 0.08); }
        .loader-ring-container .ring-spin {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2.5px solid transparent;
            border-top-color: #3fa7f0;
            border-right-color: #7bd5f5;
            animation: ringSpinFast 0.7s linear infinite;
        }
        .loader-ring-container .ring-spin:nth-child(3) { inset: 10px; border-top-color: #aee6ff; border-right-color: #63b8f7; animation-duration: 0.55s; animation-direction: reverse; }
        .loader-ring-container .ring-spin:nth-child(4) { inset: 20px; border-top-color: #7bd5f5; border-right-color: #3fa7f0; animation-duration: 0.45s; }
        @keyframes ringSpinFast { to { transform: rotate(360deg); } }
        .loader-center-dot {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 10px; height: 10px;
            background: #3fa7f0;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(63,167,240,0.9), 0 0 50px rgba(63,167,240,0.5);
            animation: dotGlow 0.8s ease-in-out infinite;
        }
        @keyframes dotGlow {
            0%,100% { transform: translate(-50%,-50%) scale(0.8); box-shadow: 0 0 16px rgba(63,167,240,0.7),0 0 36px rgba(63,167,240,0.3); }
            50% { transform: translate(-50%,-50%) scale(1.5); box-shadow: 0 0 28px rgba(140,215,255,1),0 0 60px rgba(63,167,240,0.6); }
        }
        .loader-progress-wrap {
            position: relative;
            z-index: 1;
            width: 260px;
            height: 3px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            overflow: hidden;
        }
        [data-theme="light"] .loader-progress-wrap { background: rgba(0,0,0,0.08); }
        .loader-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #3fa7f0, #7bd5f5, #aee6ff);
            border-radius: 10px;
            width: 0%;
            transition: width 0.15s ease-out;
            box-shadow: 0 0 18px rgba(63,167,240,0.7);
        }
        .loader-text {
            position: relative;
            z-index: 1;
            color: rgba(255,255,255,0.65);
            font-size: 0.8rem;
            margin-top: 14px;
            letter-spacing: 0.1em;
            font-family: var(--font-body);
            font-weight: 500;
        }
        [data-theme="light"] .loader-text { color: rgba(60,60,80,0.7); }

        /* ============ 测试中横幅（大厂顶部广告条式：固定置顶，整页内容下移） ============ */
        .test-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2000;
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: #fff;
            text-align: center;
            font-size: 14px;
            line-height: 1.4;
            padding: 9px 40px;
            box-shadow: 0 2px 12px rgba(231, 76, 60, 0.45);
            transition: transform 0.35s ease, opacity 0.35s ease;
        }
        .test-banner.closing { transform: translateY(-100%); opacity: 0; }
        .test-banner.hidden-banner { display: none; }
        /* 横幅高度由 JS 实时测量后写入 --banner-h，内容/导航整体下移 */
        body.banner-shown { padding-top: var(--banner-h, 38px); transition: padding-top 0.35s ease; }
        body.banner-shown #navbar { top: var(--banner-nav-top, 53px); }
        body.banner-shown #navbar.scrolled { top: var(--banner-nav-top, 53px); }
        .banner-close {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #fff;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            padding: 4px 8px;
            opacity: 0.85;
        }
        .banner-close:hover { opacity: 1; }
        @media (max-width: 768px) {
            .test-banner { font-size: 12px; padding: 7px 36px; }
        }

        /* ============ 导航栏 (毛玻璃增强) ============ */
        #navbar {
            position: fixed;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            width: calc(100% - 36px);
            max-width: var(--max-width);
            background: var(--bg-nav);
            backdrop-filter: var(--nav-blur);
            -webkit-backdrop-filter: var(--nav-blur);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 0 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 54px;
            transition: all var(--transition-smooth);
            box-shadow: var(--shadow-md);
        }
        #navbar.scrolled { top: 6px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); height: 48px; }
        .nav-brand {
    	    flex-shrink: 0;   /* 防止被压缩 */
            font-family: var(--font-heading);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--accent);
            white-space: nowrap;
            cursor: pointer;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color var(--transition-fast);
        }
        .nav-brand:hover { color: var(--accent-secondary); }
        .nav-brand svg { width: 22px; height: 22px; }
	.nav-links {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		gap: 8px;
    		flex: 1;          /* 撑开中间区域 */
    		margin: 0 20px;   /* 与左右保持间距 */
    		list-style: none;
	}
        .nav-links a {
            text-decoration: none;
            color: var(--text-secondary);
            font-size: 0.88rem;
            font-weight: 500;
            padding: 7px 15px;
            border-radius: 24px;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }
        .nav-links a:hover, .nav-links a.active {
            color: var(--accent);
            background: rgba(63, 167, 240, 0.15);
        }
        .nav-links a.active { font-weight: 600; background: rgba(63, 167, 240, 0.12); }
        .theme-toggle {
	  	gap: 12px;
		flex-shrink: 0;
            width: 38px; height: 38px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
            color: var(--text-secondary);
            position: relative;
            overflow: hidden;
        }
        .theme-toggle:hover { background: rgba(63,167,240,0.15); border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-glow); }
        .theme-toggle .icon-wrap {
            position: absolute;
            transition: all var(--transition-bounce);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px; height: 20px;
        }
        .theme-toggle .icon-wrap svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
        [data-theme="light"] .theme-toggle .icon-moon-wrap { opacity: 0; transform: rotate(180deg) scale(0.4); }
        [data-theme="dark"] .theme-toggle .icon-sun-wrap { opacity: 0; transform: rotate(-180deg) scale(0.4); }
        [data-theme="light"] .theme-toggle .icon-sun-wrap { opacity: 1; transform: rotate(0) scale(1); }
        [data-theme="dark"] .theme-toggle .icon-moon-wrap { opacity: 1; transform: rotate(0) scale(1); }
/* auto 模式下显示 auto 图标，隐藏 sun 和 moon */
[data-theme-preference="auto"] .theme-toggle .icon-auto-wrap {
    opacity: 1;
    transform: rotate(0) scale(1);
}
[data-theme-preference="auto"] .theme-toggle .icon-sun-wrap,
[data-theme-preference="auto"] .theme-toggle .icon-moon-wrap {
    opacity: 0;
    transform: rotate(180deg) scale(0.4);
}

/* 确保初始状态 auto 图标默认隐藏，light/dark 时也隐藏 */
.theme-toggle .icon-auto-wrap {
    opacity: 0;
    transform: rotate(180deg) scale(0.4);
    transition: all var(--transition-bounce);
}
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 38px; height: 38px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .hamburger span { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all var(--transition-fast); transform-origin: center; }
        .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
        .mobile-menu {
            display: none;
            position: fixed;
            top: 76px;
            left: 18px; right: 18px;
            background: var(--bg-nav);
            backdrop-filter: var(--nav-blur);
            -webkit-backdrop-filter: var(--nav-blur);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 18px;
            z-index: 999;
            flex-direction: column;
            gap: 6px;
            box-shadow: var(--shadow-lg);
            transform: translateY(-16px);
            opacity: 0;
            pointer-events: none;
            transition: all var(--transition-bounce);
        }
        .mobile-menu.active { display: flex; transform: translateY(0); opacity: 1; pointer-events: all; }
        .mobile-menu a {
            display: block;
            padding: 11px 16px;
            text-decoration: none;
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            font-size: 0.95rem;
            font-weight: 500;
        }
        .mobile-menu a:hover, .mobile-menu a.active { background: rgba(63,167,240,0.12); color: var(--accent); }

        /* ============ Hero 区域 ============ */
        #hero { position: relative; z-index: 1; width: 100%; height: 100vh; min-height: 580px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--hero-bg); overflow: hidden; transition: background var(--transition-smooth); }
        .hero-content { position: relative; z-index: 2; padding: 0 20px; max-width: 1900px; }
        .hero-subtitle { font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hero-subtitle); margin-bottom: 14px; opacity: 0; animation: fadeInUpFast 0.6s ease forwards; animation-delay: 0.15s; }
        .hero-title { font-family: var(--font-h1); font-size: clamp(2.5rem, 5.5vw, 4.8rem); font-weight: 900; color: var(--hero-text); line-height: 1.12; margin-bottom:10px; opacity: 0; animation: fadeInUpFast 0.6s ease forwards; animation-delay: 0.28s; letter-spacing: -0.02em; }
        .hero-title .highlight { background: linear-gradient(135deg, #7bd5f5, #3fa7f0, #aee6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s ease-in-out infinite; }
        [data-theme="light"] .hero-title .highlight { background: linear-gradient(135deg, #3fa7f0, #2683cc, #63b8f7); -webkit-background-clip: text; background-clip: text; }
        @keyframes shimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
        .hero-desc { font-size: 1.05rem; color: var(--hero-desc); max-width: 520px; margin: 0 auto 30px; opacity: 0; animation: fadeInUpFast 0.6s ease forwards; animation-delay: 0.4s; }
        .hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 32px; border-radius: 50px; background: var(--hero-cta-bg); border: 1.5px solid var(--hero-cta-border); color: var(--hero-cta-text); text-decoration: none; font-weight: 600; transition: all var(--transition-smooth); backdrop-filter: blur(6px); }
        .hero-cta:hover { background: rgba(63,167,240,0.18); border-color: var(--accent); box-shadow: 0 0 36px rgba(63,167,240,0.35); transform: translateY(-3px); }
        .hero-cta svg { width: 16px; height: 16px; }
        @keyframes fadeInUpFast { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
        .scroll-indicator { position: absolute; bottom: 32px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: bounceDown 2s ease-in-out infinite; cursor: pointer; color: var(--scroll-indicator-color); font-size: 0.7rem; font-weight: 500; }
        .scroll-indicator svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
        @keyframes bounceDown { 0%,100% { transform:translateY(0); } 50% { transform:translateY(12px); } }

        /* 内容区域 */
        .content-wrapper { position: relative; z-index: 1; }
        section { padding: 80px 20px; position: relative; z-index: 1; }
        .section-inner { max-width: var(--max-width); margin: 0 auto; }
        .section-label { display: inline-block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 8px; padding: 5px 14px; border-radius: 20px; background: rgba(63,167,240,0.07); border: 1px solid rgba(63,167,240,0.12); }
        .section-title { font-family: var(--font-h1); font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 700; color: var(--text-primary); margin-bottom: 12px; text-align: center; }
        .section-desc { color: var(--text-muted); font-size: 1rem; max-width: 560px; margin: 0 auto 44px; text-align: center; }

        /* 卡片网格 + 图片支持 */
        .articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
        @media (min-width:1600px) { .articles-grid { grid-template-columns: repeat(4,1fr); } }
        @media (min-width:1200px) and (max-width:1599px) { .articles-grid { grid-template-columns: repeat(3,1fr); } }
        .article-card { perspective: 1200px; cursor: pointer; position: relative; }
        .article-card-inner {
            background: var(--bg-card);
            backdrop-filter: var(--card-blur);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 26px 24px;
            transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            will-change: transform;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
            transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0px) scale(1);
        }
        .article-card-inner::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-md);
            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(63,167,240,0.14) 0%, transparent 60%);
            opacity: 0;
            transition: opacity var(--transition-smooth);
            pointer-events: none;
            z-index: 0;
        }
        .article-card:hover .article-card-inner::before { opacity: 1; }
        .article-card:hover .article-card-inner { box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: rgba(63,167,240,0.3); }
        .article-card-inner > * { position: relative; z-index: 1; }
        .article-card-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 12px;
            margin-bottom: 8px;
            background: var(--bg-secondary);
            transition: transform 0.3s ease;
        }
        .article-card:hover .article-card-image { transform: scale(0.98); }
        .article-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: 18px; background: rgba(63,167,240,0.08); color: var(--accent); align-self: flex-start; transition: all var(--transition-fast); }
        .article-card:hover .article-tag { background: rgba(63,167,240,0.18); box-shadow: 0 0 14px rgba(63,167,240,0.2); }
        .article-card-title { font-family: var(--font-h1); font-size: 1.2rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; transition: color var(--transition-fast); }
        .article-card:hover .article-card-title { color: var(--accent); }
        .article-card-excerpt { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; flex-grow: 1; }
        .article-card-meta { display: flex; align-items: center; gap: 10px; font-size: 0.76rem; color: var(--text-muted); padding-top: 4px; border-top: 1px solid var(--border); }
        .article-card-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

        /* 查看更多按钮 */
        .view-more-wrapper { text-align: center; margin-top: 48px; }
        .view-more-btn {
            display: inline-block;
            padding: 12px 40px;
            border-radius: 60px;
            background: transparent;
            border: 1.5px solid var(--accent);
            color: var(--accent);
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition: all 0.3s ease;
            backdrop-filter: blur(4px);
        }
        .view-more-btn:hover { background: var(--accent); color: white; box-shadow: 0 0 20px var(--accent-glow); transform: translateY(-3px); }

        /* ============ 我的兴趣爱好（图片库 · 堆叠伸展特效） ============ */
        .hobby-deck { position: relative; display: flex; align-items: center; justify-content: center; }
        .deck-stage { position: relative; width: 840px; height: 560px; }
        .deck-card {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition:
                left 0.7s cubic-bezier(0.22, 0.9, 0.28, 1),
                top 0.7s cubic-bezier(0.22, 0.9, 0.28, 1),
                transform 0.7s cubic-bezier(0.22, 0.9, 0.28, 1),
                z-index 0s 0.08s;
        }
        /* iOS Safari：backdrop-filter 与动画 transform 组合会把毛玻璃背景渲染成放大/缩小的错位区域，
           移动端牌卡改用纯色背景，翻页动画不再出现“背景放大/变小” */
        @media (max-width: 768px) {
            .deck-card .hobby-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-card); }
        }
        .deck-card .hobby-card { width: 560px; cursor: default; transition: transform 0.35s ease; }
        .deck-card:hover .hobby-card { transform: translateY(-14px); }
        .deck-nav {
            flex-shrink: 0;
            margin: 0 14px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--bg-card);
            -webkit-backdrop-filter: var(--card-blur);
            backdrop-filter: var(--card-blur);
            border: 1.5px solid var(--card-border);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: all var(--transition-smooth);
        }
        .deck-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
        .deck-nav:hover { box-shadow: var(--shadow-glow); border-color: var(--accent); transform: translateY(-3px); }
        .deck-nav:active { transform: scale(0.94); }
        .hobby-card-inner {
            background: var(--bg-primary);
            border-radius: 24px;
            padding: 28px 30px 32px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            box-shadow: var(--shadow-neu);
            border: 1.5px solid var(--card-border);
            transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            will-change: transform;
        }
        .hobby-card-inner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(63,167,240,0.14) 0%, transparent 60%);
            pointer-events: none;
            opacity: 0;
            transition: opacity var(--transition-smooth);
            z-index: 0;
        }
        .hobby-card-inner > * { position: relative; z-index: 1; }
        .hobby-card:hover .hobby-card-inner { box-shadow: var(--shadow-neu-hover); border-color: rgba(63,167,240,0.22); }
        .hobby-card:hover .hobby-card-inner::before { opacity: 1; }
        .hobby-card-img {
            width: 100%;
            height: 250px;
            border-radius: 18px;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(63,167,240,0.12), rgba(123,213,245,0.2));
        }
        .hobby-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .hobby-card-img.img-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-size: 44px;
        }
        .hobby-card-img.img-placeholder small { font-size: 12px; color: var(--text-muted); letter-spacing: 1px; }
        .hobby-icon {
            width: 60px;
            height: 60px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(63,167,240,0.14), rgba(123,213,245,0.2));
            border: 1px solid rgba(63,167,240,0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
        }
        .hobby-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .hobby-card-title { font-family: var(--font-h1); font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
        .hobby-card-excerpt {
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.7;
            min-height: 3.4em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ============ 我的资源（田字形 2x2 · 轻拟物卡片） ============ */
        .resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .resource-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 26px 24px;
            border-radius: 20px;
            background: var(--bg-primary);
            box-shadow: var(--shadow-neu);
            border: 1.5px solid var(--card-border);
            color: var(--text-primary);
            text-decoration: none;
            transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
            position: relative;
            overflow: hidden;
        }
        .resource-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(63,167,240,0.06), transparent 60%);
            opacity: 0;
            transition: opacity var(--transition-smooth);
        }
        .resource-card > * { position: relative; z-index: 1; }
        .resource-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-neu-hover); border-color: rgba(63,167,240,0.25); }
        .resource-card:hover::before { opacity: 1; }
        .resource-icon {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
            box-shadow: 0 6px 16px var(--accent-glow);
        }
        .resource-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .resource-text { flex: 1; }
        .resource-text h3 { font-family: var(--font-h1); font-size: 1.05rem; font-weight: 700; }
        .resource-text p { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
        .resource-arrow { color: var(--accent); font-size: 1.2rem; opacity: 0; transform: translateX(-6px); transition: all var(--transition-smooth); }
        .resource-card:hover .resource-arrow { opacity: 1; transform: translateX(0); }

        /* 资源图片卡：整卡为图片，悬停时渐变遮罩从左弹出 + "<" 箭头 */
        .resource-card.resource-img {
            display: block;
            padding: 0;
            min-height: 96px;
        }
        .resource-card.resource-img img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .resource-card.resource-img .placeholder-bg {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 58px;
            background: repeating-linear-gradient(45deg, rgba(63, 167, 240, 0.09) 0 22px, rgba(63, 167, 240, 0.17) 22px 44px);
        }
        .resource-card.resource-img .placeholder-bg .php-text {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 2px;
            color: var(--text-secondary);
        }
        .resource-card.resource-img .img-mask {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 62%;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 26px;
            background: linear-gradient(90deg, rgba(8, 24, 44, 0.62) 25%, rgba(8, 24, 44, 0.28) 65%, transparent);
            transform: translateX(-100%);
            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .resource-card.resource-img:hover .img-mask { transform: translateX(0); }
        .resource-card.resource-img .img-mask svg {
            width: 34px;
            height: 34px;
            color: #fff;
            stroke: currentColor;
            fill: none;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
            flex-shrink: 0;
        }
        /* 右侧卡片：遮罩与箭头从右侧弹入 */
        .resource-card.resource-img .img-mask-right {
            left: auto;
            right: 0;
            justify-content: flex-end;
            padding-left: 0;
            padding-right: 26px;
            background: linear-gradient(270deg, rgba(8, 24, 44, 0.62) 25%, rgba(8, 24, 44, 0.28) 65%, transparent);
            transform: translateX(100%);
        }
        .resource-card.resource-img:hover .img-mask-right { transform: translateX(0); }

        /* ============ 关于我（Qwen 排版 · 图片 + 文字卡片） ============ */
        .about-head { text-align: center; }
        .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; margin: 0 auto; max-width: 920px; }
        .card-soft {
            background: var(--bg-card);
            -webkit-backdrop-filter: var(--card-blur);
            backdrop-filter: var(--card-blur);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
        }
        .card-soft:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
        .about-image {
            aspect-ratio: 1;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, rgba(63,167,240,0.12), rgba(123,213,245,0.18));
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            color: var(--accent);
            overflow: hidden;
        }
        .about-image svg { width: 55%; height: 55%; opacity: 0.75; }
        .about-text { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
        .about-text h3 { font-family: var(--font-h1); font-size: 1.4rem; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); }
        .about-text p { color: var(--text-secondary); margin-bottom: 12px; font-size: 15px; }
        .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
        .stat-item { text-align: center; padding: 16px 8px; background: rgba(63,167,240,0.08); border-radius: 16px; border: 1px solid var(--border); transition: all var(--transition-fast); }
        .stat-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
        .stat-number { font-size: 1.6rem; font-weight: 800; color: var(--accent); display: block; }
        .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block; }

        /* ============ 整页翻页（每个板块都是一整页） ============ */
        #about, #interests, #resources, #contact {
            min-height: 100vh;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 92px 20px 86px;
        }
        /* 我的资源：标题 + 卡片撑满一整页（卡片高度与 4 卡时代一致） */
        #resources { height: 100vh; }
        #resources .section-inner {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .resource-grid {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            grid-template-rows: 1fr 1fr;
        }
        #about .section-inner, #interests .section-inner, #resources .section-inner, #contact .section-inner { width: 100%; }

        /* ============ 联系我（非页脚，与其余板块一样露出粒子背景） ============ */
        .contact-panel {
            max-width: 720px;
            margin: 0 auto;
            background: var(--bg-card);
            -webkit-backdrop-filter: var(--card-blur);
            backdrop-filter: var(--card-blur);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 40px 32px;
        }
        .contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .contact-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 18px;
            border-radius: 16px;
            background: rgba(63,167,240,0.06);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            text-decoration: none;
            transition: all var(--transition-fast);
        }
        .contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); border-color: rgba(63,167,240,0.3); color: var(--text-primary); }
        .contact-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 5px 14px var(--accent-glow);
        }
        .contact-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .contact-label { font-weight: 600; color: var(--text-primary); min-width: 64px; }
        .contact-value { color: var(--text-muted); font-size: 0.88rem; }
        .contact-note { text-align: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; }

        footer { text-align: center; padding: 36px 20px; color: var(--text-muted); font-size: 0.82rem; border-top: 1px solid var(--border); background: var(--bg-secondary); backdrop-filter: var(--card-blur); display: flex; align-items: center; justify-content: center; gap: 6px; }
        footer svg { width: 14px; height: 14px; }
        #backToTop { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-card); backdrop-filter: var(--card-blur); border: 1.5px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all var(--transition-smooth); opacity: 0; transform: translateY(18px); pointer-events: none; }
        #backToTop.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
        #backToTop:hover { box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: var(--accent); transform: translateY(-4px); }
        #backToTop svg.progress-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
        #backToTop .progress-circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 138; transition: stroke-dashoffset 0.1s ease-out; }
        #backToTop .arrow-up-svg { position: relative; z-index: 1; width: 18px; height: 18px; stroke: var(--text-primary); fill: none; stroke-width: 2.5; }
        #backToTop:hover .arrow-up-svg { stroke: var(--accent); }
        .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
        .reveal.revealed { opacity: 1; transform: translateY(0); }
/* ========== 设置按钮与下拉菜单 ========== */
.settings-container {
    position: relative;
    flex-shrink: 0;
}

.settings-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
    position: relative;
}

.settings-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}
.settings-icon {
    width: 18px;
    height: 18px;
    display: block;
    transition: opacity var(--transition-fast);
}

/* 浅色主题下显示黑色图标，隐藏白色图标 */
[data-theme="light"] .settings-icon-light {
    display: block;
}
[data-theme="light"] .settings-icon-dark {
    display: none;
}

/* 深色主题下显示白色图标，隐藏黑色图标 */
[data-theme="dark"] .settings-icon-light {
    display: none;
}
[data-theme="dark"] .settings-icon-dark {
    display: block;
}
.logo {
    width: 32px;
    height: 32px;
    display: block;
    transition: opacity var(--transition-fast);
}

/* 浅色主题下显示黑色图标，隐藏白色图标 */
[data-theme="light"] .logo-light {
    display: block;
}
[data-theme="light"] .logo-dark {
    display: none;
}

/* 深色主题下显示白色图标，隐藏黑色图标 */
[data-theme="dark"] .logo-light {
    display: none;
}
[data-theme="dark"] .logo-dark {
    display: block;
}

.settings-btn:hover {
    background: rgba(63, 167, 240, 0.15);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-glow);
}

/* 下拉菜单 */
.settings-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    backdrop-filter: var(--nav-blur);
    -webkit-backdrop-filter: var(--nav-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 0;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-smooth);
    z-index: 1100;
}

.settings-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: rgba(63, 167, 240, 0.08);
}

/* 滑动开关样式 */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--text-muted);
    transition: 0.3s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--accent);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* 移动端 FPS 开关项 */
.mobile-fps-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

/* 桌面端隐藏移动端开关（默认隐藏） */
.mobile-fps-item {
    display: flex;
}

/* 移动端隐藏设置按钮（已在媒体查询中处理） */
@media (max-width: 768px) {
    .settings-container {
        display: none;
    }
}

        @media (max-width: 768px) {
            #navbar { width: calc(100% - 18px); border-radius: var(--radius-lg); padding: 0 14px; height: 46px; top: 8px; }
            .nav-links { display: none; }
            .hamburger { display: flex; }
            .articles-grid { grid-template-columns: 1fr; gap: 18px; }
            .hobby-deck { position: relative; gap: 0; padding: 0; }
            .deck-card .hobby-card { width: 220px; }
            .deck-stage { width: 260px; height: 440px; }
            .deck-nav { width: 36px; height: 36px; margin: 0; }
            .hobby-card-img { height: 160px; }
            .hobby-card-inner { padding: 20px 18px 24px; }
            .hobby-card-excerpt { display: block; overflow: visible; min-height: 0; }
            .resource-grid { grid-template-columns: 1fr; gap: 14px; flex: none; grid-template-rows: auto; }
            #resources { height: auto; }
            #resources .section-inner { height: auto; }
            .about-grid { grid-template-columns: 1fr; max-width: 460px; }
            .about-text { padding: 24px 20px; }
            .article-card-inner { padding: 20px 16px; }
            .article-card-image { height: 140px; }
            #backToTop { bottom: 16px; right: 12px; width: 40px; height: 40px; }
            #about, #interests, #resources, #contact { padding: 80px 16px 76px; }
            .contact-panel { padding: 28px 20px; }
            .contact-list { grid-template-columns: 1fr; }
            .contact-value { font-size: 0.8rem; }
        }
        @media (max-width: 480px) {
            .hero-title { font-size: 1.7rem; }
            .view-more-btn { padding: 10px 28px; font-size: 0.8rem; }
        }

<!-- ===== 浏览器兼容性提示 ===== -->
<style>
  #browser-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 22, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #e6e6f0;
    padding: 20px;
    box-sizing: border-box;
    transition: opacity 0.4s ease;
  }
  #browser-warning-overlay.hidden {
    opacity: 0;
    pointer-events: none;
  }
  #browser-warning-overlay .warning-box {
    max-width: 560px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 40px 36px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  }
  #browser-warning-overlay .warning-box h2 {
    font-size: 1.6rem;
    margin: 0 0 12px 0;
    font-weight: 600;
    background: linear-gradient(135deg, #7bd5f5, #3fa7f0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #browser-warning-overlay .warning-box p {
    font-size: 1rem;
    line-height: 1.6;
    color: #c8c8de;
    margin: 12px 0 18px 0;
  }
  #browser-warning-overlay .warning-box ul {
    text-align: left;
    margin: 16px 0 28px 0;
    padding-left: 20px;
    color: #b0b0cc;
    font-size: 0.9rem;
    list-style: none;
  }
  #browser-warning-overlay .warning-box ul li::before {
    content: "• ";
    color: #7bd5f5;
    font-weight: bold;
  }
  #browser-warning-overlay .btn-continue {
    background: #3fa7f0;
    border: none;
    color: white;
    padding: 12px 32px;
    font-size: 1rem;
    border-radius: 60px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 4px 20px rgba(63, 167, 240, 0.3);
  }
  #browser-warning-overlay .btn-continue:hover {
    background: #7c6cf0;
    transform: scale(1.02);
  }
  #browser-warning-overlay .btn-continue:active {
    transform: scale(0.96);
  }
  #browser-warning-overlay .note {
    margin-top: 18px;
    font-size: 0.75rem;
    color: #7a7a9e;
  }
</style>