.ocean-blue-theme {
            --bg-light: #E3F2FD;
            --bg-lighter: #BBDEFB;
            --border-color: #BBDEFB;
            --filter-bg: rgba(225, 245, 254, 0.95);
            --poem-desc-bg: rgba(225, 245, 254, 0.98);
            --poem-desc-border: #2196F3;
            --search-result-bg: #E3F2FD;
            --search-result-hover: #BBDEFB;
            --refresh-btn-gradient-start: #2196F3;
            --refresh-btn-gradient-end: #42A5F5;
            --refresh-btn-color: white;
            --clear-btn-bg: #90CAF9;
            --clear-btn-hover: #64B5F6;
            --search-btn-bg: #2196F3;
            --search-btn-hover: #1976D2;
            --footer-color: #42A5F5;
            --accent-glow: rgba(33, 150, 243, 0.2);
            --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            --card-shadow-hover: 0 4px 20px rgba(33, 150, 243, 0.15);
        }

        /* Theme Selection Dropdown */
        .theme-menu {
            position: absolute;
            top: calc(100% + 5px);
            right: 0;
            background: var(--container-bg);
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            width: 220px;
            z-index: 1002;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            margin-top: 5px;
        }

        .theme-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .theme-option {
            display: block;
            width: 100%;
            padding: 12px 15px;
            background: transparent;
            border: none;
            text-align: left;
            font-size: 0.95rem;
            cursor: pointer;
            color: var(--text-primary);
            transition: all 0.2s ease;
            border-bottom: 1px solid var(--border-color);
        }

        .theme-option:last-child {
            border-bottom: none;
            border-radius: 0 0 10px 10px;
        }

        .theme-option:hover {
            background: var(--xhs-pink-lighter);
            color: white;
        }

        .theme-option.selected {
            background: var(--xhs-pink);
            color: white;
        }

        /* AI Model Selection Dropdown */
        .ai-model-menu {
            position: absolute;
            top: calc(100% + 5px);
            right: 0;
            background: var(--container-bg);
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            width: 220px;
            z-index: 1002;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            margin-top: 5px;
        }

        .ai-model-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .ai-model-option {
            display: block;
            width: 100%;
            padding: 12px 15px;
            background: transparent;
            border: none;
            text-align: left;
            font-size: 0.95rem;
            cursor: pointer;
            color: var(--text-primary);
            transition: all 0.2s ease;
            border-bottom: 1px solid var(--border-color);
        }

        .ai-model-option:last-child {
            border-bottom: none;
            border-radius: 0 0 10px 10px;
        }

        .ai-model-option:hover {
            background: var(--xhs-pink-lighter);
            color: white;
        }

        .ai-model-option.selected {
            background: var(--xhs-pink);
            color: white;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            padding: 0;
            color: var(--text-primary);
            transition: background 0.5s ease;
        }

        @media (min-width: 768px) {
            body {
                padding: 20px;
            }
        }

        .container {
            max-width: 1200px;
            width: 100%;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            overflow: visible;
            margin: 0 auto;
            padding: 0 15px;
        }

        @media (min-width: 768px) {
            .container {
                margin: 20px auto;
            }
        }

        header {
            text-align: center;
            padding: 20px 15px;
            background: var(--container-bg);
            color: var(--text-primary);
            position: relative;
            box-shadow: var(--card-shadow);
            border-radius: 20px;
            margin-bottom: 20px;
        }

        @media (min-width: 768px) {
            header {
                padding: 30px 20px;
            }
        }

        h1 {
            font-size: 1.8rem;
            margin-bottom: 8px;
            text-shadow: none;
            letter-spacing: 0.02em;
            font-weight: 600;
            font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            color: var(--xhs-pink);
        }

        .subtitle {
            font-size: 0.95rem;
            opacity: 0.75;
            font-weight: 400;
            letter-spacing: 0.01em;
            color: var(--text-secondary);
        }



        .menu-toggle {
            position: absolute;
            top: 15px;
            right: 15px;
            /* Align with container edge */
            background: var(--bg-lighter);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 1.1rem;
            cursor: pointer;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: var(--card-shadow);
        }

        .menu-toggle:hover {
            background: var(--xhs-pink-lighter);
            transform: scale(1.05);
            box-shadow: var(--card-shadow-hover);
        }

        @media (min-width: 768px) {
            .menu-toggle {
                top: 20px;
                right: 30px;
                /* Align with controls section */
                width: 45px;
                height: 45px;
            }
        }

        /* Menu overlay styles */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            z-index: 1001;
            backdrop-filter: blur(5px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            padding-top: 60px;
        }

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

        .menu-content {
            background: var(--container-bg);
            border-radius: 20px;
            width: 90%;
            max-width: 400px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }

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

        .menu-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .menu-title {
            margin: 0;
            font-size: 1.4rem;
            color: var(--xhs-pink);
            font-family: 'Noto Serif SC', serif;
        }

        .close-menu-btn {
            background: var(--bg-lighter);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .close-menu-btn:hover {
            background: var(--xhs-pink-lighter);
            color: white;
            transform: scale(1.1);
        }

        .menu-options {
            padding: 20px;
        }

        .menu-section {
            margin-bottom: 10px;
        }

        .menu-option {
            display: block;
            width: 100%;
            padding: 15px;
            background: var(--bg-lighter);
            border: none;
            border-radius: 10px;
            text-align: left;
            font-size: 1rem;
            cursor: pointer;
            color: var(--text-primary);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .menu-option:hover {
            background: var(--xhs-pink-lighter);
            color: white;
            transform: translateX(5px);
        }

        .history-list,
        .favorites-list {
            padding: 10px 15px 15px;
            margin-top: -5px;
            margin-bottom: 10px;
            max-height: 300px;
            overflow-y: auto;
            background: var(--xhs-pink-pale);
            border-radius: 0 0 10px 10px;
        }

        .history-list h4,
        .favorites-list h4 {
            margin: 0 0 10px 0;
            font-size: 0.9rem;
            color: var(--xhs-pink);
            font-weight: 600;
        }

        .history-item,
        .favorite-item {
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .history-item:hover,
        .favorite-item:hover {
            background: var(--xhs-pink-pale);
            border-radius: 5px;
        }

        .history-item:last-child,
        .favorite-item:last-child {
            border-bottom: none;
        }

        .history-item .title,
        .favorite-item .title {
            font-weight: bold;
            color: var(--text-primary);
        }

        .history-item .author,
        .favorite-item .author {
            font-size: 0.9rem;
            color: var(--text-tertiary);
        }

        .header-search-btn {
            position: absolute;
            top: 10px;
            right: 60px;
            /* Position to the left of the dark mode toggle */
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
            cursor: pointer;
            color: var(--header-color);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header-search-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        @media (min-width: 768px) {
            .dark-mode-toggle {
                top: 20px;
                right: 20px;
                width: 45px;
                height: 45px;
            }

            .header-search-btn {
                top: 20px;
                right: 75px;
                /* Adjust for larger screen */
                width: 45px;
                height: 45px;
            }
        }

        .poem-content {
            display: flex;
            flex-direction: column;
            padding: 0;
            gap: 20px;
            position: relative;
            z-index: 5;
        }

        @media (min-width: 768px) {
            .poem-content {
                flex-direction: row;
                padding: 20px;
                min-height: 600px;
                justify-content: center; /* Center the content */
                gap: 40px; /* Add space between card and analysis */
            }
        }

        @media (max-width: 767px) {
            .poem-content {
                padding: 5px;
            }

            .controls {
                padding: 15px 10px;
                margin-bottom: 15px;
            }

            .filter-section {
                flex-direction: row; /* Keep elements in a row */
                flex-wrap: nowrap; /* Prevent wrapping */
                align-items: center;
                padding: 15px;
                overflow-x: auto; /* Allow horizontal scrolling on small screens */
                scrollbar-width: none; /* Hide scrollbar on Firefox */
            }

            .filter-section::-webkit-scrollbar {
                display: none; /* Hide scrollbar on Chrome/Safari */
            }

            .filter-section select,
            .filter-section button {
                flex-shrink: 0; /* Prevent elements from shrinking */
                min-width: fit-content;
                margin: 0 5px; /* Add small margin between elements */
                box-sizing: border-box;
            }
        }

        /* 平板设备优化 - 防止图片遮挡控制元素 */
        @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
               (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
            .controls {
                z-index: 20;
                position: relative;
            }

            .filter-section {
                z-index: 15;
            }

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

            .poem-content {
                z-index: 5;
                position: relative;
            }
        }

        /* 小米Pad等Android平板设备特定优化 */
        @media screen and (device-width: 800px) and (device-height: 1280px),
               screen and (device-width: 1280px) and (device-height: 800px),
               screen and (device-width: 768px) and (device-height: 1024px),
               screen and (device-width: 1024px) and (device-height: 768px) {
            .controls {
                z-index: 25;
                position: relative;
            }

            .filter-section {
                z-index: 20;
            }

            .image-section {
                z-index: 1;
            }
        }

        .poem-section {
            background: var(--container-bg);
            border-radius: 15px;
            box-shadow: var(--card-shadow);
            padding: 0px;
            transition: box-shadow 0.3s ease;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .poem-section:hover {
            box-shadow: var(--card-shadow-hover);
        }

        @media (min-width: 768px) {
            .poem-section {
                padding: 0px;
                /* Reduced from 20px to 10px */
                max-width: 800px; /* Limit width on desktop for better readability */
                width: 100%; /* Ensure it takes available space up to max-width */
            }
        }

        .image-section {
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 280px;
            max-height: 380px;
        }

        @media (min-width: 768px) {
            .image-section {
                padding: 0;
                margin: 0;
                min-height: 380px;
                max-height: 380px;
            }
        }

        .poem-image {
            width: 100%;
            max-width: 100%;
            height: 100%;
            aspect-ratio: 4/3;
            border-radius: 15px 15px 0 0;
            object-fit: cover;
            box-shadow: none;
            transition: transform 0.3s ease;
            border: none;
            margin: 0;
            padding: 0;
        }

        .poem-image:hover {
            transform: scale(1.01);
            box-shadow: none;
        }

        .text-section {
            position: relative;
            /* Elegant solid gradient background - no pixelation */
            background: linear-gradient(135deg,
                    #fefdfb 0%,
                    #fdfcf7 25%,
                    #fcfaf4 50%,
                    #fbf9f0 75%,
                    #faf8ed 100%);
            padding: 5px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* 改为顶部对齐 */
            flex: 1;
            border-radius: 0 0 15px 15px;
            /* Enhanced inner shadow for realistic paper depth */
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.8),
                inset 0 -1px 0 rgba(200, 180, 150, 0.3),
                inset 1px 0 0 rgba(200, 180, 150, 0.2),
                inset -1px 0 0 rgba(255, 255, 255, 0.5),
                inset 0 0 10px rgba(0, 0, 0, 0.08);
        }

        /* Subtle paper texture overlay using pseudo-element */
        .text-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Very subtle paper fiber texture */
            background-image:
                repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.008) 0px,
                    rgba(0, 0, 0, 0.008) 1px,
                    transparent 1px,
                    transparent 3px),
                repeating-linear-gradient(90deg,
                    rgba(0, 0, 0, 0.008) 0px,
                    rgba(0, 0, 0, 0.008) 1px,
                    transparent 1px,
                    transparent 3px);
            opacity: 0.5;
            border-radius: 0 0 15px 15px;
            pointer-events: none;
        }

        /* Dark mode text-section - elegant solid gradient */
        .dark-mode .text-section {
            background: linear-gradient(135deg,
                    #2d2d2d 0%,
                    #282828 25%,
                    #242424 50%,
                    #202020 75%,
                    #1c1c1c 100%);
            color: var(--text-primary);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                inset 0 -1px 0 rgba(100, 100, 100, 0.2),
                inset 1px 0 0 rgba(100, 100, 100, 0.1),
                inset -1px 0 0 rgba(255, 255, 255, 0.03),
                inset 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .dark-mode .text-section::before {
            background-image:
                repeating-linear-gradient(0deg,
                    rgba(255, 255, 255, 0.008) 0px,
                    rgba(255, 255, 255, 0.008) 1px,
                    transparent 1px,
                    transparent 3px),
                repeating-linear-gradient(90deg,
                    rgba(255, 255, 255, 0.008) 0px,
                    rgba(255, 255, 255, 0.008) 1px,
                    transparent 1px,
                    transparent 3px);
            opacity: 0.3;
        }

        /* Ensure poem text colors in dark mode have good contrast */
        .dark-mode .poem-verse {
            color: var(--text-secondary);
        }

        .dark-mode .poem-verse.vertical-mode,
        .dark-mode .poem-verse.horizontal-mode {
            color: var(--text-primary);
        }

        /* Vertical text layout for regular poems (shi) */
        .text-section.vertical-text {
            align-items: center;
        }

        .poem-verse.vertical-layout {
            display: flex;
            flex-direction: column;
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            font-size: 1.4rem;
            letter-spacing: 0.4em;
            line-height: 1.7;
            color: var(--text-secondary);
            text-align: center;
            margin: 0 auto;
            height: auto;
            white-space: nowrap;
        }

        .vertical-line {
            display: inline-flex;
            flex-direction: column;
        }

        .vertical-char {
            margin: 2px 0;
        }

        /* Enhanced styles for improved default mode */

        /* Dynasty tag styling */
        .poem-author-badge {
            display: flex;
            align-items: center;
            gap: 12px; /* Increased from 8px to 12px */
            margin: 15px 0; /* Increased from 8px to 15px */
            justify-content: center;
        }

        .dynasty-tag {
            background-color: var(--xhs-pink);
            color: white;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 4px;
            font-family: sans-serif;
            /* 衬线体配无衬线标签 */
            vertical-align: middle;
        }

        .dark-mode .dynasty-tag {
            background-color: var(--xhs-pink-light);
            color: #ffffff;
        }

        /* 正文排版容器 */
        .poem-verse-container {
            position: relative;
            padding: 10px;
            min-height: 200px;
            display: flex;
            justify-content: flex-start;   /* 顶部左对齐 */
            align-items: flex-start;       /* 顶部左对齐 */
        }

        /* 竖排模式 - 简洁的竖排滚动样式（与卷轴模式逻辑一致，但无颜色样式） */
        .poem-verse.vertical-mode {
            /* Container now uses flex layout for horizontal scrolling */
            display: flex;
            align-items: flex-start; /* Ensure items align to the top */
            justify-content: flex-start;
            overflow-x: auto;
            overflow-y: hidden;
            height: 600px;
            padding: 20px;
            background: var(--container-bg);
            box-sizing: border-box;
            direction: rtl; /* Right-to-left direction for proper column ordering */
        }

        .dark-mode .poem-verse.vertical-mode {
            color: var(--text-primary);
        }

        .dark-mode .poem-verse.vertical-mode .scroll-column {
            vertical-align: top;
            align-self: flex-start;
            font-feature-settings: "vpal" 1, "vert" 1; /* Enable vertical punctuation positioning */
        }

        /* Scroll columns within vertical mode */
        .poem-verse.vertical-mode .scroll-column {
            display: inline-block;
            writing-mode: vertical-rl;
            text-orientation: upright;
            margin-left: 20px; /* Reduced from 30px for tighter spacing */
            margin-right: 0;
            font-size: 1.5rem;
            line-height: 1.8;
            font-family: 'Noto Serif SC', serif;
            padding: 8px;
            /* No background gradients or borders - simple clean style */
            /* Ensure all columns align at the top */
            vertical-align: top;
            align-self: flex-start;
            /* Handle punctuation in vertical writing */
            text-align: start; /* Start alignment to maintain proper text flow */
            white-space: nowrap; /* Prevent wrapping of punctuation to new line */
        }

        /* Remove top margins to eliminate spacing at the top */
        .poem-title,
        .poem-author,
        .poem-type,
        .poem-verse {
            margin-top: 0;
        }

        /* Vertical mode with wider spacing for 4-line and 6-line poems */
        .poem-verse.vertical-mode-wider {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 1.6rem;
            letter-spacing: 0.6em; /* Increase letter spacing for wider spacing */
            line-height: 3.0; /* Increase line height for more spacing */
            height: auto;
            max-height: 600px;
            text-align: justify;
            margin: 0 auto;
            font-family: 'Noto Serif SC', serif;
        }

        .dark-mode .poem-verse.vertical-mode-wider {
            color: var(--text-primary);
        }

        /* Individual line elements for vertical mode (to match scroll mode columns) */
        .vertical-line-element {
            writing-mode: vertical-rl; /* right-to-left vertical layout */
            text-orientation: upright;
            margin-left: 30px; /* Space between columns */
            font-size: 1.3rem; /* Match scroll mode font size */
            line-height: 1.8;
            font-family: 'Noto Serif SC', serif;
            padding: 8px;
            border-radius: 6px;
            background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            /* Ensure alignment at the top */
            vertical-align: top;
            align-self: flex-start;
            /* Handle punctuation in vertical writing */
            text-align: start; /* Start alignment to maintain proper text flow */
        }

        /* Container to arrange vertical line elements like scroll mode but without scrolling */
        .poem-verse.vertical-mode-with-columns {
            display: flex;
            align-items: flex-start; /* Ensure items align to the top */
            height: 600px;
            padding: 20px;
            background: var(--container-bg);
            box-sizing: border-box;
            direction: rtl; /* Right-to-left direction for proper column ordering */
            overflow: hidden; /* Prevent scrolling behavior */
        }

        /* Special handling for punctuation in vertical text */
        .poem-verse.vertical-mode .scroll-column,
        .poem-verse.vertical-scroll-mode .scroll-column,
        .vertical-line-element {
            /* Ensure proper handling of Chinese punctuation in vertical writing mode */
            font-feature-settings: "vpal" 1, "vert" 1; /* Enable vertical punctuation positioning */
        }

        /* More specific punctuation handling */
        .poem-verse.vertical-mode .scroll-column,
        .poem-verse.vertical-scroll-mode .scroll-column,
        .vertical-line-element {
            font-variant-east-asian: traditional; /* Use traditional east asian font variants for proper punctuation handling */
        }

        /* For proper punctuation positioning in vertical Chinese text */
        @supports (writing-mode: vertical-rl) {
            .poem-verse.vertical-mode .scroll-column,
            .poem-verse.vertical-scroll-mode .scroll-column,
            .vertical-line-element {
                /* Ensure proper positioning of end-of-sentence punctuation in vertical layout */
                line-height: 1.8;
            }
        }

        /* Different color variants for vertical line elements - cycling every 10 lines */
        .vertical-line-element:nth-child(10n+1) {
            background: linear-gradient(to bottom, rgba(255,248,220,0.2) 0%, rgba(255,240,180,0.4) 100%); /* Light cream for antique feel */
            border-left: 2px solid #d4a017; /* Gold accent */
        }

        .vertical-line-element:nth-child(10n+2) {
            background: linear-gradient(to bottom, rgba(250,235,215,0.2) 0%, rgba(245,222,179,0.4) 100%); /* Light beige */
            border-left: 2px solid #cd853f; /* Peru accent */
        }

        .vertical-line-element:nth-child(10n+3) {
            background: linear-gradient(to bottom, rgba(238,232,205,0.2) 0%, rgba(230,216,173,0.4) 100%); /* Pale goldenrod */
            border-left: 2px solid #b8860b; /* Dark goldenrod accent */
        }

        .vertical-line-element:nth-child(10n+4) {
            background: linear-gradient(to bottom, rgba(245,245,220,0.2) 0%, rgba(253,245,230,0.4) 100%); /* Beige */
            border-left: 2px solid #daa520; /* Goldenrod accent */
        }

        .vertical-line-element:nth-child(10n+5) {
            background: linear-gradient(to bottom, rgba(250,240,230,0.2) 0%, rgba(255,248,220,0.4) 100%); /* Floral white */
            border-left: 2px solid #bc8f8f; /* Rosy brown accent */
        }

        .vertical-line-element:nth-child(10n+6) {
            background: linear-gradient(to bottom, rgba(240,248,255,0.2) 0%, rgba(230,240,250,0.4) 100%); /* Alice blue */
            border-left: 2px solid #6495ed; /* Cornflower blue accent */
        }

        .vertical-line-element:nth-child(10n+7) {
            background: linear-gradient(to bottom, rgba(245,222,179,0.2) 0%, rgba(255,235,205,0.4) 100%); /* Wheat */
            border-left: 2px solid #d2691e; /* Chocolate accent */
        }

        .vertical-line-element:nth-child(10n+8) {
            background: linear-gradient(to bottom, rgba(216,191,216,0.2) 0%, rgba(221,160,221,0.4) 100%); /* Thistle */
            border-left: 2px solid #9370db; /* Medium purple accent */
        }

        .vertical-line-element:nth-child(10n+9) {
            background: linear-gradient(to bottom, rgba(176,224,230,0.2) 0%, rgba(175,238,238,0.4) 100%); /* Pale turquoise */
            border-left: 2px solid #40e0d0; /* Turquoise accent */
        }

        .vertical-line-element:nth-child(10n+10) {
            background: linear-gradient(to bottom, rgba(255,250,205,0.2) 0%, rgba(255,255,224,0.4) 100%); /* Lemon chiffon */
            border-left: 2px solid #ffd700; /* Gold accent */
        }

        /* For dark mode */
        .dark-mode .vertical-line-element {
            color: var(--text-primary);
            background: linear-gradient(to bottom, rgba(50, 50, 50, 0.3) 0%, rgba(70, 70, 70, 0.5) 100%); /* Match dark mode scroll mode */
            vertical-align: top;
            align-self: flex-start;
            font-feature-settings: "vpal" 1, "vert" 1; /* Enable vertical punctuation positioning */
        }

        .dark-mode .vertical-line-element:nth-child(10n+1) {
            background: linear-gradient(to bottom, rgba(80,60,30,0.3) 0%, rgba(100,70,40,0.5) 100%);
            border-left: 2px solid #d4a017;
        }

        .dark-mode .vertical-line-element:nth-child(10n+2) {
            background: linear-gradient(to bottom, rgba(70,65,40,0.3) 0%, rgba(90,80,50,0.5) 100%);
            border-left: 2px solid #cd853f;
        }

        .dark-mode .vertical-line-element:nth-child(10n+3) {
            background: linear-gradient(to bottom, rgba(65,70,40,0.3) 0%, rgba(85,90,50,0.5) 100%);
            border-left: 2px solid #b8860b;
        }

        .dark-mode .vertical-line-element:nth-child(10n+4) {
            background: linear-gradient(to bottom, rgba(60,65,70,0.3) 0%, rgba(80,90,100,0.5) 100%);
            border-left: 2px solid #daa520;
        }

        .dark-mode .vertical-line-element:nth-child(10n+5) {
            background: linear-gradient(to bottom, rgba(70,50,60,0.3) 0%, rgba(100,70,90,0.5) 100%);
            border-left: 2px solid #bc8f8f;
        }

        .dark-mode .vertical-line-element:nth-child(10n+6) {
            background: linear-gradient(to bottom, rgba(50,65,75,0.3) 0%, rgba(70,90,110,0.5) 100%);
            border-left: 2px solid #6495ed;
        }

        .dark-mode .vertical-line-element:nth-child(10n+7) {
            background: linear-gradient(to bottom, rgba(75,60,40,0.3) 0%, rgba(100,80,60,0.5) 100%);
            border-left: 2px solid #d2691e;
        }

        .dark-mode .vertical-line-element:nth-child(10n+8) {
            background: linear-gradient(to bottom, rgba(65,55,75,0.3) 0%, rgba(90,80,110,0.5) 100%);
            border-left: 2px solid #9370db;
        }

        .dark-mode .vertical-line-element:nth-child(10n+9) {
            background: linear-gradient(to bottom, rgba(50,70,70,0.3) 0%, rgba(70,100,100,0.5) 100%);
            border-left: 2px solid #40e0d0;
        }

        .dark-mode .vertical-line-element:nth-child(10n+10) {
            background: linear-gradient(to bottom, rgba(75,75,50,0.3) 0%, rgba(110,110,70,0.5) 100%);
            border-left: 2px solid #ffd700;
        }

        /* Author works section */
        .author-works-section {
            background: var(--container-bg);
            border-radius: 20px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
        }

        .author-works-header {
            margin-bottom: 15px;
        }

        .author-work-item {
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            background: var(--bg-lighter);
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            white-space: nowrap;
            color: var(--text-primary);
        }

        .author-work-item:hover {
            background: var(--xhs-pink-lighter);
            color: white;
            border-color: var(--xhs-pink);
        }

        /* Scrollable vertical mode for long poems - horizontal scrolling */
        .poem-verse.vertical-scroll-mode {
            /* Container now uses flex layout for horizontal scrolling */
            display: flex;
            align-items: flex-start; /* Ensure items align to the top */
            justify-content: flex-start; /* This will align items to the right due to RTL direction */
            overflow-x: auto;
            overflow-y: hidden;
            height: 600px;
            padding: 20px;
            background: var(--container-bg);
            box-sizing: border-box;
            direction: rtl; /* Right-to-left direction for proper column ordering */
        }

        .poem-verse.vertical-scroll-mode .scroll-column {
    display: inline-block;
    writing-mode: vertical-rl; /* right-to-left vertical layout */
    text-orientation: upright;
    margin-left: 30px; /* Space between columns (changed from margin-right to margin-left for RTL) */
    margin-right: 0; /* Reset right margin */
    font-size: 1.3rem; /* Reduced from 1.6rem */
    line-height: 1.8;
    font-family: 'Noto Serif SC', serif;
    padding: 8px;
    border-radius: 6px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    /* Ensure all columns align at the top */
    vertical-align: top;
    align-self: flex-start;
    /* Handle punctuation in vertical writing */
    text-align: start; /* Start alignment to maintain proper text flow */
    white-space: nowrap; /* Prevent wrapping of punctuation to new line */
}

        /* Different color variants for scroll columns - cycling every 10 columns */
        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+1) {
            background: linear-gradient(to bottom, rgba(255,248,220,0.2) 0%, rgba(255,240,180,0.4) 100%); /* Light cream for antique feel */
            border-left: 2px solid #d4a017; /* Gold accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+2) {
            background: linear-gradient(to bottom, rgba(250,235,215,0.2) 0%, rgba(245,222,179,0.4) 100%); /* Light beige */
            border-left: 2px solid #cd853f; /* Peru accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+3) {
            background: linear-gradient(to bottom, rgba(238,232,205,0.2) 0%, rgba(230,216,173,0.4) 100%); /* Pale goldenrod */
            border-left: 2px solid #b8860b; /* Dark goldenrod accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+4) {
            background: linear-gradient(to bottom, rgba(245,245,220,0.2) 0%, rgba(253,245,230,0.4) 100%); /* Beige */
            border-left: 2px solid #daa520; /* Goldenrod accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+5) {
            background: linear-gradient(to bottom, rgba(250,240,230,0.2) 0%, rgba(255,248,220,0.4) 100%); /* Floral white */
            border-left: 2px solid #bc8f8f; /* Rosy brown accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+6) {
            background: linear-gradient(to bottom, rgba(240,248,255,0.2) 0%, rgba(230,240,250,0.4) 100%); /* Alice blue */
            border-left: 2px solid #6495ed; /* Cornflower blue accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+7) {
            background: linear-gradient(to bottom, rgba(245,222,179,0.2) 0%, rgba(255,235,205,0.4) 100%); /* Wheat */
            border-left: 2px solid #d2691e; /* Chocolate accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+8) {
            background: linear-gradient(to bottom, rgba(216,191,216,0.2) 0%, rgba(221,160,221,0.4) 100%); /* Thistle */
            border-left: 2px solid #9370db; /* Medium purple accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+9) {
            background: linear-gradient(to bottom, rgba(176,224,230,0.2) 0%, rgba(175,238,238,0.4) 100%); /* Pale turquoise */
            border-left: 2px solid #40e0d0; /* Turquoise accent */
        }

        .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+10) {
            background: linear-gradient(to bottom, rgba(255,250,205,0.2) 0%, rgba(255,255,224,0.4) 100%); /* Lemon chiffon */
            border-left: 2px solid #ffd700; /* Gold accent */
        }

        /* For dark mode - cycling every 10 columns */
        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+1) {
            background: linear-gradient(to bottom, rgba(80,60,30,0.3) 0%, rgba(100,70,40,0.5) 100%);
            border-left: 2px solid #d4a017;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+2) {
            background: linear-gradient(to bottom, rgba(70,65,40,0.3) 0%, rgba(90,80,50,0.5) 100%);
            border-left: 2px solid #cd853f;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+3) {
            background: linear-gradient(to bottom, rgba(65,70,40,0.3) 0%, rgba(85,90,50,0.5) 100%);
            border-left: 2px solid #b8860b;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+4) {
            background: linear-gradient(to bottom, rgba(60,65,70,0.3) 0%, rgba(80,90,100,0.5) 100%);
            border-left: 2px solid #daa520;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+5) {
            background: linear-gradient(to bottom, rgba(70,50,60,0.3) 0%, rgba(100,70,90,0.5) 100%);
            border-left: 2px solid #bc8f8f;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+6) {
            background: linear-gradient(to bottom, rgba(50,65,75,0.3) 0%, rgba(70,90,110,0.5) 100%);
            border-left: 2px solid #6495ed;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+7) {
            background: linear-gradient(to bottom, rgba(75,60,40,0.3) 0%, rgba(100,80,60,0.5) 100%);
            border-left: 2px solid #d2691e;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+8) {
            background: linear-gradient(to bottom, rgba(65,55,75,0.3) 0%, rgba(90,80,110,0.5) 100%);
            border-left: 2px solid #9370db;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+9) {
            background: linear-gradient(to bottom, rgba(50,70,70,0.3) 0%, rgba(70,100,100,0.5) 100%);
            border-left: 2px solid #40e0d0;
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column:nth-child(10n+10) {
            background: linear-gradient(to bottom, rgba(75,75,50,0.3) 0%, rgba(110,110,70,0.5) 100%);
            border-left: 2px solid #ffd700;
        }

        .dark-mode .poem-verse.vertical-scroll-mode {
            color: var(--text-primary);
        }

        .dark-mode .poem-verse.vertical-scroll-mode .scroll-column {
            vertical-align: top;
            align-self: flex-start;
            font-feature-settings: "vpal" 1, "vert" 1; /* Enable vertical punctuation positioning */
        }

        /* 横排模式优化 */
        .poem-verse.horizontal-mode {
            font-size: 1.6rem;
            line-height: 1.9;
            text-align: center;
            max-width: 95%;
        }

        .dark-mode .poem-verse.horizontal-mode {
            color: var(--text-primary);
        }

        /* Scroll mode - horizontal scrollable layout */
        .poem-verse.scroll-mode {
            writing-mode: horizontal-tb;
            font-size: 1.6rem;
            line-height: 2.5;
            text-align: left;
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 20px;
            max-height: 300px;
            min-width: 800px;
            font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            letter-spacing: 0.2em;
            color: var(--text-secondary);
            text-align: justify;
            margin: 0 auto;
            display: inline-block;
            min-height: 200px;
        }

        .poem-verse.scroll-mode span {
            display: inline-block;
            margin-right: 2rem;
            vertical-align: top;
        }

        .dark-mode .poem-verse.scroll-mode {
            color: var(--text-primary);
        }

        /* Couplets for 7-character poems - display two lines together */
        /* 确保这是最新的样式 */
        .couplet-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0;
            /* 关键：去掉外边距 */
            padding: 10px 0;
            /* 关键：只用内边距控制，10px-12px 比较合适 */
            border-bottom: 1px dashed rgba(128, 128, 128, 0.15);
            width: 100%;
        }

        /* 稍微增加一点行内文字的紧凑度，让两行诗靠近，这样组与组的区分度更好 */
        .horizontal-mode .couplet-row {
            line-height: 1.6;
        }

        .dark-mode .couplet-row {
            border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
        }

        /* This seal will be used in the main display */
        .main-seal {
            position: absolute;
            bottom: 25px;
            right: 25px;
            width: 40px;
            height: 40px;
            font-size: 18px;
            border: 2px solid #d44c4c;
            color: #d44c4c;
            background: rgba(255, 255, 255, 0.8);
            opacity: 0.8;
            transform: rotate(-5deg);
            pointer-events: none;
            /* 不挡鼠标 */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
        }

        .dark-mode .main-seal {
            background: rgba(40, 40, 40, 0.9);
            color: #FF6B8A;
            border-color: #FF6B8A;
        }

        /* Adjusted description section styling */
        .desc-section {
            /* 变成一个稍微深一点的背景，像书的封底 */
            background: #fdfdfd;
            border-left: 4px solid var(--xhs-pink-lighter);
            /* 左侧装饰线 */
        }

        .dark-mode .desc-section {
            background: #222222;
            border-left: 4px solid var(--xhs-pink-light);
            /* 左侧装饰线 in dark mode */
        }

        .poem-desc {
            font-size: 1rem;
            color: #555;
            text-align: justify;
            /* 两端对齐更像书 */
        }

        .dark-mode .poem-desc {
            color: var(--text-tertiary);
        }

        /* 首字下沉效果 (可选) */
        .poem-desc::first-letter {
            font-size: 1.5em;
            font-weight: bold;
            color: var(--xhs-pink);
            float: left;
            margin-right: 4px;
            line-height: 1;
        }

        .dark-mode .poem-desc::first-letter {
            color: var(--xhs-pink-light);
        }

        /* Seal decoration for default mode */
        .seal-default-mode {
            position: absolute;
            bottom: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-color: rgba(180, 30, 30, 0.7);
            color: white;
            border-radius: 50%;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: serif;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            z-index: 11;
            opacity: 0.8;
        }

        @media (min-width: 768px) {
            .text-section {
                padding: 10px;
            }
        }

        .poem-title {
            font-size: 2.0rem;
            /* Reduced from 2.2rem to 2.0rem */
            color: var(--text-primary);
            text-align: center;
            margin-bottom: 20px; /* Increased from 12px to 20px */
            font-weight: 700;
            font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            letter-spacing: 0.05em;
            line-height: 1.3;
            padding: 0 10px;
            position: relative;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .inline-search-btn {
            background: rgba(99, 102, 241, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            font-size: 0.9rem;
            cursor: pointer;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .inline-search-btn.absolute-position {
            position: absolute;
            top: 20px;
            /* Adjust to align with title */
            right: 10px;
            /* Position to the right */
        }

        .inline-search-btn:hover {
            background: rgba(107, 114, 128, 0.3);
            transform: scale(1.15);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }



        .positioned-title {
            position: relative;
        }

        .poem-author {
            font-size: 1.3rem;
            /* Increased from 1.1rem to 1.3rem */
            color: var(--text-tertiary);
            text-align: center;
            margin-bottom: 12px;
            font-style: normal;
            font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            letter-spacing: 0.02em;
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .poem-type {
            font-size: 1.1rem;
            /* Increased from 0.9rem to 1.1rem */
            color: var(--xhs-pink);
            text-align: center;
            margin-bottom: 18px;
            background: var(--xhs-pink-lighter);
            display: inline-block;
            padding: 6px 16px;
            border-radius: 20px;
            align-self: center;
            font-weight: 500;
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .poem-verse {
            font-size: 1.6rem;
            /* Increased from 1.2rem to 1.6rem for larger text */
            line-height: 1.9;
            /* Adjusted line height for better readability */
            color: var(--text-secondary);
            text-align: center;
            margin: 0;
            font-weight: 400;
            font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            letter-spacing: 0.03em;
            white-space: normal;
            /* Allow line breaks */
            word-wrap: break-word;
            /* Break long words if needed */
        }

        /* Ensure <br> tags create line breaks */
        .poem-verse br {
            display: block;
        }

        /* Make sure poem verse allows line breaks */
        .poem-verse {
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        /* Paragraph breaks between sections of poems */
        .poem-paragraph-break {
            display: block;
            height: 1.5em;
            /* Create visual separation between poem sections */
        }

        .desc-section {
            background: var(--container-bg);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            padding: 10px;
            /* Reduced from 20px to 10px */
            transition: box-shadow 0.3s ease;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .desc-section:hover {
            box-shadow: var(--card-shadow-hover);
        }

        @media (min-width: 768px) {
            .desc-section {
                padding: 15px;
                /* Reduced from 20px to 15px */
            }
        }

        .poem-desc {
            font-size: 1.1rem;
            /* Increased from 0.95rem to 1.1rem */
            line-height: 1.7;
            /* Reduced from 1.8 to 1.7 */
            color: var(--text-tertiary);
            padding: 0;
            background: transparent;
            border-radius: 0;
            border-left: none;
            height: 100%;
            overflow-y: auto;
            flex: 1;
        }

        .poem-desc a {
            color: #4da6ff;
            text-decoration: underline;
        }

        .poem-desc a:hover {
            color: #66b3ff;
        }

        @media (min-width: 768px) {
            .poem-desc {
                padding: 20px;
                flex: 1; /* Allow it to share space with poem-section */
                overflow-y: auto; /* Allow scrolling if content is long */
                max-height: 800px; /* Limit height to match poem section roughly */
                border-left: 1px solid var(--border-color); /* Add separator */
            }
        }

        /* Poem tags styles */
        .poem-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 15px 0;
            padding: 10px;
            background: rgba(0, 0, 0, 0.02);
            border-radius: 8px;
        }

        .dark-mode .poem-tags {
            background: rgba(255, 255, 255, 0.05);
        }

        .poem-tag {
            display: inline-block;
            padding: 4px 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .poem-tag:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .poem-tag:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Different colors for different tag types */
        .poem-tag.dynasty {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .poem-tag.type {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .poem-tag.theme {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        /* Waterfall tags styles */
        .waterfall-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            margin: 10px 0;
            padding: 8px;
        }

        .waterfall-tag {
            display: inline-block;
            padding: 3px 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: default;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .waterfall-tag:hover {
            transform: scale(1.05);
        }

        .waterfall-tag.dynasty {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .waterfall-tag.type {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .waterfall-tag.theme {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        /* Notification animations */
        @keyframes slideDown {
            from {
                transform: translateX(-50%) translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }

            to {
                transform: translateX(-50%) translateY(-20px);
                opacity: 0;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }

            to {
                transform: translateX(-50%) translateY(-20px);
                opacity: 0;
            }
        }

        /* Vertical scroll mode */
        .poem-verse.scroll-mode {
            writing-mode: vertical-rl;
            text-orientation: upright;
            direction: ltr;
            text-align: left;
            max-height: 600px;
            padding: 30px 20px;
            line-height: 1.8;
            letter-spacing: 0.1em;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .poem-verse.scroll-mode .poem-line {
            display: inline-block;
            margin: 0 15px;
            padding: 0 10px;
        }

        .poem-verse.scroll-mode.vertical-mode .poem-line {
            margin: 0 20px;
        }

        /* Adjust couplet rows for scroll mode */
        .poem-verse.scroll-mode .couplet-row {
            display: inline-block;
            margin: 0 15px;
        }

        .poem-verse.scroll-mode .couplet-line {
            display: block;
            margin: 5px 0;
        }

        .poem-desc h3 {
            color: #333;
            margin-bottom: 10px;
        }

        .controls {
            text-align: center;
            padding: 0;
            margin-bottom: 20px;
            position: relative;
            z-index: 10;
        }

        @media (min-width: 768px) {
            .controls {
                padding: 30px;
            }
        }

        .refresh-btn {
            background: linear-gradient(135deg, var(--refresh-btn-gradient-start) 0%, var(--refresh-btn-gradient-end) 100%);
            color: var(--refresh-btn-color);
            border: none;
            padding: 12px 24px;
            font-size: 1rem;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--card-shadow);
            font-weight: 600;
            letter-spacing: 0.01em;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }

        .refresh-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .refresh-btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .refresh-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--card-shadow-hover);
        }

        .refresh-btn:active {
            transform: translateY(0);
        }

        .loading {
            text-align: center;
            padding: 50px;
            font-size: 1.2rem;
            color: #666;
        }

        .poem-meta {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .poem-meta span {
            background: #e9ecef;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.9rem;
            color: #555;
        }

        footer {
            text-align: center;
            padding: 20px;
            color: var(--footer-color);
            font-size: 0.85rem;
            margin-top: 20px;
        }

        @media (min-width: 768px) {
            footer {
                padding: 20px;
            }
        }

        /* Animation for content loading */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        .fade-in {
            animation: fadeIn 0.8s ease forwards;
        }

        .filter-section {
            display: flex;
            flex-wrap: nowrap; /* Prevent wrapping to keep all items in one line */
            gap: 10px;
            justify-content: center;
            align-items: center;
            padding: 18px;
            background: var(--container-bg);
            border-radius: 20px;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
            transition: box-shadow 0.3s ease;
            position: relative;
            z-index: 15;
            overflow-x: auto; /* Allow horizontal scrolling if needed on very small screens */
            scrollbar-width: none; /* Hide scrollbar on Firefox */
        }

        .filter-section:hover {
            box-shadow: var(--card-shadow-hover);
        }

        .filter-section label {
            font-weight: bold;
            color: var(--text-primary);
            white-space: nowrap;
            display: flex;
            align-items: center;
            min-height: 40px;
            /* Consistent height */
            padding: 0 5px;
            /* Uniform padding */
            box-sizing: border-box;
            /* Include padding in height calculation */
        }

        .filter-section select {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background: var(--container-bg);
            color: var(--text-primary);
            font-size: 1rem;
            min-width: 120px;
            flex: 1;
            min-width: 0;
            /* Allow it to shrink below min-width */
            height: 40px;
            /* Fixed height to ensure consistency */
            min-height: 40px;
            /* Consistent height */
            box-sizing: border-box;
            /* Include padding in height calculation */
            line-height: 1.2;
            /* Control text alignment inside the select */
        }

        .filter-section button {
            padding: 8px 16px;
            background: var(--clear-btn-bg);
            color: var(--refresh-btn-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            min-height: 40px;
            /* Consistent height */
            box-sizing: border-box;
            /* Include padding in height calculation */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .filter-section button:hover {
            background: var(--clear-btn-hover);
        }

        .search-section {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            align-items: center;
            padding: 18px;
            background: var(--container-bg);
            border-radius: 20px;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
            transition: box-shadow 0.3s ease;
        }

        .search-section:hover {
            box-shadow: var(--card-shadow-hover);
        }

        .search-section.show {
            display: flex;
        }

        .search-section input {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            font-size: 1rem;
            min-width: 200px;
            flex: 1;
            background: var(--container-bg);
            color: var(--text-primary);
        }

        .search-section button {
            padding: 8px 16px;
            background: var(--search-btn-bg);
            color: var(--refresh-btn-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .search-section button:nth-child(3) {
            background: var(--clear-btn-bg);
            /* Different color for clear button */
        }

        .search-section button:hover {
            background: var(--search-btn-hover);
        }

        .search-section button:nth-child(3):hover {
            background: var(--clear-btn-hover);
            /* Different hover for clear button */
        }



        .search-toggle-btn {
            background: #17a2b8 !important;
            /* Override default button color */
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
        }

        .search-toggle-btn:hover {
            background: #138496 !important;
        }

        .search-results {
            margin-bottom: 20px;
            padding: 20px;
            background: var(--container-bg);
            border-radius: 20px;
            max-height: 400px;
            overflow-y: auto;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
        }

        .search-results h3 {
            margin-top: 0;
            color: var(--text-primary);
            text-align: center;
        }

        .search-results ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .search-results li {
            padding: 8px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            color: var(--text-tertiary);
        }

        .search-results li:hover {
            background-color: var(--search-result-hover);
        }

        .search-results .result-title {
            font-weight: bold;
            color: #4da6ff;
        }

        .search-results .result-author {
            font-style: italic;
            color: var(--text-light);
            font-size: 0.9em;
        }

        .search-results .result-preview {
            margin-top: 4px;
            color: var(--text-tertiary);
            font-size: 0.9em;
        }

        /* Mobile-specific styles for filter section */
        @media (max-width: 767px) {
            .filter-section {
                flex-direction: row;
                flex-wrap: nowrap;
                /* Keep items in a single line */
                align-items: center;
                padding: 8px;
                margin: 5px;
                gap: 3px;
                min-height: 40px;
            }

            .filter-section label {
                font-size: 0.65rem;
                white-space: nowrap;
                margin: 0;
                flex-shrink: 0;
                min-height: 34px;
                /* Consistent height for mobile */
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 2px;
                /* Uniform padding for mobile */
            }

            .filter-section select {
                min-width: 0;
                font-size: 0.65rem;
                padding: 2px 4px;
                /* Adjusted padding for better height consistency */
                flex: 1 1 auto;
                height: 34px;
                /* Fixed height to ensure consistency */
                min-height: 34px;
                /* Consistent height for mobile */
                max-width: 70px;
                /* Further reduce width to fit all elements */
                flex-basis: 70px;
                box-sizing: border-box;
                /* Include padding in height calculation */
                line-height: 1.2;
                /* Control text alignment inside the select */
            }

            .filter-section button {
                font-size: 0.65rem;
                padding: 2px 4px;
                min-height: 34px;
                /* Consistent height for mobile */
                white-space: nowrap;
                flex: 0 0 auto;
                /* Prevent button from shrinking */
                min-width: 50px;
                /* Ensure minimum button width for tap targets */
                box-sizing: border-box;
                /* Include padding in height calculation */
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .search-toggle-btn {
                min-width: 45px !important;
                /* Smaller width for search button on mobile */
                padding: 2px 3px !important;
                /* Smaller padding on mobile */
                font-size: 0.6rem !important;
                /* Smaller font on mobile */
            }
        }

        /* Stack elements on very narrow screens */
        @media (max-width: 400px) {
            .filter-section {
                flex-wrap: wrap;
                /* Allow wrapping if too narrow */
                flex-direction: row;
                align-content: center;
            }
        }

        /* Mobile-specific styles for search section */
        @media (max-width: 767px) {
            .search-section {
                flex-direction: row;
                flex-wrap: wrap;
                padding: 8px;
                margin: 5px;
                gap: 4px;
            }

            .search-section input {
                font-size: 0.8rem;
                padding: 5px;
                min-width: 100px;
                flex: 2;
                min-height: 30px;
            }

            .search-section button {
                font-size: 0.8rem;
                padding: 5px 8px;
                min-height: 30px;
                flex: 1;
            }
        }

        @media (max-width: 480px) {
            .search-section {
                flex-direction: column;
            }

            .search-section input {
                width: 100%;
            }

            .search-section button {
                width: 100%;
            }
        }

        /* Poetry-specific styling */
        strong {
            color: #667eea;
            font-weight: bold;
        }

        p {
            margin: 10px 0;
        }

        mark {
            background-color: #ffeb3b;
            padding: 0 2px;
            border-radius: 2px;
        }

        .floating-refresh-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--refresh-btn-gradient-start) 0%, var(--refresh-btn-gradient-end) 100%);
            color: white;
            border: none;
            font-size: 22px;
            cursor: pointer;
            box-shadow: var(--card-shadow-hover);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            transition: all 0.3s ease;
            animation: float 3s ease-in-out infinite;
            pointer-events: auto;
        }

        @keyframes float {

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

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

        .floating-refresh-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 30px rgba(254, 44, 85, 0.4);
            animation: none;
        }

        /* Mobile-specific styles for floating button */
        @media (max-width: 767px) {
            .floating-refresh-btn {
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
        }

        /* Waterfall Flow Layout */
        /* Waterfall Flow Layout */
        .waterfall-container {
            display: none;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px 5px;
            /* Reduced from 20px 10px to save space */
        }

        .waterfall-container.active {
            display: block;
        }

        .waterfall-content {
            column-count: 2;
            column-gap: 12px;
            /* Reduced from 20px to save space */
            /* Enhanced background with subtle pattern */
            background:
                linear-gradient(90deg, rgba(254, 44, 85, 0.02) 1px, transparent 1px),
                linear-gradient(rgba(254, 44, 85, 0.02) 1px, transparent 1px),
                var(--bg-gradient-start);
            background-size: 50px 50px;
        }

        @media (max-width: 1024px) {
            .waterfall-content {
                column-count: 2;
            }
        }

        @media (max-width: 767px) {
            .waterfall-content {
                column-count: 1;
            }
        }

        /* On very wide screens, allow 3 columns */
        @media (min-width: 1400px) {
            .waterfall-content {
                column-count: 3;
            }
        }

        .waterfall-card {
            display: block;
            background: var(--container-bg);
            border-radius: 20px;
            overflow: hidden;
            margin-bottom: 15px;
            /* Increased from 12px for better spacing */
            break-inside: avoid;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            cursor: pointer;
            height: 340px;
            /* Increased from 300px for better proportions */
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(254, 44, 85, 0.08);
            /* Subtle border for depth */
            /* Enhanced texture effects */
            position: relative;
            background: var(--container-bg);
            /* Base background */
        }

        .waterfall-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            /* Subtle texture using SVG noise pattern */
            background-image:
                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 1.5px, transparent 2px),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.15) 1.5px, transparent 2px),
                radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.08) 1px, transparent 1.5px),
                radial-gradient(circle at 60% 60%, rgba(0, 0, 0, 0.08) 1px, transparent 1.5px),
                /* Subtle noise texture */
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
            background-size: 60px 60px, 70px 70px, 45px 45px, 35px 35px, 256px 256px;

            /* Set transparency and blend mode for natural texture effect */
            opacity: 0.5;
            mix-blend-mode: overlay;

            pointer-events: none;
            /* Ensure pseudo-element doesn't interfere with mouse events */
            border-radius: 20px;
            /* Match card border-radius */
        }

        .waterfall-card:hover::before {
            /* Enhanced texture effect on hover */
            background-image:
                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2) 1.5px, transparent 2px),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 1.5px, transparent 2px),
                radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.1) 1px, transparent 1.5px),
                radial-gradient(circle at 60% 60%, rgba(0, 0, 0, 0.1) 1px, transparent 1.5px),
                /* More prominent noise on hover */
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
            background-size: 60px 60px, 70px 70px, 45px 45px, 35px 35px, 256px 256px;
            opacity: 0.6;
        }

        .waterfall-card:hover {
            transform: translateY(-5px) scale(1.02);
            /* Added subtle scale */
            box-shadow: var(--card-shadow-hover);
            /* Enhanced texture effect on hover with more intensity */
            background-image:
                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2) 1.5px, transparent 2px),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 1.5px, transparent 2px),
                radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.1) 1px, transparent 1.5px),
                radial-gradient(circle at 60% 60%, rgba(0, 0, 0, 0.1) 1px, transparent 1.5px),
                /* Add subtle noise on hover for extra texture */
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
            background-size: 50px 50px, 60px 60px, 40px 40px, 30px 30px, 256px 256px;
        }

        .color-block {
            width: 100%;
            height: 200px;
            /* Increased from 170px for better text visibility */
            display: block;
            position: relative;
            /* Base gradient for background */
            background:
                linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
            transition: all 0.3s ease;
        }

        .color-block::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            /* Rice paper texture using SVG pattern */
            background-image:
                /* Base texture - subtle paper */
                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"),
                /* Additional canvas-like pattern */
                repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.03) 0px,
                    rgba(0, 0, 0, 0.03) 1px,
                    transparent 1px,
                    transparent 2px),
                repeating-linear-gradient(90deg,
                    rgba(0, 0, 0, 0.03) 0px,
                    rgba(0, 0, 0, 0.03) 1px,
                    transparent 1px,
                    transparent 2px);
            background-size:
                100px 100px,
                4px 4px,
                4px 4px;

            /* Set transparency and blend mode for natural texture effect */
            opacity: 0.3;
            mix-blend-mode: multiply;

            pointer-events: none;
            /* Ensure pseudo-element doesn't interfere with mouse events */
        }

        .color-block:hover::after {
            /* Enhanced texture effect on hover */
            background-image:
                /* Base texture - more prominent on hover */
                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.25'/%3E%3C/svg%3E"),
                /* Additional canvas-like pattern */
                repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.05) 0px,
                    rgba(0, 0, 0, 0.05) 1px,
                    transparent 1px,
                    transparent 2px),
                repeating-linear-gradient(90deg,
                    rgba(0, 0, 0, 0.05) 0px,
                    rgba(0, 0, 0, 0.05) 1px,
                    transparent 1px,
                    transparent 2px);
            background-size:
                100px 100px,
                4px 4px,
                4px 4px;
            opacity: 0.4;
        }

        .overlay-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;  /* 保持默认，对横排居中有效 */
            align-items: center;      /* 保持默认，对横排居中有效 */
            z-index: 10;
            padding: 20px;
        }

        .dark-mode .overlay-text {
            color: #ffffff;
        }

        /* Mode 1: Vertical layout (suitable for 5/7-character poems) */
        .layout-vertical {
            flex-direction: row-reverse;
            /* Ancient Chinese reads from right to left */
            gap: 12px;
        }

        /* 仅在竖排卡片时，顶部左对齐（不影响横排卡片） */
        .overlay-text.layout-vertical {
            justify-content: flex-start;
            align-items: flex-start;
        }

        .layout-vertical .poem-line {
            writing-mode: vertical-rl;
            /* Vertical text */
            text-orientation: upright;
            font-family: 'Noto Serif SC', serif;
            font-size: 1.4rem;
            /* Vertical text can be larger */
            letter-spacing: 0.3em;
            /* Increase letter spacing for more breathing room */
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            /* Decorative line */
            padding-left: 8px;
        }

        .layout-vertical .poem-line:last-child {
            border-left: none;
        }

        .dark-mode .layout-vertical .poem-line {
            color: rgba(255, 255, 255, 0.98);
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        /* Mode 2: Horizontal center layout (suitable for ci/named phrases) */
        .layout-horizontal-center {
            flex-direction: column;
            gap: 16px;
        }

        .layout-horizontal-center .poem-line {
            font-family: 'Noto Serif SC', serif;
            font-size: 1.3rem;
            letter-spacing: 0.1em;
            color: white;
            text-align: center;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
            position: relative;
        }

        .dark-mode .layout-horizontal-center .poem-line {
            color: #ffffff;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
        }



        /* Article mode for long texts */
        .article-mode {
            text-align: left !important;
            text-indent: 2em;
            max-width: 100%;
            margin: 0 auto;
            display: block !important; /* Ensure it behaves like a block */
        }

        /* Add decoration like quotes for horizontal quotes */
        .layout-horizontal-center::before {
            content: "“";
 font-family: serif;
            font-size: 4rem;
            position: absolute;
            top: 10px;
            left: 15px;
            opacity: 0.3;
            color: white;
        }

        /* Fallback for default layout - keep the original styling */
        .layout-horizontal {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1.2rem;
            /* Increased from 1rem for better readability */
            font-weight: 500;
            text-align: center;
            width: 98%;
            /* Reduced from 85% for better centering */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
            /* Enhanced shadow for better contrast */
            z-index: 10;
            /* Allow text to wrap to multiple lines */
            white-space: normal;
            word-wrap: break-word;
            overflow: hidden;
            /* Keep text within bounds */
            line-height: 1.8;
            /* Increased from 1.6 for seven-character poems */
            letter-spacing: 0.05em;
            /* Better spacing for Chinese characters */
            font-family: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
            /* Use Chinese typography for proper character alignment */
        }

        .seal-decoration {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 28px;
            height: 28px;
            background:
                radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
                linear-gradient(135deg, #c81e1e, #8a0a0a);
            color: white;
            border-radius: 4px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: serif;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow:
                0 2px 4px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            z-index: 11;
            opacity: 0.9;
            /* Add texture to the seal */
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        }

        .color-block-container {
            position: relative;
            width: 100%;
            height: 200px;
            /* Increased from 170px for better text visibility */
            border-radius: 20px 20px 0 0;
            overflow: hidden;
        }

        .waterfall-content-section {
            padding: 12px 15px;
            /* Increased from 4px 6px for better spacing */
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            /* Add gap between title and author */
            /* Paper-like texture background */
            background:
                /* Base color with subtle texture */
                linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 240, 0.9) 100%),
                /* Paper fiber texture */
                repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.02) 0px,
                    rgba(0, 0, 0, 0.02) 1px,
                    transparent 1px,
                    transparent 2px),
                repeating-linear-gradient(90deg,
                    rgba(0, 0, 0, 0.02) 0px,
                    rgba(0, 0, 0, 0.02) 1px,
                    transparent 1px,
                    transparent 2px);
            /* Subtle inner shadow for depth */
            box-shadow:
                inset 2px 2px 4px rgba(0, 0, 0, 0.05),
                inset -2px -2px 4px rgba(255, 255, 255, 0.5);
        }


        .dark-mode .waterfall-content-section {
            /* Paper-like texture background for dark mode */
            background:
                linear-gradient(0deg, rgba(30, 30, 30, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%),
                repeating-linear-gradient(0deg,
                    rgba(255, 255, 255, 0.02) 0px,
                    rgba(255, 255, 255, 0.02) 1px,
                    transparent 1px,
                    transparent 2px),
                repeating-linear-gradient(90deg,
                    rgba(255, 255, 255, 0.02) 0px,
                    rgba(255, 255, 255, 0.02) 1px,
                    transparent 1px,
                    transparent 2px);
            box-shadow:
                inset 2px 2px 4px rgba(0, 0, 0, 0.2),
                inset -2px -2px 4px rgba(255, 255, 255, 0.05);
        }

/* Floating Refresh Button */
.floating-refresh-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-refresh-btn:hover {
    transform: translateY(-3px) rotate(180deg);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
}

.floating-refresh-btn:active {
    transform: translateY(0) rotate(180deg);
}

/* Poem Meta & Action Buttons */
.poem-meta {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.inline-search-btn {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #666;
}

.inline-search-btn:hover {
    background-color: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-color: #6366f1;
    transform: translateY(-2px);
}

/* Search Section */
.search-section {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px auto;
    max-width: 600px;
    padding: 0 20px;
}

#searchInput {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

#searchInput:focus {
    border-color: #6366f1;
}

.search-results {
    max-width: 600px;
    margin: 0 auto 20px;
    padding: 0 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.search-results h3 {
    margin: 10px 0;
    font-size: 1.1rem;
    color: #333;
}

#searchResultsList {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

#searchResultsList li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

#searchResultsList li:hover {
    background-color: #f5f7fa;
}

#searchResultsList li:last-child {
    border-bottom: none;
}

/* Dark Mode Support */
body.dark-mode .inline-search-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #aaa;
}

body.dark-mode .inline-search-btn:hover {
    background-color: rgba(99, 102, 241, 0.2);
    color: #8b5cf6;
    border-color: #8b5cf6;
}

body.dark-mode .search-results {
    background: #1e1e1e;
    color: #eee;
}

body.dark-mode .search-results h3 {
    color: #eee;
}

body.dark-mode #searchResultsList li {
    border-bottom-color: #333;
}

body.dark-mode #searchResultsList li:hover {
    background-color: #2d2d2d;
}

body.dark-mode #searchInput {
    background: #1e1e1e;
    border-color: #333;
    color: #eee;
}
/* Article Mode Styles */
.article-content {
  width: 100%;
  max-width: 100%;
}

.article-content p {
  text-indent: 2em;
  margin-bottom: 1.5em;
  line-height: 1.8;
  text-align: justify;
  font-size: 1.3rem;
  color: var(--text-primary);
  font-family: "Noto Serif SC", "STSong", "Songti SC", serif;
}

.dark-mode .article-content p {
  color: var(--text-primary);
}

/* Ensure article content respects vertical mode if needed, though usually articles are horizontal */
.poem-verse.vertical-mode .article-content {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.poem-verse.vertical-mode .article-content p {
  text-indent: 2em;
  margin-bottom: 2em; /* Vertical margin becomes horizontal spacing */
  margin-left: 1em;
}