/* ==========================
   日夜模式背景
========================== */
/* 淺色模式：五段漸層 + CSS 光點層 + #stars 閃爍星（色隨 html[data-day-light]，homemode.js） */
html.day-mode {
  background: transparent !important;
}

html.day-mode::before {
  display: none !important;
}

/* 由上至下五段漸層：整體偏亮，避免中段／底部灰藍讓畫面比色卡顯深 */
/* 主題切換瞬間：關閉所有色彩/背景過渡，讓背景與各卡片/面板顏色即時「一起」切換，
   避免分批淡入造成延遲感（主題切換圖示的淡化 data-icon-key="theme" 除外，維持順暢交叉淡化）。 */
body.jpweb-theme-switching *:not([data-icon-key="theme"]),
body.jpweb-theme-switching *:not([data-icon-key="theme"])::before,
body.jpweb-theme-switching *:not([data-icon-key="theme"])::after {
  transition: none !important;
}

body.day-mode {
  position: relative;
  background: linear-gradient(
    to bottom,
    #fffefb 0%,
    #fafcff 22%,
    #f7f9ff 48%,
    #f4f7fb 72%,
    #fafcfc 100%
  ) !important;
  background-attachment: fixed;
  background-color: #fafcfc !important;
  color: #000000;
}

/* 淺色光點：原本日間模式的漂浮光點效果（試用版）——目前關閉，不再顯示 */
body.day-mode::before {
  content: none !important;
}

/* ---------- 淺色光點／星星：全站與首頁同色（偏淡，閃爍不過深） ---------- */
html[data-day-light="gold"],
html:not([data-day-light]) {
  --day-dot-a: #f4f8fb;
  --day-dot-b: #fafdff;
  --day-dot-c: #f7fbfd;
  --day-dot-d: #fafdff;
  --day-dot-e: #f1f6fa;
  --day-star-fill: #d2e6f4;
  --day-star-glow-1: rgba(150, 190, 218, 0.26);
  --day-star-glow-2: rgba(170, 205, 228, 0.32);
  --day-star-glow-3: rgba(190, 218, 238, 0.28);
}

/* 琥珀：偏橙，對比稍強 */
html[data-day-light="amber"] {
  --day-dot-a: #ffb74d;
  --day-dot-b: #ffcc80;
  --day-dot-c: #ffa726;
  --day-dot-d: #ffe0b2;
  --day-dot-e: #ff9800;
  --day-star-fill: #fb8c00;
  --day-star-glow-1: rgba(251, 140, 0, 0.78);
  --day-star-glow-2: rgba(255, 152, 0, 0.95);
  --day-star-glow-3: rgba(255, 183, 77, 0.88);
}

/* 蜜桃：偏粉橘，柔和 */
html[data-day-light="peach"] {
  --day-dot-a: #ffab91;
  --day-dot-b: #ffccbc;
  --day-dot-c: #ff8a65;
  --day-dot-d: #fbe9e7;
  --day-dot-e: #ff7043;
  --day-star-fill: #ff8a65;
  --day-star-glow-1: rgba(255, 138, 101, 0.72);
  --day-star-glow-2: rgba(255, 112, 67, 0.92);
  --day-star-glow-3: rgba(255, 171, 145, 0.85);
}

/* 薄荷：偏青綠，清爽 */
html[data-day-light="mint"] {
  --day-dot-a: #80cbc4;
  --day-dot-b: #b2dfdb;
  --day-dot-c: #4db6ac;
  --day-dot-d: #e0f2f1;
  --day-dot-e: #26a69a;
  --day-star-fill: #26a69a;
  --day-star-glow-1: rgba(38, 166, 154, 0.7);
  --day-star-glow-2: rgba(77, 182, 172, 0.92);
  --day-star-glow-3: rgba(128, 203, 196, 0.88);
}

/* 薰衣草：淡紫 */
html[data-day-light="lavender"] {
  --day-dot-a: #ce93d8;
  --day-dot-b: #e1bee7;
  --day-dot-c: #ba68c8;
  --day-dot-d: #f3e5f5;
  --day-dot-e: #ab47bc;
  --day-star-fill: #ba68c8;
  --day-star-glow-1: rgba(186, 104, 200, 0.72);
  --day-star-glow-2: rgba(171, 71, 188, 0.9);
  --day-star-glow-3: rgba(206, 147, 216, 0.85);
}

/* 晴空：淡藍 */
html[data-day-light="sky"] {
  --day-dot-a: #90caf9;
  --day-dot-b: #bbdefb;
  --day-dot-c: #64b5f6;
  --day-dot-d: #e3f2fd;
  --day-dot-e: #42a5f5;
  --day-star-fill: #42a5f5;
  --day-star-glow-1: rgba(66, 165, 245, 0.72);
  --day-star-glow-2: rgba(100, 181, 246, 0.92);
  --day-star-glow-3: rgba(144, 202, 249, 0.88);
}

html[data-day-light="snow-white"] {
  --day-dot-a: #f4f8fb;
  --day-dot-b: #fafdff;
  --day-dot-c: #f7fbfd;
  --day-dot-d: #fafdff;
  --day-dot-e: #f1f6fa;
  --day-star-fill: #d2e6f4;
  --day-star-glow-1: rgba(150, 190, 218, 0.26);
  --day-star-glow-2: rgba(170, 205, 228, 0.32);
  --day-star-glow-3: rgba(190, 218, 238, 0.28);
}

html[data-day-light="pearl-white"] {
  --day-dot-a: #f5f4f3;
  --day-dot-b: #f7f6f5;
  --day-dot-c: #f6f5f4;
  --day-dot-d: #f7f6f5;
  --day-dot-e: #f0efed;
  --day-star-fill: #ddd6d0;
  --day-star-glow-1: rgba(175, 168, 162, 0.24);
  --day-star-glow-2: rgba(188, 180, 175, 0.3);
  --day-star-glow-3: rgba(200, 192, 188, 0.27);
}

html[data-day-light="milky-white"] {
  --day-dot-a: #fcfcf6;
  --day-dot-b: #fffff9;
  --day-dot-c: #fdfdf6;
  --day-dot-d: #fffff9;
  --day-dot-e: #f7f7ee;
  --day-star-fill: #eae6d4;
  --day-star-glow-1: rgba(195, 188, 155, 0.22);
  --day-star-glow-2: rgba(205, 198, 168, 0.28);
  --day-star-glow-3: rgba(215, 208, 178, 0.25);
}

html[data-day-light="lavender-ice"] {
  --day-dot-a: #f4f2f8;
  --day-dot-b: #f7f6fb;
  --day-dot-c: #f5f3fa;
  --day-dot-d: #f7f6fb;
  --day-dot-e: #efecf6;
  --day-star-fill: #d8cee8;
  --day-star-glow-1: rgba(165, 155, 185, 0.24);
  --day-star-glow-2: rgba(178, 168, 198, 0.3);
  --day-star-glow-3: rgba(190, 180, 208, 0.27);
}

html[data-day-light="sakura"] {
  --day-dot-a: #fdf2f2;
  --day-dot-b: #fef4f4;
  --day-dot-c: #fdf1f1;
  --day-dot-d: #fef4f4;
  --day-dot-e: #f8eaea;
  --day-star-fill: #f2c4c4;
  --day-star-glow-1: rgba(215, 165, 165, 0.24);
  --day-star-glow-2: rgba(225, 180, 180, 0.3);
  --day-star-glow-3: rgba(235, 195, 195, 0.27);
}

html[data-day-light="gofun"] {
  --day-dot-a: #f9f9f7;
  --day-dot-b: #fffffc;
  --day-dot-c: #fbfbf8;
  --day-dot-d: #fffffc;
  --day-dot-e: #f3f3ef;
  --day-star-fill: #dcdcd6;
  --day-star-glow-1: rgba(175, 175, 168, 0.22);
  --day-star-glow-2: rgba(185, 185, 178, 0.28);
  --day-star-glow-3: rgba(195, 195, 188, 0.25);
}

html[data-day-light="unohana"] {
  --day-dot-a: #f4f9fc;
  --day-dot-b: #f7fcfe;
  --day-dot-c: #f6fafd;
  --day-dot-d: #f7fcfe;
  --day-dot-e: #eef4fa;
  --day-star-fill: #b8d8ee;
  --day-star-glow-1: rgba(140, 185, 210, 0.26);
  --day-star-glow-2: rgba(160, 200, 222, 0.32);
  --day-star-glow-3: rgba(180, 212, 230, 0.28);
}

html[data-day-light="hakuji"] {
  --day-dot-a: #f5faf7;
  --day-dot-b: #f8fbf8;
  --day-dot-c: #f7faf8;
  --day-dot-d: #f8fbf8;
  --day-dot-e: #f0f5f2;
  --day-star-fill: #c4dcc8;
  --day-star-glow-1: rgba(145, 175, 158, 0.22);
  --day-star-glow-2: rgba(160, 188, 172, 0.28);
  --day-star-glow-3: rgba(175, 200, 185, 0.25);
}

html[data-day-light="kinari"] {
  --day-dot-a: #f7f6f1;
  --day-dot-b: #fbfaf5;
  --day-dot-c: #f9f8f3;
  --day-dot-d: #fbfaf5;
  --day-dot-e: #f3f1eb;
  --day-star-fill: #dad4c8;
  --day-star-glow-1: rgba(175, 168, 155, 0.22);
  --day-star-glow-2: rgba(188, 180, 168, 0.28);
  --day-star-glow-3: rgba(200, 192, 180, 0.25);
}

html[data-day-light="bud-white"] {
  --day-dot-a: #f6faf4;
  --day-dot-b: #f9fff4;
  --day-dot-c: #f8fcf6;
  --day-dot-d: #f9fff4;
  --day-dot-e: #f1f7ee;
  --day-star-fill: #b8dcc0;
  --day-star-glow-1: rgba(145, 185, 155, 0.22);
  --day-star-glow-2: rgba(160, 198, 170, 0.28);
  --day-star-glow-3: rgba(175, 208, 185, 0.25);
}

html[data-day-light="ivory-cream"] {
  --day-dot-a: #fcfcf4;
  --day-dot-b: #fffff4;
  --day-dot-c: #fdfdf4;
  --day-dot-d: #fffff4;
  --day-dot-e: #f5f5ea;
  --day-star-fill: #e6e0c8;
  --day-star-glow-1: rgba(195, 188, 155, 0.22);
  --day-star-glow-2: rgba(205, 198, 170, 0.28);
  --day-star-glow-3: rgba(215, 208, 182, 0.25);
}

/* 首頁：疊加與 body 漸層同套的 CSS 光點層（僅當 #homeDayModeCanvas 存在） */
body:has(#homeDayModeCanvas).day-mode::before {
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--day-dot-a), transparent),
    radial-gradient(2px 2px at 60% 70%, var(--day-dot-b), transparent),
    radial-gradient(1px 1px at 50% 50%, var(--day-dot-c), transparent),
    radial-gradient(1px 1px at 80% 10%, var(--day-dot-d), transparent),
    radial-gradient(2px 2px at 90% 40%, var(--day-dot-a), transparent),
    radial-gradient(1px 1px at 33% 60%, var(--day-dot-e), transparent),
    radial-gradient(2px 2px at 45% 90%, var(--day-dot-c), transparent),
    radial-gradient(1px 1px at 10% 80%, var(--day-dot-b), transparent),
    radial-gradient(2px 2px at 75% 20%, var(--day-dot-a), transparent),
    radial-gradient(1px 1px at 25% 15%, var(--day-dot-d), transparent);
  opacity: 0.86;
}

/* 首頁配色面板（homemode.js 注入） */
#day-light-preset-panel {
  position: fixed;
  right: 12px;
  bottom: 88px;
  z-index: 9998;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  color: #334;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#day-light-preset-panel[hidden] {
  display: none !important;
}
#day-light-preset-panel .dlp-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: #223;
  flex-shrink: 0;
}
#day-light-preset-panel .dlp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 2px;
}
#day-light-preset-panel label.dlp-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
}
#day-light-preset-panel .dlp-opt input:checked + span {
  font-weight: 700;
  color: #1a2a4a;
}
#day-light-preset-panel label.dlp-opt.dlp-checked {
  border-color: rgba(66, 88, 138, 0.45);
  background: rgba(66, 88, 138, 0.08);
}
#day-light-preset-panel .dlp-hint {
  margin-top: 8px;
  font-size: 11px;
  color: #666;
  line-height: 1.35;
  flex-shrink: 0;
}
body.night-mode #day-light-preset-panel {
  display: none !important;
}

/* 與 night::after 一致：透明疊層、z-index:2 */
body.day-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

body.day-mode #homeDayModeCanvas {
  display: none !important;
}

body.night-mode {
  position: relative;
  /* 與 day-mode 同結構：雙段漸層 + fixed；!important 覆蓋 home.css 基底 */
  background: linear-gradient(to bottom, #000000 0%, #2f2f3a 100%) !important;
  background-attachment: fixed;
  background-color: #000000 !important;
  color: #ffffff;
}

body.night-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, #FFF9D9, transparent),
    radial-gradient(2px 2px at 60% 70%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 50% 50%, #FFF9D9, transparent),
    radial-gradient(1px 1px at 80% 10%, #FFFFFF, transparent),
    radial-gradient(2px 2px at 90% 40%, #FFF9D9, transparent),
    radial-gradient(1px 1px at 33% 60%, #FFFFFF, transparent),
    radial-gradient(2px 2px at 45% 90%, #FFF9D9, transparent),
    radial-gradient(1px 1px at 10% 80%, #FFFFFF, transparent),
    radial-gradient(2px 2px at 75% 20%, #FFF9D9, transparent),
    radial-gradient(1px 1px at 25% 15%, #FFFFFF, transparent);
  background-size: 200% 200%;
  background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 0%, 0% 50%, 100% 50%, 50% 100%, 25% 25%;
  animation: starTwinkle 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

/* 夜間：整層明暗＋縮放 */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* 淺色光點層：只微縮放，不改變整層 opacity，避免與色卡比時偏暗、偏髒 */
@keyframes starTwinkleDayDots {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

body.night-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

/* ==========================
   兒童區背景（保留原本的天空背景）
========================== */
body.children-area.day-mode {
  background-image: url('../image/day-sky.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #000;
}

body.children-area.day-mode::before,
body.children-area.day-mode::after {
  display: none !important;
}

/* 兒童區使用插圖天空，不疊加程式化星星 */
body.children-area.day-mode > .stars,
body.children-area.night-mode > .stars {
  display: none !important;
}

body.children-area.night-mode {
  position: relative;
  background-image: url('../image/night-sky.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #000;
}

body.children-area.night-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* 40% 黑色濾鏡 */
  pointer-events: none;
  z-index: 2;
}

/* ==========================
   日夜模式文字樣式
========================== */
/* 日間模式 */
body.day-mode .header{
  /* 淺色主題導覽列：灰白色背景（白色帶一點灰色） */
  background-color: #F5F5F5 !important;
  color: #000000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

 body.day-mode .header-icon svg.icon-stroke {
  stroke: #7EC8CC;
}

body.day-mode .header-icon svg.icon-fill {
  fill: #7EC8CC;
}

body.day-mode #memberMode {
  background: #46565C;
}

body.day-mode .marquee-wrapper{
  /* 淺色主題公告欄 */
  background: #F5F5F5;
  color: #666666;
}

body.day-mode .basic-info,
body.day-mode .info,
body.day-mode .card-info,
body.day-mode .all-works-grid .card .card-info,
body.day-mode .newcard-container .card .info,
body.day-mode .allcard-container .card .info {
  background: #FFFFFF !important; /* 白色背景 */
}

body.day-mode .basic-info .price,
body.day-mode .basic-info .author,
body.day-mode .info .title,
body.day-mode .info .author,
body.day-mode .info .info-price,
body.day-mode .card-info .info-title,
body.day-mode .card-info .info-author {
  color: #000000 !important; /* 淺色主題使用黑色文字 */
}

body.day-mode .card-info .info-price {
  color: #FF0000 !important; /* 價格保持紅色 */
}

body.day-mode .all-works-grid .card .card-info .info-author svg {
  stroke: #000000 !important; /* 淺色主題使用黑色箭頭 */
  fill: none !important;
}

body.day-mode .tag,
body.day-mode .all-works-grid .card .card-info .tag,
body.day-mode .all-works-grid .card .info .tag {
  background: #42588A !important; 
  color: #fff !important;
}

body.day-mode .tag-wrapper,
body.day-mode .all-works-grid .card .card-info .tag-wrapper,
body.day-mode .all-works-grid .card .info .tag-wrapper {
  height: 24px !important;
  border: 1px solid #42588A !important;
  background: transparent !important;
}

body.day-mode .tag-wrapper svg circle,
body.day-mode .all-works-grid .card .card-info .tag-wrapper svg circle,
body.day-mode .all-works-grid .card .info .tag-wrapper svg circle {
  fill: #42588A !important;
}

body.day-mode .recommend-text{
  color: #000;
}

body.day-mode .recommend-text svg{
  fill: #46565C;
  /* 淺色主題最新作品圖示：淺色底色，對比深色主題的 #302D2D */
  background: #F5F5F5 !important;
}

body.day-mode .filter-btn,
body.day-mode .filter-btn svg
{
  color: #42588A;
  stroke: #42588A;
}

body.day-mode .category-item {
    color: #000;
}

/* 夜間模式：輪播箭頭與點點顏色覆寫 */
body.night-mode .carousel-prev,
body.night-mode .carousel-next {
  background: #302D2D; /* 最新作品圖示、左右點選按鈕底色 */
  color: #FFFFFF;      /* 箭頭符號顏色 - 白色 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

body.night-mode .carousel-prev::before,
body.night-mode .carousel-next::before {
  color: #FFFFFF;
}

body.night-mode .carousel-nav svg {
  stroke: #FFFFFF;
  fill: #FFFFFF;
}

body.night-mode .carousel-dots .dot {
  background: transparent;
  width: 6px;
  height: 6px;
  border: 2px solid #FDFCFA; /* 白色外框 */
  box-shadow: none;
}
body.night-mode .carousel-dots .dot.active {
  background: #FDFCFA; /* 白色實心 */
  border-color: #FDFCFA;
}

/* 日間模式：輪播箭頭與點點配色與位置微調 */
body.day-mode .carousel-prev,
body.day-mode .carousel-next {
  /* 淺色主題輪播按鈕：淺色底色，對比深色主題的 #302D2D */
  background: #F5F5F5;
  color: #46565C;      /* 箭頭符號顏色 - 深色，對比深色主題的白色 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* 若箭頭是純文字或符號，確保字色生效 */
body.day-mode .carousel-prev::before,
body.day-mode .carousel-next::before {
  color: #46565C;
}

body.day-mode .carousel-nav svg {
  stroke: #46565C;
  fill: #46565C;
}

/* 點點：未選中為外框線，選中為實心 #46565C */
body.day-mode .carousel-dots .dot {
  background: transparent;
  width: 6px;
  height: 6px;
  border: 2px solid #46565C;
  box-shadow: none;
}
body.day-mode .carousel-dots .dot.active {
  background: #46565C;
  border-color: #46565C;
}
body.night-mode .bottom-left .sub-category{
  border-top: 1px solid black;
}

body.day-mode .divider{
  background-color: black;
}


/* 夜間模式 */
body.night-mode .header{
  /* 深色主題導覽列：黑色背景 */
  background-color: #000000 !important;
  color: #FFFFFF;
  box-shadow: none;
}

 body.night-mode .header-icon svg.icon-stroke {
  stroke: #FFFFFF !important; /* 使用白色，在深色背景下清楚 */
  stroke-width: 2 !important; /* 增加線條粗細，提高可讀性 */
}

body.night-mode .header-icon svg.icon-fill {
  fill: #FFFFFF !important; /* 使用白色，在深色背景下清楚 */
}

/* 夜間模式：移除背景，只保留圖標顏色 */
body.night-mode .header-icon-wrapper {
  background: transparent !important; /* 移除黃色背景 */
}

body.night-mode .header-icon-wrapper:hover {
  background: transparent !important; /* hover 時也保持透明 */
}

body.night-mode .header-icon {
  background: transparent !important;
}

body.night-mode #memberMode {
  background: transparent !important;
}

body.night-mode .marquee-wrapper{
  /* 公告欄背景：統一背景色，與導覽列和背景區分 */
  background: #1A1A1A;
  color: #FFFFFF;
}

body.night-mode .basic-info,
body.night-mode .info,
body.night-mode .card-info,
body.night-mode .all-works-grid .card .card-info,
body.night-mode .newcard-container .card .info,
body.night-mode .allcard-container .card .info {
  background: #FFF !important;
}

body.night-mode .basic-info .price,
body.night-mode .basic-info .author,
body.night-mode .info .title,
body.night-mode .info .author,
body.night-mode .info .info-price,
body.night-mode .card-info .info-title,
body.night-mode .card-info .info-author,
body.night-mode .all-works-grid .card .card-info .info-author svg {
  color: #000000 !important; /* 黑色文字 */
}

body.night-mode .card-info .info-price {
  color: #FF0000 !important; /* 價格保持紅色 */
}

body.night-mode .all-works-grid .card .card-info .info-author svg {
  stroke: #42588A !important;
  fill: none !important;
}

body.night-mode .tag,
body.night-mode .all-works-grid .card .card-info .tag {
  background: #fff !important; 
  color: #000 !important;
}

body.night-mode .tag-wrapper,
body.night-mode .all-works-grid .card .card-info .tag-wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)) !important;
  border: none !important;
}

body.night-mode .tag-wrapper svg circle,
body.night-mode .all-works-grid .card .card-info .tag-wrapper svg circle {
  fill: #fff !important;
}

body.night-mode .recommend-text{
  color: #fff;
}

body.night-mode .recommend-text svg{
  fill: #FFFFFF !important;
  background: #302D2D;
}

body.night-mode .filter-btn,
body.night-mode .filter-btn svg
{
  color: #fff;
  stroke: #fff;
}

/* 夜間模式：首頁分類樣式（與排行榜一致）*/
body.night-mode .home-categories .category-tab {
  color: #ccc;
}

body.night-mode .home-categories .category-tab:hover,
body.night-mode .home-categories .category-tab.active {
  color: #FCC61D;
}

body.night-mode .home-categories .category-tab.active::after {
  background: #FCC61D;
}

body.night-mode .home-category-back-icon-btn {
  color: #fcc61d;
}

body.night-mode .home-category-back-icon-btn:hover {
  background: rgba(252, 198, 29, 0.12);
}

body.night-mode .home-tier-placeholder {
  color: #7a8a96;
}

body.night-mode .home-subcategory-tier-label {
  color: #8a9ba8;
}

body.night-mode .home-categories .sub-category-tab {
  color: #999;
}

body.night-mode .home-categories .sub-category-tab:hover,
body.night-mode .home-categories .sub-category-tab.active {
  color: #FCC61D;
}

/* 夜間模式：子標籤 active 狀態底線 */
body.night-mode .home-categories .sub-category-tab.active::after {
  background: #FCC61D;
}

/* 夜間模式 顏色覆寫：讓下拉跑馬燈、work-type、category-item 在夜間時符合指定配色 */
/* 1) marquee-dropdown - 已在 home.css 中定義為漸變背景 */
body.night-mode .marquee-dropdown .dropdown-inner .news-item {
  color: #FFFFFF;
}
body.night-mode .marquee-dropdown .dropdown-inner .news-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/* 2) work-type 在夜間的背景與 hover */
body.night-mode .work-type {
  background: #94A8AF;
  color: #fff;
}
body.night-mode .work-type:hover {
  background: #5F7880;
  color: #fff;
}

/* 3) category-item 的 hover 在夜間改為 #94A8AF */
body.night-mode .category-item:hover {
  color: #94A8AF !important;
}

/* 夜間模式：圖示提示文字顏色 */
body.night-mode .icon-tooltip {
  color: #FFFFFF;
}

/* 夜間模式：header 文字顏色 */
body.night-mode .header {
  color: #FFFFFF;
}

/* 淺色主題：圖示提示文字顏色和背景（對比深色主題的白色） */
body.day-mode .icon-tooltip {
  color: #FFFFFF !important;
  background: rgba(0, 0, 0, 0.85) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 淺色主題：tooltip 箭頭顏色（tooltip 在 icon 下方，箭頭向上） */
body.day-mode .icon-tooltip::before {
  border-bottom-color: rgba(0, 0, 0, 0.85) !important;
  border-top-color: transparent !important;
}

/* 淺色主題：header 文字顏色（對比深色主題的白色） */
body.day-mode .header {
  color: #000000;
}

/* ==========================
   太陽與星星效果
========================== */
/* 確保這些元素不影響文檔流 */
body > .sun-container,
body > .stars {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: opacity 1s ease, visibility 1s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* 確保不影響文檔流 */
  width: 100vw !important;
  height: 100vh !important;
  /* 確保不影響父元素高度 */
  contain: layout style paint !important;
}

body > .sun-container { 
  opacity: 0 !important; 
  visibility: hidden !important;
  /* 完全隱藏，不佔用任何空間 */
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
}
body.day-mode > .sun-container { 
  /* 日間模式隱藏六角形光點，只使用布幕效果 */
  opacity: 0 !important; 
  visibility: hidden !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body > .stars { 
  opacity: 0 !important; 
  visibility: hidden !important;
  /* 完全隱藏，不佔用任何空間 */
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
}
body.night-mode > .stars { 
  opacity: 1 !important; 
  visibility: visible !important;
  /* 顯示時恢復顯示 */
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* 淺色模式：與夜間同樣顯示 #stars（大量隨機閃爍星，見 homemode.js） */
body.day-mode > .stars {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* 六角形太陽粒子 - 陽光幕效果 */
.hex {
  position: absolute;
  background: rgba(255, 240, 200, 0.4); /* 更柔和的陽光色 */
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(255, 245, 200, 0.6),
              0 0 40px rgba(255, 235, 180, 0.4);
  animation: hexTwinkle infinite ease-in-out;
  /* 確保在白色背景上可見 */
  filter: blur(1px);
}

@keyframes hexTwinkle {
  0%   { 
    opacity: 0.2; 
    transform: scale(0.8); 
    box-shadow: 0 0 10px rgba(255,240,200,0.4), 0 0 20px rgba(255,235,180,0.3); 
  }
  50%  { 
    opacity: 0.5; 
    transform: scale(1.1); 
    box-shadow: 0 0 25px rgba(255,245,200,0.5), 0 0 45px rgba(255,235,180,0.4); 
  }
  100% { 
    opacity: 0.2; 
    transform: scale(0.8); 
    box-shadow: 0 0 10px rgba(255,240,200,0.4), 0 0 20px rgba(255,235,180,0.3); 
  }
}

.star {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: twinkle infinite ease-in-out;
}

body.day-mode .stars .star {
  background: var(--day-star-fill, #ffc107);
  animation-name: twinkleDayLight;
}

@keyframes twinkle {
  0%   { opacity: 0.3; transform: scale(0.5); box-shadow: 0 0 1px 0.5px #fff; }
  50%  { opacity: 1;   transform: scale(1.2); box-shadow: 0 0 3px 1.5px #fff; }
  100% { opacity: 0.3; transform: scale(0.5); box-shadow: 0 0 1px 0.5px #fff; }
}

/* 與 twinkle 相同節奏；光暈色隨 html[data-day-light] 變數變化 */
@keyframes twinkleDay {
  0%   { opacity: 0.42; transform: scale(0.5); box-shadow: 0 0 2px 1px var(--day-star-glow-1, rgba(255, 193, 7, 0.75)); }
  50%  { opacity: 1;    transform: scale(1.2); box-shadow: 0 0 5px 2px var(--day-star-glow-2, rgba(255, 193, 7, 0.95)), 0 0 3px 1px var(--day-star-glow-3, rgba(255, 213, 79, 0.9)); }
  100% { opacity: 0.42; transform: scale(0.5); box-shadow: 0 0 2px 1px var(--day-star-glow-1, rgba(255, 193, 7, 0.75)); }
}

/* 淺色模式星星：維持高底亮度，與淺色卡一致 */
@keyframes twinkleDayLight {
  0%   { opacity: 0.82; transform: scale(0.55); box-shadow: 0 0 2px 1px var(--day-star-glow-1); }
  50%  { opacity: 1;    transform: scale(1.12); box-shadow: 0 0 4px 2px var(--day-star-glow-2), 0 0 2px 1px var(--day-star-glow-3); }
  100% { opacity: 0.82; transform: scale(0.55); box-shadow: 0 0 2px 1px var(--day-star-glow-1); }
}

/* ==========================
   媒體庫作品卡片（僅 media-library.html 有 .media-library-main）
   最後載入，覆蓋先前 CSS：懸停時整卡與封面不位移、不觸發 transform 動畫
========================== */
body .media-library-main .media-works-grid .card {
  transition: box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease,
    -webkit-backdrop-filter 0.3s ease !important;
}
body .media-library-main .media-works-grid .card:hover .img-container,
body .media-library-main .media-works-grid .card:hover .img-container > img {
  transform: none !important;
  transition: none !important;
}
body .media-library-main .media-works-grid .card:hover .card-tags {
  display: none !important;
}
body .media-library-main .media-works-grid .card .cart-price-btn:hover {
  transform: none !important;
}

/* 覆蓋 media-library.css：懸停勿展開 basic-info 內檔案預覽／展開區（避免「往上展開」） */
body .media-library-main .media-works-grid .card:hover .basic-info .file-types-preview,
body .media-library-main .media-works-grid .card:hover .basic-info .file-types-preview .no-file-message {
  display: none !important;
}
body .media-library-main .media-works-grid .card:hover .basic-info .expanded-content {
  display: none !important;
}

@media (min-width: 769px) {
  body .media-library-main .media-works-grid .card:hover {
    transform: translateZ(0) !important;
  }
  body.day-mode .media-library-main .media-works-grid .card:hover {
    transform: translateZ(0) !important;
  }
  body.night-mode .media-library-main .media-works-grid .card:hover {
    transform: translateZ(0) !important;
  }
}