/*
 * 夜晚主题
 * 暖炭色分层，字是米色。细暖边代替冷灰线，朱砂仍只出现在按钮和链接上。
 * 分享长图（.share-image-*）保持浅色，方便发到聊天里看。
 */

html[data-theme="night"] {
  color-scheme: dark;
  --wood-color: #8eaa74;
  --fire-color: #d49280;
  --earth-color: #c4aa8c;
  --metal-color: #e4d7a8;
  --water-color: #8aadc4;
  --bg-color: #1a1613;
  --bg-color-rgb: 26, 22, 19;
  --text-color: #ebe3d6;
  --primary-color: #e7b1a8;
  --secondary-color: #241f1b;
  --button-bg: #a85c54;
  --button-bg-hover: #9a534c;
  --button-hover: #9a534c;
  --button-bg-rgb: 168, 92, 84;
  --button-text: #f7f7f7;
  --border-color: rgba(226, 206, 172, 0.22);
  --shadow-color: rgba(0, 0, 0, 0.45);
  --success-color: #8eaa74;
  --danger-color: #e7b1a8;
  --warning-color: #d6c7a1;
  --info-color: #8aadc4;
  --table-header-bg: #2f2924;
  --table-row-hover: #3d362f;
  --table-border: rgba(226, 206, 172, 0.22);
  --input-bg: #2f2924;
  --input-border: rgba(226, 206, 172, 0.28);
  --input-focus-border: rgba(226, 206, 172, 0.55);
  --card-bg: #241f1b;
  --container-bg: #241f1b;
  --container-opacity: 0.96;
  --title-color: #ebe3d6;
  --label-color: #c2b6a8;
  --accent-color: rgba(226, 206, 172, 0.42);
  --muted-color: #c2b6a8;
  --section-bg: #241f1b;
  --section-title-color: #ebe3d6;
  --section-text-color: #ebe3d6;
  --tutorial-bg: rgba(36, 31, 27, 0.96);
  --section-border: rgba(226, 206, 172, 0.22);
  --tip-box-bg: rgba(226, 206, 172, 0.1);
  --background: 30, 10%, 9%;
  --foreground: 36, 28%, 90%;
  --muted-foreground: 32, 14%, 70%;
  --border: 32, 14%, 34%;
  --primary: 168, 92, 84;
  scrollbar-color: #3d362f #1a1613;
}

html[data-theme="night"] ::selection {
  background: rgba(226, 206, 172, 0.28);
  color: #f7f1e8;
}

html[data-theme="night"] body {
  background-color: #1a1613;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><circle cx='18' cy='22' r='1.15' fill='rgba(226, 206, 172, 0.1)'/><circle cx='86' cy='48' r='0.9' fill='rgba(243,234,220,0.06)'/><circle cx='46' cy='108' r='1.2' fill='rgba(226, 206, 172, 0.08)'/><circle cx='118' cy='92' r='1' fill='rgba(226, 206, 172, 0.09)'/><circle cx='104' cy='18' r='0.8' fill='rgba(226, 206, 172, 0.07)'/></svg>");
  color: var(--text-color);
}

html[data-theme="night"] .container,
html[data-theme="night"] .tutorial-container,
html[data-theme="night"] .footer,
html[data-theme="night"] .interpretation-container,
html[data-theme="night"] .ai-interpretation-container,
html[data-theme="night"] .table-container,
html[data-theme="night"] #historyModal .modal-content,
html[data-theme="night"] .modal-content {
  background: #241f1b;
  background-image: none;
  border-color: rgba(226, 206, 172, 0.22);
  color: var(--text-color);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

html[data-theme="night"] .mystical-title,
html[data-theme="night"] .geo-intro-section h2,
html[data-theme="night"] .geo-faq-section h2,
html[data-theme="night"] .footer-section h4,
html[data-theme="night"] .modal-header h3 {
  color: #ebe3d6;
  text-shadow: none;
}

html[data-theme="night"] .mystical-title::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 206, 172, 0.5), transparent);
}

html[data-theme="night"] .mystical-symbol {
  box-shadow: 0 0 10px rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .taiji-svg {
  filter: none;
}

html[data-theme="night"] .taiji-svg [stroke="#d4af37"] {
  stroke: rgba(226, 206, 172, 0.42);
}

html[data-theme="night"] .taiji-svg [fill="white"] {
  fill: #efe6da;
}

html[data-theme="night"] .mystical-symbol::before,
html[data-theme="night"] .mystical-symbol::after {
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: none;
}

html[data-theme="night"] input,
html[data-theme="night"] textarea,
html[data-theme="night"] select {
  background-color: #2f2924;
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] input::placeholder,
html[data-theme="night"] textarea::placeholder {
  color: rgba(226, 206, 172, 0.45);
}

html[data-theme="night"] option {
  background: #241f1b;
  color: #ebe3d6;
}

html[data-theme="night"] .announcement {
  background: #2f2924;
  color: #ebe3d6;
  border: 1px solid rgba(226, 206, 172, 0.22);
  box-shadow: none;
}

html[data-theme="night"] .announcement i,
html[data-theme="night"] .announcement-text,
html[data-theme="night"] .announcement .announcement-close {
  color: #ebe3d6;
}

html[data-theme="night"] .announcement .announcement-close:hover,
html[data-theme="night"] .announcement .announcement-close:focus-visible {
  background: rgba(226, 206, 172, 0.12);
  color: #f7f1e8;
}

html[data-theme="night"] .container td,
html[data-theme="night"] .tutorial-container td {
  border-color: rgba(226, 206, 172, 0.22);
  color: #ebe3d6;
}

html[data-theme="night"] .container thead td,
html[data-theme="night"] .tutorial-container thead td {
  background: #3d362f;
  color: #ebe3d6;
}

html[data-theme="night"] .container td.wood,
html[data-theme="night"] .container td.fire,
html[data-theme="night"] .container td.earth,
html[data-theme="night"] .container td.water,
html[data-theme="night"] .tutorial-container td.wood,
html[data-theme="night"] .tutorial-container td.fire,
html[data-theme="night"] .tutorial-container td.earth,
html[data-theme="night"] .tutorial-container td.water {
  color: #f4ebe0;
}

html[data-theme="night"] .container td.metal,
html[data-theme="night"] .tutorial-container td.metal {
  color: #3a2c18;
}

html[data-theme="night"] .metal {
  color: #3a2c18;
}

html[data-theme="night"] .wood {
  background: linear-gradient(135deg, #7d9a72, #5f7d58);
  box-shadow: none;
}

html[data-theme="night"] .fire {
  background: linear-gradient(135deg, #c48b74, #a86a56);
  box-shadow: none;
}

html[data-theme="night"] .earth {
  background: linear-gradient(135deg, #b39a84, #8d7564);
  box-shadow: none;
}

html[data-theme="night"] .metal {
  background: linear-gradient(135deg, #e4d7a8, #cbb56e);
  box-shadow: none;
}

html[data-theme="night"] .water {
  background: linear-gradient(135deg, #8aadc4, #5e849c);
  box-shadow: none;
}

html[data-theme="night"] .menu-bar {
  background: rgba(36, 31, 27, 0.92);
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

html[data-theme="night"] .menu-link,
html[data-theme="night"] .menu-link .icon {
  color: #c2b6a8;
}

html[data-theme="night"] .menu-link:hover,
html[data-theme="night"] .menu-item-container:hover .menu-link {
  color: #f7f1e8;
}

html[data-theme="night"] .x6r-auth-nav-btn {
  border-color: rgba(226, 206, 172, 0.22);
  color: #e7b1a8;
  background: transparent;
}

html[data-theme="night"] .x6r-auth-nav-btn:hover {
  background: #a85c54;
  color: #f7f7f7;
}

html[data-theme="night"] .hamburger-menu {
  background: rgba(36, 31, 27, 0.94);
  border-color: rgba(226, 206, 172, 0.22);
  color: #ebe3d6;
}

html[data-theme="night"] .hamburger-icon,
html[data-theme="night"] .hamburger-icon i,
html[data-theme="night"] .hamburger-icon span {
  color: #ebe3d6;
  background-color: transparent;
}

html[data-theme="night"] .hamburger-icon span {
  background-color: #ebe3d6;
}

html[data-theme="night"] .mobile-menu {
  background: rgba(26, 22, 19, 0.96);
}

html[data-theme="night"] .mobile-menu-link {
  color: #ebe3d6;
  background: rgba(226, 206, 172, 0.1);
  border: 1px solid rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .mobile-menu-link:hover,
html[data-theme="night"] .mobile-menu-link:focus {
  background: rgba(226, 206, 172, 0.22);
  color: #f7f1e8;
}

html[data-theme="night"] .geo-intro-section,
html[data-theme="night"] .geo-faq-section {
  background: linear-gradient(180deg, rgba(36, 31, 27, 0.96), rgba(26, 22, 19, 0.96));
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

html[data-theme="night"] .geo-intro-badge,
html[data-theme="night"] .palace-badge {
  color: #e7b1a8;
  background: rgba(226, 206, 172, 0.22);
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .geo-intro-lead,
html[data-theme="night"] .palace-lead {
  color: #c2b6a8;
}

html[data-theme="night"] .geo-intro-card,
html[data-theme="night"] .faq-item,
html[data-theme="night"] .meaning-item,
html[data-theme="night"] .scene-item,
html[data-theme="night"] .thanks-card {
  background: rgba(226, 206, 172, 0.07);
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: none;
  color: #ebe3d6;
}

html[data-theme="night"] .geo-intro-card h3,
html[data-theme="night"] .faq-item h3,
html[data-theme="night"] .meaning-item strong,
html[data-theme="night"] .scene-item strong,
html[data-theme="night"] .geo-intro-card a {
  color: #e7b1a8;
}

html[data-theme="night"] .geo-intro-card p,
html[data-theme="night"] .faq-item p,
html[data-theme="night"] .meaning-item span,
html[data-theme="night"] .scene-item p {
  color: #c2b6a8;
}

html[data-theme="night"] .geo-intro-note,
html[data-theme="night"] .palace-note {
  background: rgba(226, 206, 172, 0.22);
  color: #ebe3d6;
  border-left-color: rgba(226, 206, 172, 0.5);
}

html[data-theme="night"] .geo-intro-link,
html[data-theme="night"] .palace-btn,
html[data-theme="night"] .mystical-btn,
html[data-theme="night"] .submit-btn,
html[data-theme="night"] .ai-button,
html[data-theme="night"] .afdian-cta {
  background: #a85c54;
  color: #f7f7f7;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="night"] .ai-button::before {
  color: #f7f7f7;
}

html[data-theme="night"] .clear-btn,
html[data-theme="night"] .palace-btn.secondary {
  background: transparent;
  color: #ebe3d6;
  border: 1px solid rgba(226, 206, 172, 0.22);
  box-shadow: none;
}

html[data-theme="night"] .geo-intro-link:hover,
html[data-theme="night"] .palace-btn:hover,
html[data-theme="night"] .submit-btn:hover,
html[data-theme="night"] .ai-button:hover,
html[data-theme="night"] .afdian-cta:hover {
  background: #9a534c;
  color: #f7f7f7;
}

html[data-theme="night"] .clear-btn:hover,
html[data-theme="night"] .palace-btn.secondary:hover {
  background: rgba(226, 206, 172, 0.22);
  color: #f7f1e8;
}

html[data-theme="night"] .footer {
  background: #241f1b;
  border-top-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .footer-bottom {
  background: rgba(226, 206, 172, 0.05);
  border-top-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .footer-bottom a,
html[data-theme="night"] .footer-bottom .footer-meta,
html[data-theme="night"] .footer-section p,
html[data-theme="night"] .footer-section a {
  color: #c2b6a8;
}

html[data-theme="night"] .footer-bottom a:hover,
html[data-theme="night"] .footer-section a:hover,
html[data-theme="night"] .footer-section .copy-text:hover {
  color: #e7b1a8;
}

html[data-theme="night"] .footer-section .red-text {
  color: #e7b1a8;
}

html[data-theme="night"] .control-panel,
html[data-theme="night"] .palace-control-panel {
  background: rgba(36, 31, 27, 0.94);
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="night"] .control-handle,
html[data-theme="night"] .palace-control-panel .control-handle,
html[data-theme="night"] .panel-btn,
html[data-theme="night"] .palace-control-panel .panel-btn {
  background: #2f2924;
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

html[data-theme="night"] .control-handle i,
html[data-theme="night"] .panel-btn i,
html[data-theme="night"] .palace-control-panel .panel-btn i,
html[data-theme="night"] .palace-control-panel .control-handle i {
  color: #ebe3d6;
}

html[data-theme="night"] .control-handle:hover,
html[data-theme="night"] .panel-btn:hover,
html[data-theme="night"] .palace-control-panel .panel-btn:hover,
html[data-theme="night"] .palace-control-panel .control-handle:hover {
  background: #3d362f;
  border-color: rgba(226, 206, 172, 0.42);
  color: #f7f1e8;
}

html[data-theme="night"] .x6r-auth-overlay {
  background: rgba(0, 0, 0, 0.64);
}

html[data-theme="night"] .x6r-auth-card,
html[data-theme="night"] .x6r-auth-dropdown,
html[data-theme="night"] .share-content,
html[data-theme="night"] .disclaimer-content,
html[data-theme="night"] .x6r-captcha-dialog {
  background: #2f2924;
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .x6r-auth-title,
html[data-theme="night"] .disclaimer-header h3,
html[data-theme="night"] .x6r-captcha-dialog h3 {
  color: #ebe3d6;
}

html[data-theme="night"] .x6r-auth-view input:not([type="checkbox"]),
html[data-theme="night"] .uc-form input,
html[data-theme="night"] .x6r-captcha-img {
  background: #2f2924;
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .x6r-auth-links button,
html[data-theme="night"] .x6r-auth-agree,
html[data-theme="night"] .x6r-auth-agree a,
html[data-theme="night"] .x6r-auth-note,
html[data-theme="night"] .x6r-auth-close {
  color: #c2b6a8;
}

html[data-theme="night"] .disclaimer-header,
html[data-theme="night"] .disclaimer-header h3,
html[data-theme="night"] .agree-btn {
  background: #a85c54;
  color: #f7f7f7;
  border-bottom-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .agree-btn:hover {
  background: #9a534c;
  color: #f7f7f7;
}

html[data-theme="night"] .disclaimer-body,
html[data-theme="night"] .disclaimer-scroll {
  color: #ebe3d6;
}

html[data-theme="night"] #historyModal .modal-header,
html[data-theme="night"] #historyModal .modal-header h3 {
  background: #a85c54;
  color: #f7f7f7;
}

html[data-theme="night"] .modal-body,
html[data-theme="night"] #historyList {
  background: #2f2924;
  color: #ebe3d6;
}

html[data-theme="night"] .history-item {
  background: #2b261f;
  color: #ebe3d6;
}

html[data-theme="night"] .history-item:hover {
  background: #3d362f;
}

html[data-theme="night"] .clear-history-button,
html[data-theme="night"] .delete-selected-button {
  background: transparent;
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .palace-page {
  color: #ebe3d6;
  background:
    radial-gradient(circle at 12% 8%, rgba(226, 206, 172, 0.22), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(226, 206, 172, 0.05), transparent 26%),
    #1a1613;
}

html[data-theme="night"] .palace-hero,
html[data-theme="night"] .palace-card,
html[data-theme="night"] .palace-faq,
html[data-theme="night"] .palace-related {
  background: linear-gradient(180deg, rgba(36, 31, 27, 0.96), rgba(26, 22, 19, 0.96));
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

html[data-theme="night"] .palace-hero::before,
html[data-theme="night"] .palace-hero::after {
  background: radial-gradient(circle, rgba(226, 206, 172, 0.1), transparent 68%);
}

html[data-theme="night"] .palace-card::before,
html[data-theme="night"] .palace-related::before {
  background: linear-gradient(90deg, transparent, rgba(226, 206, 172, 0.45), transparent);
}

html[data-theme="night"] .palace-card h2::before,
html[data-theme="night"] .palace-related h2::before {
  background: #c2b6a8;
  box-shadow: 0 0 0 5px rgba(226, 206, 172, 0.12);
}

html[data-theme="night"] .palace-hero h1,
html[data-theme="night"] .palace-card h2,
html[data-theme="night"] .palace-faq h2,
html[data-theme="night"] .palace-related h2,
html[data-theme="night"] .promo-cat h2,
html[data-theme="night"] .deal-card h3,
html[data-theme="night"] .promo-faq .faq-item h3 {
  color: #ebe3d6;
}

html[data-theme="night"] .palace-card h3,
html[data-theme="night"] .palace-faq h3 {
  color: #e7b1a8;
}

html[data-theme="night"] .palace-card p,
html[data-theme="night"] .palace-card li,
html[data-theme="night"] .palace-faq p,
html[data-theme="night"] .palace-related p,
html[data-theme="night"] .palace-related li,
html[data-theme="night"] .deal-card p,
html[data-theme="night"] .promo-faq .faq-item p {
  color: #c2b6a8;
}

html[data-theme="night"] .palace-links a,
html[data-theme="night"] .inline-link {
  color: #e7b1a8;
  background: rgba(226, 206, 172, 0.07);
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .palace-links a:hover,
html[data-theme="night"] .inline-link:hover {
  background: rgba(226, 206, 172, 0.22);
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .deal-card {
  background: rgba(226, 206, 172, 0.07);
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .deal-tag,
html[data-theme="night"] .promo-cat .cat-en {
  color: #e7b1a8;
}

html[data-theme="night"] .tutorial-title-container {
  background: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .tutorial-title {
  background: none;
  color: #ebe3d6;
  -webkit-text-fill-color: #ebe3d6;
  text-shadow: none;
}

html[data-theme="night"] .section-decoration {
  background: linear-gradient(90deg, rgba(226, 206, 172, 0.22), rgba(226, 206, 172, 0.5), rgba(226, 206, 172, 0.22));
}

html[data-theme="night"] .step-number {
  background: linear-gradient(135deg, #b56a62, #a85c54);
  border-color: rgba(226, 206, 172, 0.22);
  box-shadow: none;
  color: #f7f7f7;
}

html[data-theme="night"] .tutorial-button {
  background: linear-gradient(135deg, #b56a62, #a85c54);
  color: #f7f7f7;
  box-shadow: none;
}

html[data-theme="night"] .tutorial-section {
  background: #241f1b;
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .tutorial-section h2,
html[data-theme="night"] .tutorial-section h3 {
  color: #ebe3d6;
}

html[data-theme="night"] .tutorial-section p,
html[data-theme="night"] .tutorial-section li {
  color: #c2b6a8;
}

html[data-theme="night"] .note-list li::before {
  color: #e7b1a8;
}

html[data-theme="night"] .hexagram-list li::before {
  color: rgba(226, 206, 172, 0.75);
}

html[data-theme="night"] .ai-gen-notice {
  color: #e7b1a8;
  background: rgba(231, 177, 168, 0.12);
  border-color: rgba(231, 177, 168, 0.32);
}

html[data-theme="night"] .ai-free-note,
html[data-theme="night"] .ai-quota-remaining,
html[data-theme="night"] .ai-interpretation-placeholder {
  color: #c2b6a8;
}

html[data-theme="night"] .ai-free-note a {
  color: #e7b1a8;
  border-bottom-color: rgba(231, 177, 168, 0.45);
}

html[data-theme="night"] .uc-quota-bar,
html[data-theme="night"] .uc-switch-slider {
  background: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .uc-switch input:checked + .uc-switch-slider {
  background: #a85c54;
}

html[data-theme="night"] .uc-avatar {
  background: #a85c54;
  color: #f7f7f7;
}

html[data-theme="night"] .uc-quota-bonus {
  color: #d6c7a1;
}

html[data-theme="night"] .uc-row {
  border-bottom-color: rgba(226, 206, 172, 0.22);
}

html[data-theme="night"] .decoration-left,
html[data-theme="night"] .decoration-right {
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='80' viewBox='0 0 180 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,40 Q30,20 50,40 Q70,60 90,40 Q110,20 130,40 Q150,60 170,40' stroke='%23e4c98a' stroke-width='1.5' fill='none' stroke-opacity='0.22' /%3E%3Cpath d='M10,50 Q30,30 50,50 Q70,70 90,50 Q110,30 130,50 Q150,70 170,50' stroke='%23e4c98a' stroke-width='1.5' fill='none' stroke-opacity='0.16' /%3E%3C/svg%3E");
  opacity: 0.85;
}

html[data-theme="night"] .footer-cloud {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0,15 Q10,5 20,15 T40,15 T60,15 T80,15 T100,15 V30 H0 Z' fill='%23e4c98a' fill-opacity='0.06'/%3E%3C/svg%3E");
}

html[data-theme="night"] .control-handle::before,
html[data-theme="night"] .panel-btn::before,
html[data-theme="night"] .palace-control-panel .control-handle::before,
html[data-theme="night"] .palace-control-panel .panel-btn::before {
  border-color: rgba(226, 206, 172, 0.28);
}

html[data-theme="night"] .control-handle::after,
html[data-theme="night"] .panel-btn::after,
html[data-theme="night"] .palace-control-panel .control-handle::after,
html[data-theme="night"] .palace-control-panel .panel-btn::after {
  opacity: 0;
}

html[data-theme="night"] .control-handle,
html[data-theme="night"] .panel-btn,
html[data-theme="night"] .control-handle i,
html[data-theme="night"] .panel-btn i {
  text-shadow: none;
}

/* 切换时不要让文字和背景各自动画，否则浅字会在浅底上闪一帧 */
html.theme-instant,
html.theme-instant * {
  transition: none !important;
}

/* 分享弹窗在夜晚仍写死了紫标题和深灰关闭键，压在深底上读不清 */
html[data-theme="night"] .share-header h3,
html[data-theme="night"] .share-options h4 {
  color: #ebe3d6;
}

html[data-theme="night"] .share-close {
  background: rgba(226, 206, 172, 0.12);
  border-color: rgba(226, 206, 172, 0.28);
  color: #ebe3d6;
}

html[data-theme="night"] .share-close:hover {
  background: rgba(226, 206, 172, 0.22);
  color: #f7f1e8;
}

html[data-theme="night"] .checkmark,
html[data-theme="night"] .radio-mark {
  background-color: #241f1b;
  border-color: rgba(226, 206, 172, 0.42);
}

html[data-theme="night"] .custom-checkbox:hover input ~ .checkmark,
html[data-theme="night"] .custom-radio:hover input ~ .radio-mark {
  background-color: #3d362f;
}

html[data-theme="night"] .custom-checkbox input:checked ~ .checkmark,
html[data-theme="night"] .custom-radio input:checked ~ .radio-mark {
  background-color: #a85c54;
  border-color: #a85c54;
}

html[data-theme="night"] .share-content .gua-fx-btn,
html[data-theme="night"] .gua-fx-btn:not(.mystical-btn) {
  background: #a85c54;
  color: #f7f7f7;
  box-shadow: none;
}

html[data-theme="night"] .share-content .gua-fx-btn:hover,
html[data-theme="night"] .gua-fx-btn:not(.mystical-btn):hover {
  background: #9a534c;
  color: #f7f7f7;
}

html[data-theme="night"] .gua-fx-btn:disabled {
  background: #3d362f;
  color: #c2b6a8;
}

html[data-theme="night"] .copy-link-btn {
  border-color: rgba(226, 206, 172, 0.42);
  color: #e7b1a8;
}

html[data-theme="night"] .copy-link-btn:hover {
  background: #a85c54;
  color: #f7f7f7;
}

/* 分享长图挂在 body 上，tbody 第一行会吃到夜晚表头变量，深底配 #333 */
html[data-theme="night"] .share-image-table tr:first-child td {
  background-color: #e6d7b7;
  color: #333;
}

/* 主题开关：跟在悬浮条按钮列里，排在历史记录正上方 */
.theme-toggle-btn {
  position: relative;
  z-index: 3;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  margin: 8px 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #b8894d;
  background: #fffaf3;
  color: #6d2424;
  box-shadow: 0 6px 16px rgba(84, 66, 41, 0.28), inset 0 0 0 1px rgba(212, 175, 55, 0.45);
  cursor: pointer;
  overflow: hidden;
  line-height: 1;
}

.theme-toggle-btn::after,
.theme-toggle-btn::before {
  content: none;
  display: none;
}

.theme-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-icon svg {
  display: block;
}

.theme-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-toggle-btn:hover {
  background: #fffaf1;
  color: #6d2424;
  border-color: #e7c56a;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(84, 66, 41, 0.28);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 3px;
}

html[data-theme="night"] .theme-toggle-btn {
  background: #2f2924;
  color: #ebe3d6;
  border-color: rgba(226, 206, 172, 0.28);
  box-shadow: none;
}

html[data-theme="night"] .theme-toggle-btn:hover {
  background: #3d362f;
  color: #f7f1e8;
  border-color: rgba(226, 206, 172, 0.42);
}

.control-panel.theme-only-panel {
  position: fixed;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
  z-index: 1200;
}

.theme-only-panel .theme-toggle-btn {
  position: absolute;
  top: -20px;
  left: -48px;
  margin: 0;
  flex: none;
}

.palace-control-panel .theme-toggle-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  flex-basis: 44px;
}

@media (max-width: 900px) {
  .palace-control-panel .theme-toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    flex-basis: 40px;
  }
}

@media (max-width: 768px) {
  .control-panel:not(.palace-control-panel):not(.theme-only-panel) .theme-toggle-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
    flex-basis: 42px;
  }
}

@media (max-width: 480px) {
  .control-panel:not(.palace-control-panel):not(.theme-only-panel) .theme-toggle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    flex-basis: 36px;
    margin: 3px 0;
  }
}

@media (max-width: 430px) {
  .control-panel:not(.palace-control-panel):not(.theme-only-panel) .theme-toggle-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    flex-basis: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-btn,
  .theme-toggle-btn:hover {
    transition: none;
    transform: none;
  }
}