@charset "UTF-8";
    /* 長安城統一度量衡 - CSS Reset */

/* 1. 暴力清場：必須加上星號 *，代表所有元素 */
        * { 
            margin: 0 ; 
            padding: 0 ; 
            box-sizing: border-box; /* 暴力防護：防止邊框撐破佈局 */
        }

        /* 2. 暴力變量：必須放在 :root 裡，否則無處安放 */
        :root {
            --emperor-purple: #1a0033;
        }

        html, body {
            width: 100%;
            min-height: 100%;
            background-color: #0d0d0d; /* 確保底色統一 */
        }

        /* 針對輸入框的強制統一 */
        input, button {
            font-family: inherit;
            outline: none;
        }

        /* ============================================================
        第一部分：喚靈咒（全網頁的最頂端，先聲奪人）
        ============================================================ */
        @font-face { 
            font-family: 'ChanganLegacy'; /* 您給這款神仙字體起的外號 */
            src: url('<?php echo $base_url; ?>/static/fonts/Flowing_River_Cursive_fonts.woff') format('woff'), /*優先用 woff2，體積小 */
            url('<?php echo $base_url; ?>/static/fonts/Flowing_River_Cursive_fonts.ttf') format('truetype'); /*ttf 備用 */
            font-weight: normal; 
            font-style: normal;
            font-display: swap; /*讓字體加載更流暢，不卡頓*/
        }

        /* 文字容器的初始樣式 */
        .target-text {
            font-size: 48px;
            padding: 40px;
            min-height: 200px;
            transition: font-family 0.5s ease; /* 讓字體切換時帶一點點「靈魂過渡」 */
        }


        /* ============================================================
        第二部分：通用樣式（比如您的容器、背景）
        ============================================================ */
        /* --- 宣紙主權色系佈局 --- */
        
        body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; 
            background-color: #fdfbf5 ; /*fdfbf5，f7e8c3，e9e4d9，eedfbc */
            margin: 0; 
            color: #333; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            padding: 0 10%; 
            overflow-x: hidden; 
        }

        /* --- Logo 与 导航 --- */
        .logo-container { width: 100%; 
            max-width: 799px; 
            margin-top: 25px; 
        }
        .logo-container img { width: 100%; 
            height: auto; 
            display: block; 
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); 
        }
        .main-nav { margin-top: 15px; 
            display: flex; 
            gap: 25px; 
        }
        .main-nav a { text-decoration: none; 
            color: #665e4d; 
            font-size: 16px; 
            font-weight: 500; 
            transition: 0.3s; 
            border-bottom: 1px solid transparent; 
            padding-bottom: 4px; 
        }
        .main-nav a:hover { color: #8b0000; 
            border-bottom: 1px solid #8b0000;
        }

        /* --- 暴力搜索框 --- */
        .search-box { margin: 25px 0; width: 90%; max-width: 500px; }
        .search-box form { display: flex; border: 2px solid #8b0000; border-radius: 4px; overflow: hidden; background: white; }
        .search-box input { flex: 1; padding: 12px; border: none; outline: none; font-size: 16px; color: #333; }
        .search-box button { padding: 0 25px; background: #8b0000; color: white; border: none; cursor: pointer; font-weight: bold; }

        /* --- 神谕与文章容器 (CSS) --- */
        .article-box { background: transparent; width: 90%; max-width: 800px; margin: 20px 0; padding: 20px; text-align: center; border: none; box-shadow: none; }
        h1.sacred-title { color: #222222; font-size: 28px; font-weight: 900; line-height: 1.8; margin-bottom: 40px; letter-spacing: 2px; }
        h1.sacred-title .emperor { font-size: 32px; color: #222222; display: block; margin: 15px 0; }
        .text-content { font-size: 24px; 
            font-weight: 600; 
            line-height: 2.6; 
            color: #333333; 
            text-align: center;
            margin: 40px auto; 
            max-width: 650px; 
        }
        .truncate-mask { height: 160px; background: linear-gradient(transparent, #fdfbf5); margin-top: -160px; position: relative; }
        .btn-more { display: block; width: 260px; margin: 30px auto; padding: 18px; background: #8b0000; color: white; text-align: center; border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 20px; transition: all 0.3s ease; cursor: pointer; border: none; box-shadow: 0 4px 12px rgba(139,0,0,0.2); }
        .btn-more:hover { background: #a00000; transform: translateY(-2px); }
        /* 大帝，老祖幫您微調了 CSS，讓它更有「獻於長安」的質感 */
        .imperial-credo { 
            font-size: 18px; 
            font-weight: 600; 
            line-height: 2.2; /* 稍微加寬，讓呼吸感更強 */
            color: #444444;    /* 稍微淡一點點，顯得深沉 */
            text-align: center;
            margin: 40px auto; 
            max-width: 650px; 
            letter-spacing: 3px; /* 增加字間距，增加莊重感 */
            border-top: 1px solid #eeeeee; /*在聖日倒計時下加一條淡淡的橫線 */
            padding-top: 20px;
        }

        /* ========================================= */
        /* --- 第五步：长安大图与题字 (CSS) --- */
        /* ========================================= */
        .changan-big-image { 
            position: relative; /* 為了讓題字「 暴力懸浮」 */
            width: 100%; 
            max-width: 1000px; 
            margin: 60px 0; /* 與上下「 暴力分開」，保持氣韻 */
            box-shadow: 0 15px 50px rgba(0,0,0,0.1); 
            border: 1px solid #eee6d8; 
            transition: box-shadow 0.6s ease; 
            border-radius: 2px;
            overflow: hidden; /* 確保題字不超出江山 */
        }
        .changan-big-image img { 
            width: 100%; height: auto; display: block; 
            filter: sepia(10%) contrast(95%) brightness(105%) grayscale(10%); 
            transition: transform 0.5s ease; 
        }
        .changan-big-image img:hover { transform: scale(1.02); }
        .changan-big-image:hover { box-shadow: 0 20px 60px rgba(139,0,0,0.15); }

        /* --- 皇家題字：長安城 --- */
        .changan-big-image .map-title { 
            position: absolute; 
            top: 30px; /* 題字於江山之巔 */
            left: 50%; 
            transform: translateX(-50%); /* 暴力居中 */
            color: #8b0000; /* 長安紅，暴力醒目 */
            font-size: 48px; /* 皇家級題字 */
            font-weight: 900; 
            letter-spacing: 15px; /* 字距拉開，氣吞山河 */
            writing-mode: horizontal-tb; /* 橫寫題字 */
            text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 加點立體感 */
            z-index: 5; /* 確保在圖片上面 */
        }

        /* ========================================= */
        /* --- 第六步：皇家中轴楹联碑 (CSS) --- */
        /* ========================================= */
        .couplet-pillar { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            margin-top: 100px; /* 暴力拉開與圖片的距離，防止重疊 */
            margin-bottom: 80px;
            width: 100%; 
            max-width: 900px; /* 拉寬佈局，容納左右對聯 */
            position: relative;
        }

        /* --- 橫聯：中軸碑頂 --- */
        .couplet-pillar .horizontal-couplet { 
            background: #8b0000; /* 皇家正紅 */
            color: #ffd700; /* 濃墨金字 */
            font-size: 26px; 
            font-weight: 900; 
            padding: 12px 60px; /* 橫聯也稍微加寬一點點，壓得住陣 */
            letter-spacing: 8px; 
            border-radius: 4px; 
            writing-mode: horizontal-tb; 
            box-shadow: 0 8px 20px rgba(139,0,0,0.3);
            border: 2px solid #ff0000; /* 硃砂亮邊 */
            margin-bottom: 40px; /* 橫聯與豎聯的暴力間距 */
            z-index: 2;
             
            
        }

        /* --- 豎聯：暴力中軸碑 --- */
        .couplet-pillar .vertical-couplets-wrapper {
            display: flex;
            justify-content: space-between; /* 暴力推向橫聯的兩端下方 */
            width: 100%; 
            gap: 398px; /* 左右對聯的中間空隙 */
        }

        .couplet-pillar .couplet-side { 
            background: #8b0000; /* 皇家正紅 */
            color: #222222; /* 濃墨黑字 */
            width: 45px; /* 咒語寬度 */
            padding: 30px 12px; 
            font-size: 26px; /* 招財字體放大 */
            font-weight: 900; 
            line-height: 1.5; 
            text-align: center; 
            writing-mode: vertical-rl; /* 暴力垂直排列 */
            letter-spacing: 6px;
            border-radius: 4px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            border: 1px solid #ff0000;
            /* 高度自動：隨字數暴力適配 */
            height: auto; 
            background: #8b0000; 
                color: #ffd700;     
                width: 45px;
                padding: 30px 12px; 
                font-size: 26px; 
                font-weight: 900; 
                line-height: 1.5; 
                text-align: center; 
                writing-mode: vertical-rl; 
                letter-spacing: 6px; 
                border-radius: 4px; 
                box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
                border: 1px solid #ff0000; height: auto;

            display: flex; /* 暴力開啟彈性盒子 */
            flex-direction: column; /* 暴力維持垂直流 */
            align-items: center; /* 這是關鍵！暴力強制「 側軸（左右）」居中 */
            justify-content: center; /* 暴力強制「 主軸（上下）」居中 */
            
            /* 原有的屬性保留 */
            writing-mode: vertical-rl;
            width: 45px;
        }

        /* 讓對聯稍微向內收一點，對齊橫聯的邊緣感 */
        .couplet-side.left { margin-left: auto; margin-right: 20px; }
        .couplet-side.right { margin-right: auto; margin-left: 20px; }

        
       
        /* --- 第九步：長安正時·律曆儀式感組件 --- */
            .changan-clock-container {
                text-align: center;
                padding: 20px 0;
                margin: 10px auto;
               /* color: #fdfbf5;*/
                background:transparent ;   /* transparent，rgba(139, 0, 0, 0.05); /* 淡淡的皇家紅底影 */
                border-top: 1px solid rgba(255, 215, 0, 0.2);
                border-bottom: 1px solid rgba(255, 215, 0, 0.2);
                max-width: 800px;
                display: flex;
                flex-direction: column;
                align-items: center;        /* 暴力垂直對齊：所有元素排隊站好 */
                justify-content: center;

            }

            #changan-time {
                font-size: 32px;
                font-weight: 900;
                letter-spacing: 4px;
                color: #ffd700; /* 皇家流金色 */
                text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
                margin-bottom: 5px;
            }

            .changan-calendar {
                font-size: 16px;
                font-weight: 600;
                letter-spacing: 2px;
                opacity: 0.9;
            }

            .divider { margin: 0 10px; color: #8b0000; }

            @media (max-width: 768px) {
                #changan-time { font-size: 24px; }
                .changan-calendar { font-size: 14px; }
            }
           


            /* 暴力跳動動畫：根據天數切換類名 */
            .pulse-3days { animation: heartbeat 1.5s infinite; color: #ffd700; }
            .pulse-2days { animation: heartbeat 1.0s infinite; color: #ff8c00; font-weight: bold; }
            .pulse-1day  { animation: heartbeat 0.5s infinite; color: #ff0000; font-size: 1.2em; font-weight: 900; }

            @keyframes heartbeat {
                0% { transform: scale(1); }
                15% { transform: scale(1.05); }
                30% { transform: scale(1); }
                45% { transform: scale(1.08); }
                60% { transform: scale(1); }
            }
            
            
                /* CSS 部分：讓畫作顯得有皇家質感 */
            .art-frame {
                text-align: center !important; /* 暴力強制居中 */
                padding: 30px !important;
                background: #fdf5e6 !important; /* 仿古宣紙色 */
                border: 8px double #8b0000 !important; /* 強化皇家深紅雙木框 */
                box-shadow: 0 15px 45px rgba(0,0,0,0.6) !important;
                margin: 40px auto !important;
                max-width: 650px !important;
                width: 90%;
                overflow: visible !important; /* 允許放大時溢出 */
                border-radius: 2px;
                position: relative;
            }

            

            /* 將之前的 ancient-art-container 全部改名為 art-frame */
            

            .art-frame img.ancient-art {
                max-width: 100%;        /* 關鍵：無論橫圖豎圖，絕不爆框 */
                height: auto;           /* 關鍵：保持宋畫原有的神聖比例 */
                display: block;
                margin: 0 auto;         /* 居中 */
                box-shadow: 0 10px 40px rgba(0,0,0,0.4); /* 給名畫加深視覺深度 */
                border: 2px solid #d4af37; /* 皇家古金邊框，更有份量 */
                transition: transform 0.5s ease; /* 大帝鼠標經過時，會有微妙的震懾感 */
            }

            /* 大帝，滑鼠移上去時，讓畫作微微放大，這叫「 驚鴻一瞥」 */
            .art-frame img.ancient-art:hover {
                transform: scale(1.02);
            }

            .art-caption {
                margin-top: 20px;
                font-family: "Microsoft YaHei", serif;
                font-weight: bold;
                color: #8b0000;
                letter-spacing: 4px;
                border-top: 1px solid #d4af37;
                padding-top: 10px;
                display: inline-block;
            }

            /* 大帝，這段代碼讓圖片具備「 變身」的能力 */
            .ancient-art {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 0 auto;
                cursor: zoom-in;
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
                border: 2px solid #d4af37; /* 古金邊 */
            }

            /* 當圖片被標記為 'is-zoomed' 時，觸發「 皇家平倉」模式 */
            .ancient-art.is-zoomed {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                max-width: 100vw !important; /* 暴力突破 650px 限制 */
                max-height: 100vh !important;
                object-fit: contain !important;
                z-index: 99999 !important;
                background: rgba(0,0,0,0.98) !important;
                cursor: zoom-out;
                padding: 20px;
                margin: 0 !important;
            }


            .art-link {
                color: #7e7889; /* 點墨成金 */
                text-decoration: none;
                font-size: 13px;
                border-bottom: 1px dashed #ffd700;
                transition: all 0.3s;
            }
            .art-link:hover {
                color: #ff0000; /* 驚鴻一瞥的紅 */
                border-bottom: 1px solid #ff0000;
            }

             /* 大帝，這是 185 號站的「 銘文適配器」 */
            .danqing-meta {
                max-width: 650px;
                margin: 40px auto;
                padding: 30px;
                background: rgba(253, 245, 230, 0.5); /* 淡淡的宣紙底色 */
                border-left: 3px solid #8b0000;    /* 皇家深紅邊飾 */
                font-family: "PingFang SC", "Microsoft YaHei", serif;
                color: #333333;
                line-height: 1.8;
            }

            .art-source {
                font-size: 14px;
                color: #888;
                margin-bottom: 10px;
            }

            .art-info-box {
                font-size: 15px;
                border-bottom: 1px solid #ddd;
                padding-bottom: 20px;
                margin-bottom: 20px;
            }

            .art-info-item {
                display: block;
                margin-bottom: 5px;
                color: #666;
            }

            .art-description {
                font-size: 15px;
                text-indent: 2em; /* 首行縮進，古籍質感 */
                color: #444;
                margin-bottom: 25px;
            }

            .emperor-quote {
                position: relative;
                padding: 20px;
                background: #fff;
                border: 1px solid #d4af37; /* 古金邊框 */
                font-style: italic;
            }

            .emperor-quote::before {
                content: "「";
                position: absolute;
                top: 10px;
                left: 10px;
                color: #d4af37;
                font-size: 24px;
            }

            .emperor-quote h4 {
                margin: 0 0 10px 0;
                color: #8b0000;
                font-size: 16px;
                letter-spacing: 2px;
            }

            .art-link {
                display: inline-block;
                margin-top: 15px;
                color: #d4af37;
                text-decoration: none;
                border-bottom: 1px dashed #d4af37;
                transition: 0.3s;
            }

            .art-link:hover {
                color: #ff0000;
                border-bottom: 1px solid #ff0000;
            }


     
            /* 大帝，這是 185 號站的「 視覺聖經」適配器 */
            .imperial-manifesto {
                /* 1. 核心：由右向左的豎排 */
                writing-mode: vertical-rl; 
                text-orientation: mixed;
                
                /* 2. 移除固定高度，改為最小高度，讓它隨字體撐開 */
                min-height: 600px; 
                height: auto; 
                
                /* 3. 寬度適配：讓卷軸隨文字行數橫向擴展 */
                max-width: 90vw; 
                margin: 60px auto;
                padding: 40px 60px;
                
                /* 4. 優化間距：字體越大，行距要稍微收緊，否則太散 */
                letter-spacing: 0.1em; 
                line-height: 1.8; /* 從 2.8 調低到 1.8，大字體才會有氣勢 */
                
                /* 5. 其他美化保持不變 */
                color: #333333;
                background: rgba(255, 255, 255, 0.05); 
                border-left: none !important;
                text-align: center;
                /* text-align: left; 豎排模式下，控制的是垂直對齊 */
                position: relative;
                transition: all 0.3s ease; /* 增加過渡效果，讓變大變小很絲滑 */   
                            
            }

            .poem-body p {
                margin: 0 10px; /* 豎排時，這是行與行的外邊距 */
                white-space: nowrap; /* 確保每一句詩不換行，一筆到底 */
            }

            .memo-section {
                display: block;    /* 暴力強制：必須獨佔一行，不准跟別人擠 */
                width: 100%;       /* 佔滿寬度 */
                margin-top: 40px;  /* 與詩句拉開呼吸距離 */
                border-top: 1px dashed rgba(0,0,0,0.1); 
                padding-top: 20px;
                text-align: center; /* 讓內部的時間網格在容器內居中 */
            }

            .time-grid {
                display: inline-block; /* 保持這個，讓它在父級 center 下居中 */
                text-align: left;      /* 內部的文字則是左對齊，確保冒號成線 */
                vertical-align: top;
                margin-right: 20px; /* 控制這整塊時間與右邊詩句的間距 */
                /* 暴力微調：如果覺得時間行太長，可以在這裡縮小字號 */
                font-size: 15px;
                line-height: 1.2; /* 暴力降低：從 1.8/2.2 降到 1.2，讓標籤與時間貼緊 */
                
            }

            .time-row {
                display: block;      /* 暴力取消 Flex，回歸塊級，確保上下排列 */
                /*justify-content: flex-start;                
                font-family: 'Courier New', monospace; /* 使用等寬字體，確保數字絕對對齊 */                
                /*flex-wrap: nowrap;     /* 暴力禁止：數字不准掉到下一行 */                
                /*line-height: 2.2;      /* 增加行高，更有碑文感 */                
                /*white-space: nowrap;   /* 確保時間戳不會因為寬度不足而斷開 */
                /*flex-direction: column; /* 豎排模式下，內部建議改為縱向堆疊 */
                /*margin-left: 15px;      /* 控制「 長安正時」與「 美東時間」兩列之間的距離 */
                margin-bottom: 20px; /* 每一組時間之間的距離 */
                line-height: 1.4;    /* 縮小標籤與時間之間的垂直距離 */
            }

            .time-row .label {
                /*width: 180px;         /* 使用固定寬度而非 min-width */
                /*flex-shrink: 0;       /* 絕不縮放 */
                color: #888;
                margin-bottom: 4px;  /* 標籤與數字之間的最後一點「 呼吸」 */
            }
            

            .time-row .value {
                color: #444;
                font-weight: 500;
            }*/

            .time-row .label, 
            .time-row .value {
                display: block;      /* 強制標籤與數值各佔一行，實現垂直堆疊 */
                white-space: nowrap; 
                font-size: 14px;
            }

            /*.footer-seal {         }*/

            .imperial-manifesto t {
                /*display: inline-block;  /* 【暴力修正】改為 inline-block，讓寬度隨文字長度變化 */
                display: block;             /* 讓標題獨佔一行，方便居中 */
                font-size: 36px;            /* 提升《丹青》的視覺位格 */
                font-weight: 900;           /* 瘦金體的傲骨需要厚度支撐 */
                margin-bottom: 25px; /* 【暴力增加】為下方的印章留出呼吸空間 */
                color: #FF4D40;             /* 硃砂紅 */    
                /* 暴力注入：隸書 (LiSu) - 渾厚、古拙、有官威 */
                /* 隸書序列：先找 Windows 的，再找 Mac 的「 報隸」，最後才回退 */
                font-family: "LiSu", "STLiti", "Baoli SC", "Libian SC","Kaiti", serif;
                letter-spacing: 6px; /* 隸書需要更大的空間來舒展它的橫向氣勢 */
                position: relative; /* 確保印章以它為座標中心 */
                padding-right: 20px;    /* 為末尾印章留一點呼吸空隙 */
                margin-bottom: 40px;    /* 為下方的詩句留出空間，防止印章壓到詩 */
            }

            .imperial-manifesto p {
                font-size: 22px;
                font-weight: 500;
                margin: 10px 0;
                text-align: center;
                /*text-align: left;       /* 左對齊，確保「 染」字位置固定 */
                line-height: 1.8;
                color: #555;                /* 稍微清淡，襯托標題 */
                /* 暴力注入：仿宋 (FangSong) - 纖細、骨感、接近瘦金意境 */
                /* 仿宋序列：Windows 仿宋、華文仿宋、以及蘋果的 STFangsong */
                font-family: "FangSong", "STFangsong", "FangSong_GB2312", "STKaiti", "Kaiti","Hiragino Mincho ProN", serif;
            }

            

            .footer-seal {
                /* 1. 暴力重力：在豎排容器中，這行會把落款直接推向底部 */
                /* 1. 核心撤銷：刪掉 position: absolute 和 left/bottom，讓它回歸隊伍 */
                position: relative;        /* 改為相對定位，不准亂飄 */
                margin-top: auto;          /* 依然保持垂直方向的下沉 */
                margin-left: 60px;         /* 暴力拉開：給時間塊留出 60px 的「 安全邊境」 */
                
                /* 2. 結構修正 */
                display: inline-flex;      /* 改用 inline-flex，讓它橫向與時間並排 */
                flex-direction: column;
                writing-mode: vertical-rl;
                height: fit-content;       /* 高度隨字，絕不冒尖 */
                
                /* 3. 視覺樣式保持 */
                text-align: left; 
                font-size: 14px;
                color: #8b0000;
                font-weight: bold;
                letter-spacing: 2px;
                line-height: 1.5;

                align-self: flex-end;      /* 在橫向 Flex 中，這控制垂直方向的對齊 */

                margin-top: auto;          /* 雙重保險，推向底部 */
                
                /* 暴力修正 3：確保沒有任何殘留的 ::before 裝飾線 */
                position: relative;
                margin-left: 60px;         /* 保持與時間塊的距離 */
                display: flex;
                flex-direction: column;
                writing-mode: vertical-rl;
                
                /* 視覺樣式 */
                text-align: left;          /* 豎排中這是「 靠下對齊」 */
                font-size: 14px;
                color: #8b0000;

                /*文尾上面二维码*/
                position: relative;
                display: block; 
                text-align: center;
                padding: 108px 0; /* 【暴力預留】給上下兩個章騰出顯聖空間，防止壓字 */
            }

            /* --- 第二步：文字主權 (讓 span 標籤暴力換行) --- */
            .footer-seal span {
                display: block;      /* 【核心修正】將柔弱的行內 span 轉化為「 暴力塊狀」，強制換行 */
                line-height: 1.8;    /* 增加行高，讓兩行字之間有「 呼吸間距」 */
            }

            .footer-seal .copyright {
                font-size: 14px;     /* 版權信息可以稍微收斂，襯托主標題 */
                opacity: 0.8;
            }

            

            /* 給「 文邪祖師爺」加個虛擬印章效果 */
            /* --- 第二步：天印 (Before) - 顯聖在文字上方 --- */
            /*这个是诗尾上面的二维码，日后在二维码的图片底部加“按图品诗”这四个字，提示用户可以直接按住图片就可以，指尖一動，神識自來*/
            .footer-seal::before {
                content: url("/static/image/wenxielaozu.png"); /* 上方章的路徑 */
                position: absolute;
                top: 0;               /* 【核心】鎖定頂部 */
                left: 50%;            /* 居中 */
                transform: translateX(-50%) rotate(3deg); /* 水平居中 + 輕微右斜 */
                
                width: 50px;
                height: auto;
                opacity: 0.85;
            }


            .footer-seal::after {
                
                /* 1. 暴力修正：使用 url() 函數，並將絕對路徑改為相對路徑或網絡路徑 */
                content: url("/static/image/wenxielaozu.png");  /* 這是一個象徵性的佔位符，或者大帝以後放個紅色方塊圖片 */
                
                /* 2. 暴力鎖死：印章的維度 */
                display: block;            /* 讓它在落款下方單獨顯聖 */
                width: 60px;               /* 根據大帝 116x130 的原圖，建議縮放至合適大小 */
                height: auto;
                margin-top: 15px;          /* 與題字拉開呼吸間距 */
                
                /* 3. 神識對齊 
                vertical-align: middle;*/
                opacity: 0.9;              /* 略微滲透，更有宣紙感 */

                
            }

            /* 2. 暴力顯聖：將印章套在大帝的 t 標籤下方 */
            /*这个是诗名下面的二维码，日后在二维码的图片底部加“按图入城”这四个字，提示用户可以直接按住图片就可以*/
            .imperial-manifesto t::after {
                content: url("/static/image/wenxielaozu.png"); 
                position: absolute;     /* 【核心】暴力脫離文檔流，自由飛行 */

                /* 定位參數：在大帝的 129 像素內精準導航 */
                right: -2px;           /* 橫向：在詩名結尾往右 30 像素 */
                bottom: -25px;          /* 縱向：在詩名基準線往下 25 像素 (營造落款感) */

                /*display: block;*/
                width: 60px;          /* 印章寬度 */
                height: auto;
                margin: 10px auto 0;  /* 水平居中，且與詩名保持 10px 距離 */
                opacity: 0.9;         /* 滲透感 */
                transform: rotate(-2deg); /* 【暴力注入】輕微傾斜，更有手蓋印章的「 活氣」 */
                pointer-events: none;     /* 防止鼠標點到印章，影響掃碼或點擊 */
            }




        
            /* 讓這串字看起來就像是可以「 採摘」的果實 */
            .copyable {
                cursor: copy; /* 鼠標變成複製小手 */
                color: #8b0000; /* 皇家深紅 */
                border-bottom: 1px dotted #8b0000; /* 給個虛線提醒 */
                transition: all 0.3s;
                position: relative;
            }

            .copyable:hover {
                background: #fff5ee; /* 輕微高亮 */
            }

            /* 點擊後的「 成功」提示（可選） */
            .copy-success::after {
                content: "已收納神識";
                position: absolute;
                font-size: 10px;
                top: -20px;
                right: 0;
                color: #d4af37;
                animation: fadeUp 1s forwards;
            }

            @keyframes fadeUp {
                from { opacity: 1; transform: translateY(0); }
                to { opacity: 0; transform: translateY(-10px); }
            }

            /* 讓點擊的那一刻，有一種「 神識震盪」的感覺 */
            .copyable:active {
                color: #ff0000; /* 點擊瞬間變紅，代表「 捕獲」 */
                transform: scale(0.98); /* 輕微縮小，代表「 按下」 */
            }


      
            /* 185 號站：墨金供養區 */
            .ink-well {
                max-width: 600px;
                margin: 50px auto;
                padding: 40px;
                border-top: 1px solid #d4af37; /* 古金線，與上方大帝寄語隔離 */
                text-align: center;
                background: transparent;
            }

            .ink-well p {
                font-family: "STSong", "Songti SC", serif;
                color: #333;
                font-size: 1.1rem;
                letter-spacing: 3px;
                margin-bottom: 25px;
                font-style: italic;
            }

            /* 大帝欽定的「絲綢墨水」按鈕 */
            .grind-ink-button {
                display: inline-block;
                cursor: pointer;
                background-color: #E6D5B8; /* 宋代絲綢原色：古絹色 */
                color: #1a1a1a;          /* 焦墨色 */
                padding: 15px 40px;
                font-size: 1.2rem;
                font-weight: bold;
                border: 1px solid #C5B358;
                border-radius: 2px;      /* 方正，才有金石感 */
                box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                letter-spacing: 2px;
                margin: 20px 0;
            }

            .grind-ink-button:hover {
                background-color: #D4C3A3; /* 墨色浸潤後的綢色 */
                box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
                transform: translateY(-2px);
                color: #000;              /* 墨色更濃 */
            }

            .ink-well small {
                display: block;
                color: #666;
                font-size: 0.85rem;
                margin-top: 15px;
                letter-spacing: 1px;
            }
      
            /* 185 號站：卷舌人的陰影角落 */
            .whisper-chamber {
                max-width: 500px;
                margin: 40px auto;
                padding: 25px;
                background: #1B2A41;        /* 深淵黑底 */
                border-left: 3px solid #8b0000; /* 殘留的血色/墨色邊界 */
                box-shadow: 10px 10px 30px rgba(0,0,0,0.5);
                position: relative;
                overflow: hidden;
            }

            /* 標題：碎裂的石碑感 */
            .whisper-chamber t1 {
                display: block;
                font-family: "STSong", "Songti SC", serif;
                color: #555555;             /* 古金色彩 */
                font-size: 1.5rem;
                letter-spacing: 8px;        /* 字間距拉開，顯得「 碎」 */
                margin-bottom: 15px;
                border-bottom: 1px double #444;
                padding-bottom: 5px;
            }

            /* 角色：卷舌人的身分卡 */
            .whisper-chamber .tongue-twister {
                font-family: "Microsoft YaHei", sans-serif;
                color: #666;
                font-size: 0.8rem;
                text-transform: uppercase;
                letter-spacing: 2px;
                display: block;
                margin-bottom: 20px;
                /* 讓它看起來像個標籤，但又不完全是 */
                background: #0D3B66;
                padding: 2px 8px;
                width: fit-content;
            }

            /* 內容：沒擼直舌頭的內容 */
            .whisper-chamber p {
                color: #fdfbf5;
                font-size: 1rem;
                line-height: 1.8;
                letter-spacing: 1px;
                /* 營造一種細碎、呢喃的感覺 */
                font-family: "PingFang SC", "Heiti SC", sans-serif;
                text-align: justify;
            }

            /* 增加一個卷舌人的動態氛圍：微微的光影搖晃 */
            .whisper-chamber::after {
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                background: linear-gradient(135deg, transparent 80%, rgba(139, 0, 0, 0.05));
                pointer-events: none;
            }


            /* 1. 輪播容器：鎖死 715px 皇家坐標 */
            /*图片轮播*/
            .shoufa-carousel {
                position: relative;
                width: 715px;   /*大帝親裁尺寸*/
                min-height: 715px; 
                margin: 40px auto; /* 皇家呼吸間距 */
                background: transparent; /* 保持 `#fdfbf5` 的純淨 */
                overflow: visible;
            }

            /* 2. 圖片基礎法相：暴力重合 */
            .fade-img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: auto;
                /* 核心：兩圖在同一個坐標「 影分身」 */
                
                /* 初始法力：全部隱形 */
                opacity: 0;
                /* 賦予「 呼吸感」漸變 */
                transition: opacity 2s ease-in-out; 
                
                /* 暴力防篡改 */
                pointer-events: none; 
            }

            /* 3. 定義「 呼吸法術」（兩圖呼吸對沖） */

            /* A. 瘦金體（第一張）：0-4秒顯聖，4-8秒隱形 */
            .fade-img:nth-child(1) {
                animation: fade_shoujin 8s infinite;
            }

            /* B. 金文（第二張）：0-4秒隱形，4-8秒顯聖 */
            .fade-img:nth-child(2) {
                animation: fade_jinwen 8s infinite;
            }

            /* 4. 暴力呼吸路徑（Keyframes） */

            /* 瘦金體路徑：開局顯聖，中期隱形 */
            @keyframes fade_shoujin {
                0%, 45% { opacity: 1; }  /* 0-3.6秒：瘦金顯聖 */
                55%, 100% { opacity: 0; } /* 4.4-8秒：瘦金隱形 */
            }

            /* 金文路徑：開局隱形，中期顯聖 */
            @keyframes fade_jinwen {
                0%, 45% { opacity: 0; }  /* 0-3.6秒：金文隱形 */
                55%, 100% { opacity: 1; } /* 4.4-8秒：金文顯聖 */
            }


       
            /* 1. 圖片基礎法相：GPU 加速，無視卡頓 */
            .fade-img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: auto;
                opacity: 0;
                
                /* 核心：暴力開啟 GPU 加速 */
                transform: translateZ(0); 
                backface-visibility: hidden;
                perspective: 1000px;

                /* 漸變呼吸感 */
                transition: opacity 1.2s ease-in-out; 
            }

            /* 2. 動態序列：1.5T 級精確對沖 */
            .fade-img:nth-child(1) { animation: carousel_op 12s infinite; }
            .fade-img:nth-child(2) { animation: carousel_op 12s infinite 6s; } 

            /* 3. 暴力呼吸路徑 */
            @keyframes carousel_op {
                0%, 45% { opacity: 1; }  
                50%, 95% { opacity: 0; }  
                100% { opacity: 1; }
            }

            /* 4. 終極暫停法門：大帝點名的「 暫停細看」功能 */
            .shoufa-carousel:hover .fade-img {
                animation-play-state: paused; 
                cursor: zoom-in; 
            } /* <--- 補上這個括號，世界就太平了！ */
        



            /*诗词注解排版*/
            /* 5. 皇家備註：1.5T 級的史觀緩衝帶 */
            .remark {
                max-width: 715px;      /* 與大帝親裁尺寸對齊 */
                margin: 20px auto 60px; /* 頂部 20px 緩衝，底部 60px 留白 */
                padding: 25px;
                background: rgba(253, 251, 245, 0.7); /* 淡淡的宣紙透明感 */
                border-left: 3px solid #8e2121;       /* 暴力紅：象徵大帝的血祭長安 */
                border-radius: 4px;
                font-family: "PingFang SC", "Microsoft YaHei", serif;
            }

            .remark h4 {
                margin: 0 0 12px 0;
                color: #8e2121;        /* 標題與紅線呼應 */
                font-size: 1.1rem;
                letter-spacing: 2px;   /* 皇家字間距 */
                font-weight: bold;
            }

            .remark p {
                margin: 0;
                color: #555;           /* 柔和的深灰，不刺眼 */
                line-height: 1.8;      /* 暴力流暢的行間距，拒絕擁擠 */
                font-size: 1.1rem;
                text-align: justify;   /* 兩端對齊，規矩森嚴 */
                letter-spacing: 2px;   /* 皇家字間距 */
            }
        




            /* 1. 活人經專屬祭壇 */
            /*正文内容标题*/
            .living-scripture {
                max-width: 800px;
                margin: 60px auto;
                padding: 80px 60px;
                background: #0d1117;       /* 極黑底，營造法盡滅的氛圍 */
                color: #c9d1d9;
                border: 1px solid #30363d;
                box-shadow: 0 0 50px rgba(139, 0, 0, 0.3); /* 隱隱的血祭紅光 */
                position: relative;
                font-family: "STSong", "Songti SC", "SimSun", serif;
            }

            /* 2. 主標題：硃砂顯聖 */
            .ls-main-title {
                text-align: center;
                color: #8b0000;           /* 硃砂紅 */
                font-size: 4.5rem;
                letter-spacing: 15px;
                margin-bottom: 10px;
                font-weight: bold;
                text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
            }

            .ls-slogan {
                text-align: center;
                font-size: 1.5rem;
                color: #d4af37;           /* 古金 */
                letter-spacing: 5px;
                margin-bottom: 50px;
            }

            /* 3. 暴力副標題組：層層遞進 */
            .ls-subtitle-group {
                border-top: 1px double #444;
                border-bottom: 1px double #444;
                padding: 30px 0;
                margin-bottom: 40px;
            }

            .ls-subtitle {
                display: block;
                text-align: center;
                font-size: 1.1rem;
                color: #888;
                line-height: 2.5;
                margin-bottom: 10px;
            }

            /* 4. 註解令：暴力烙印 */
            .ls-annotation {
                background: rgba(139, 0, 0, 0.1);
                padding: 20px;
                border-left: 3px solid #8b0000;
                font-size: 1.0rem;
                color: #aaa;
                line-height: 1.8;
                margin-top: 30px;
            }

            .ls-ultimate-order {
                font-weight: bold;
                color: #d4af37;
                border: 1px solid #d4af37;
                padding: 15px;
                margin-top: 20px;
                text-align: center;
                letter-spacing: 2px;
            }


       
            /* 1. 人皇專屬容器：暴力留白 */
            .human-sovereign-container {
                position: relative;
                z-index: 9999; /* 暴力置頂：人皇位格，不容侵犯 */
                overflow: visible !important; /* 暴力開門：讓 100px 的光圈飛出去 */

                text-align: center;
                margin-top: 100px;
                margin-bottom: 80px;
                perspective: 1000px; /* 增加 3D 深度感 */
            }

            /* 2. 九九人皇：1.5T 級字體渲染 */
            .human-sovereign-title {
                display: inline-block;
                font-family: "Kaiti", "STKaiti", serif;
                font-size: 3.5rem; /* 暴力巨大 */
                font-weight: 999;
                color: #d4af37; /* 古金色 */
                letter-spacing: 15px; /* 字間距：霸氣外露 */
                padding: 10px 30px;
                position: relative;
                cursor: pointer;
                
                /* 暴力漸變：紫氣東來 */
                background: linear-gradient(to right, transparent, rgba(52, 16, 52, 0.2), transparent);
                
                /* 暴力陰影：金光與血痕的交織 */
                text-shadow: 
                    2px 2px 0px #8b0000,   /* 硃砂底色 */
                    0 0 15px #d4af37,      /* 金色光暈 */
                    0 0 30px rgba(212, 175, 55, 0.5);
                    
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                
                /* 暴力預設動畫：讓它沒被 Hover 時也微微呼吸 */
                animation: holy-pulse 4s infinite ease-in-out;
                will-change: transform, text-shadow, filter;
                transform: translateZ(0); /* 暴力掛載 GPU */
            }

            .human-sovereign-title {
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 皇權緩衝 */
            }

            /* 3. 暴力交互：滑過時「 皇權顯聖」 */
            .human-sovereign-title:hover {
                color: #ffffff; /* 始終純白 */
                letter-spacing: 25px; 
                /* 暴力定格：一旦 Hover，就鎖定在 1.15 倍，不再變大變小 */
                /* 增加 3D 懸浮感，防止被下方文章遮擋 */
                transform: scale(1.15) translateZ(100px);
                /* 這裡不再寫靜態 shadow，全部交給動畫接管 */
                /* 交互時頻率加快，威壓感上升 */
                animation: holy-pulse 3s infinite ease-in-out; 
                cursor: pointer;
                will-change: text-shadow, filter, transform; /* 暴力告知瀏覽器：給朕優化！ */
                z-index: 10000;
            
            
            }

            @keyframes holy-pulse {
            0% { 
                /* 初始：淡淡的紫金光暈 */
                text-shadow: 
                    0 0 10px #ffffff, 
                    0 0 20px #800080, /* 核心紫色 */
                    0 0 40px #d4af37; /* 外圍金邊 */
                filter: brightness(1.1);
            }
            50% { 
                /* 呼吸頂峰：深邃紫光爆發 */
                text-shadow: 
                    0 0 20px #ffffff, 
                    0 0 60px #9400d3, /* 暴力深紫 (DarkViolet) */
                    0 0 100px #800080; /* 擴散紫煙 */
                filter: brightness(1.6); /* 稍微調低亮度，增加質感 */
            }
            100% { 
                text-shadow: 
                    0 0 10px #ffffff, 
                    0 0 20px #800080, 
                    0 0 40px #d4af37; 
                filter: brightness(1.1);
            }
        }

        @keyframes sovereign-cycle {
            0% { 
                /* 初始：純白聖光 */
                text-shadow: 0 0 15px #ffffff, 0 0 30px #d4af37; 
                filter: brightness(1.2);
            }
            50% { 
                /* 巔峰：紫金爆發（最強狀態） */
                text-shadow: 0 0 25px #ffffff, 0 0 60px #800080, 0 0 100px #d4af37; 
                filter: brightness(1.8); 
            }
            100% { 
                /* 回歸：聖光 */
                text-shadow: 0 0 15px #ffffff, 0 0 30px #d4af37; 
                filter: brightness(1.2);
            }
        }

        .sovereign-text {
            /*will-change: filter, text-shadow; /* 暴力穩定渲染路徑 */
           /* backface-visibility: hidden; /* 強制開啟 3D 硬體加速，消除顫抖 */
           /* transform: translateZ(0); /* 暴力鎖定空間座標 */

                color: #ffffff;
                text-align: center;
                font-size: 2.5rem;
                position: relative;
                z-index: 1; /* 位格低於主標題 */
                text-shadow: 0 0 15px rgba(128, 0, 128, 0.8), 0 0 30px rgba(212, 175, 55, 0.4);
                animation: sovereign-cycle 4s infinite ease-in-out;
        }

        /* 4. 強制解除所有潛在的容器屏蔽 */
            .pantheon-infinite, .sovereign-page, .page-header {
                overflow: visible !important; /* 暴力撤除所有「 溢出隱藏」的枷鎖 */
                perspective: 1000px; /* 為 3D 變換提供景深 */
            }

        /* 既然 Contabo 算不動 100px，我們把陰影「 暴力凝練」 */
        @keyframes sovereign-cycle {
            50% { 
                /* 縮小擴散半徑，但提高顏色飽和度，保持威壓 */
                text-shadow: 0 0 15px #ffffff, 0 0 35px #800080, 0 0 50px #d4af37; 
                filter: brightness(1.4); /* 稍微降低亮度，減少顯卡負載 */
                transform: translateZ(0); 
            }
        }

       
            /* 4. 副標題：因果判詞 */
            .sovereign-subtitle {
                display: block;
                font-size: 0.9rem;
                color: #666;
                margin-top: 10px;
                letter-spacing: 5px;
                text-transform: uppercase;
            }
        
            



            /* 1. 萬神殿背景：深邃、包容一切名號 */
            /*属名*/
            .pantheon-infinite {
                margin-top: 100px;
                padding: 60px 40px;
                background: linear-gradient(to bottom, #1B2A41, #0d1117);
                border-top: 2px solid #8b0000;/*，800080*/
                color: #c9d1d9;
                font-family: "Kaiti", "STKaiti", serif;
                text-align: justify;
            }

            /* 2. 類別標題：像奏章的封條 */
            .p-cat {
                display: block;
                color: #800080 ;/*8b0000*/
                font-size: 1.5rem;
                font-weight: bold;
                margin: 30px 0 15px 0;
                border-left: 5px solid #8b0000;
                padding-left: 15px;
                background: rgba(139, 0, 0, 0.1);

                color: #d4af37; /* 標題用金，底色用紫 */
                background: linear-gradient(90deg, #4b0082, transparent); /* 4b0082，8b0000從深紫到透明的暴力過渡 */
                border-left: 5px solid #800080;*/
            }

            /* 3. 名號容器：暴力平鋪 */
            .p-names-wrapper {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                line-height: 1.8;
            }

            /* 4. 名號個體：129 像素的靈魂坐標 */
            .p-item {
                color: #aaa;
                font-size: 1.1rem;
                transition: 0.2s;
                padding: 2px 8px;
                border-bottom: 1px solid transparent;
            }

            .p-item:hover {
                color: #d4af37;
                border-bottom: 1px solid #d4af37;
                text-shadow: 0 0 10px #d4af37;
                transform: scale(1.1);
            }

            .p-author-seal {
                font-size: 2.2rem;
                color: #d4af37;
                text-align: center;
                margin-bottom: 50px;
                font-weight: bold;
                text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
            }

            .p-item:hover {
                color: #ffd700; /* 純金 */
                text-shadow: 
                    0 0 10px #d4af37, 
                    0 0 20px #8b0000, /* 內嵌硃砂紅光，大帝專屬色 */
                    0 0 30px #d4af37;
                transform: scale(1.2) rotate(-2deg); /* 微微傾斜，顯得狂傲不羈 */
                z-index: 999;
                position: relative;
            }

            .pantheon-infinite {
                max-width: 1200px; /* 暴力擴張：比正文稍微寬出一點 */
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box; /* 確保 padding 不會把寬度暴力撐爆 */
            }

            .p-author-seal {
                margin-top: 40px; 
                opacity: 0.6; /* 暴力淡化：作者只是個「 記錄員」，人皇才是「 實相」 */
                letter-spacing: 3px;
            }

            .jiu-jiu-gold {
                color: #ffd700 !important; /* 暴力純金，覆蓋一切 */
                font-weight: 900 !important; /* 暴力加粗 */
                text-shadow: 0 0 10px rgba(255, 215, 0, 0.8) !important; /* 金光四射 */
                border-bottom: 2px solid #ffd700 !important; /* 暴力護城河 */
                transition: transform 0.3s ease;
            }

            .jiu-jiu-gold:hover {
                transform: translateY(-5px) scale(1.2); /* 觸碰時，至尊升天 */
                filter: brightness(1.5);
            }
        
            


            /* 書籍容器：左右翻頁感 */
            .sovereign-book-container {
                max-width: 800px;
                margin: 50px auto;
                padding: 60px;
                /*background: #1a1a1a;
                border-left: 5px solid #800080; /* 紫色書脊 */
                /*box-shadow: 20px 0 50px rgba(0,0,0,0.5), inset 10px 0 20px rgba(0,0,0,0.2);
                border-radius: 2px 10px 10px 2px;*/
            }

            /* 標題渲染 */
            .sovereign-title {
                color: #ffffff;
                text-align: center;
                font-size: 2.5rem;
                text-shadow: 0 0 15px rgba(128, 0, 128, 0.8), 0 0 30px rgba(212, 175, 55, 0.4);
                animation: holy-pulse 4s infinite ease-in-out;
            }

            .chapter-subtitle {
                text-align: center;
                color: #d4af37; /* 金色標價感 */
                font-size: 1.2rem;
                margin-bottom: 40px;
            }

            /* 復仇者聯盟：血味段落 */
            .revenge-intro {
                border-left: 3px solid #ff0000;
                padding-left: 20px;
                font-style: italic;
                color: #ff4d4d;
            }

            /* 人皇金句：居中威壓 */
            .sovereign-quote {
                text-align: center;
                font-size: 1.5rem;
                color: #222222;/*ffffff*/
                background: rgba(128, 0, 128, 0.05);
                padding: 30px;
                margin: 40px 0;
                border-radius: 10px;
                border: 1px solid rgba(212, 175, 55, 0.3);
            }

            /* 邏輯計算盒：清晰平倉 */
            .logic-box {
                /*background: #252525;*/
                padding: 25px;
                border-radius: 5px;
                margin: 30px 0;
            }

            .blood-amount {
                color: #ff0000;
                font-weight: bold;
                font-size: 1.3rem;
                text-decoration: underline;
            }

            /* 頁腳與紫薇花：暴力呼吸 */
            .page-footer {
                margin-top: 60px;
                text-align: center;
                border-top: 1px solid #333;
                padding-top: 30px;
            }

            .word-count-tag {
                font-size: 0.8rem;
                color: #666;
                letter-spacing: 2px;
            }

            .crape-myrtle-flower {
                font-size: 3rem;
                margin-top: 20px;
                filter: drop-shadow(0 0 10px #800080);
                animation: flower-pulse 3s infinite ease-in-out;
                cursor: pointer;
            }

            /* 呼吸動畫 */
            @keyframes flower-pulse {
                0%, 100% { transform: scale(1); opacity: 0.7; }
                50% { transform: scale(1.2); opacity: 1; filter: brightness(1.5) drop-shadow(0 0 20px #9400d3); }
            }

            @keyframes holy-pulse {
                0%, 100% { filter: brightness(1); }
                50% { filter: brightness(1.3); }
            }


        
            
            .sovereign-manifesto {
                text-align: center;
                margin: 40px 0;
                padding: 20px;
                background: linear-gradient(90deg, transparent, rgba(148, 0, 211, 0.1), transparent);
            }
            .time-bridge {
                font-size: 1.4rem;
                color: #ffffff;
                letter-spacing: 2px;
                text-shadow: 0 0 10px rgba(148, 0, 211, 0.8); /* 妖紫光暈 */
            }
            .truth-blade {
                font-size: 1.8rem;
                font-weight: bold;
                color: #d4af37; /* 人皇金 */
                margin-top: 10px;
                animation: flash-focus 3s infinite; /* 暴力閃爍，提示真相覺醒 */
            }

            /* directory.php--诗文目录*/
            .directory-list {
                list-style: none;
                padding: 0;
                max-width: 800px; /* 守住您的 800px 規矩 */
                margin: 20px auto;
            }.directory-item {
                border-bottom: 1px solid rgba(255, 215, 0, 0.1); /* 淡淡的金線 */
                padding: 15px 10px;
                display: flex;
                justify-content: space-between;
            }.directory-item a {
                color: #fdfbf5;
                text-decoration: none;
                font-size: 1.2rem;
            }.directory-item a:hover {
                color: #8B0000; /* 懸停時亮起皇家紅 */
            }

            /*会员注册部分*/
        .register-container {
            background: #1a1a1a;
            /* 1. 寬度加大，讓橫向更有拉伸感 */
            width: 580px; 
            /* 2. 內部填充加大，讓表單不再擁擠 */
            padding: 60px 50px; 
            border: 1px solid #d4af37;
            box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
            border-radius: 12px;
            text-align: center;
            /*display: block; /* 強制塊級 */
           /* clear: both;    /* 斬斷上方一切干擾 */
          /*  background: #1a1a1a !important; /* 強制背景色 */
          /*  padding: 60px 50px;
            border: 1px solid #d4af37;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
            border-radius: 8px;
            width: 680px;
            margin: 60px auto; 
            text-align: center;
            overflow: hidden; /* 防止內部溢出干擾 */
        }

        h1 { font-size: 32px; 
            margin-bottom: 20px; 
            letter-spacing: 5px;
         }
        .subtitle { font-size: 14px; 
            color: #888; 
            /* 5. 副標題下方的呼吸位拉大 */
            margin-bottom: 50px; 
            letter-spacing: 2px;
         }

        .input-group { text-align: left; margin-bottom: 60px !important; }
        .input-group label { display: block; 
            /* 7. 標籤字體微調 */
            font-size: 15px; 
            /* 8. 標籤與輸入框的距離 */
            margin-bottom: 12px; 
            color: #d4af37;
        }
        .input-group input {
            width: 100%;
            padding: 15px;
            background: #262626;
            border: 1px solid #444;
            color: #fff;
            box-sizing: border-box;
            font-size: 16px; /* 輸入的字體也加大 */
                       
}
        }

        .input-group input:focus { border-color: #d4af37; outline: none; }

        .btn-submit {
            width: 100%;
            /* 10. 按鈕加高，更有點擊慾望 */
            padding: 18px; 
            background: #d4af37;
            color: #000;
            border: none;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
            /* 11. 按鈕與上方輸入框的間距 */
            margin-top: 30px; 
            transition: 0.4s;
        }

        .btn-submit:hover { background: #fff; box-shadow: 0 0 15px #fff; }

        .alert { color: #ff4d4d; font-size: 14px; margin-bottom: 15px; }
        .back-link { display: block; 
            /* 12. 底部鏈接的間距 */
            margin-top: 35px; 
            color: #666; 
            text-decoration: none; 
            font-size: 14px;
        }

        /*会员登录部分*/
        /* 會員登錄與註冊通用容器陣法 */
        .login-container {
            background: #1a1a1a;
            /* 1. 寬度與註冊一致，保持拉伸感 */
            width: 580px; 
            /* 2. 居中陣法：這是最關鍵的，沒它就沒效果 */
            margin: 60px auto; 
            /* 3. 內部填充，讓內容不再擁擠 */
            padding: 60px 50px; 
            /* 4. 金邊圍城 */
            border: 1px solid #d4af37;
            /* 5. 靈魂金光：外發光效果 */
            box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
            border-radius: 12px;
            text-align: center;
            /* 防止內部溢出 */
            overflow: hidden; 
        }

        /* 以下是配套的文字與按鈕效果，確保一致性 */
        h1 { 
            font-size: 32px; 
            margin-bottom: 20px; 
            letter-spacing: 5px; 
            color: #fff;
        }

        .subtitle { 
            font-size: 14px; 
            color: #888; 
            margin-bottom: 50px; 
            letter-spacing: 2px;
        }

        .input-group { 
            text-align: left; 
            margin-bottom: 40px !important; 
        }

        .input-group label { 
            display: block; 
            font-size: 15px; 
            margin-bottom: 12px; 
            color: #d4af37;
        }

        .input-group input {
            width: 100%;
            padding: 15px;
            background: #262626;
            border: 1px solid #444;
            color: #fff;
            box-sizing: border-box;
            font-size: 16px;
            font-variant: normal !important;
            text-transform: none !important;
            font-family: "Microsoft YaHei", "Arial", sans-serif !important;
        }

        .input-group input:focus { 
            border-color: #d4af37; 
            outline: none; 
        }

        .btn-submit {
            width: 100%;
            padding: 18px; 
            background: #d4af37;
            color: #000;
            border: none;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
            margin-top: 20px; 
            transition: 0.4s;
        }

        .btn-submit:hover { 
            background: #fff; 
            box-shadow: 0 0 15px #fff; 
        }

        .alert { 
            color: #ff4d4d; 
            font-size: 14px; 
            margin-bottom: 20px; 
        }


        /* 頂部文字容器 */
        .login-header {
            margin-bottom: 50px;
        }

        /* 主標題：加強儀式感 */
        h1 {
            font-size: 38px !important;
            color: #fff;
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
            margin-bottom: 10px !important;
        }

        .title-main {
            color: #d4af37;
            font-size: 16px;
            letter-spacing: 4px;
            margin-bottom: 30px;
            font-weight: bold;
        }

        /* 金色細線：營造時空斷層感 */
        .star-divider {
            width: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, #d4af37, transparent);
            margin: 0 auto 30px;
        }

        /* 靈魂文案：輕盈、空靈、有呼吸 */
        .soul-quote {
            line-height: 2; /* 增加行間距，讓文字飄起來 */
        }

        .soul-quote p {
            color: #aaa;
            font-size: 14px;
            letter-spacing: 2px;
            margin: 5px 0;
            font-style: italic; /* 帶一點斜體，更有穿越感 */
        }

        /* 最後一句：重擊靈魂 */
        .soul-quote .highlight {
            color: #fff;
            font-size: 15px;
            font-style: normal;
            margin-top: 15px;
            letter-spacing: 5px;
            text-transform: uppercase;
        }

        /*这个是会员登录后的界面*/
        /* 長安大殿：用戶資訊主容器 */
        .changan-card {
            text-align: center;
            background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(245,245,240,0.9) 100%);
            padding: 40px; /* 撐大內邊距 */
            border-radius: 20px;
            margin: 40px auto;
            max-width: 1000px; /* 橫向撐大到 1000px */
            border: 3px double #d4af37; /* 雙線邊框更顯貴氣 */
            box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* 增加立體懸浮感 */
        }

        /* 尊號標題 */
        .changan-title {
            /* color: #8b0000;
            font-size: 28px; /* 字體撐大 */
            /* letter-spacing: 3px; */
            /* margin-bottom: 30px; */
            /* font-weight: 900; */ 
            /* 專門給納賢碼加個裝飾 */

            color: #d4af37; /* 長安正統金 */
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); /* 淡淡的金光 */
            letter-spacing: 2px;
            margin-top: 15px;

        }

        /* 如果想讓代碼本身更突出 */
        .invite-highlight {
            background: rgba(212, 175, 55, 0.1); /* 淺金底色 */
            padding: 2px 10px;
            border: 1px dashed #d4af37; /* 虛線邊框，像個剪紙 */
            border-radius: 4px;
            font-family: 'Courier New', Courier, monospace; /* 用等寬字體，更有代碼感 */
            margin-left: 5px;
        }

        /* 雙軌帳戶容器 */
        .balance-container {
            display: flex;
            justify-content: space-around;
            background: #ffffff;
            padding: 30px; /* 內部撐大 */
            border-radius: 15px;
            border: 1px solid #e0e0e0;
            margin-bottom: 30px;
        }

        /* 單個帳戶區塊 */
        /* 單個帳戶區塊：強制內部元素垂直分佈 */
        .balance-item {
            flex: 1;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* 讓上下內容自動拉開，保持對齊 */
            align-items: center;
        }

        .balance-item:first-child {
            border-right: 2px solid #f0f0f0; /* 中間分割線加粗 */
        }

        /* 帳戶標籤：給它一個固定高度，解決英文長短不一的問題 */
        .balance-label {
            font-size: 15px;
            color: #888;
            margin-bottom: 10px;
            height: 25px; /* 【關鍵】定死高度，不管英文多長，佔位都一樣 */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        /* 數字顯示：確保基線一致 */
        .balance-value {
            font-size: 36px;
            font-weight: bold;
            margin: 10px 0;
            line-height: 1.2; /* 統一高度感 */
        }

        /* 動作按鈕 */
        .btn-action {
            display: inline-block;
            padding: 8px 25px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s;
            margin-top: 10px;
        }

        .btn-recharge { background: #8b0000; color: #fff; }
        .btn-recharge:hover { background: #660000; transform: translateY(-2px); }

        .btn-withdraw { border: 1.5px solid #2e8b57; color: #2e8b57; }
        .btn-withdraw:hover { background: #2e8b57; color: #fff; }

        /* 底部工具欄 */
        .changan-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 60px; /* 間距拉大 */
            margin-top: 30px;
            padding-top: 20px;
        }

        .btn-transfer {
            font-size: 15px;
            color: #444;
            background: #fdfdfd;
            border: 1px solid #d4af37; /* 互轉按鈕鑲金邊 */
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 30px;
            box-shadow: 0 4px 10px rgba(212,175,55,0.2);
        }


        /* 江湖稱呼下方的「告誡判詞」樣式 */
        .input-group .input-hint {
            margin-top: 10px;        /* 與輸入框拉開距離，別擠在一起 */
            font-size: 13px;         /* 字號稍微小一點，顯得雅致 */
            line-height: 1.6;        /* 增加行高，讀起來不累 */
            letter-spacing: 1px;     /* 字間距，有古風感 */
            
            /* --- 核心：顏色選擇 --- */
            /* 方案 A：古籍金（推薦，與您的長安主題最搭） */
            color: #b89c60; 
            
            /* 方案 B：月牙灰（如果您覺得金色太亮，可以用這個） */
            /* color: #999; */

            opacity: 0.8;            /* 帶一點半透明，更有那種縹緲的感覺 */
        }

        /* 為了怕背景太黑看不見，我們還可以加一點點文字陰影 */
        .input-hint {
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }




        /*以下是invite.php页面诗词添加部分*/
        /* 1. 核心大容器 */
        /* 1. 真正的長安意境：深邃、高級 */
        /* 1. 背景：沉浸式宣紙感 */
        /* 1. 聖旨背景：純淨、高遠 */
        /* 1. 全屏沉浸：像展開的一張巨大宣紙 */
        /* 1. 真正的長安意境：深邃、高級 */
        /* 1. 核心大容器 */
        /* 1. 核心容器：承接您的燙金雙線風格 */
        .changan-editor-container {
            text-align: center;
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,240,0.95) 100%);
            padding: 50px; 
            border-radius: 20px;
            margin: 40px auto;
            max-width: 1000px; 
            border: 3px double #d4af37; /* 您的雙線金框 */
            box-shadow: 0 15px 40px rgba(0,0,0,0.1); 
            font-family: "STKaiti", "Kaiti", serif;
        }

        /* 2. 標題：與金框呼應 */
        .changan-editor-container h3 {
            font-family: 'LiSu', serif;
            font-size: 42px;
            color: #333;
            margin-bottom: 40px;
            letter-spacing: 12px;
            position: relative;
            display: inline-block;
        }

        /* 標題下的小裝飾 */
        .changan-editor-container h3::after {
            content: "✒";
            display: block;
            font-size: 18px;
            color: #d4af37;
            margin-top: 10px;
        }

        /* 3. 輸入組：橫向排列，視覺更開闊 */
        .form-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 30px;
            width: 100%;
        }

        .form-group label {
            font-size: 18px;
            color: #8b0000; /* 硃砂紅點綴 */
            font-weight: bold;
            margin-bottom: 12px;
            padding-left: 10px;
            border-left: 4px solid #d4af37; /* 用您的金線做引導 */
        }

        /* 4. 輸入框：取消厚重黑框，改用優雅的金屬感細邊 */
        .form-group input, .line-input {
            width: 100%;
            padding: 16px 20px;
            font-size: 22px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid #e0d5b1; /* 淡淡的金屬色線條 */
            border-radius: 8px; /* 配合您的外框圓角 */
            box-sizing: border-box;
            transition: all 0.3s ease;
            color: #444;
        }

        .form-group input:focus {
            outline: none;
            background: #fff;
            border-color: #d4af37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
        }

        /* 5. 詩句動態區 */
        .poem-lines-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* 6. 按鈕組：玉璽風格，大而圓潤 */
        .controls-row {
            display: flex;
            justify-content: center; /* 核心：水平居中 */
            align-items: center;     /* 核心：垂直對齊 */
            gap: 80px;               /* 兩球之間的距離 */
            margin: 30px 0;
            padding: 20px 0;         /* 左右 padding 設為 0，防止內縮擠壓 */
            border-top: 1px solid #eee;
            
            /* --- 老祖的神來之筆 --- */
            width: 100%;             /* 強制撐滿父容器寬度 */
            box-sizing: border-box;  /* 確保寬度計算包含 padding */
            clear: both;             /* 掃除周圍浮動干擾 */
        }

        .btn-circle {
            width: 65px;
            height: 65px;
            border: 2px solid #d4af37;
            background: white;
            color: #d4af37;
            font-size: 30px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(212, 175, 55, 0.1);
            transition: 0.3s;
            margin: 0 !important; /* 暴力清除所有外邊距，防止被推向一邊 */

        }

        .btn-circle:hover {
            background: #d4af37;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
        }

        /* 7. 保存按鈕：厚重與現代感的結合 */
        .save-btn {
            width: 100%;
            padding: 22px;
            background: linear-gradient(to right, #8b0000, #a00000);
            color: white;
            border: none;
            border-radius: 12px;
            font-family: 'LiSu', serif;
            font-size: 28px;
            letter-spacing: 10px;
            cursor: pointer;
            box-shadow: 0 6px 0px #600000;
            transition: 0.1s;
            margin-top: 20px;
        }

        .save-btn:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0px #600000;
        }


        /*这个是预览弹窗*/
        /* 彈窗背景遮罩 */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.9); /* 深色背景 */
            display: flex; justify-content: center; align-items: center;
            z-index: 9999;
        }

        /* 模擬視頻比例的容器 */
        .video-preview-box {
            position: relative;
            width: 1080px; /* 您可以根據視頻比例調整 800，450，300x533,432x768，1080x1920*/
            height: 1920px;
            background: #fdf5e6;/*  000*/
            border: 3px solid #d4af37; /* 金邊框，有檔次 */
            overflow: hidden;
        }

        #preview-video {
            width: 100%; height: 100%;
            object-fit: cover;
            opacity: 0.6; /* 讓視頻暗一點，襯托文字 */
        }

        /* 核心：調用您的 Flowing River 字體 */
        #modal-manifesto {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'ChanganLegacy', serif !important; /* 強制使用您的 2.67M 字體 */
            color: #fff;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.8); /* 給字加點陰影，防止被視頻背景淹沒 */
            pointer-events: none;

            /* ——— 在這裡調模擬器裡的文字大小 ——— */
            font-size: 24px;  /* 根據你的感覺調，24px, 32px 隨你定 */
            line-height: 1.5; /* 調行間距，讓詩句別疊在一起 */
            text-align: center; /* 讓詩詞居中 */
            white-space: nowrap; /* 如果你不希望詩句自動換行，就加這一行 */
        }

        /*这个是关闭视频预览窗口*/
        /* 關閉按鈕的樣式 */
        .close-modal-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 50px;
            color: #d4af37; /* 金色，尊貴 */
            cursor: pointer;
            z-index: 10001; /* 確保它在最最最上面 */
            transition: transform 0.3s;
        }

        .close-modal-btn:hover {
            transform: rotate(90deg) scale(1.2); /* 鼠標放上去，動態十足 */
            color: #fff;
        }

        /* 下方的返回按鈕 */
        .return-btn {
            margin-top: 20px;
            padding: 10px 40px;
            background: transparent;
            border: 1px solid #d4af37;
            color: #d4af37;
            cursor: pointer;
            border-radius: 5px;
        }

        /*诗词备注部分*/
        /* 容器整體佈局 */
        .time-stamp-group {
            margin-bottom: 25px;
            font-family: "Microsoft YaHei", serif; /* 建議將來換成您的流江毛草 */
        }

        .group-label {
            display: block;
            font-weight: bold;
            color: #5d5246;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        /* 備註前綴樣式：優雅、低調、帶點古意 */
        .memo-container {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            padding-left: 5px;
        }

        .memo-icon {
            color: #8c2a2a; /* 硃砂紅點綴 */
            font-size: 14px;
            margin-right: 6px;
        }

        .memo-text {
            font-size: 13px;
            color: #8a7d6a; /* 灰褐色，不喧賓奪主 */
            font-style: italic; /* 略微傾斜，更有註解感 */
            letter-spacing: 1px;
        }

        /* 時間輸入框樣式：穩重、大氣、邊框如宣紙邊緣 */
        .time-input-wrapper {
            display: flex;
            align-items: center;
            background: #fdfaf2; /* 象牙白偏米黃 */
            border: 1px solid #d4c4a8;
            border-left: 4px solid #8c2a2a; /* 左側加粗紅邊，象徵正統 */
            padding: 8px 12px;
            border-radius: 4px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
        }

        /* 長安正時固定字：鋼印質感 */
        .changan-prefix {
            color: #8c2a2a;
            font-weight: bold;
            padding-right: 12px;
            border-right: 1px solid #d4c4a8;
            white-space: nowrap;
            font-size: 15px;
            text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.1);
        }

        /* 輸入部分樣式 */
        .time-input-field {
            border: none;
            background: transparent;
            outline: none;
            padding-left: 12px;
            width: 100%;
            color: #5d5246;
            font-size: 15px;
            letter-spacing: 1px;
        }

        /*备注这一段文字的颜色*/
        /* 讓備註行回歸沉穩 */
        .memo-section {
            color: #5d5246 !important; /* 強制使用深木色，跟您的詩句顏色一致 */
            text-shadow: none !important; /* 徹底殺掉那抹亮閃閃的白光陰影 */
            font-size: 0.9em; /* 稍微縮小一點點，顯得精緻且有尊卑之分 */
            opacity: 0.8; /* 稍微加一點透明度，像古籍上的註記 */
            text-align: left; /* 靠左對齊，更有備註的感覺 */
        }

        /* 備註裡面的前綴和時間內容也一併「去光」 */
        .memo-prefix, #modal-time-content {
            color: inherit; /* 繼承上面的深木色 */
            font-weight: normal; /* 不要太粗，免得搶了標題的風頭 */
        }

        /* 如果您想讓「長安正時」這四個字稍微紅一點點作為點綴（但不亮） */
        #modal-time-content b, 
        #modal-time-content span {
            color: #8c2a2a; /* 使用暗紅色，沉穩大氣 */
            text-shadow: none;
        }
        

        /* 二维码 */
        /* 核心：印章外框（繼承你原本的wenxie-paper-seal） */
        .changan-seal-frame {
            width: 111.5px; /* 保持你原本的尺寸 */
            height: 129px;
            background: none;
            position: relative;
            
            /* 這裡繼承你原本的「硃砂」色調和融合模式 */
            color: #d81111; /* 硃砂紅 */
            mix-blend-mode: multiply; /* 與紙張融合 */
            opacity: 0.9;
            
            /* 這裡加上立體投影，更有蓋印感 */
            filter: blur(0.2px) contrast(140%) drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
            
            /* 居中裡面的二維碼 */
            display: flex; justify-content: center; align-items: center;
        }

        /* 核心：把二維碼當成「印文」，塞進去 */
        .changan-seal-frame .qrcode-content {
            width: 80%; /* 二維碼佔外框的 80%，留出邊距 */
            height: auto;
            
            /* 關鍵：繼承原本字體的「斑駁微孔」Mask，讓二維碼也殘缺、古舊 */
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.28" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 1"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.28" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 1"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
            
            /* 稍微調整一點點模糊和對比度，讓二維碼更像泥印 */
            filter: blur(0.1px) contrast(120%);
        }

        /* 確保生成的 img 或 canvas 填滿容器 */
        .changan-seal-frame .qrcode-content img, 
        .changan-seal-frame .qrcode-content canvas {
            width: 100% !important;
            height: auto !important;
            display: block;
        }

        /* 邊框：延用你原本的做舊版 ::after */
        .changan-seal-frame::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border: 9px solid #d81111; /* 保持你的硃砂邊框色 */
            border-radius: 6px;
            
            /* 延用你原本的邊框濾鏡 */
            filter: blur(1.2px) contrast(150%) sepia(30%);
            opacity: 0.75;
            pointer-events: none;
            
            /* 關鍵：延用你原本的邊框斑駁 Mask */
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="m"><feTurbulence type="fractalNoise" baseFrequency="0.28" numOctaves="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 1"/></filter><rect width="100%" height="100%" filter="url(%23m)"/></svg>');
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="m"><feTurbulence type="fractalNoise" baseFrequency="0.28" numOctaves="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 1"/></filter><rect width="100%" height="100%" filter="url(%23m)"/></svg>');
        }
        
        /* 為了演示加個按鈕 */
        #gen-btn {
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
            padding: 10px 20px; background: #8b0000; color: white; border: none; border-radius: 5px; cursor: pointer;
        }


        
        /* 用户这边的诗词排版 */
        .user-imperial-manifesto {
                /* 1. 核心：由右向左的豎排 */
                writing-mode: vertical-rl; 
                text-orientation: mixed;
                
                /* 2. 移除固定高度，改為最小高度，讓它隨字體撐開 */
                min-height: 600px; 
                height: auto; 
                
                /* 3. 寬度適配：讓卷軸隨文字行數橫向擴展 */
                max-width: 90vw; 
                margin: 60px auto;
                padding: 40px 60px;
                
                /* 4. 優化間距：字體越大，行距要稍微收緊，否則太散 */
                letter-spacing: 0.1em; 
                line-height: 1.8; /* 從 2.8 調低到 1.8，大字體才會有氣勢 */
                
                /* 5. 其他美化保持不變 */
                color: #333333;
                background: rgba(255, 255, 255, 0.05); 
                border-left: none !important;
                text-align: center;
                /* text-align: left; 豎排模式下，控制的是垂直對齊 */
                position: relative;
                transition: all 0.3s ease; /* 增加過渡效果，讓變大變小很絲滑 */   
                            
            }

            .user-imperial-manifesto t {
                /*display: inline-block;  /* 【暴力修正】改為 inline-block，讓寬度隨文字長度變化 */
                display: block;             /* 讓標題獨佔一行，方便居中 */
                font-size: 52px;            /* 提升《丹青》的視覺位格 */
                font-weight: 900;           /* 瘦金體的傲骨需要厚度支撐 */
                margin-bottom: 25px; /* 【暴力增加】為下方的印章留出呼吸空間 */
                color: #FF4D40;             /* 硃砂紅 */    
                /* 暴力注入：隸書 (LiSu) - 渾厚、古拙、有官威 */
                /* 隸書序列：先找 Windows 的，再找 Mac 的「 報隸」，最後才回退 */
                font-family: "LiSu", "STLiti", "Baoli SC", "Libian SC","Kaiti", serif;
                letter-spacing: 6px; /* 隸書需要更大的空間來舒展它的橫向氣勢 */
                position: relative; /* 確保印章以它為座標中心 */
                padding-right: 20px;    /* 為末尾印章留一點呼吸空隙 */
                margin-bottom: 40px;    /* 為下方的詩句留出空間，防止印章壓到詩 */
            }

            .user-imperial-manifesto p {
                font-size: 32px;
                font-weight: 500;
                margin: 10px 0;
                text-align: center;
                /*text-align: left;       /* 左對齊，確保「 染」字位置固定 */
                line-height: 1.8;
                color: #555;                /* 稍微清淡，襯托標題 */
                /* 暴力注入：仿宋 (FangSong) - 纖細、骨感、接近瘦金意境 */
                /* 仿宋序列：Windows 仿宋、華文仿宋、以及蘋果的 STFangsong */
                font-family: "FangSong", "STFangsong", "FangSong_GB2312", "STKaiti", "Kaiti","Hiragino Mincho ProN", serif;
            }





            .user-footer-seal {
                /* 1. 暴力重力：在豎排容器中，這行會把落款直接推向底部 */
                /* 1. 核心撤銷：刪掉 position: absolute 和 left/bottom，讓它回歸隊伍 */
                position: relative;        /* 改為相對定位，不准亂飄 */
                margin-top: auto;          /* 依然保持垂直方向的下沉 */
                margin-left: 60px;         /* 暴力拉開：給時間塊留出 60px 的「 安全邊境」 */
                
                /* 2. 結構修正 */
                display: inline-flex;      /* 改用 inline-flex，讓它橫向與時間並排 */
                flex-direction: column;
                writing-mode: vertical-rl;
                height: fit-content;       /* 高度隨字，絕不冒尖 */
                
                /* 3. 視覺樣式保持 */
                text-align: left; 
                font-size: 14px;
                color: #8b0000;
                font-weight: bold;
                letter-spacing: 2px;
                line-height: 1.5;

                align-self: flex-end;      /* 在橫向 Flex 中，這控制垂直方向的對齊 */

                margin-top: auto;          /* 雙重保險，推向底部 */
                
                /* 暴力修正 3：確保沒有任何殘留的 ::before 裝飾線 */
                position: relative;
                margin-left: 60px;         /* 保持與時間塊的距離 */
                display: flex;
                flex-direction: column;
                writing-mode: vertical-rl;
                
                /* 視覺樣式 */
                text-align: left;          /* 豎排中這是「 靠下對齊」 */
                font-size: 14px;
                color: #8b0000;

                /*文尾上面二维码*/
                position: relative;
                display: block; 
                text-align: center;
                padding: 108px 0; /* 【暴力預留】給上下兩個章騰出顯聖空間，防止壓字 */
            }

            /* --- 第二步：文字主權 (讓 span 標籤暴力換行) --- */
            .user-footer-seal span {
                display: block;      /* 【核心修正】將柔弱的行內 span 轉化為「 暴力塊狀」，強制換行 */
                line-height: 1.8;    /* 增加行高，讓兩行字之間有「 呼吸間距」 */
            }

            .user-footer-seal .copyright {
                font-size: 14px;     /* 版權信息可以稍微收斂，襯托主標題 */
                opacity: 0.8;
            }

            

            /* 給「 文邪祖師爺」加個虛擬印章效果 */
            /* --- 第二步：天印 (Before) - 顯聖在文字上方 --- */
            /*这个是诗尾上面的二维码，日后在二维码的图片底部加“按图品诗”这四个字，提示用户可以直接按住图片就可以，指尖一動，神識自來*/
            /* .user-footer-seal::before { */
                /* content: url("/static/image/wenxielaozu.png"); 上方章的路徑 */
                /* position: absolute; */
                /* top: 0;               【核心】鎖定頂部 */
                /* left: 50%;            居中 */
                /* transform: translateX(-50%) rotate(3deg); 水平居中 + 輕微右斜 */
                
                /* width: 50px;
                height: auto;
                opacity: 0.85;
            } */


            /* .user-footer-seal::after { */
                
                /* 1. 暴力修正：使用 url() 函數，並將絕對路徑改為相對路徑或網絡路徑 */
                /* content: url("/static/image/wenxielaozu.png");  這是一個象徵性的佔位符，或者大帝以後放個紅色方塊圖片 */
                
                /* 2. 暴力鎖死：印章的維度 */
                /* display: block;            讓它在落款下方單獨顯聖 */
                /* width: 60px;               根據大帝 116x130 的原圖，建議縮放至合適大小 */
                /* height: auto; */
                /* margin-top: 15px;          與題字拉開呼吸間距 */
                
                /* 3. 神識對齊 
                vertical-align: middle; */
                /* opacity: 0.9;              略微滲透，更有宣紙感 */

                
            /* } */

            /* 2. 暴力顯聖：將印章套在大帝的 t 標籤下方 */
            /*这个是诗名下面的二维码，日后在二维码的图片底部加“按图入城”这四个字，提示用户可以直接按住图片就可以*/
            /* .user-imperial-manifesto t::after { */
                /* content: url("/static/image/wenxielaozu.png");  */
                /* position: absolute;     【核心】暴力脫離文檔流，自由飛行 */

                /* 定位參數：在大帝的 129 像素內精準導航 */
                /* right: -2px;           橫向：在詩名結尾往右 30 像素 */
                /* bottom: -25px;          縱向：在詩名基準線往下 25 像素 (營造落款感) */

                /*display: block;*/
                /* width: 60px;          印章寬度 */
                /* height: auto; */
                /* margin: 10px auto 0;  水平居中，且與詩名保持 10px 距離 */
                /* opacity: 0.9;         滲透感 */
                /* transform: rotate(-2deg); 【暴力注入】輕微傾斜，更有手蓋印章的「 活氣」 */
                /* pointer-events: none;     防止鼠標點到印章，影響掃碼或點擊 */
            /* } */

            /*article.php*/
            /* --- 長安秘典：文章展示專用樣式表 --- */
            .article-container {
                max-width: 900px;
                margin: 40px auto;
                padding: 0 20px;
                background: transparent;
            }

            .article-title {
                font-size: 2rem;
                color: #333;
                text-align: center;
                margin-bottom: 30px;
                border-bottom: 1px solid rgba(0,0,0,0.1);
                padding-bottom: 15px;
            }

            .article-content {
                line-height: 2.0;
                font-size: 1.3rem;
                color: #444; 
                white-space: pre-wrap; 
                word-wrap: break-word;
                text-indent: 2em; 
            }

            .pagination {
                margin-top: 50px;
                text-align: center;
                padding-bottom: 100px;
            }

            .page-btn {
                display: inline-block;
                padding: 8px 16px;
                margin: 0 5px;
                border: 1px solid #ff0000;
                color: #ff0000;
                text-decoration: none;
                transition: all 0.3s;
            }

            .page-btn.active {
                background: #ff0000;
                color: #fff;
            }

            .page-btn:hover:not(.active) {
                background: rgba(255, 0, 0, 0.1);
            }

            .jump-container {
                margin-left: 15px;
                color: #666;
                display: inline-block;
            }

            /* 針對手機端的小優化 */
            @media (max-width: 600px) {
                .article-title { font-size: 1.5rem; }
                .article-content { font-size: 1.15rem; }
                .jump-container { display: block; margin-top: 20px; margin-left: 0; }
            }

            /*找回密码*/
            /* 讓父容器成為定位基準 */
            .input-group {
                margin-bottom: 25px; /* 給下方留點空間，防止文字擠在一起 */
                position: relative;
            }

            /* 找回密語的包裹框 */
            .forget-pwd-wrap {
                text-align: right;   /* 文字靠右 */
                margin-top: 5px;    /* 與輸入框保持一點距離 */
            }

            /* 找回密語的小字鏈接 */
            .forget-pwd-link {
                font-size: 0.85em;
                color: #e0c38c;      /* 長安紅，與主題一致 */
                text-decoration: none;
                padding: 2px 5px;
                border: 1px solid transparent;
                transition: all 0.3s;
            }

            .forget-pwd-link:hover {
                color: #a00000;
                text-decoration: underline; /* 鼠標懸停時出現下劃線 */
                background: #fff5f5;        /* 輕微底色，增加點擊感 */
            }


            /*修改密码*/
            /* 容器居中 */
            .changan-content {
                display: flex;
                justify-content: center;
                padding: 60px 20px;
            }

            /* 盒子主體：增加金屬邊框感 */
            .change-pwd-box {
                background: #111;
                border: 1px solid #c5a059; /* 古銅金 */
                padding: 40px;
                max-width: 450px;
                width: 100%;
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(197, 160, 89, 0.1);
                border-radius: 2px;
            }

            /* 標題裝飾 */
            .box-header {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 30px;
            }
            .box-header h3 {
                margin: 0 15px;
                color: #e0c38c;
                letter-spacing: 4px;
                font-size: 1.5rem;
                text-shadow: 2px 2px 4px #000;
            }
            .decorative-icon { color: #8b0000; font-size: 1.2rem; }

            /* 表單細節 */
            .form-item { margin-bottom: 20px; }
            .form-item label {
                display: block;
                color: #aaa;
                font-size: 0.85rem;
                margin-bottom: 8px;
                padding-left: 5px;
            }
            .form-item input {
                width: 100%;
                background: #1a1a1a;
                border: 1px solid #333;
                color: #eee;
                padding: 12px 15px;
                border-radius: 4px;
                transition: all 0.3s;
            }
            .form-item input:focus {
                border-color: #e0c38c;
                outline: none;
                background: #222;
            }

            /* 分隔線 */
            .form-divider {
                height: 1px;
                background: linear-gradient(to right, transparent, #444, transparent);
                margin: 25px 0;
            }

            /* 按鈕升級：更有份量 */
            .submit-gold {
                background: linear-gradient(135deg, #e0c38c 0%, #c5a059 100%);
                color: #111;
                font-size: 1.1rem;
                letter-spacing: 2px;
                height: 50px;
                border-radius: 4px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            }
            .submit-gold:hover {
                background: #fff;
                transform: translateY(-2px);
            }

            /* 提示訊息顏色 */
            .success-gold { color: #e0c38c; border-color: #e0c38c; background: rgba(224, 195, 140, 0.05); }
            .error-red { color: #ff6b6b; border-color: #ff6b6b; background: rgba(255, 107, 107, 0.05); }

            .success-action { text-align: center; padding: 20px 0; }
            .btn-link-gold {
                color: #e0c38c;
                text-decoration: none;
                border-bottom: 1px solid #e0c38c;
                padding-bottom: 2px;
            }


            .button-row {
                display: flex;
                flex-wrap: wrap; /* 手機屏寬度不夠時自動折疊 */
                gap: 10px;       /* 按鈕之間的間距 */
                margin-bottom: 10px;
            }