@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700;800&family=M+PLUS+1p:wght@300;400;500;600;700&family=Audiowide&family=Exo+2:wght@400;500;600;700&display=swap');

        /* 基础样式 */
        body {
            font-family: 'M PLUS 1p', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
            font-feature-settings: "palt";
            letter-spacing: 0.02em;
            color: #0f172a;
            background-color: #f8fafc;
        }

        h1,
        h2,
        h3 {
            font-family: 'M PLUS 1p', 'Noto Serif JP', 'Noto Sans JP', serif;
            letter-spacing: 0.01em;
        }

        a,
        button,
        [role="button"],
        summary,
        .mobile-menu-item,
        .plan-card button,
        .feature-card-item a {
            cursor: pointer;
        }

        a:focus-visible,
        button:focus-visible,
        [role="button"]:focus-visible,
        summary:focus-visible,
        .mobile-menu-item:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(248, 250, 252, 0.95), 0 0 0 5px rgba(245, 158, 11, 0.75);
            border-radius: 0.75rem;
        }

        /* 控制器样式 */
        #music-controller {
            position: fixed !important;
            z-index: 99999 !important;
            /* 允许 JavaScript 控制位置 */
        }

        /* 浮动语言切换器样式（与应用内页面统一） */
        .language-switcher-container {
            position: fixed;
            bottom: 24px;
            /* 增加底部间距，避免与聊天按钮重叠 */
            left: 24px;
            /* 保持在左下角 */
            z-index: 50;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .language-switcher {
            display: flex;
            gap: 8px;
            transition: all 0.3s ease;
            transform-origin: left center;
        }

        .language-switcher.hidden {
            opacity: 0;
            transform: translateX(-100%) scale(0.8);
            pointer-events: none;
        }

        .lang-toggle-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .lang-toggle-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

        .lang-toggle-btn i {
            color: #667eea;
            font-size: 16px;
            transition: transform 0.3s ease;
        }

        .lang-toggle-btn.active i {
            transform: rotate(180deg);
        }

        .lang-btn {
            background: rgba(255, 255, 255, 0.85);
            color: #1f2937;
            border-radius: 0.75rem;
            border: 1px solid rgba(148, 163, 184, 0.6);
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
            transition: all 0.25s ease;
            backdrop-filter: blur(10px);
            min-width: 38px;
            height: 38px;
            padding: 0 6px;
            font-size: 20px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .lang-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
            border-color: rgba(129, 140, 248, 0.9);
        }

        .lang-btn.active {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 6px 18px rgba(88, 80, 236, 0.45);
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .language-switcher-container {
                bottom: 0.5rem;
                left: 0.5rem;
                /* 改为左下角 */
                right: auto;
                /* 移除右侧定位 */
                flex-direction: row;
                /* 保持水平排列 */
                gap: 0.25rem;
            }

            .language-switcher.hidden {
                transform: translateX(-100%) scale(0.8);
                /* 向左滑出 */
            }

            .language-switcher {
                transform-origin: left center;
                /* 从左侧展开 */
            }

            .lang-btn {
                font-size: 0.75rem;
                padding: 0.5rem 0.75rem;
                min-width: 60px;
                text-align: center;
            }
        }

        /* 宇宙星空Logo样式 */
        .cosmic-logo-text {
            font-family: 'M PLUS 1p', 'Audiowide', cursive;
            background: linear-gradient(45deg, #FFD700, #FFA500, #FF6347, #4169E1, #9370DB);
            background-size: 500% 500%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: galaxyShift 6s ease-in-out infinite;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
            position: relative;
            font-weight: 400;
            letter-spacing: 1px;
            white-space: nowrap;
        }

        .cosmic-logo-container:hover .cosmic-logo-text {
            animation-duration: 2s;
            transform: scale(1.02);
            transition: transform 0.3s ease;
        }

        .cosmic-logo-container:hover img {
            transform: scale(1.08) rotate(3deg);
            filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4));
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .cosmic-star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s ease-in-out infinite;
        }

        .cosmic-star::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1px;
            height: 8px;
            background: white;
            transform: translate(-50%, -50%);
            opacity: 0.6;
        }

        .cosmic-star::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 1px;
            background: white;
            transform: translate(-50%, -50%);
            opacity: 0.6;
        }

        .cosmic-planet {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #FFD700, #FF6347);
            position: relative;
            animation: orbit 15s linear infinite;
            margin-left: 12px;
        }

        .cosmic-planet::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -3px;
            right: -3px;
            bottom: -1px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            animation: ringRotate 8s linear infinite;
        }

        .cosmic-subtitle {
            font-family: 'M PLUS 1p', 'Exo 2', sans-serif;
            color: #332d0a;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            font-size: 1rem;
            margin-top: 4px;
        }

        @keyframes galaxyShift {
            0% {
                background-position: 0% 50%;
            }

            20% {
                background-position: 80% 20%;
            }

            40% {
                background-position: 100% 80%;
            }

            60% {
                background-position: 20% 100%;
            }

            80% {
                background-position: 50% 30%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes twinkle {

            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }

            25% {
                opacity: 1;
                transform: scale(1.2);
            }

            50% {
                opacity: 0.6;
                transform: scale(0.8);
            }

            75% {
                opacity: 1;
                transform: scale(1.1);
            }
        }

        @keyframes orbit {
            0% {
                transform: rotate(0deg) translateX(25px) rotate(0deg);
            }

            100% {
                transform: rotate(360deg) translateX(25px) rotate(-360deg);
            }
        }

        @keyframes ringRotate {
            0% {
                transform: rotate(0deg);
            }

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

        /* 移动端专用样式 */
        .mobile-cosmic-indicator {
            display: none;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {

            /* 移动端导航栏布局调整 */
            .flex.items-center.justify-between {
                position: relative;
            }

            /* Logo居中显示 */
            .cosmic-logo-container {
                position: absolute;
                left: 35%;
                transform: translateX(-50%);
                flex-wrap: nowrap;
                align-items: center;
            }

            /* 移动端保持文字显示，但调整样式 */
            .cosmic-logo-text {
                font-size: 0.875rem;
                /* 更小字体适应居中布局 */
                line-height: 1.1;
            }

            .cosmic-subtitle {
                font-size: 0.6rem;
                /* 更小的副标题 */
                margin-top: 2px;
            }

            /* 移动端继续显示行星，但缩小 */
            .cosmic-planet {
                width: 12px;
                height: 12px;
                margin-left: 6px;
                animation: orbit 12s linear infinite;
                /* 稍慢的轨道 */
            }

            .cosmic-planet::before {
                top: -1px;
                left: -2px;
                right: -2px;
                bottom: -1px;
                animation: ringRotate 6s linear infinite;
            }

            /* 移动端Logo调整 */
            .cosmic-logo-container img {
                height: 3.5rem;
                /* 更小以适应居中布局 */
                filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.2));
            }

            .cosmic-logo-container:active img {
                transform: scale(1.05);
                filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.4));
                transition: all 0.2s ease;
            }

            /* 移动端星星调整 */
            .cosmic-star {
                opacity: 0.7;
            }

            .cosmic-star::before,
            .cosmic-star::after {
                opacity: 0.5;
            }

            /* 移动端导航栏高度调整 */
            .container.mx-auto.px-4.py-4.relative {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
            }

            /* 确保文字在移动端也显示 */
            .cosmic-logo-container>div:last-child {
                display: block !important;
                margin-left: 0.5rem;
            }
        }

        /* 小屏幕进一步优化 */
        @media (max-width: 480px) {

            /* Logo居中位置微调 */
            .cosmic-logo-container {
                left: 35%;
                transform: translateX(-50%);
                max-width: calc(100vw - 120px);
                /* 为左右按钮留出空间 */
            }

            .cosmic-logo-text {
                font-size: 0.75rem;
                /* 更小字体适应超小屏幕 */
                letter-spacing: 0.5px;
            }

            .cosmic-subtitle {
                font-size: 0.55rem;
                margin-top: 1px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .cosmic-planet {
                width: 10px;
                height: 10px;
                margin-left: 4px;
            }

            .cosmic-logo-container img {
                height: 3rem;
            }

            /* 超小屏幕减少星星数量 */
            .cosmic-star:nth-child(odd) {
                display: none;
            }

            /* 超小屏幕的字体进一步缩放 */
            .cosmic-logo-container {
                gap: 0.25rem;
            }
        }

        /* 超小屏幕特殊处理 */
        @media (max-width: 360px) {

            /* 极小屏幕Logo居中优化 */
            .cosmic-logo-container {
                max-width: calc(100vw - 100px);
                /* 更紧凑的布局 */
            }

            .cosmic-logo-text {
                font-size: 0.65rem;
                line-height: 1;
            }

            .cosmic-subtitle {
                font-size: 0.5rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 180px;
            }

            .cosmic-logo-container img {
                height: 2.5rem;
            }

            .cosmic-planet {
                width: 8px;
                height: 8px;
                margin-left: 3px;
            }

            /* 汉堡菜单按钮在极小屏幕上的优化 */
            .mobile-menu-btn {
                padding: 0.375rem;
                min-width: 40px;
                min-height: 40px;
            }

            .hamburger {
                width: 20px;
                height: 15px;
            }
        }

        /* 确保主要内容在背景之上 */
        .main-content,
        nav,
        header,
        main,
        section,
        .container {
            position: relative;
            z-index: 10;
        }

        /* 渐变背景 */
        .gradient-bg {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #334155 100%);
        }

        /* 动画效果 */
        .hero-animation {
            animation: float 6s ease-in-out infinite;
        }

        /* 定价卡片样式 */
        .plan-card {
            transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
        }

        .plan-card:hover {
            box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
        }

        .popular-badge {
            background: linear-gradient(45deg, #d97706, #f59e0b);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: translateX(-50%) scale(1);
            }

            50% {
                transform: translateX(-50%) scale(1.05);
            }
        }

        /* 模态框样式 */
        .modal {
            backdrop-filter: blur(10px);
            background: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }

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

        /* 功能卡片 */
        .feature-card {
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }

        /* 按钮样式 */
        .btn-primary {
            background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
            color: #fff;
            border: 1px solid rgba(180, 83, 9, 0.2);
            transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
            box-shadow: 0 12px 28px rgba(180, 83, 9, 0.3);
            border-color: rgba(146, 64, 14, 0.4);
        }

        .btn-secondary {
            background: rgba(15, 23, 42, 0.35);
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .btn-secondary:hover {
            background: rgba(15, 23, 42, 0.52);
            border-color: rgba(245, 158, 11, 0.6);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
        }

        /* 动画关键帧 */
        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .pulse-dot {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        .scroll-indicator {
            animation: bounce 2s infinite;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.85rem 1.15rem;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(15, 23, 42, 0.28);
            backdrop-filter: blur(14px);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
        }

        .hero-scroll-hint {
            font-weight: 600;
            letter-spacing: 0.04em;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.12);
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-10px);
            }

            60% {
                transform: translateY(-5px);
            }
        }

        body.theme-sakura .scroll-indicator {
            background: rgba(255, 255, 255, 0.72);
            border-color: rgba(203, 213, 225, 0.8);
            box-shadow: 0 12px 28px rgba(148, 163, 184, 0.18);
        }

        body.theme-sakura .scroll-indicator svg,
        body.theme-sakura .hero-scroll-hint {
            color: #334155 !important;
            text-shadow: none;
        }

        body:not(.theme-sakura) .scroll-indicator {
            background: rgba(15, 23, 42, 0.5);
            border-color: rgba(255, 255, 255, 0.16);
        }

        body:not(.theme-sakura) .scroll-indicator svg,
        body:not(.theme-sakura) .hero-scroll-hint {
            color: rgba(248, 250, 252, 0.88) !important;
        }

        /* 移动端导航菜单 */
        .mobile-menu {
            display: none;
        }

        .mobile-menu.active {
            display: block;
        }

        /* 现代响应式导航栏样式 */
        @media (max-width: 1180px) {
            .nav-desktop {
                display: none !important;
            }
        }

        @media (min-width: 1181px) {
            .nav-desktop {
                display: flex !important;
            }
        }

        /* 汉堡菜单按钮样式 */
        .hamburger {
            width: 24px;
            height: 18px;
            position: relative;
            cursor: pointer;
        }

        /* 移动端汉堡菜单按钮位置优化 */
        @media (max-width: 1180px) {
            .mobile-menu-btn {
                position: relative;
                z-index: 100;
            }

            /* 确保汉堡菜单在左上角有足够的点击区域 */
            .mobile-menu-btn {
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .hamburger-line {
            display: block;
            height: 2px;
            width: 100%;
            background: #374151;
            border-radius: 1px;
            position: absolute;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .hamburger-line:nth-child(1) {
            top: 0;
        }

        .hamburger-line:nth-child(2) {
            top: 8px;
        }

        .hamburger-line:nth-child(3) {
            top: 16px;
        }

        /* 汉堡菜单激活状态 */
        .mobile-menu-btn.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg);
            top: 8px;
        }

        .mobile-menu-btn.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }

        .mobile-menu-btn.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg);
            top: 8px;
        }

        /* 移动端菜单覆盖层 - 强制顶层避免 iOS Safari backdrop-filter 问题 */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(2, 6, 23, 0.68);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 2147483647;  /* Max safe integer,盖过所有 nav/banner */
            transform: translateZ(0);  /* 强制 GPU 合成层,避免 iOS Safari fixed 失效 */
            -webkit-transform: translateZ(0);
            will-change: opacity, visibility;
        }

        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 移动端菜单内容 */
        .mobile-menu-content {
            position: absolute;
            top: 0;
            right: 0;
            width: 320px;
            max-width: 85vw;
            height: 100vh;
            background: linear-gradient(180deg, rgba(8, 18, 38, 0.98) 0%, rgba(10, 16, 32, 0.98) 100%);
            padding: 40px 24px 24px;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            box-shadow: -18px 0 60px rgba(2, 6, 23, 0.55);
            z-index: 200001;
            display: flex;
            flex-direction: column;
            color: #f8fafc;
            border-left: 1px solid rgba(148, 163, 184, 0.16);
        }

        body.theme-sakura .mobile-menu-content {
            background: rgba(255, 245, 250, 0.98);
            color: #3f1a4b;
            border-left: 1px solid rgba(210, 54, 105, 0.18);
        }

        .mobile-menu-overlay.active .mobile-menu-content {
            transform: translateX(0);
        }

        /* 移动端菜单链接样式 */
        .mobile-menu-link {
            display: flex;
            align-items: center;
            padding: 18px 12px;
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-weight: 600;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.2s ease;
            border-radius: 12px;
            margin-bottom: 4px;
        }

        body.theme-sakura .mobile-menu-link {
            color: #4b0082;
            border-bottom: 1px solid rgba(210, 54, 105, 0.05);
        }

        .mobile-menu-link:hover {
            background: rgba(148, 163, 184, 0.12);
            color: #f8fafc;
            padding-left: 20px;
        }

        body.theme-sakura .mobile-menu-link:hover {
            background: rgba(210, 54, 105, 0.05);
            color: #D23669;
        }

        .mobile-menu-link:hover {
            color: #f8fafc;
            background: rgba(59, 130, 246, 0.16);
            margin: 0 -24px;
            padding-left: 24px;
            padding-right: 24px;
        }

        /* 移动端菜单关闭按钮 */
        .mobile-close-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            min-width: 40px;   /* 覆盖 mobile.css 的 44px 强制 — 防止 320px 宽菜单挤出按钮 */
            min-height: 40px;
            max-width: 100%;
            flex-shrink: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .mobile-close-btn i {
            color: inherit;     /* 继承 mobile-menu-content 的 color,在 dark/sakura 主题下都可见 */
            pointer-events: none;
        }

        .mobile-close-btn:hover {
            background-color: rgba(148, 163, 184, 0.16);
            transform: scale(1.06);
        }

        .mobile-close-btn:active {
            transform: scale(0.95);
        }

        .mobile-menu-link:last-child {
            border-bottom: none;
        }

        .mobile-menu-title {
            color: #f8fafc;
            letter-spacing: 0.02em;
        }

        .mobile-menu-item {
            color: #f8fafc;
            background: rgba(15, 23, 42, 0.55);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }

        .mobile-menu-item:hover {
            background: rgba(59, 130, 246, 0.25);
            border-color: rgba(59, 130, 246, 0.45);
        }

        .mobile-menu-item i {
            filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.35));
        }

        .mobile-login-link {
            color: #f8fafc;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 14px;
        }

        body.theme-sakura .mobile-menu-item {
            background: rgba(255, 255, 255, 0.85);
            border-color: rgba(210, 54, 105, 0.25);
            color: #4b0082;
        }

        body.theme-sakura .mobile-menu-title {
            color: #4b0082;
        }

        body.theme-sakura .mobile-menu-item:hover {
            background: rgba(210, 54, 105, 0.1);
            border-color: rgba(210, 54, 105, 0.45);
        }

        body.theme-sakura .mobile-login-link {
            color: #4b0082;
            background: rgba(210, 54, 105, 0.08);
            border-color: rgba(210, 54, 105, 0.25);
        }



        /* 响应式优化 */
        @media (max-width: 768px) {
            .hero-animation {
                animation: none;
                /* 移动端禁用动画以提升性能 */
            }

            .mobile-menu-content {
                width: 100vw;
                max-width: 100vw;
                padding-top: calc(112px + env(safe-area-inset-top));
            }
        }

        /* 自定义断点类 */
        @media (min-width: 1181px) {
            .nav-desktop\:flex {
                display: flex !important;
            }

            .nav-desktop\:hidden {
                display: none !important;
            }

            .mobile-menu-overlay.force-show {
                display: block !important;
            }
        }

        @media (max-width: 1180px) {
            .nav-desktop\:flex {
                display: none !important;
            }

            .nav-mobile-right {
                margin-left: auto;
                justify-content: flex-end;
                flex: 1;
            }

            .nav-desktop\:hidden {
                display: block !important;
            }
        }

        .hero-section-behind {
            z-index: -1;
            position: relative;
        }

        /* Hero区域音乐控制按钮样式 */
        .hero-music-btn {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            user-select: none;
        }

        .hero-music-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
        }

        /* ============================================================ */
        /* 主题系统 (Theme System) */
        /* ============================================================ */
        :root {
            --theme-primary: #F59E0B;
            --theme-secondary: #0EA5A4;
            --theme-bg: #0F172A;
            --theme-text: #F8FAFC;
        }

        /* 樱花物语风格 (Sakura Theme) - 柔美优雅，适合女性用户 */
        body.theme-sakura {
            --theme-primary: #D23669;
            /* 玫瑰红 */
            --theme-secondary: #FFB6C1;
            /* 浅樱粉 */
            --theme-bg: #FFF0F5;
            /* 熏衣草红背景 */
            --theme-text: #4B0082;
            /* 靛紫文字 */
            background-color: var(--theme-bg) !important;
            color: var(--theme-text) !important;
        }

        /* 樱花主题下的全局背景覆盖 */
        body.theme-sakura .gradient-bg,
        body.theme-sakura #bg-canvas-container,
        body.theme-sakura .cosmic-bg {
            background: linear-gradient(135deg, #FFF0F5 0%, #FFD1DC 50%, #FFE4E1 100%) !important;
        }

        /* 隐藏或替换暗色模式下的宇宙元素 */
        body.theme-sakura .cosmic-star,
        body.theme-sakura .cosmic-planet {
            opacity: 0.2;
        }

        /* 樱花主题卡片样式 */
        body.theme-sakura .feature-card,
        body.theme-sakura .bg-slate-800,
        body.theme-sakura .bg-gray-800,
        body.theme-sakura .bg-white\/5 {
            background: rgba(255, 255, 255, 0.8) !important;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(210, 54, 105, 0.1) !important;
            color: var(--theme-text) !important;
            box-shadow: 0 10px 25px rgba(210, 54, 105, 0.05) !important;
        }

        body.theme-sakura p,
        body.theme-sakura .text-gray-400,
        body.theme-sakura .text-slate-400 {
            color: #708090 !important;
            /* 灰石色，提升阅读舒适度 */
        }

        /* hero 区 demo 终端: 白天模式必须保留深色玻璃感,否则 text-white 在白底上不可见
           L1040 通用规则把 .bg-gray-800 改成 80% 白底,会破坏终端的"黑底+彩色字"设计
           这里用更具体的 selector 覆盖回去 */
        body.theme-sakura .demo-terminal {
            background: #1f2937 !important;            /* 保持 Tailwind bg-gray-800 实色 */
            color: #4ade80 !important;                /* 保持 Tailwind text-green-400 */
            border-color: rgba(255, 255, 255, 0.05) !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
        }
        /* 终端内嵌的彩色文字也必须恢复(被 L1045 color: var(--theme-text) !important 覆盖了) */
        body.theme-sakura .demo-terminal .text-white   { color: #ffffff !important; }
        body.theme-sakura .demo-terminal .text-green-400 { color: #4ade80 !important; }
        body.theme-sakura .demo-terminal .text-blue-400 { color: #60a5fa !important; }
        body.theme-sakura .demo-terminal .text-gray-300 { color: #d1d5db !important; }

        body.theme-sakura h1,
        body.theme-sakura h2,
        body.theme-sakura h3 {
            color: #D23669 !important;
        }

        /* 樱花主题按钮 */
        body.theme-sakura .bg-gradient-to-r,
        body.theme-sakura .btn-primary {
            background: linear-gradient(135deg, #D23669 0%, #FFB6C1 100%) !important;
            color: white !important;
        }

        /* 商务主题 Hero 文案可读性增强 */
        body:not(.theme-sakura) .hero-text-container {
            color: #e2e8f0;
        }

        body:not(.theme-sakura) .hero-text-container h1 {
            color: #f8fafc !important;
        }

        body:not(.theme-sakura) .hero-text-container p {
            color: #cbd5e1 !important;
        }

        .hero-golden-title {
            background: linear-gradient(120deg, #f9e7a1 0%, #f5c542 35%, #d49b16 55%, #f9e7a1 100%);
            background-size: 260% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 6px 16px rgba(212, 155, 22, 0.35);
            animation: goldenShine 4.2s ease-in-out infinite;
        }

        @keyframes goldenShine {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* 主题切换浮动按钮样式 */
        .theme-switcher-container {
            position: fixed;
            bottom: 80px;
            left: 24px;
            z-index: 1000;
        }

        @media (max-width: 768px) {
            .theme-switcher-container {
                left: auto;
                right: 24px;
                bottom: 80px;
            }
        }

        .theme-toggle-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f59e0b, #f97316);
            border: 2px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            color: white;
            font-size: 18px;
        }

        body.theme-sakura .theme-toggle-btn {
            background: linear-gradient(135deg, #D23669, #FFB6C1);
            transform: rotate(180deg);
        }

        .theme-toggle-btn:hover {
            filter: brightness(1.06);
            box-shadow: 0 8px 22px rgba(180, 83, 9, 0.35);
        }

        /* 主题切换提示框 */
        .theme-tooltip {
            position: absolute;
            left: 55px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .theme-switcher-container:hover .theme-tooltip {
            opacity: 1;
            left: 60px;
        }

        /* ============================================================ */
        /* 高级导航栏 (Premium Navigation) */
        /* ============================================================ */
        .glass-nav {
            background: rgba(15, 23, 42, 0.62);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(148, 163, 184, 0.18);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #main-nav {
            z-index: 150000;
        }

        body.theme-sakura .glass-nav {
            background: rgba(255, 240, 245, 0.85);
            border-bottom: 1px solid rgba(210, 54, 105, 0.16);
        }

        .nav-scrolled {
            padding-top: 0.25rem !important;
            padding-bottom: 0.25rem !important;
            background: rgba(15, 23, 42, 0.95);
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
        }

        body.theme-sakura .nav-scrolled {
            background: rgba(255, 240, 245, 0.95);
            box-shadow: 0 10px 30px rgba(210, 54, 105, 0.1);
        }

        .premium-nav-link {
            position: relative;
            font-weight: 600;
            letter-spacing: 0.03em;
            transition: all 0.3s ease;
            color: rgba(248, 250, 252, 0.88);
        }

        body.theme-sakura .premium-nav-link {
            color: rgba(75, 0, 130, 0.85);
        }

        .premium-nav-link:hover {
            color: #fff;
        }

        body.theme-sakura .premium-nav-link:hover {
            color: #D23669;
        }

        .premium-nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--theme-secondary), transparent);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .premium-nav-link:hover::after {
            width: 80%;
        }

        .nav-links-desktop {
            display: flex;
            align-items: center;
            gap: clamp(14px, 1.4vw, 32px);
            flex-wrap: nowrap;
            white-space: nowrap;
            min-width: 0;
        }

        .nav-links-desktop .premium-nav-link {
            white-space: nowrap;
            font-size: clamp(0.92rem, 0.65vw + 0.34rem, 1.08rem);
            line-height: 1.1;
        }

        @media (min-width: 1181px) and (max-width: 1400px) {
            nav .container .flex.items-center.justify-between {
                flex-wrap: nowrap;
                align-items: center;
                gap: 0.5rem;
            }

            .cosmic-logo-container {
                flex: 0 1 auto;
                min-width: 0;
                max-width: 20rem;
            }

            .nav-links-desktop {
                order: 0;
                flex: 1 1 auto;
                justify-content: center;
                gap: clamp(0.65rem, 0.8vw, 0.9rem);
                padding-top: 0;
            }

            .nav-links-desktop .premium-nav-link {
                font-size: clamp(0.9rem, 0.7vw + 0.3rem, 1rem);
            }

            .nav-mobile-right {
                order: 0;
                margin-left: auto;
                flex: 0 0 auto;
                gap: 0.5rem;
            }

            #guest-links-desktop,
            #logged-in-actions-desktop {
                gap: 0.65rem;
            }

            #guest-links-desktop a,
            #guest-links-desktop button,
            #logged-in-actions-desktop button {
                padding-left: 0.8rem;
                padding-right: 0.8rem;
            }
        }

        /* 统一用户状态图标 */
        #user-avatar-desktop,
        #user-avatar-mobile {
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.28);
            transition: transform 0.3s ease;
        }

        #user-avatar-desktop:hover {
            transform: scale(1.1) rotate(5deg);
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }

        /* ============================================================
           锚点跳转留白(2026-06-18 Hermes)
           防止 sticky nav 遮挡 #features #pricing #about #contact 标题
           ============================================================ */
        html {
            scroll-padding-top: 80px;  /* 桌面端:nav 高度 + 12px top offset + 缓冲 */
            scroll-behavior: smooth;
        }
        @media (max-width: 768px) {
            html {
                scroll-padding-top: 64px;  /* 移动端:nav h-10 + top-3 + 缓冲 */
            }
        }

        /* ============================================================
           暗色模式 (body:not(.theme-sakura) - 2026-06-18 Hermes)
           点击 themeFab 移除 theme-sakura 类时启用
           ============================================================ */

        /* 1. 暗色 body 基础 */
        body:not(.theme-sakura) {
            --theme-primary: #00d4aa;
            --theme-secondary: #6c5ce7;
            --theme-bg: #0F172A;
            --theme-text: #F8FAFC;
            background-color: var(--theme-bg) !important;
            color: var(--theme-text) !important;
        }

        /* 2. Hero 区域: 深色渐变覆盖樱花图 */
        body:not(.theme-sakura) .hero-bg-sakura {
            background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #312E81 100%) !important;
        }
        body:not(.theme-sakura) .hero-bg-sakura img {
            opacity: 0 !important;  /* 隐藏樱花图 */
        }
        /* 隐藏樱花粉色覆盖层(原 body.theme-sakura 下的浅粉渐变) */
        body:not(.theme-sakura) .hero-bg-sakura .bg-gradient-to-b,
        body:not(.theme-sakura) .bg-gradient-to-b.from-white\/20 {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, transparent 50%) !important;
        }

        /* 2b. 隐藏 .bg-pink-50/40 这种樱花浅色覆盖(原 hero-bg-sakura 的 pink 渐变) */
        body:not(.theme-sakura) .from-pink-50\/40,
        body:not(.theme-sakura) .to-pink-100\/60,
        body:not(.theme-sakura) .from-white\/20,
        body:not(.theme-sakura) .via-pink-50\/40 {
            background-color: transparent !important;
        }

        /* 3. 全局背景(canvas/cosmos) */
        body:not(.theme-sakura) .gradient-bg,
        body:not(.theme-sakura) #bg-canvas-container,
        body:not(.theme-sakura) .cosmic-bg {
            background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #312E81 100%) !important;
        }
        body:not(.theme-sakura) .cosmic-star,
        body:not(.theme-sakura) .cosmic-planet {
            opacity: 0.5;
        }

        /* 4. 卡片: 深色半透明 */
        body:not(.theme-sakura) .feature-card,
        body:not(.theme-sakura) .bg-slate-800,
        body:not(.theme-sakura) .bg-gray-800,
        body:not(.theme-sakura) .bg-white\/5 {
            background: rgba(30, 41, 59, 0.6) !important;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(148, 163, 184, 0.2) !important;
            color: var(--theme-text) !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
        }

        /* 5. 文字颜色 */
        body:not(.theme-sakura) p,
        body:not(.theme-sakura) .text-gray-400,
        body:not(.theme-sakura) .text-slate-400 {
            color: #94A3B8 !important;
        }
        body:not(.theme-sakura) h1,
        body:not(.theme-sakura) h2,
        body:not(.theme-sakura) h3 {
            color: #F8FAFC !important;
        }

        /* 6. 按钮: 渐变保持(用 primary 色) */
        body:not(.theme-sakura) .bg-gradient-to-r,
        body:not(.theme-sakura) .btn-primary {
            background: linear-gradient(135deg, #00d4aa 0%, #6c5ce7 100%) !important;
            color: white !important;
        }

        /* 7. Hero 文字容器(已在 1065+ 规则里覆盖) */

        /* 8. footer + 暗色卡片 */
        body:not(.theme-sakura) .bg-gray-900 {
            background: #020617 !important;
        }

        /* 9. AI demo 卡片(深色终端)保持不变 */

        /* 10. mobile menu */
        body:not(.theme-sakura) .mobile-menu-content {
            background: rgba(15, 23, 42, 0.95) !important;
            border: 1px solid rgba(148, 163, 184, 0.2) !important;
        }
        body:not(.theme-sakura) .mobile-menu-link,
        body:not(.theme-sakura) .mobile-login-link {
            color: #F8FAFC !important;
        }
        body:not(.theme-sakura) .mobile-menu-item {
            border-color: rgba(148, 163, 184, 0.2) !important;
        }
        body:not(.theme-sakura) .mobile-menu-title {
            color: #94A3B8 !important;
        }

        /* ============================================================
           11. 夜间模式文本对比度修复 (2026-06-23 Hermes)
           原 dark 规则仅覆盖 h1/h2/h3 + .text-gray-400/.text-slate-400,
           遗漏大量 text-gray-500/600/700/800 + bg-white 卡片 + bg-gray-50 段落
           导致 features/demo/pricing/about/contact/FAQ 多处文字看不清
           ============================================================ */

        /* 11.1 浅色 section 背景 → 深色 (demo/pricing/about/FAQ 外壳) */
        body:not(.theme-sakura) section.bg-gray-50,
        body:not(.theme-sakura) #demo,
        body:not(.theme-sakura) #pricing,
        body:not(.theme-sakura) #about {
            background-color: #0F172A !important;
        }
        body:not(.theme-sakura) section.bg-white,
        body:not(.theme-sakura) #contact {
            background-color: #111827 !important;
        }

        /* 11.2 段落正文颜色梯度 (gray-500/600/700/800 → 夜间可读色) */
        body:not(.theme-sakura) .text-gray-800 {
            color: #F1F5F9 !important;  /* 标题 */
        }
        body:not(.theme-sakura) .text-gray-700 {
            color: #E2E8F0 !important;  /* 强正文 */
        }
        body:not(.theme-sakura) .text-gray-600 {
            color: #CBD5E1 !important;  /* 弱正文 */
        }
        body:not(.theme-sakura) .text-gray-500 {
            color: #94A3B8 !important;  /* 注脚 */
        }
        body:not(.theme-sakura) .text-slate-700 {
            color: #E2E8F0 !important;
        }
        body:not(.theme-sakura) .text-slate-600 {
            color: #CBD5E1 !important;
        }
        body:not(.theme-sakura) .text-slate-500 {
            color: #94A3B8 !important;
        }

        /* 11.3 白色卡片 → 深色玻璃 (pricing 4 卡 + perks 卡 + FAQ summary) */
        body:not(.theme-sakura) .plan-card,
        body:not(.theme-sakura) details.bg-white,
        body:not(.theme-sakura) summary.bg-white,
        body:not(.theme-sakura) .bg-white.rounded-2xl,
        body:not(.theme-sakura) .bg-white.rounded-lg {
            background: rgba(30, 41, 59, 0.7) !important;
            color: #F1F5F9 !important;
            border-color: rgba(148, 163, 184, 0.25) !important;
        }
        /* plan-card 子元素 span 也继承白色,避免仍是深色 */
        body:not(.theme-sakura) .plan-card span,
        body:not(.theme-sakura) .plan-card li {
            color: inherit;
        }
        /* plan-card 里用 text-gray-400 的"未含项"加大对比 */
        body:not(.theme-sakura) .plan-card .text-gray-400 {
            color: #64748B !important;  /* slate-500 — 仍偏暗但可读 */
        }

        /* 11.4 FAQ 容器 (bg-gray-50 + bg-gray-50 rounded-2xl) */
        body:not(.theme-sakura) .bg-gray-50.rounded-2xl {
            background: rgba(15, 23, 42, 0.6) !important;
            border: 1px solid rgba(148, 163, 184, 0.18);
        }

        /* 11.5 pricing login notice (bg-blue-50/border-blue-200/text-blue-800) */
        body:not(.theme-sakura) #pricing-login-notice {
            background: rgba(59, 130, 246, 0.12) !important;
            border-color: rgba(96, 165, 250, 0.35) !important;
        }
        body:not(.theme-sakura) #pricing-login-notice .text-blue-800 {
            color: #BFDBFE !important;
        }

        /* 11.6 Contact 邮箱块 (bg-purple-100 图标框 + text-gray-800/600) */
        body:not(.theme-sakura) .bg-purple-100 {
            background: rgba(168, 85, 247, 0.18) !important;
        }

        /* 11.7 pricing 计划名/价格 强色保留, 但确保 dark 下看得清 */
        body:not(.theme-sakura) .text-green-600 {
            color: #34D399 !important;
        }
        body:not(.theme-sakura) .text-blue-600 {
            color: #60A5FA !important;
        }
        body:not(.theme-sakura) .text-purple-600 {
            color: #A78BFA !important;
        }
        body:not(.theme-sakura) .text-yellow-500 {
            color: #FBBF24 !important;
        }

        /* 11.8 feature-card-item 已经是深色 (#0F172A) — 但浅色装饰可能在 dark 下消失
               这里只确保 h3 (text-white theme-sakura:text-slate-800) 在 dark 下也是白色可见 */
        body:not(.theme-sakura) .feature-card-item h3.text-white {
            color: #FFFFFF !important;
        }
        body:not(.theme-sakura) .feature-card-item .text-slate-300 {
            color: #CBD5E1 !important;
        }

        /* 11.9 最终 CTA 段 (gradient-bg text-white) — dark 下保持白 */
        body:not(.theme-sakura) section.gradient-bg h2,
        body:not(.theme-sakura) section.gradient-bg p {
            color: #FFFFFF !important;
        }

        /* 11.10 footer (bg-gray-900) — 已覆盖 background,但 text-gray-400 / 边框需明确 */
        body:not(.theme-sakura) footer.bg-gray-900 {
            background: #020617 !important;
        }
        body:not(.theme-sakura) footer .border-gray-800 {
            border-color: rgba(148, 163, 184, 0.2) !important;
        }
        body:not(.theme-sakura) footer .text-gray-400 {
            color: #94A3B8 !important;
        }
        body:not(.theme-sakura) footer .hover\:text-white:hover {
            color: #FFFFFF !important;
        }