/* style.css */
/* ☙—————————————————————————————❧ */
/*         0. :root 變數設定         */
/* ☙—————————————————————————————❧ */
/* 調色盤 */
:root {
    /* 基礎色調 */
    --color-main-bg: #2d3445; /* 主背景 */
    --color-main-text: #c0c8d9; /* 主要文字顏色 */
    --color-secondary-text: #828a9c; /* 次要文字 */
    --color-pure-white: #fff;
    --color-pure-black: #000;
    /* 反差色 (用於 Header/Footer) */
    --color-contrast-bg: #21252b;
    --color-contrast-text: #a6acbe;
    /* 點綴色 */
    --color-accent-moon: #819ec4;
    --color-accent-silver: #a6acbe;
    --color-highlight-text: #c9918c;
    --color-hint-text: #819ec4;
    /* UI 元素顏色 */
    --color-surface: #363e52; /* 卡片、按鈕等的基礎背景 */
    --color-surface-hover: #404961; /* 滑鼠移上去的時候 */
    --color-surface-transparent: #363e5299; /* 透明度，層次感 */
    --color-surface-hover-transparent: #40496199;
    --color-card-footer-bg: #282e3c; /* 角色卡片底部的顏色 */
    --color-border: #4a546e; /* 分隔線、邊框 */
    /* 選中狀態 */
    --color-active-bg: var(--color-accent-moon); /* 按鈕被選中時的背景 */
    --color-active-text: #21252b; /* 被選中時的文字顏色 */
    /* 陰影 */
    --color-shadow-light: rgba(0,0,0,0.2);
    --color-shadow-medium: rgba(0,0,0,0.3);
    --color-shadow-dark: rgba(0,0,0,0.4);
}
/* 淺色主題配色 (當 body 的 data-theme 被標記為 "light" 時啟用) ❧ */
body[data-theme="light"] {
    /* 基礎背景色調調暗，融入朦朧的銀霧灰 */
    --color-main-bg: #e2e5ec;
    --color-main-text: #343b4c; /* 溫和的深鋼藍黑 */
    --color-secondary-text: #5c667a; /* 煙燻冷灰 */
    --color-contrast-bg: #d3d7e0; /* 頂尾部背景 */
    --color-contrast-text: #2c3342; /* 頂部文字 */
    /* 銀色月光下的幽藍點綴 */
    --color-accent-moon: #446185; /* 低飽和度的幽藍 */
    --color-accent-silver: #4d586f; /* 冷鋼色 */
    --color-highlight-text: #963f3c; /* 沉穩暗紅警告 */
    --color-hint-text: #415e84; /* 沉靜提示藍 */
    /* 卡片與容器：降低亮度，帶有銀桂般的溫潤質感 */
    --color-surface: #edf0f6;
    --color-surface-hover: #e5e9f1;
    --color-surface-transparent: #edf0f6cc; /* 帶有 80% 透明度的霧化月面色 */
    --color-surface-hover-transparent: #e5e9f1cc;
    --color-card-footer-bg: #dae0eb; /* 卡片底部 status 與連結區 */
    --color-border: #b8c1d2; /* 乾淨清爽的灰藍分隔線 */
    /* 按鈕與狀態選中 */
    --color-active-bg: var(--color-accent-moon);
    --color-active-text: #ffffff;
    /* 在亮色底下，陰影也要更加柔和朦朧，才不會顯得突兀 */
    --color-shadow-light: rgba(52, 59, 76, 0.05);
    --color-shadow-medium: rgba(52, 59, 76, 0.08);
    --color-shadow-dark: rgba(52, 59, 76, 0.12);
    
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 300 300' fill='%23d1d5db'%3e%3cpath d='M0 298.923c0-1.046.03-1.051 1-.173.55.498 1 .983 1 1.077 0 .095-.45.173-1 .173-.69 0-1-.333-1-1.077Zm58.253-12.048C98.075 246.657 113.32 231.5 113.95 231.5c.974 0 12.052 11.013 12.042 11.972-.004.428-12.435 13.347-27.625 28.71-24.46 24.738-27.77 27.91-28.95 27.75-1.204-.165 1.303-2.847 26.103-27.932 15.088-15.262 27.444-28.092 27.457-28.511.03-.997-8.011-8.989-9.044-8.989-.438 0-15.364 14.738-33.17 32.75C51.63 296.722 48.233 300 46.823 300c-1.464 0-.723-.851 11.43-13.125ZM97.75 293c3.843-3.85 7.225-7 7.517-7 .292 0 3.557 3.085 7.257 6.856 5.995 6.11 6.596 6.876 5.528 7.044-.968.152-2.264-.875-6.758-5.356-3.058-3.05-5.762-5.544-6.01-5.544-.247 0-2.982 2.475-6.078 5.5-4.466 4.364-5.92 5.5-7.036 5.5-1.277 0-.761-.647 5.58-7zm109.77 5.625C211.411 294.14 252.878 253 253.505 253c1.107 0 12.129 11.211 11.919 12.123-.096.417-7.735 8.435-16.975 17.818C234.481 297.126 231.42 300 230.28 300h-1.372l2.014-2.375c1.107-1.306 8.666-9.011 16.796-17.122 8.13-8.11 14.783-15.09 14.783-15.51 0-1.02-8.049-8.993-9.077-8.993-.443 0-10.598 9.9-22.566 22-18.274 18.476-21.981 22-23.145 22h-1.386l1.193-1.375zm44.754.25c.511-.619 5.888-6.131 11.949-12.25 8.411-8.493 11.31-11.125 12.247-11.125 1.702 0 23.53 21.67 23.53 23.36 0 .627-.162 1.14-.36 1.14-.2 0-5.33-4.95-11.401-11-6.072-6.05-11.366-11.007-11.764-11.015-.399-.008-5.563 4.942-11.476 11-9.13 9.356-10.97 11.015-12.202 11.015-1.448 0-1.45-.003-.523-1.125zm-104.107-56.143c-25.933-26.138-44.73-44.709-45.167-44.625-.412.079-13.345 12.856-28.739 28.393s-28.331 28.314-28.75 28.391c-.445.083-10.05-9.163-23.136-22.273C3.002 213.21 0 210.005 0 208.728c0-1.32 2.326.851 22.377 20.9C34.684 241.931 45.011 252 45.325 252c.314 0 13.283-12.825 28.82-28.5 15.538-15.675 28.587-28.5 28.999-28.5.412 0 20.718 20.137 45.124 44.75 24.407 24.613 44.62 44.75 44.919 44.75.71 0 9.313-8.564 9.313-9.27 0-.298-20.137-20.409-44.75-44.69-24.613-24.283-44.75-44.522-44.75-44.977 0-.916 11.93-13.063 12.829-13.063.31 0 13.432 13.275 29.158 29.5 15.727 16.225 28.767 29.5 28.978 29.5.211 0 10.972-10.463 23.912-23.25S231.553 185 231.734 185c.18 0 15.637 15.248 34.348 33.884 29.46 29.343 33.99 34.05 33.813 35.125-.181 1.096-3.18-1.708-25.675-24.009a22669.038 22669.038 0 0 0-34.09-33.74l-8.62-8.49-19.63 19.492c-27.32 27.128-27.64 27.43-28.471 26.92-.388-.238-13.395-13.538-28.905-29.557-15.51-16.019-28.44-29.125-28.736-29.125-.535 0-10.268 9.52-10.268 10.043 0 .15 20.25 20.253 45 44.67 24.75 24.42 45 44.658 45 44.975 0 .752-11.587 12.312-12.34 12.312-.317 0-20.564-20.146-44.993-44.768zm-137.289 23.86C1.956 257.644 0 255.434 0 254.298c0-1.229 1.24-.178 11.107 9.409C17.215 269.644 22.45 274.5 22.74 274.5c.811 0 9.758-9.169 9.767-10.01.005-.407-7.333-7.94-16.305-16.74C1.787 233.611-.089 231.594.07 230.405c.164-1.228 1.708.157 17.829 16 9.706 9.54 17.638 17.694 17.625 18.12-.03.976-12.113 12.975-13.066 12.975-.386 0-5.597-4.909-11.58-10.909zm260.497-63.137C255.769 188.033 243 175.063 243 174.63c0-1.067 10.98-12.131 12.039-12.131.464 0 10.77 10.027 22.903 22.281C295.063 202.076 300 207.34 300 208.3c0 1.05-.14 1.161-.93.739-.51-.274-10.444-10.182-22.073-22.018-11.838-12.048-21.529-21.52-22.017-21.52-.83 0-8.954 8.406-9.003 9.316-.013.239 12.157 12.472 27.045 27.186 24.167 23.884 27.05 26.898 26.898 28.122-.155 1.248-2.678-1.11-28.545-26.67zm-241.41 8.74c-3.28-3.24-5.965-6.204-5.965-6.585 0-.381 19.856-20.701 44.125-45.156 24.269-24.454 44.203-44.827 44.3-45.273.206-.964-7.773-9.181-8.916-9.181-.42 0-13.587 12.832-29.26 28.515-22.006 22.018-28.742 28.482-29.566 28.375-.63-.083-10.013-8.992-22.875-21.722C3.8 123.348 0 119.351 0 118.238c0-1.258.286-1.083 4.375 2.675 2.406 2.212 12.361 12.024 22.122 21.804S44.472 160.5 44.75 160.5c.277 0 13.44-12.938 29.251-28.75C89.81 115.937 103.089 103 103.507 103c.999 0 11.993 11.038 11.993 12.04 0 .427-20.061 20.973-44.58 45.66l-44.58 44.883 4.87 4.833 4.87 4.834 44.633-44.875c33.275-33.457 44.923-44.875 45.777-44.875.842 0 7.225 6.036 24.06 22.75C163.15 160.762 173.67 171 173.924 171c.255 0 20.432-20.137 44.838-44.75 24.405-24.612 44.715-44.75 45.132-44.75C264.933 81.5 276 92.491 276 93.522c0 .455-20.062 21.017-44.582 45.693l-44.582 44.865 4.87 4.835 4.871 4.835 44.648-44.875c24.556-24.681 44.958-44.869 45.336-44.86.38.007 3.558 2.794 7.064 6.193 5.163 5.005 6.375 6.445 6.375 7.573v1.393l-1.375-1.196c-.756-.658-3.651-3.42-6.433-6.137-2.782-2.717-5.381-4.862-5.776-4.766-.395.096-20.487 20.088-44.649 44.425-24.162 24.337-44.258 44.445-44.658 44.683-.542.322-2.246-1.081-6.668-5.492-3.268-3.259-5.941-6.229-5.941-6.6 0-.37 19.856-20.677 44.125-45.126 24.269-24.45 44.203-44.822 44.3-45.274.206-.976-7.766-9.191-8.921-9.191-.423 0-20.752 20.138-45.177 44.75-24.425 24.613-44.664 44.75-44.975 44.75-.312 0-10.954-10.372-23.65-23.048-13.495-13.474-23.386-22.976-23.812-22.875-.4.095-20.604 20.198-44.897 44.673s-44.482 44.689-44.865 44.919c-.502.302-2.363-1.227-6.662-5.473zM21.363 116.1C3.769 98.476 0 94.462 0 93.35 0 92.608.062 92 .139 92c.076 0 9.691 9.563 21.367 21.25 11.676 11.688 21.453 21.25 21.726 21.25.68 0 9.268-8.594 9.268-9.275 0-.3-11.813-12.193-26.25-26.43C5.71 78.542 0 72.643 0 71.68c0-.911.181-1.126.7-.83 1.333.762 54.8 53.762 54.8 54.322 0 .71-11.55 12.328-12.255 12.328-.287 0-10.134-9.63-21.883-21.4zM126.91 82.75C102.17 58.138 81.668 38 81.35 38c-.316 0-10.734 10.15-23.15 22.554-17.765 17.75-22.774 22.49-23.512 22.255-.517-.165-8.553-7.917-17.859-17.227C2.58 51.326-.059 48.465.106 47.452c.17-1.048 2.374.961 17.194 15.673C26.649 72.406 34.626 80 35.026 80c.4 0 10.851-10.125 23.224-22.5S81.128 35 81.595 35c.466 0 1.142.395 1.502.879 1.634 2.198 88.925 88.621 89.511 88.621 1.052 0 10.014-9.266 9.816-10.149-.096-.43-20.255-20.612-44.799-44.851S93 25.073 93 24.638c0-1.051 10.966-12.138 12.006-12.138.447 0 20.786 20.137 45.198 44.75S194.884 102 195.243 102c.359 0 13.365-12.825 28.902-28.5 15.538-15.675 28.56-28.5 28.94-28.5.38 0 11.09 10.417 23.802 23.148C296.172 87.462 300 91.524 300 92.673c0 1.047-.171 1.28-.715.977-.393-.22-10.774-10.593-23.07-23.05-14.058-14.245-22.653-22.595-23.16-22.5-.443.082-13.4 12.862-28.794 28.4-15.394 15.537-28.354 28.317-28.8 28.4-.513.095-17.072-16.207-45.368-44.665-29.392-29.561-44.84-44.759-45.388-44.65-.456.09-2.72 2.22-5.028 4.732l-4.199 4.567 45.011 44.414c24.756 24.427 45.011 44.771 45.011 45.208 0 .933-12.041 12.994-12.972 12.994-.349 0-20.876-20.137-45.617-44.75zm154.398-28.3C271.24 44.522 263 36.025 263 35.567c0-.82 11.878-13.067 12.673-13.067.631 0 23.128 21.944 23.817 23.231.335.626.519 1.56.41 2.078-.154.724-2.914-1.742-11.957-10.684-6.466-6.394-11.971-11.625-12.234-11.625-.263 0-2.724 2.267-5.468 5.038l-4.991 5.038 17.375 17.105C296.986 66.82 300 70.022 300 71.143c0 .746-.086 1.357-.19 1.357-.106 0-8.43-8.123-18.5-18.05zm-101.343 7.746c-3.281-3.241-5.966-6.243-5.966-6.671 0-.428 12.34-13.117 27.422-28.197C224.706 4.046 229.025-.06 230.047.108c1.043.173-2.448 3.865-26.288 27.802l-27.49 27.602 4.866 4.867 4.867 4.866 32.67-32.667C246.295 4.958 251.53-.062 252.546.094c1.038.16-3.393 4.817-32.024 33.67-18.276 18.417-33.535 33.675-33.91 33.905-.485.299-2.393-1.273-6.646-5.473zM40.367 40.617C37.14 37.382 34.5 34.4 34.5 33.99c0-.41 7.482-8.226 16.628-17.368C65.51 2.244 67.956 0 69.243 0c1.346 0-.124 1.614-15.49 17.004L36.778 34.007l4.727 4.747c2.6 2.61 4.946 4.746 5.215 4.746.27 0 6.686-6.13 14.26-13.622C92.48-1.28 91.218-.096 92.74.084c1.277.152-.603 2.132-22.127 23.291C57.674 36.094 46.896 46.5 46.662 46.5c-.236 0-3.068-2.647-6.295-5.883zM162.25 45.01c-.55-.235-11.012-10.459-23.248-22.718C119.062 2.312 116.907 0 118.228 0c1.274 0 4.395 2.917 23.128 21.617l21.655 21.618 21.667-21.663C203.028 3.226 206.528-.059 207.548.11c1.045.173-1.738 3.153-21.29 22.795-12.371 12.427-22.609 22.58-22.75 22.563-.142-.017-.708-.224-1.258-.46Zm-150.6-32.62C5.241 6.003 0 .603 0 .39 0 .175.51 0 1.134 0c.779 0 2.85 1.73 6.625 5.535 3.02 3.045 7.925 7.81 10.9 10.587l5.408 5.052 10.596-10.587C43.72 1.537 45.475 0 46.75 0c1.364 0 .465 1.027-10.5 12-6.596 6.6-12.208 12-12.472 12-.263 0-5.721-5.225-12.129-11.61Z'/%3e%3c/svg%3e");
}
/* ☙—————————————————————————————❧ */
/*        1. 全域與基礎設定          */
/* ☙—————————————————————————————❧ */
html {
    height: 100%; /* 讓 html 元素跟視窗一樣高 */
}
body {
    background-color: var(--color-main-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 300 300' fill='%23363e52'%3e%3cpath d='M0 298.923c0-1.046.03-1.051 1-.173.55.498 1 .983 1 1.077 0 .095-.45.173-1 .173-.69 0-1-.333-1-1.077Zm58.253-12.048C98.075 246.657 113.32 231.5 113.95 231.5c.974 0 12.052 11.013 12.042 11.972-.004.428-12.435 13.347-27.625 28.71-24.46 24.738-27.77 27.91-28.95 27.75-1.204-.165 1.303-2.847 26.103-27.932 15.088-15.262 27.444-28.092 27.457-28.511.03-.997-8.011-8.989-9.044-8.989-.438 0-15.364 14.738-33.17 32.75C51.63 296.722 48.233 300 46.823 300c-1.464 0-.723-.851 11.43-13.125ZM97.75 293c3.843-3.85 7.225-7 7.517-7 .292 0 3.557 3.085 7.257 6.856 5.995 6.11 6.596 6.876 5.528 7.044-.968.152-2.264-.875-6.758-5.356-3.058-3.05-5.762-5.544-6.01-5.544-.247 0-2.982 2.475-6.078 5.5-4.466 4.364-5.92 5.5-7.036 5.5-1.277 0-.761-.647 5.58-7zm109.77 5.625C211.411 294.14 252.878 253 253.505 253c1.107 0 12.129 11.211 11.919 12.123-.096.417-7.735 8.435-16.975 17.818C234.481 297.126 231.42 300 230.28 300h-1.372l2.014-2.375c1.107-1.306 8.666-9.011 16.796-17.122 8.13-8.11 14.783-15.09 14.783-15.51 0-1.02-8.049-8.993-9.077-8.993-.443 0-10.598 9.9-22.566 22-18.274 18.476-21.981 22-23.145 22h-1.386l1.193-1.375zm44.754.25c.511-.619 5.888-6.131 11.949-12.25 8.411-8.493 11.31-11.125 12.247-11.125 1.702 0 23.53 21.67 23.53 23.36 0 .627-.162 1.14-.36 1.14-.2 0-5.33-4.95-11.401-11-6.072-6.05-11.366-11.007-11.764-11.015-.399-.008-5.563 4.942-11.476 11-9.13 9.356-10.97 11.015-12.202 11.015-1.448 0-1.45-.003-.523-1.125zm-104.107-56.143c-25.933-26.138-44.73-44.709-45.167-44.625-.412.079-13.345 12.856-28.739 28.393s-28.331 28.314-28.75 28.391c-.445.083-10.05-9.163-23.136-22.273C3.002 213.21 0 210.005 0 208.728c0-1.32 2.326.851 22.377 20.9C34.684 241.931 45.011 252 45.325 252c.314 0 13.283-12.825 28.82-28.5 15.538-15.675 28.587-28.5 28.999-28.5.412 0 20.718 20.137 45.124 44.75 24.407 24.613 44.62 44.75 44.919 44.75.71 0 9.313-8.564 9.313-9.27 0-.298-20.137-20.409-44.75-44.69-24.613-24.283-44.75-44.522-44.75-44.977 0-.916 11.93-13.063 12.829-13.063.31 0 13.432 13.275 29.158 29.5 15.727 16.225 28.767 29.5 28.978 29.5.211 0 10.972-10.463 23.912-23.25S231.553 185 231.734 185c.18 0 15.637 15.248 34.348 33.884 29.46 29.343 33.99 34.05 33.813 35.125-.181 1.096-3.18-1.708-25.675-24.009a22669.038 22669.038 0 0 0-34.09-33.74l-8.62-8.49-19.63 19.492c-27.32 27.128-27.64 27.43-28.471 26.92-.388-.238-13.395-13.538-28.905-29.557-15.51-16.019-28.44-29.125-28.736-29.125-.535 0-10.268 9.52-10.268 10.043 0 .15 20.25 20.253 45 44.67 24.75 24.42 45 44.658 45 44.975 0 .752-11.587 12.312-12.34 12.312-.317 0-20.564-20.146-44.993-44.768zm-137.289 23.86C1.956 257.644 0 255.434 0 254.298c0-1.229 1.24-.178 11.107 9.409C17.215 269.644 22.45 274.5 22.74 274.5c.811 0 9.758-9.169 9.767-10.01.005-.407-7.333-7.94-16.305-16.74C1.787 233.611-.089 231.594.07 230.405c.164-1.228 1.708.157 17.829 16 9.706 9.54 17.638 17.694 17.625 18.12-.03.976-12.113 12.975-13.066 12.975-.386 0-5.597-4.909-11.58-10.909zm260.497-63.137C255.769 188.033 243 175.063 243 174.63c0-1.067 10.98-12.131 12.039-12.131.464 0 10.77 10.027 22.903 22.281C295.063 202.076 300 207.34 300 208.3c0 1.05-.14 1.161-.93.739-.51-.274-10.444-10.182-22.073-22.018-11.838-12.048-21.529-21.52-22.017-21.52-.83 0-8.954 8.406-9.003 9.316-.013.239 12.157 12.472 27.045 27.186 24.167 23.884 27.05 26.898 26.898 28.122-.155 1.248-2.678-1.11-28.545-26.67zm-241.41 8.74c-3.28-3.24-5.965-6.204-5.965-6.585 0-.381 19.856-20.701 44.125-45.156 24.269-24.454 44.203-44.827 44.3-45.273.206-.964-7.773-9.181-8.916-9.181-.42 0-13.587 12.832-29.26 28.515-22.006 22.018-28.742 28.482-29.566 28.375-.63-.083-10.013-8.992-22.875-21.722C3.8 123.348 0 119.351 0 118.238c0-1.258.286-1.083 4.375 2.675 2.406 2.212 12.361 12.024 22.122 21.804S44.472 160.5 44.75 160.5c.277 0 13.44-12.938 29.251-28.75C89.81 115.937 103.089 103 103.507 103c.999 0 11.993 11.038 11.993 12.04 0 .427-20.061 20.973-44.58 45.66l-44.58 44.883 4.87 4.833 4.87 4.834 44.633-44.875c33.275-33.457 44.923-44.875 45.777-44.875.842 0 7.225 6.036 24.06 22.75C163.15 160.762 173.67 171 173.924 171c.255 0 20.432-20.137 44.838-44.75 24.405-24.612 44.715-44.75 45.132-44.75C264.933 81.5 276 92.491 276 93.522c0 .455-20.062 21.017-44.582 45.693l-44.582 44.865 4.87 4.835 4.871 4.835 44.648-44.875c24.556-24.681 44.958-44.869 45.336-44.86.38.007 3.558 2.794 7.064 6.193 5.163 5.005 6.375 6.445 6.375 7.573v1.393l-1.375-1.196c-.756-.658-3.651-3.42-6.433-6.137-2.782-2.717-5.381-4.862-5.776-4.766-.395.096-20.487 20.088-44.649 44.425-24.162 24.337-44.258 44.445-44.658 44.683-.542.322-2.246-1.081-6.668-5.492-3.268-3.259-5.941-6.229-5.941-6.6 0-.37 19.856-20.677 44.125-45.126 24.269-24.45 44.203-44.822 44.3-45.274.206-.976-7.766-9.191-8.921-9.191-.423 0-20.752 20.138-45.177 44.75-24.425 24.613-44.664 44.75-44.975 44.75-.312 0-10.954-10.372-23.65-23.048-13.495-13.474-23.386-22.976-23.812-22.875-.4.095-20.604 20.198-44.897 44.673s-44.482 44.689-44.865 44.919c-.502.302-2.363-1.227-6.662-5.473zM21.363 116.1C3.769 98.476 0 94.462 0 93.35 0 92.608.062 92 .139 92c.076 0 9.691 9.563 21.367 21.25 11.676 11.688 21.453 21.25 21.726 21.25.68 0 9.268-8.594 9.268-9.275 0-.3-11.813-12.193-26.25-26.43C5.71 78.542 0 72.643 0 71.68c0-.911.181-1.126.7-.83 1.333.762 54.8 53.762 54.8 54.322 0 .71-11.55 12.328-12.255 12.328-.287 0-10.134-9.63-21.883-21.4zM126.91 82.75C102.17 58.138 81.668 38 81.35 38c-.316 0-10.734 10.15-23.15 22.554-17.765 17.75-22.774 22.49-23.512 22.255-.517-.165-8.553-7.917-17.859-17.227C2.58 51.326-.059 48.465.106 47.452c.17-1.048 2.374.961 17.194 15.673C26.649 72.406 34.626 80 35.026 80c.4 0 10.851-10.125 23.224-22.5S81.128 35 81.595 35c.466 0 1.142.395 1.502.879 1.634 2.198 88.925 88.621 89.511 88.621 1.052 0 10.014-9.266 9.816-10.149-.096-.43-20.255-20.612-44.799-44.851S93 25.073 93 24.638c0-1.051 10.966-12.138 12.006-12.138.447 0 20.786 20.137 45.198 44.75S194.884 102 195.243 102c.359 0 13.365-12.825 28.902-28.5 15.538-15.675 28.56-28.5 28.94-28.5.38 0 11.09 10.417 23.802 23.148C296.172 87.462 300 91.524 300 92.673c0 1.047-.171 1.28-.715.977-.393-.22-10.774-10.593-23.07-23.05-14.058-14.245-22.653-22.595-23.16-22.5-.443.082-13.4 12.862-28.794 28.4-15.394 15.537-28.354 28.317-28.8 28.4-.513.095-17.072-16.207-45.368-44.665-29.392-29.561-44.84-44.759-45.388-44.65-.456.09-2.72 2.22-5.028 4.732l-4.199 4.567 45.011 44.414c24.756 24.427 45.011 44.771 45.011 45.208 0 .933-12.041 12.994-12.972 12.994-.349 0-20.876-20.137-45.617-44.75zm154.398-28.3C271.24 44.522 263 36.025 263 35.567c0-.82 11.878-13.067 12.673-13.067.631 0 23.128 21.944 23.817 23.231.335.626.519 1.56.41 2.078-.154.724-2.914-1.742-11.957-10.684-6.466-6.394-11.971-11.625-12.234-11.625-.263 0-2.724 2.267-5.468 5.038l-4.991 5.038 17.375 17.105C296.986 66.82 300 70.022 300 71.143c0 .746-.086 1.357-.19 1.357-.106 0-8.43-8.123-18.5-18.05zm-101.343 7.746c-3.281-3.241-5.966-6.243-5.966-6.671 0-.428 12.34-13.117 27.422-28.197C224.706 4.046 229.025-.06 230.047.108c1.043.173-2.448 3.865-26.288 27.802l-27.49 27.602 4.866 4.867 4.867 4.866 32.67-32.667C246.295 4.958 251.53-.062 252.546.094c1.038.16-3.393 4.817-32.024 33.67-18.276 18.417-33.535 33.675-33.91 33.905-.485.299-2.393-1.273-6.646-5.473zM40.367 40.617C37.14 37.382 34.5 34.4 34.5 33.99c0-.41 7.482-8.226 16.628-17.368C65.51 2.244 67.956 0 69.243 0c1.346 0-.124 1.614-15.49 17.004L36.778 34.007l4.727 4.747c2.6 2.61 4.946 4.746 5.215 4.746.27 0 6.686-6.13 14.26-13.622C92.48-1.28 91.218-.096 92.74.084c1.277.152-.603 2.132-22.127 23.291C57.674 36.094 46.896 46.5 46.662 46.5c-.236 0-3.068-2.647-6.295-5.883zM162.25 45.01c-.55-.235-11.012-10.459-23.248-22.718C119.062 2.312 116.907 0 118.228 0c1.274 0 4.395 2.917 23.128 21.617l21.655 21.618 21.667-21.663C203.028 3.226 206.528-.059 207.548.11c1.045.173-1.738 3.153-21.29 22.795-12.371 12.427-22.609 22.58-22.75 22.563-.142-.017-.708-.224-1.258-.46Zm-150.6-32.62C5.241 6.003 0 .603 0 .39 0 .175.51 0 1.134 0c.779 0 2.85 1.73 6.625 5.535 3.02 3.045 7.925 7.81 10.9 10.587l5.408 5.052 10.596-10.587C43.72 1.537 45.475 0 46.75 0c1.364 0 .465 1.027-10.5 12-6.596 6.6-12.208 12-12.472 12-.263 0-5.721-5.225-12.129-11.61Z'/%3e%3c/svg%3e");
    color: var(--color-main-text);
    font-family: "LXGW WenKai TC", cursive; /* 字型 */
    font-weight: bold;
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box; /* 避免 padding 和 border 影響盒子大小 */
    display: flex;
    flex-direction: column; /* 讓 header, main, footer 能垂直排列 */
    transition: background-color 0.4s ease, color 0.4s ease;
}
.character-card, .prompt-item, #top-fixed-container, #page-footer {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* 讓按鈕和輸入框繼承 body 的字型，不然它們會用系統預設的字型 */
/* 讓按鈕和輸入框繼承 body 的字型 */
button, input {
    font-family: inherit;
}
/* 拔除瀏覽器對按鈕的醜陋預設樣式，確保 button 標籤能完美偽裝成 a 標籤 */
button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    -webkit-appearance: none;
    appearance: none;
}
/* 全域的滾動條樣式 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-main-bg);
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background-color: var(--color-main-bg);
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-secondary-text);
}
/* ☙—————————————————————————————❧ */
/*         2. 頁面主要佈局           */
/* ☙—————————————————————————————❧ */
/* 頂部固定容器，也就是放 header 和 nav 的地方 */
#top-fixed-container {
    background-color: var(--color-contrast-bg);
    box-shadow: 0 4px 12px var(--color-shadow-dark);
    position: relative; /* 為了讓裡面的絕對定位元素有參考點 */
    z-index: 100;
    padding: 8px 0 6px 0;
}
/* 頁尾，放版權宣告的地方 */
#page-footer {
    background-color: var(--color-contrast-bg);
    box-shadow: 0 2px 8px var(--color-shadow-medium);
    padding: 6px 15px;
    text-align: center;
    border-top: 1px solid var(--color-pure-black);
    width: 100%;
    box-sizing: border-box;
}
/* 讓 header 和 main 保持置中且有最大寬度限制，不會在大螢幕上寬得嚇人 */
header, main {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* Header 內部按鈕排列控制 */
header {
    text-align: center;
    position: relative; /* 為了讓右側切換按鈕可以精準絕對定位 */
    padding: 0 15px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* HOME 標題按鈕 */
.home-title-btn {
    text-decoration: none;
    color: var(--color-contrast-text);
    font-size: 2em;
    letter-spacing: 3px;
    padding: 2px;
    display: inline-block;
    transition: color 0.3s ease;
}
/* 讓摺疊按鈕緊貼在 HOME 的右邊，像個小句點 */
.nav-toggle-btn {
    padding: 0px 4px;
    font-size: 0.65em;
    font-family: inherit;
    color: var(--color-contrast-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.header-right-controls {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 15px; /* 兩個按鈕之間的間距 */
}
/* 主題切換按鈕 */
.theme-switch-btn {
    font-size: 1.1em;
    color: var(--color-contrast-text);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}
/* 鼠標滑過時的旋轉 */
.theme-switch-btn:hover {
    color: var(--color-pure-white);
    transform: rotate(30deg);
}
/* 語言切換按鈕 */
.lang-switch-btn {
    font-size: 0.85em;
    font-weight: bold;
    color: var(--color-contrast-text);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    letter-spacing: 1px;
}
.lang-switch-btn:hover {
    color: var(--color-pure-white);
    transform: scale(1.05); /* 輕微放大 */
}
/* 主要內容區 */
main {
    flex: 1; /* 讓它填滿除了 header 和 footer 以外的所有空間 */
    padding: 0 15px;
    overflow: hidden; /* 避免子元素溢出時出現奇怪的滾動條 */
    display: flex;
    scrollbar-color: var(--color-border) var(--color-main-bg);
}
/* 每個分頁的內容區塊 */
.content-section {
    width: 100%;
    display: none; /* 預設都藏起來 */
    flex-direction: column;
}
/* 只有 active 的那個才顯示出來 */
.content-section.active {
    display: flex;
}
/* 角色卡片列表的滾動區域 */
.sub-content-scroll-area {
    flex: 1; /* 填滿 content-section 裡除了控制項以外的空間 */
    overflow-y: auto; /* 內容太多時，出現垂直滾動條 */
    padding-right: 10px; /* 留點空間給滾動條，免得太擠 */
    scrollbar-color: var(--color-border) var(--color-main-bg);
}
/* ☙—————————————————————————————❧ */
/*      3. 頂部分類列 & 按鈕         */
/* ☙—————————————————————————————❧ */
.home-title-btn {
    text-decoration: none;
    color: var(--color-contrast-text);
    font-size: 2em;
    letter-spacing: 3px;
    padding: 2px;
    display: inline-block;
    transition: color 0.3s ease;
}
.home-title-btn:hover {
    color: var(--color-pure-white);
}
/* 可橫向滾動的導航列 */
.scrollable-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto; /* 當按鈕太多時，可以橫向滾動 */
    padding-bottom: 2px;
    position: relative;
    scrollbar-color: var(--color-border) var(--color-contrast-bg);
}
.scrollable-nav::-webkit-scrollbar-track {
    background-color: var(--color-contrast-bg);
}
/* 左右兩側的漸變遮罩，提示使用者這裡可以滾動 */
.scrollable-nav::before, .scrollable-nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0; /* 讓遮罩跟滾動條一樣高 */
    width: 30px;
    pointer-events: none; /* 讓滑鼠可以點穿遮罩 */
}
.scrollable-nav::before {
    left: 0;
    background: linear-gradient(to right, var(--color-contrast-bg), transparent);
}
.scrollable-nav::after {
    right: 0;
    background: linear-gradient(to left, var(--color-contrast-bg), transparent);
}
.main-nav-scroll {
    margin-top: 10px;
}
.sub-nav-scroll {
    padding-top: 6px;
    margin-top: 2px;
}
/* 導航按鈕的容器 */
nav, .sub-nav {
    display: flex;
    flex-wrap: nowrap; /* 強制不換行，才能橫向滾動 */
    gap: 10px;
    padding: 0 15px;
    margin: 0 auto;
}
.sub-nav {
    display: none; /* 子分類預設隱藏 */
}
.sub-nav.active {
    display: flex;
}
/* 大/小分類按鈕的共同樣式，省得寫兩次 */
.nav-btn, .sub-nav-btn {
    text-decoration: none;
    color: var(--color-contrast-text);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    white-space: nowrap;
    cursor: pointer;
}
.nav-btn:hover, .sub-nav-btn:hover {
    border-color: var(--color-accent-silver);
    color: var(--color-pure-white);
}
.nav-btn.active, .sub-nav-btn.active {
    background-color: var(--color-active-bg);
    color: var(--color-active-text);
    border-color: var(--color-active-bg);
    cursor: default; /* 已經是 active 狀態，就沒必要再顯示小手指標 */
}
/* 大分類按鈕 */
.nav-btn {
    font-size: 0.9em;
    padding: 3px 12px;
    border-radius: 20px;
    background-color: transparent;
}
/* 小分類按鈕 */
.sub-nav-btn {
    background-color: var(--color-surface);
    padding: 1px 10px;
    border-radius: 20px;
    font-size: 0.8em;
}
/* 摺疊開關按鈕 - 經典精緻晶瑩正圓句號 */
.nav-toggle-btn {
    display: inline-flex;       /* 啟用 Flex 佈局 */
    align-items: center;        /* 垂直居中 */
    justify-content: center;     /* 水平居中 */
    width: 22px;                /* 定義絕對等寬高，確保它是一個高貴的正圓 */
    height: 22px;
    padding: 0;                 /* 徹底清除不對稱的 Padding 毒瘤 */
    font-size: 0.7em;           /* 精緻的小字體 */
    font-weight: bold;
    font-family: inherit;
    color: var(--color-contrast-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;         /* 50% 才是解開「正圓咒語」的唯一密碼！ */
    cursor: pointer;
    vertical-align: middle;     /* 讓它在 HOME 旁邊顯得和諧，不突兀 */
    margin-left: 8px;           /* 與 HOME 之間保持優雅的社交距離 */

    /* 加入一點溫潤的水晶光影與柔和過渡 */
    box-shadow: 0 1px 3px var(--color-shadow-light);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 鼠標懸浮時的微弱光效與溫柔躍動 */
.nav-toggle-btn:hover {
    border-color: var(--color-accent-moon);
    color: var(--color-pure-white);
    background-color: var(--color-surface-hover);
    transform: scale(1.08);     /* 精緻地微微放大 8%，帶有 Q 彈感 */
    box-shadow: 0 2px 6px var(--color-shadow-medium);
}
/* 按鈕按下去時那一瞬間的溫柔反饋 */
.nav-toggle-btn:active {
    transform: scale(0.95);     /* 微微內縮，彷彿真的被實體按下一般 */
}
/* 控制導航列摺疊的容器 */
#main-nav-container {
    transition: all 0.4s ease-in-out;
    max-height: 500px; /* 給個足夠大的值，讓它看起來是展開的 */
    overflow: hidden;
}
/* 摺疊時的樣子，max-height 變成 0 */
#main-nav-container.collapsed {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
}
/* ☙—————————————————————————————❧ */
/*        4. 首頁內容樣式            */
/* ☙—————————————————————————————❧ */
#home-content {
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
    scrollbar-color: var(--color-border) var(--color-main-bg);
}
#home-content h1 {
    margin-top: 2.5em;
    margin-bottom: 0.8em;
    font-size: 1.75em;
    color: var(--color-accent-silver);
}
#home-content h1:first-child {
    margin-top: 1em;
}
#home-content h1::before {
    content: "❦ ";
}
#home-content p {
    margin-top: 0.3em;
    line-height: 1.5;
    max-width: 68ch; /* 讓每行文字不要太長，這樣比較好讀 */
    color: var(--color-main-text);
}
.home-buttons-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 1.25em;
}
.join-discord-btn {
    display: inline-block; /* 改成 inline-block 讓它能跟其他元素並排 */
    text-decoration: none;
    background-color: var(--color-surface);
    color: var(--color-accent-moon);
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}
.join-discord-btn:hover {
    background-color: var(--color-accent-moon);
    color: var(--color-active-text);
    border-color: var(--color-accent-moon);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--color-shadow-light);
}
/* 友情作者連結的特殊樣式 */
.friend-links-container {
    justify-content: flex-start;
    max-width: 68ch;
    margin-left: 0;
    margin-top: 0.3em;
    margin-bottom: 2em;
    gap: 6px;
}
.friend-links-container .join-discord-btn {
    background-color: transparent;
    color: var(--color-secondary-text);
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 15px;
    border-color: var(--color-border);
    margin-bottom: 0.5em;
    transition: all 0.2s ease;
}
.friend-links-container .join-discord-btn:hover {
    background-color: var(--color-surface);
    color: var(--color-pure-white);
    border-color: var(--color-accent-moon);
    transform: none;
    box-shadow: none;
}
/* ☙—————————————————————————————❧ */
/*     4.5. 提示詞簡介區塊樣式       */
/* ☙—————————————————————————————❧ */
.prompt-intro-container {
    margin-top: 0.85em;
    margin-right: 24px;
    margin-left: 6px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
}
/* 折疊主標題 */
.prompt-intro-toggle {
    margin: 0.75em 0;
    max-width: none;
    font-size: 0.7em;
    color: var(--color-accent-moon);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    font-weight: 300;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
}
.prompt-intro-toggle:hover {
    color: var(--color-pure-white);
}
.prompt-intro-toggle .toggle-arrow {
    font-size: 0.8em;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
.prompt-intro-toggle.expanded .toggle-arrow {
    transform: rotate(90deg);
    color: var(--color-pure-white);
}
.prompt-intro-toggle .title-text {
    font-size: 1.55em;
}
.prompt-intro-toggle:hover .title-text {
    border-bottom-color: var(--color-accent-moon);
    color: var(--color-pure-white);
}
/* 提示詞列表總容器 (展開狀態) */
.prompt-list-wrapper {
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-out;
    max-height: 3500px;
    opacity: 1;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    width: 100%;
    box-sizing: border-box; /* 確保 padding 和 border 不增加總寬度 */
}
.prompt-list-wrapper.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
}
/* 單個提示詞項目卡片 */
.prompt-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 15px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.prompt-item:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.prompt-item:last-child {
    margin-bottom: 1em;
}
/* 提示詞卡片內的大標題 (主名稱) */
.prompt-name {
    font-size: 0.95em;
    color: var(--color-accent-silver);
    margin: 0 0 0.8em;
    line-height: 1.3;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border-lightest);
    padding-bottom: 0.4em;
    display: flex;
    flex-direction: row; /* 預設為橫向排列 */
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}
/* 主標題文字 */
.prompt-name span {
    color: var(--color-accent-silver);
    font-weight: 500;
    white-space: normal; /* 確保主標題文本可換行 */
}
/* 副標題樣式 */
.prompt-name .prompt-subname {
    font-size: 0.7em;
    color: var(--color-secondary-text);
    font-weight: 300;
    margin-top: 7px;
    letter-spacing: 0.5px;
    white-space: normal; /* 確保副標題文本可換行 */
}
.prompt-name::before {
    content: none;
}
/* 最新版本資訊的容器 */
.prompt-details p, .old-version-item p {
    font-size: 0.8em;
    line-height: 1.6;
    color: var(--color-main-text);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: normal;
}
.prompt-details p:last-child, .old-version-item p:last-child {
    margin-bottom: 0;
}
/* 確保以下標籤不會換行 */
.prompt-details .label, .old-version-item .label {
    font-weight: bold;
    color: var(--color-secondary-text);
    flex-shrink: 0; /* 防止 label 被壓縮 */
    width: auto;
    min-width: 70px; /* 增加最小寬度，以容納圖示和文字 */
    text-align: right;
    white-space: nowrap;
    display: inline-flex; /* 變成 inline-flex，讓其內部元素在一行 */
    align-items: baseline;
    gap: 4px;
}
/* 連結按鈕群組 */
.prompt-links {
    display: flex;
    gap: 10px;
    padding-top: 0.8em;
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* 歷史版本連結按鈕群組 */
.old-version-links {
    padding-top: 4px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.prompt-link-btn {
    text-decoration: none;
    background-color: transparent;
    color: var(--color-accent-moon);
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 18px;
    border: 1px solid var(--color-accent-moon);
    transition: all 0.3s ease;
    font-size: 0.82em;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.prompt-link-btn.primary:hover {
    background-color: var(--color-accent-moon);
    color: var(--color-active-text);
    border-color: var(--color-accent-moon);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(var(--color-accent-moon-rgb), 0.3);
}
.prompt-link-btn.secondary {
    color: var(--color-secondary-text);
    border-color: var(--color-border);
    font-weight: 400;
}
.prompt-link-btn.secondary:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-pure-white);
    border-color: var(--color-accent-silver);
    transform: none;
    box-shadow: none;
}
/* 特定連結樣式 */
.prompt-guide a, .old-version-guide a {
    color: var(--color-accent-silver);
    text-decoration: underline dotted;
    transition: color 0.3s ease;
}
.prompt-guide a:hover, .old-version-guide a:hover {
    color: var(--color-pure-white);
}
/* 重點歷史版本的容器 */
.prompt-version-history {
    margin-top: 20px;
    border-top: 1px dashed var(--color-border-light);
    padding-top: 15px;
}
/* 舊版本歷史的摺疊開關 */
.version-history-toggle {
    margin: 0 0 0.5em 0;
    font-size: 0.85em;
    color: var(--color-secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    text-align: left;
    justify-content: flex-start;
    font-weight: 400;
    letter-spacing: 0.5px;
}
.version-history-toggle:hover {
    color: var(--color-hint-text);
}
.version-history-toggle .toggle-arrow {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}
.version-history-toggle.expanded .toggle-arrow {
    transform: rotate(90deg);
}
/* 重點歷史版本列表容器 */
.version-history-list {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-out;
    max-height: 1500px;
    opacity: 1;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.version-history-list.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
}
/* 單個重點歷史版本項目 */
.old-version-item {
    background-color: var(--color-main-bg);
    border: 1px solid var(--color-border-lightest);
    border-radius: 3px;
    padding: 10px 15px;
    box-shadow: none;
    transition: background-color 0.3s ease;
}
.old-version-item:hover {
    background-color: var(--color-surface-hover);
}
.old-version-item p {
    font-size: 0.75em;
    margin: 0;
    line-height: 1.5;
    color: var(--color-secondary-text);
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: normal;
    margin-bottom: 0.4em;
}
.old-version-item p:last-of-type {
    margin-bottom: 0.6em;
}
/* 重點歷史版本標題 */
.old-version-name {
    font-size: 0.8em;
    color: var(--color-accent-silver);
    font-weight: 500;
    margin: 0;
    border-bottom: 1px dotted var(--color-border-lightest);
    padding-bottom: 0.3em;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    white-space: normal;
    flex-wrap: wrap;
}
#home-content .prompt-item p,
#home-content .old-version-item p {
    max-width: unset;
}
/* ☙—————————————————————————————❧ */
/*          5. 角色卡片樣式          */
/* ☙—————————————————————————————❧ */
/* --- 主卡片結構 --- */
.character-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-transparent);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}
.character-card:hover {
    background-color: var(--color-surface-hover-transparent);
}
/* --- 卡片上半部 (圖片 + 主要資訊) --- */
.card-main-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px 30px 20px 20px;
}
.character-card img {
    width: 240px;
    height: 320px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: radial-gradient(circle, var(--color-main-bg) 0%, var(--color-surface) 100%);
    flex-shrink: 0; /* 防止圖片在空間不夠時被壓縮 */
}
.character-info {
    flex: 1; /* 讓文字資訊區塊填滿剩餘空間 */
}
.character-name {
    font-size: 1.25em;
    color: var(--color-accent-silver);
    margin: 0 0 0.5em;
    padding-left: 5px;
}
.character-name::before {
    content: "❦ ";
}
.character-info p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0.25em 0 0.5em;
}
.character-tags {
    margin-bottom: 10px;
}
.character-tags span {
    display: inline-block;
    background-color: var(--color-border);
    color: var(--color-secondary-text);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.65em;
    margin-right: 5px;
    margin-bottom: 5px;
}
.character-reminder, .character-warning {
    padding-left: 5px;
}
.character-reminder {
    color: var(--color-hint-text);
    margin: 0.2em 0 0.5em;
}
.character-reminder::before {
    content: "❧ ";
}
.character-warning {
    color: var(--color-highlight-text);
}
.character-warning::before {
    content: "⚠ ";
}
/* --- 卡片上半部 (圖片輪播器) --- */
.character-image-slider {
    position: relative; /* 讓裡面的按鈕和圓點可以絕對定位 */
    width: 240px;
    height: 320px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: radial-gradient(circle, var(--color-main-bg) 0%, var(--color-surface) 100%);
    overflow: hidden; /* 隱藏所有不在顯示區的圖片 */
    flex-shrink: 0;
}
.slides-container {
    width: 100%;
    height: 100%;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 預設所有圖片都是透明的 */
    transition: opacity 0.8s ease-in-out; /* 切換時的淡入淡出效果 */
    z-index: 1;
}
.slide.active {
    opacity: 1; /* 只有 active 的那張才顯示 */
    z-index: 2; /* 確保它在最上層 */
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片填滿容器且不變形 */
}
/* --- 輪播器：左右切換按鈕 --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3; /* 要在圖片之上 */
    background-color: transparent;
    color: var(--color-main-text);
    border: 1px solid transparent;
    border-radius: 50%; /* 圓形的按鈕 */
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 26px; /* 讓箭頭垂直置中 */
    text-align: center;
    cursor: pointer;
    opacity: 0; /* 平常藏起來 */
    transition: all 0.3s ease;
}
.character-image-slider:hover .slider-btn {
    opacity: 1; /* 滑鼠移上去才顯示 */
}
.slider-btn.prev {
    left: 10px;
}
.slider-btn.next {
    right: 10px;
}
.slider-btn:hover {
    background-color: transparent;
    color: var(--color-pure-white);
}
/* --- 輪播器：底部圓點指示器 --- */
.dots-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
    background-color: var(--color-surface-transparent);
    padding: 4px 8px;
    border-radius: 10px;
}
.dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.dot:hover {
    background-color: var(--color-secondary-text);
}
.dot.active {
    background-color: var(--color-pure-white);
}
/* --- 卡片置底欄 (Footer) · 總設定 --- */
.card-footer {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 2px 25px 6px 25px;
    background-color: var(--color-card-footer-bg);
    border-top: 1px solid var(--color-border);
}
/* --- 置底欄 · 上半部 (狀態列) --- */
.character-status-container {
    display: flex;
    flex-wrap: wrap; /* 內容太多就換行 */
    align-items: center;
    /* 垂直間距 4px，水平間距 20px */
    gap: 4px 20px;
    padding-bottom: 2px;
    /* 如果下面還有連結區，就顯示底線 */
    border-bottom: 1px solid var(--color-border);
}
/* --- 版本號 & 摺疊箭頭 --- */
.version-name-container {
    display: inline-flex; /* 讓箭頭和文字能漂亮地並排 */
    align-items: center;
    gap: 7px;
}
/* 加上 role="button" 才套用，這樣沒有更新的角色就不會有手指示標 */
.version-name-container[role="button"] {
    cursor: pointer;
    user-select: none; /* 讓文字不會在快速點擊時被選取 */
}
.toggle-arrow {
    font-size: 0.65em;
    font-weight: bold;
    color: var(--color-secondary-text);
    transition: transform 0.3s ease-in-out; /* 這就是箭頭轉動的動畫！ */
}
/* 當箭頭使用了 expanded 時，它就會旋轉 90 度 */
.toggle-arrow.expanded {
    transform: rotate(90deg);
}
.version-name {
    font-size: 0.65em;
    color: var(--color-accent-silver);
    margin-right: 5px; /* 跟後面的選項拉開一點距離 */
}
/* --- 更新紀要的容器 --- */
.version-updates-container {
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease; /* 開關門的動畫 */
    max-height: 500px; /* 預設給個足夠大的高度，讓它看起來是打開的 */
    opacity: 1;
}
/* 當使用了 collapsed 時，它就會關上 */
.version-updates-container.collapsed {
    max-height: 0;
    opacity: 0;
}
.version-update {
    font-size: 0.65em; /* 讓字小一點，像悄悄話一樣 */
    color: var(--color-hint-text); /* 用提示文字的顏色，不那麼搶眼 */
    margin: 0;
    padding-left: 10px; /* 在左側留出空間 */
    line-height: 1.5;
}
/* 如果狀態列是 Footer 裡唯一的，那條底線就沒必要了 */
.character-status-container:only-child {
    border-bottom: none;
    padding-bottom: 0;
}
/* --- 置底欄 · 下半部 (連結按鈕) --- */
.character-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end; /* 讓按鈕靠右 */
}
.char-link-btn {
    text-decoration: none;
    background-color: var(--color-surface);
    color: var(--color-accent-moon);
    font-size: 0.65em;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 15px;
    transition: all 0.3s ease;
}
.char-link-btn:hover {
    background-color: var(--color-accent-moon);
    color: var(--color-active-text);
    border-color: var(--color-accent-moon);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--color-shadow-light);
}
/* --- Checkbox 和 Lorebook 的通用樣式 --- */
.feature-label,
.character-lorebook,
.lorebook-text {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    color: var(--color-secondary-text);
    user-select: none; /* 讓文字無法被選取 */
}
/* 隱藏真正的 checkbox，用自己畫的 */
.feature-label input[type="checkbox"] {
    display: none;
}
/* 自己畫的 checkbox 方框 */
.feature-label .checkmark {
    width: 12px;
    height: 12px;
    border: 1px solid var(--color-border);
    background-color: var(--color-main-bg);
    border-radius: 3px;
    margin-right: 5px;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
/* 被選中時的樣式 */
.feature-label input[type="checkbox"]:checked + .checkmark {
    background-color: var(--color-accent-moon);
    border-color: var(--color-accent-moon);
}
/* 這是那個「✓」符號，用偽元素畫出來的，很聰明吧 */
.feature-label .checkmark::after {
    content: '';
    position: absolute;
    display: none; /* 預設不顯示 */
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--color-active-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* 當 checkbox 被選中時，才顯示「✓」 */
.feature-label input[type="checkbox"]:checked + .checkmark::after {
    display: block;
}
/* ☙—————————————————————————————❧ */
/*    6. 搜尋、分頁 & 標籤辭典       */
/* ☙—————————————————————————————❧ */
/* 控制項和分頁的容器的共同樣式 */
.controls-container, .pagination-container {
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap; /* 在小螢幕上可以換行 */
}
.controls-container {
    padding-top: 12px;
    padding-bottom: 10px;
    position: relative; /* 為了讓標籤列表可以定位 */
}
.pagination-container {
    padding-top: 8px;
    padding-bottom: 8px;
}
/* 搜尋框 */
.search-box {
    width: auto;
    min-width: 290px;
    max-width: 50%;
    flex-grow: 1; /* 讓它在父容器還有空位時，自動、優雅地向外擴大 */
    padding: 6px 10px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-main-text);
    font-size: 0.7em;
    font-family: inherit;
    transition: all 0.3s ease;
}
.search-box:focus {
    outline: none;
    border-color: var(--color-accent-moon);
    box-shadow: 0 0 10px rgba(129, 158, 196, 0.3); /* focus 時有點微光，看起來很高級 */
}
/* 分頁按鈕 */
.page-btn {
    text-decoration: none;
    color: var(--color-contrast-text);
    font-size: 0.7em;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: var(--color-surface);
    cursor: pointer;
}
.page-btn:hover {
    border-color: var(--color-accent-silver);
    color: var(--color-pure-white);
}
.page-btn.active {
    background-color: var(--color-active-bg);
    color: var(--color-active-text);
    border-color: var(--color-active-bg);
    cursor: default;
}
/* 標籤清單的開關按鈕 */
.tag-toggle-btn {
    padding: 6px 10px;
    font-size: 0.7em;
    font-family: inherit;
    color: var(--color-contrast-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tag-toggle-btn:hover {
    border-color: var(--color-accent-silver);
    color: var(--color-pure-white);
}
/* 標籤清單本體 */
.tag-list-container {
    display: none; /* 預設隱藏 */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--color-contrast-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    z-index: 101;
    box-shadow: 0 8px 16px var(--color-shadow-medium);
    margin-top: 5px;
}
.tag-list-container.active {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}
/* 標籤清單的 sticky 標題 */
.tag-list-header {
    position: sticky;
    top: -12px; /* 黏在頂部時，稍微往上一點，把 padding 也蓋住 */
    background-color: var(--color-contrast-bg);
    z-index: 102;
    width: 100%;
    text-align: left;
    color: var(--color-hint-text);
    font-size: 0.65em;
    margin: -12px 0 10px 0;
    padding: 12px 0 10px 0;
    border-bottom: 1px solid var(--color-border);
    flex-basis: 100%; /* 讓它佔滿一整行 */
    user-select: none;
}
/* 標籤清單裡的每個標籤按鈕 */
.tag-suggestion-btn {
    background-color: var(--color-surface);
    color: var(--color-main-text);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tag-suggestion-btn:hover {
    background-color: var(--color-active-bg);
    color: var(--color-active-text);
    border-color: var(--color-active-bg);
}
/* ☙—————————————————————————————❧ */
/*         7. 置底欄樣式             */
/* ☙—————————————————————————————❧ */
#page-footer p {
    margin: 4px 0;
    color: var(--color-secondary-text);
    font-size: 0.65em;
    line-height: 1.5;
    word-break: break-all;
}
/* ☙—————————————————————————————❧ */
/*          8. RWD 手機版樣式        */
/* ☙—————————————————————————————❧ */
/* 當螢幕寬度小於 600px 時，這些樣式就會生效。 */
@media (max-width: 600px) {
    /* 讓卡片內容垂直排列 */
    .card-main-content {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }
    .character-card img {
        width: 180px;
        height: 240px;
        margin-bottom: 10px;
    }
    .character-image-slider {
        width: 180px;
        height: 240px;
        margin-bottom: 10px;
    }
    /* 卡片底部也置中 */
    .character-links {
        justify-content: center;
    }
    /* 提示詞介紹部分 */
    .prompt-intro-container {
        margin-left: 0px; 
        margin-right: 4px; 
        padding-left: 12px;
        padding-right: 12px;
    }
    .prompt-name {
        flex-direction: column;
        gap: 0px;
    }
    .prompt-name .prompt-subname {
        margin-top: 2px;
        margin-left: 2px;
    }
    .prompt-item p, .old-version-item p {
        flex-wrap: wrap;
    }
}
/* ☙—————————————————————————————❧ */
/*    9. 年齡驗證彈窗               */
/* ☙—————————————————————————————❧ */
/* 彈窗背景遮罩 */
.age-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 為滾動留出空間 */
    overflow-y: auto; /* 當內容高過螢幕時，允許整個遮罩層滾動 */
    padding: 30px 10px; /* 留出上下安全間距，不讓彈窗貼邊 */
    box-sizing: border-box;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-pure-black);
}
/* 啟動動畫時的狀態 */
.age-modal-overlay.active {
    opacity: 1;
}
/* 彈窗主體 */
.age-modal-content {
    background-color: var(--color-contrast-bg);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    width: 100%;
    max-width: 660px;
    padding: 30px;
    box-shadow: 0 10px 30px var(--color-shadow-dark);
    font-family: inherit;
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
    /* 高度足夠時自動置中，高度不足時配合 flex-start */
    margin: auto;
    box-sizing: border-box;
}
.age-modal-overlay.active .age-modal-content {
    transform: translateY(0);
}
/* 彈窗標題 */
.age-modal-title {
    font-size: 1.2em;
    color: var(--color-highlight-text);
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.8px;
}
/* 說明文字主體 */
.age-modal-body {
    font-size: 0.85em;
    line-height: 1.7;
    color: var(--color-main-text);
    margin-bottom: 25px;
    font-weight: normal;
}
/* 列表項目 */
.age-modal-list {
    margin: 8px 0;
    padding-left: 15px;
    list-style-type: none;
}
.age-modal-list li {
    margin-bottom: 4px;
}
.age-modal-list li::before {
    content: "▪ ";
    color: var(--color-accent-moon);
}
/* 底部按鈕區 */
.age-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}
/* 彈窗按鈕通用樣式 */
.age-modal-btn {
    font-size: 0.8em;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid transparent;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.age-modal-btn.confirm {
    background-color: var(--color-accent-moon);
    color: var(--color-active-text);
}
.age-modal-btn.confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(129, 158, 196, 0.4);
}
.age-modal-btn.cancel {
    background-color: var(--color-surface);
    color: var(--color-secondary-text);
    border-color: var(--color-border);
}
.age-modal-btn.cancel:hover {
    color: var(--color-pure-white);
    border-color: var(--color-accent-silver);
}
/* ☙—————————————————————————————❧ */
/*    9.5. 手機版彈窗微調           */
/* ☙—————————————————————————————❧ */
@media (max-width: 600px) {
    .age-modal-content {
        padding: 20px 15px; /* 縮小內邊距，擠出更多顯示空間 */
        border-radius: 8px;
    }
    .age-modal-title {
        font-size: 1.05em;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    .age-modal-body {
        font-size: 0.78em; /* 微調字體大小，讓手機上不需滾動太長 */
        line-height: 1.6;
        margin-bottom: 15px;
    }
    .age-modal-list {
        margin: 6px 0;
        padding-left: 10px;
    }
    .age-modal-footer {
        gap: 10px;
        justify-content: space-between; /* 按鈕在手機上分散排列，更好點擊 */
    }
    .age-modal-btn {
        flex: 1; /* 按鈕等寬，肥肥的身體在手機螢幕上更容易被戳到 */
        text-align: center;
        padding: 10px 0;
        font-size: 0.75em;
    }
}
/* ☙—————————————————————————————❧ */
/*    10. AI 翻譯免責提示 (English Only) */
/* ☙—————————————————————————————❧ */
.translation-disclaimer {
    display: block;
    font-size: 0.58em !important;          /* 比原本細小的腳本聲明還要更迷你、更自律 */
    color: var(--color-hint-text) !important; /* 採用柔和安靜的指示藍，不喧賓奪主 */
    font-style: italic;                    /* 優雅的斜體書寫，提醒這是個備註 */
    margin-top: 10px !important;           /* 與上方的版權警告保持小小的社交距離 */
    opacity: 0.8;                          /* 80% 的霧色朦朧感，點到為止 */
    text-align: center;
    letter-spacing: 0.5px;
}