@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");
        
        :root {
            --primary-color: #0f766e;
            --primary-hover: #115e59;
            --secondary-color: #334155;
            --success-color: #166534;
            --warning-color: #b45309;
            --danger-color: #b91c1c;
            --background: #eef2f5;
            --card-bg: #ffffff;
            --panel-bg: #dde5ec;
            --text-primary: #0b1724;
            --text-secondary: #425466;
            --border-color: #b8c4d1;
        }

        html,
        body {
            min-height: 100%;
        }
        
        body {
            font-family: "Noto Sans SC", sans-serif;
            background-color: var(--background);
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        main {
            flex: 1 0 auto;
            width: 100%;
        }

        .top-nav {
            background-color: #0f766e;
            box-shadow: none;
            position: sticky;
            top: 0;
            z-index: 40;
        }

        .top-nav-link {
            padding: 8px 12px;
            border-radius: 2px;
            font-size: 15px;
            font-weight: 600;
            white-space: nowrap;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .top-nav-link:hover {
            background-color: rgba(255, 255, 255, 0.12);
            color: #ccfbf1;
        }

        .top-nav-search {
            border-radius: 2px;
            box-shadow: none;
        }
        
        .novel-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .novel-card:hover {
            transform: translateY(-2px);
            box-shadow: none;
        }
        
        .chapter-item {
            transition: all 0.2s ease;
        }
        .chapter-item:hover {
            background-color: #f1f5f9;
        }
        
        .reader-container {
            margin: 0 auto;
            padding: 20px;
        }
        .reader-content {
            line-height: 1.8;
            font-size: 16px;
        }
        .reader-content p {
            margin-bottom: 16px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            transition: all 0.2s ease;
        }
        .btn-primary:hover {
            background-color: var(--primary-hover);
        }

        #ai-panel {
            border: 1px solid var(--border-color);
            box-shadow: none;
        }

        #search-input {
            background-color: #ffffff !important;
            color: var(--text-primary) !important;
            border: 1px solid #5eead4 !important;
        }
        #search-input::placeholder {
            color: #64748b !important;
        }
        
        .loading-spinner {
            display: none;
        }

        .flat-loader {
            display: flex;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        .flat-loader span {
            width: 48px;
            height: 8px;
            background-color: #99f6e4;
            animation: flatPulse 1s ease-in-out infinite;
        }

        .flat-loader span:nth-child(2) {
            animation-delay: 0.15s;
            background-color: #5eead4;
        }

        .flat-loader span:nth-child(3) {
            animation-delay: 0.3s;
            background-color: #14b8a6;
        }

        .flat-loader--sm span {
            width: 36px;
            height: 6px;
        }

        .flat-loader--lg span {
            width: 64px;
            height: 10px;
        }

        .ai-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        }

        .ai-back-btn {
            background-color: #ffffff;
            border: 1px solid var(--border-color);
            color: #0f172a;
            border-radius: 2px;
            padding: 8px 14px;
            font-weight: 600;
            box-shadow: none;
            transition: all 0.2s ease;
        }

        .ai-back-btn:hover {
            background-color: #f0fdfa;
        }

        .ai-surface {
            background-color: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 2px;
            box-shadow: none;
            overflow: hidden;
        }

        .ai-input {
            border: 1px solid var(--border-color);
            border-radius: 2px;
            background-color: #ffffff;
        }

        .ai-primary-btn {
            background-color: var(--primary-color);
            color: #ffffff;
            border: 1px solid var(--primary-color);
            border-radius: 2px;
            transition: background-color 0.2s ease;
        }

        .ai-primary-btn:hover {
            background-color: var(--primary-hover);
        }

        .ai-secondary-btn {
            background-color: #f8fafc;
            color: #334155;
            border: 1px solid var(--border-color);
            border-radius: 2px;
            transition: all 0.2s ease;
        }

        .ai-secondary-btn:hover {
            background-color: #f1f5f9;
        }

        .ai-chip-btn {
            border: 1px solid var(--border-color);
            background-color: #ffffff;
            color: #334155;
            border-radius: 2px;
            padding: 6px 12px;
            font-size: 13px;
            transition: all 0.2s ease;
        }

        .ai-chip-btn:hover {
            border-color: #5eead4;
            color: #0f766e;
            background-color: #f0fdfa;
        }

        /* ============================================================
         *  全局扁平化样式强制覆盖
         *  规则: 所有元素矩形设计，无阴影、无圆角
         * ========================================================= */

        /* --- 阴影覆盖: 所有 Tailwind 阴影类强制移除 --- */
        .shadow,
        .shadow-sm,
        .shadow-md,
        .shadow-lg,
        .shadow-xl,
        .shadow-2xl,
        .shadow-inner,
        .shadow-none {
            box-shadow: none !important;
        }

        /* 悬停/聚焦状态的阴影也移除 */
        .hover\:shadow-sm:hover,
        .hover\:shadow-md:hover,
        .hover\:shadow-lg:hover,
        .hover\:shadow-xl:hover,
        .hover\:shadow-2xl:hover,
        .hover\:shadow-inner:hover {
            box-shadow: none !important;
        }

        /* --- 圆角覆盖: 所有 Tailwind 圆角类强制为 0 (矩形) --- */
        .rounded,
        .rounded-sm,
        .rounded-md,
        .rounded-lg,
        .rounded-xl,
        .rounded-2xl,
        .rounded-3xl,
        .rounded-full,
        /* 方向圆角 */
        .rounded-t,
        .rounded-r,
        .rounded-b,
        .rounded-l,
        .rounded-t-sm,
        .rounded-t-md,
        .rounded-t-lg,
        .rounded-t-xl,
        .rounded-t-2xl,
        .rounded-t-3xl,
        .rounded-t-full,
        .rounded-r-sm,
        .rounded-r-md,
        .rounded-r-lg,
        .rounded-r-xl,
        .rounded-r-2xl,
        .rounded-r-3xl,
        .rounded-r-full,
        .rounded-b-sm,
        .rounded-b-md,
        .rounded-b-lg,
        .rounded-b-xl,
        .rounded-b-2xl,
        .rounded-b-3xl,
        .rounded-b-full,
        .rounded-l-sm,
        .rounded-l-md,
        .rounded-l-lg,
        .rounded-l-xl,
        .rounded-l-2xl,
        .rounded-l-3xl,
        .rounded-l-full,
        /* 双角圆角 */
        .rounded-tl,
        .rounded-tr,
        .rounded-br,
        .rounded-bl,
        .rounded-tl-sm,
        .rounded-tl-md,
        .rounded-tl-lg,
        .rounded-tl-xl,
        .rounded-tl-2xl,
        .rounded-tl-3xl,
        .rounded-tl-full,
        .rounded-tr-sm,
        .rounded-tr-md,
        .rounded-tr-lg,
        .rounded-tr-xl,
        .rounded-tr-2xl,
        .rounded-tr-3xl,
        .rounded-tr-full,
        .rounded-br-sm,
        .rounded-br-md,
        .rounded-br-lg,
        .rounded-br-xl,
        .rounded-br-2xl,
        .rounded-br-3xl,
        .rounded-br-full,
        .rounded-bl-sm,
        .rounded-bl-md,
        .rounded-bl-lg,
        .rounded-bl-xl,
        .rounded-bl-2xl,
        .rounded-bl-3xl,
        .rounded-bl-full {
            border-radius: 0 !important;
        }

        /* --- 通用兜底: 所有元素强制矩形、无阴影 --- */
        /* 使用低优先级选择器，仅作为最后兜底 (不覆盖上面的 !important 规则) */
        * {
            box-shadow: none !important;
        }

        /* 自定义组件类的圆角也强制为 0 */
        .top-nav-link,
        .top-nav-search,
        .novel-card,
        .ai-back-btn,
        .ai-surface,
        .ai-input,
        .ai-primary-btn,
        .ai-secondary-btn,
        .ai-chip-btn,
        #ai-panel,
        #selection-menu,
        #mobile-menu a,
        .reader-toolbar-btn {
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        /* 渐变背景保留，但移除其上的阴影效果 */
        .bg-gradient-to-r,
        .bg-gradient-to-br,
        .bg-gradient-to-b,
        .bg-gradient-to-t,
        .bg-gradient-to-l,
        .bg-gradient-to-tr,
        .bg-gradient-to-bl {
            box-shadow: none !important;
        }
        
        @keyframes flatPulse {
            0%, 100% { opacity: 0.3; transform: scaleX(0.95); }
            50% { opacity: 1; transform: scaleX(1); }
        }

        @media (max-width: 768px) {
            .ai-page-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .ai-back-btn {
                width: 100%;
                text-align: center;
            }

            .flat-loader span {
                width: 36px;
            }

            .top-nav {
                padding: 8px 12px;
            }

            .top-nav-link {
                padding: 6px 8px;
                font-size: 14px;
            }

            #search-input {
                font-size: 16px;
            }

            .top-nav a[href="/"] {
                font-size: 18px;
            }

            #mobile-menu-button {
                padding: 8px 12px;
            }

            #mobile-menu {
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                margin-top: 8px;
                padding-top: 8px;
            }

            #mobile-menu a {
                padding: 10px 12px;
                display: flex;
                align-items: center;
                gap: 8px;
                border-radius: 2px;
                transition: background-color 0.2s ease;
            }

            #mobile-menu a:hover {
                background-color: rgba(255, 255, 255, 0.08);
            }

            #user-menu button {
                font-size: 14px;
                padding: 6px 12px;
            }

            main.container {
                padding-left: 12px;
                padding-right: 12px;
            }

            .ai-surface,
            .ai-page-header {
                margin-left: 0;
                margin-right: 0;
            }
        }