/*
 * iFans 主站深色模式（快速版）
 * 由 resources/views/partials/theme-head.blade.php 載入；html 有 .dark 才生效，淺色完全不受影響。
 * 做法：覆蓋全站最常用的淺色 Tailwind 類別與部分內嵌樣式，個別頁面的 <style> 色碼之後逐頁補。
 */

html.dark {
    --dm-bg: #0b1120;
    --dm-surface: #141c2b;
    --dm-surface-2: #1a2334;
    --dm-surface-3: #222d41;
    --dm-border: #263144;
    --dm-border-strong: #334057;
    --dm-text: #e6eaf1;
    --dm-text-2: #cfd6e1;
    --dm-text-3: #aab3c1;
    --dm-text-4: #8a94a5;
    --dm-text-5: #6b7588;
    color-scheme: dark;
}

html.dark body { background-color: var(--dm-bg); color: var(--dm-text); }

/* ---------- 背景 ---------- */
html.dark .bg-white { background-color: var(--dm-surface); }
html.dark .bg-white\/95, html.dark .bg-white\/90 { background-color: rgba(20, 28, 43, .95); }
html.dark .bg-white\/80, html.dark .bg-white\/70 { background-color: rgba(20, 28, 43, .85); }
html.dark .bg-white\/60, html.dark .bg-white\/50 { background-color: rgba(20, 28, 43, .7); }
html.dark .bg-gray-50, html.dark .bg-slate-50 { background-color: var(--dm-bg); }
html.dark .bg-gray-100, html.dark .bg-slate-100 { background-color: var(--dm-surface-2); }
html.dark .bg-gray-200, html.dark .bg-slate-200 { background-color: var(--dm-surface-3); }
html.dark .bg-gray-300, html.dark .bg-slate-300 { background-color: #334057; }

/* 淺色漸層底（卡片、區塊、頁面底） → 平面深色 */
html.dark .from-white, html.dark .from-gray-50, html.dark .from-gray-100, html.dark .from-slate-50, html.dark .from-slate-100,
html.dark .from-blue-50, html.dark .from-sky-50, html.dark .from-indigo-50, html.dark .from-purple-50, html.dark .from-violet-50,
html.dark .from-pink-50, html.dark .from-rose-50, html.dark .from-red-50, html.dark .from-orange-50, html.dark .from-amber-50,
html.dark .from-yellow-50, html.dark .from-green-50, html.dark .from-emerald-50, html.dark .from-teal-50, html.dark .from-cyan-50,
html.dark .from-blue-100, html.dark .from-sky-100, html.dark .from-pink-100, html.dark .from-purple-100, html.dark .from-emerald-100, html.dark .from-amber-100 {
    background-image: none !important;
    background-color: var(--dm-surface-2);
}
html.dark .min-h-screen.from-gray-50 { background-color: var(--dm-bg); }

/* 淡色色塊（徽章、提示框）→ 半透明色調 */
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, .12); }   html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, .18); }   html.dark .bg-blue-200 { background-color: rgba(59, 130, 246, .26); }
html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, .12); }    html.dark .bg-sky-100 { background-color: rgba(14, 165, 233, .18); }    html.dark .bg-sky-200 { background-color: rgba(14, 165, 233, .26); }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, .12); } html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, .18); }
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, .12); } html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, .18); }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, .12); } html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, .18); }
html.dark .bg-pink-50 { background-color: rgba(236, 72, 153, .12); }   html.dark .bg-pink-100 { background-color: rgba(236, 72, 153, .18); }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, .12); }    html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, .18); }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, .12); }     html.dark .bg-red-100 { background-color: rgba(239, 68, 68, .18); }     html.dark .bg-red-200 { background-color: rgba(239, 68, 68, .26); }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, .12); } html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, .18); }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12); }  html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .18); }  html.dark .bg-amber-200 { background-color: rgba(245, 158, 11, .26); }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, .12); }  html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, .18); }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, .12); }   html.dark .bg-green-100 { background-color: rgba(34, 197, 94, .18); }   html.dark .bg-green-200 { background-color: rgba(34, 197, 94, .26); }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .12); } html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .18); }
html.dark .bg-teal-50 { background-color: rgba(20, 184, 166, .12); }   html.dark .bg-teal-100 { background-color: rgba(20, 184, 166, .18); }
html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, .12); }    html.dark .bg-cyan-100 { background-color: rgba(6, 182, 212, .18); }

/* ---------- 文字 ---------- */
html.dark .text-black, html.dark .text-gray-900, html.dark .text-slate-900, html.dark .text-gray-800, html.dark .text-slate-800 { color: var(--dm-text); }
html.dark .text-gray-700, html.dark .text-slate-700 { color: var(--dm-text-2); }
html.dark .text-gray-600, html.dark .text-slate-600 { color: var(--dm-text-3); }
html.dark .text-gray-500, html.dark .text-slate-500 { color: var(--dm-text-4); }
html.dark .text-gray-400, html.dark .text-slate-400 { color: var(--dm-text-5); }
html.dark .text-gray-300, html.dark .text-slate-300 { color: #4d586b; }

/* 深色調文字（-600 以上）在深底上太暗 → 提亮 */
html.dark .text-blue-600 { color: #60a5fa; }    html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd; }
html.dark .text-sky-600 { color: #38bdf8; }     html.dark .text-sky-700, html.dark .text-sky-800 { color: #7dd3fc; }
html.dark .text-indigo-600 { color: #818cf8; }  html.dark .text-indigo-700, html.dark .text-indigo-800 { color: #a5b4fc; }
html.dark .text-purple-600 { color: #c084fc; }  html.dark .text-purple-700, html.dark .text-purple-800 { color: #d8b4fe; }
html.dark .text-violet-600 { color: #a78bfa; }  html.dark .text-violet-700 { color: #c4b5fd; }
html.dark .text-pink-600 { color: #f472b6; }    html.dark .text-pink-700, html.dark .text-pink-800 { color: #f9a8d4; }
html.dark .text-rose-600 { color: #fb7185; }    html.dark .text-rose-700 { color: #fda4af; }
html.dark .text-red-600 { color: #f87171; }     html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5; }
html.dark .text-orange-600 { color: #fb923c; }  html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74; }
html.dark .text-amber-600 { color: #fbbf24; }   html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #fcd34d; }
html.dark .text-yellow-600 { color: #facc15; }  html.dark .text-yellow-700, html.dark .text-yellow-800 { color: #fde047; }
html.dark .text-green-600 { color: #4ade80; }   html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #86efac; }
html.dark .text-emerald-600 { color: #34d399; } html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7; }
html.dark .text-teal-600 { color: #2dd4bf; }    html.dark .text-teal-700 { color: #5eead4; }
html.dark .text-cyan-600 { color: #22d3ee; }    html.dark .text-cyan-700 { color: #67e8f9; }

/* ---------- 邊框 / 分隔線 ---------- */
html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-slate-100, html.dark .border-slate-200,
html.dark .border-gray-200\/80, html.dark .border-gray-200\/60, html.dark .border-white { border-color: var(--dm-border); }
html.dark .border-gray-300, html.dark .border-slate-300 { border-color: var(--dm-border-strong); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border); }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(59, 130, 246, .3); }
html.dark .border-sky-100, html.dark .border-sky-200 { border-color: rgba(14, 165, 233, .3); }
html.dark .border-pink-100, html.dark .border-pink-200 { border-color: rgba(236, 72, 153, .3); }
html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(239, 68, 68, .3); }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-200\/60, html.dark .border-yellow-200 { border-color: rgba(245, 158, 11, .3); }
html.dark .border-green-100, html.dark .border-green-200, html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .3); }
html.dark .border-purple-100, html.dark .border-purple-200, html.dark .border-indigo-100, html.dark .border-indigo-200 { border-color: rgba(139, 92, 246, .3); }
html.dark hr { border-color: var(--dm-border); }

/* ---------- hover 狀態（要比上面的覆蓋更具體，才不會失去 hover 回饋） ---------- */
html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-white:hover { background-color: var(--dm-surface-3); }
html.dark .hover\:bg-gray-200:hover { background-color: #2c3850; }
html.dark .hover\:text-gray-900:hover, html.dark .hover\:text-gray-800:hover, html.dark .hover\:text-gray-700:hover { color: #fff; }
html.dark .hover\:text-gray-600:hover, html.dark .hover\:text-gray-500:hover { color: var(--dm-text-2); }
/* group-hover（例如註冊頁「我已閱讀並同意」滑過時）：原本轉深灰，深色底改為變亮 */
html.dark .group:hover .group-hover\:text-gray-900, html.dark .group:hover .group-hover\:text-gray-800, html.dark .group:hover .group-hover\:text-gray-700 { color: #fff; }
html.dark .group:hover .group-hover\:text-gray-600 { color: var(--dm-text-2); }
/* 彩色淡底 hover（例如訂單紀錄「點擊評分」星星 hover:bg-amber-50）：深色底改為半透明色調 */
html.dark .hover\:bg-blue-50:hover, html.dark .hover\:bg-blue-100:hover, html.dark .hover\:bg-blue-200:hover { background-color: rgba(59, 130, 246, .18); }
html.dark .hover\:bg-sky-50:hover, html.dark .hover\:bg-sky-100:hover, html.dark .hover\:bg-sky-200:hover { background-color: rgba(14, 165, 233, .18); }
html.dark .hover\:bg-indigo-50:hover, html.dark .hover\:bg-indigo-100:hover, html.dark .hover\:bg-indigo-200:hover { background-color: rgba(99, 102, 241, .18); }
html.dark .hover\:bg-purple-50:hover, html.dark .hover\:bg-purple-100:hover, html.dark .hover\:bg-purple-200:hover { background-color: rgba(168, 85, 247, .18); }
html.dark .hover\:bg-pink-50:hover, html.dark .hover\:bg-pink-100:hover, html.dark .hover\:bg-pink-200:hover { background-color: rgba(236, 72, 153, .18); }
html.dark .hover\:bg-red-50:hover, html.dark .hover\:bg-red-100:hover, html.dark .hover\:bg-red-200:hover { background-color: rgba(239, 68, 68, .18); }
html.dark .hover\:bg-orange-50:hover, html.dark .hover\:bg-orange-100:hover, html.dark .hover\:bg-orange-200:hover { background-color: rgba(249, 115, 22, .18); }
html.dark .hover\:bg-amber-50:hover, html.dark .hover\:bg-amber-100:hover, html.dark .hover\:bg-amber-200:hover { background-color: rgba(245, 158, 11, .18); }
html.dark .hover\:bg-yellow-50:hover, html.dark .hover\:bg-yellow-100:hover, html.dark .hover\:bg-yellow-200:hover { background-color: rgba(234, 179, 8, .18); }
html.dark .hover\:bg-emerald-50:hover, html.dark .hover\:bg-green-50:hover, html.dark .hover\:bg-emerald-100:hover, html.dark .hover\:bg-green-100:hover, html.dark .hover\:bg-emerald-200:hover, html.dark .hover\:bg-green-200:hover { background-color: rgba(16, 185, 129, .18); }
html.dark .hover\:border-gray-300:hover { border-color: #43516b; }

/* ---------- 表單 ---------- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.bg-transparent),
html.dark select:not(.bg-transparent),
html.dark textarea:not(.bg-transparent) {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
    border-color: var(--dm-border-strong);
}
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--dm-text-5); }
html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled, html.dark input[readonly] { background-color: var(--dm-surface-3); color: var(--dm-text-4); }
html.dark input[type="checkbox"], html.dark input[type="radio"] { background-color: var(--dm-surface-2); border-color: #4a5870; }
html.dark input[type="checkbox"]:checked, html.dark input[type="radio"]:checked { background-color: currentColor; border-color: transparent; }

/* ---------- 內嵌樣式常見淺色 ---------- */
html.dark [style*="background: #fff;"], html.dark [style*="background:#fff;"], html.dark [style*="background: #ffffff"], html.dark [style*="background:#ffffff"],
html.dark [style*="background-color: #fff;"], html.dark [style*="background-color:#fff;"], html.dark [style*="background-color: #ffffff"], html.dark [style*="background-color:#ffffff"],
html.dark [style*="background: white"], html.dark [style*="background:white"], html.dark [style*="background-color: white"] {
    background-color: var(--dm-surface) !important;
}
html.dark [style*="background: #f8fafc"], html.dark [style*="background:#f8fafc"], html.dark [style*="background: #f1f5f9"], html.dark [style*="background:#f1f5f9"],
html.dark [style*="background-color: #f8fafc"], html.dark [style*="background-color: #f1f5f9"], html.dark [style*="background: #f9fafb"], html.dark [style*="background-color: #f9fafb"] {
    background-color: var(--dm-surface-2) !important;
}
html.dark [style*="color: #1e293b"], html.dark [style*="color:#1e293b"], html.dark [style*="color: #0f172a"], html.dark [style*="color:#0f172a"],
html.dark [style*="color: #334155"], html.dark [style*="color:#334155"], html.dark [style*="color: #374151"], html.dark [style*="color: #111827"] {
    color: var(--dm-text) !important;
}
html.dark [style*="solid #e2e8f0"], html.dark [style*="solid #e5e7eb"], html.dark [style*="solid #f1f5f9"] { border-color: var(--dm-border) !important; }

/* ---------- 彈窗廣告：一律維持原本淺色設計（範本全用內嵌樣式，不跟著深色模式） ---------- */
/* 圖片彈窗外框與底部按鈕：把深色變數還原成淺色值，bg-white / text-gray-* 等覆蓋就會回到淺色 */
html.dark #popup-ad-container {
    --dm-bg: #f9fafb;
    --dm-surface: #ffffff;
    --dm-surface-2: #f3f4f6;
    --dm-surface-3: #e5e7eb;
    --dm-border: #f3f4f6;
    --dm-border-strong: #e5e7eb;
    --dm-text: #1f2937;
    --dm-text-2: #374151;
    --dm-text-3: #4b5563;
    --dm-text-4: #6b7280;
    --dm-text-5: #9ca3af;
    color-scheme: light;
}
html.dark #popup-ad-container .hover\:bg-gray-200:hover { background-color: #e5e7eb; }
html.dark #popup-ad-container .hover\:text-gray-900:hover, html.dark #popup-ad-container .hover\:text-gray-800:hover, html.dark #popup-ad-container .hover\:text-gray-700:hover { color: #111827; }
/* 範本內嵌的白底 / 淺灰底：還原（選擇器比上方通用的內嵌樣式覆蓋更具體） */
html.dark #popup-ad-content [style*="background:#fff"], html.dark #popup-ad-content [style*="background: #fff"],
html.dark #popup-ad-content [style*="background-color:#fff"], html.dark #popup-ad-content [style*="background-color: #fff"],
html.dark #popup-ad-content [style*="background: white"], html.dark #popup-ad-content [style*="background:white"] {
    background-color: #ffffff !important;
}
html.dark #popup-ad-content [style*="background: #f8fafc"], html.dark #popup-ad-content [style*="background-color: #f8fafc"] { background-color: #f8fafc !important; }
html.dark #popup-ad-content [style*="background: #f1f5f9"], html.dark #popup-ad-content [style*="background-color: #f1f5f9"] { background-color: #f1f5f9 !important; }
html.dark #popup-ad-content [style*="background: #f9fafb"], html.dark #popup-ad-content [style*="background-color: #f9fafb"] { background-color: #f9fafb !important; }
html.dark #popup-ad-content [style*="color: #1e293b"], html.dark #popup-ad-content [style*="color:#1e293b"] { color: #1e293b !important; }
html.dark #popup-ad-content [style*="color: #0f172a"], html.dark #popup-ad-content [style*="color:#0f172a"] { color: #0f172a !important; }
html.dark #popup-ad-content [style*="color: #334155"], html.dark #popup-ad-content [style*="color:#334155"] { color: #334155 !important; }
html.dark #popup-ad-content [style*="color: #374151"] { color: #374151 !important; }
html.dark #popup-ad-content [style*="color: #111827"] { color: #111827 !important; }
html.dark #popup-ad-content [style*="solid #e2e8f0"] { border-color: #e2e8f0 !important; }
html.dark #popup-ad-content [style*="solid #e5e7eb"] { border-color: #e5e7eb !important; }
html.dark #popup-ad-content [style*="solid #f1f5f9"] { border-color: #f1f5f9 !important; }

/* ---------- 彩色漸層卡片上的白底按鈕（例如下單頁餘額卡「立即儲值」）：深色模式維持白底、原本文字色與淺色 hover ---------- */
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) .bg-white { background-color: #ffffff; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) .bg-white[class*="hover:bg-"]:hover { background-color: #f8fafc; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-orange-600, .bg-white .text-orange-600) { color: #ea580c; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-amber-600, .bg-white .text-amber-600) { color: #d97706; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-blue-600, .bg-white .text-blue-600) { color: #2563eb; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-sky-600, .bg-white .text-sky-600) { color: #0284c7; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-pink-600, .bg-white .text-pink-600) { color: #db2777; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-emerald-600, .bg-white .text-emerald-600, .bg-white.text-green-600, .bg-white .text-green-600) { color: #059669; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-purple-600, .bg-white .text-purple-600, .bg-white.text-indigo-600, .bg-white .text-indigo-600) { color: #7c3aed; }
html.dark :is([class~="from-amber-400"], [class~="from-amber-500"], [class~="from-orange-400"], [class~="from-orange-500"], [class~="from-red-500"], [class~="from-rose-500"],
              [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-400"], [class~="from-sky-500"], [class~="from-cyan-500"],
              [class~="from-pink-500"], [class~="from-emerald-500"], [class~="from-green-500"], [class~="from-teal-500"],
              [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"], [class~="from-indigo-500"],
              .bg-brand-gradient, .bg-brand-cta) :is(.bg-white.text-red-600, .bg-white .text-red-600) { color: #dc2626; }

/* ---------- 卡片標頭色條（API 說明「快速開始 / API 端點 / 詳細說明」、會員中心、點數紀錄等） ----------
 * 結構：圓角 + overflow-hidden 卡片的第一個子元素，飽和漸層（from-*-400~600）
 * 深色模式用內陰影疊一層深藍半透明遮罩，讓色條變深、融入深色系；文字與圖示不受影響
 * 淺色漸層（from-*-50）已由上方規則轉為深色卡片色，不在此處理
 */
html.dark :is(.rounded-xl, .rounded-2xl, .rounded-3xl).overflow-hidden > :first-child:is(.bg-brand-gradient,
    [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-500"], [class~="from-cyan-500"],
    [class~="from-indigo-500"], [class~="from-indigo-600"], [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"],
    [class~="from-pink-500"], [class~="from-rose-500"], [class~="from-red-500"], [class~="from-red-600"],
    [class~="from-orange-500"], [class~="from-amber-400"], [class~="from-amber-500"], [class~="from-yellow-400"], [class~="from-yellow-500"],
    [class~="from-green-400"], [class~="from-green-500"], [class~="from-emerald-500"], [class~="from-teal-500"]) {
    box-shadow: inset 0 0 0 100vmax rgba(11, 17, 32, .3);
}

/* ---------- 獨立的飽和漸層卡片（會員中心頭像卡、下單頁餘額卡、推薦中心錢包卡等） ----------
 * 結構：div / section，圓角＋內距 p-4~p-8，整張卡是品牌漸層或 from-*-400~600
 * 同樣疊深藍半透明遮罩並補回卡片陰影；按鈕（a / button）與沒有內距的小圖示框不套用
 */
html.dark :is(div, section):is(.rounded-xl, .rounded-2xl, .rounded-3xl):is([class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="p-8"]):is(.bg-brand-gradient,
    [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-sky-500"], [class~="from-cyan-500"],
    [class~="from-indigo-500"], [class~="from-indigo-600"], [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-violet-500"],
    [class~="from-pink-500"], [class~="from-rose-500"], [class~="from-red-500"], [class~="from-red-600"],
    [class~="from-orange-500"], [class~="from-amber-400"], [class~="from-amber-500"], [class~="from-yellow-400"], [class~="from-yellow-500"],
    [class~="from-green-400"], [class~="from-green-500"], [class~="from-emerald-500"], [class~="from-teal-500"]) {
    box-shadow: inset 0 0 0 100vmax rgba(11, 17, 32, .3), 0 18px 30px -12px rgba(0, 0, 0, .5);
}

/* 補上 from-*-400 飽和色（例如推薦中心側邊卡 from-purple-400）：卡片標頭色條 */
html.dark :is(.rounded-xl, .rounded-2xl, .rounded-3xl).overflow-hidden > :first-child:is(
    [class~="from-blue-400"], [class~="from-sky-400"], [class~="from-cyan-400"], [class~="from-indigo-400"], [class~="from-purple-400"],
    [class~="from-violet-400"], [class~="from-pink-400"], [class~="from-rose-400"], [class~="from-red-400"], [class~="from-orange-400"],
    [class~="from-emerald-400"], [class~="from-teal-400"]) {
    box-shadow: inset 0 0 0 100vmax rgba(11, 17, 32, .3);
}
/* 補上 from-*-400 飽和色：獨立漸層卡片 */
html.dark :is(div, section):is(.rounded-xl, .rounded-2xl, .rounded-3xl):is([class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="p-8"]):is(
    [class~="from-blue-400"], [class~="from-sky-400"], [class~="from-cyan-400"], [class~="from-indigo-400"], [class~="from-purple-400"],
    [class~="from-violet-400"], [class~="from-pink-400"], [class~="from-rose-400"], [class~="from-red-400"], [class~="from-orange-400"],
    [class~="from-emerald-400"], [class~="from-teal-400"]) {
    box-shadow: inset 0 0 0 100vmax rgba(11, 17, 32, .3), 0 18px 30px -12px rgba(0, 0, 0, .5);
}

/* ---------- 彩色按鈕在深色模式稍微降低亮度與飽和度（避免刺眼），hover 時回亮 ----------
 * 用 filter 不覆蓋按鈕原本的陰影；只套在按鈕 / 連結本身帶彩色背景的元素（底部選單等內層色塊不受影響）
 */
html.dark :is(a, button, input[type="submit"]):is(.btn-brand, .bg-brand-gradient, .btn-gradient, [class*="bg-gradient-to-"],
    .bg-blue-500, .bg-blue-600, .bg-sky-500, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-pink-500,
    .bg-red-500, .bg-red-600, .bg-orange-500, .bg-amber-500, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600,
    .topup-now-btn, .btn-primary, .btn-warning, .pwa-btn--primary, [data-faq-ai-support], [style*="linear-gradient"]),
html.dark .order-tab.active,
html.dark .recharge-page .payment-btn-tw input:checked + div {
    filter: brightness(.86) saturate(.9);
    transition: filter .2s ease;
}
html.dark :is(a, button, input[type="submit"]):is(.btn-brand, .bg-brand-gradient, .btn-gradient, [class*="bg-gradient-to-"],
    .bg-blue-500, .bg-blue-600, .bg-sky-500, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-pink-500,
    .bg-red-500, .bg-red-600, .bg-orange-500, .bg-amber-500, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600,
    .topup-now-btn, .btn-primary, .btn-warning, .pwa-btn--primary, [data-faq-ai-support], [style*="linear-gradient"]):hover {
    filter: brightness(.96) saturate(.95);
}
html.dark :is(a, button, input[type="submit"]):disabled { filter: none; }

/* ---------- 內嵌黑色品牌圖示（Threads / TikTok / X）：深色底改淺灰，避免被背景吃掉 ---------- */
/* 來源：price/all-services 內建圖示陣列 color: #000;、資料庫服務分類 icon 欄位 color: #000000 / #090909 */
html.dark i:is([style*="color: #000;"], [style*="color:#000;"], [style$="color: #000"], [style$="color:#000"],
               [style*="color: #000000"], [style*="color:#000000"], [style*="color: #090909"], [style*="color:#090909"],
               [style*="color: #111;"], [style*="color: #111111"], [style*="color: black"], [style*="color:black"]) {
    color: #e5e7eb !important;
}

/* ---------- 共用元件 ---------- */
/* 手機頂部選單按鈕（選單 / MENU＋三槓） */
html.dark .nav-menu-btn { color: var(--dm-text-3); }
html.dark .nav-menu-btn:hover, html.dark .nav-menu-btn.is-open { background: var(--dm-surface-3); color: #fff; }

/* 手機底部選單的聯絡小選單 */
html.dark .mf-contact-menu, html.dark .mf-contact-menu::after { background: var(--dm-surface-2); border-color: var(--dm-border-strong); }
html.dark .mf-contact-item { color: var(--dm-text-2); }
html.dark .mf-contact-item:hover, html.dark .mf-contact-item:active { background: var(--dm-surface-3); }

/* 外觀切換元件 */
html.dark .theme-toggle-btn { color: var(--dm-text-3); }
html.dark .theme-toggle-btn:hover { background: var(--dm-surface-3); color: #fff; }
html.dark .theme-toggle-menu { background: var(--dm-surface-2); border-color: var(--dm-border-strong); }
html.dark .theme-toggle-menu button { color: var(--dm-text-2); }
html.dark .theme-toggle-menu button:hover { background: var(--dm-surface-3); }
html.dark .theme-segment { background: var(--dm-bg); border-color: var(--dm-border); }
html.dark .theme-segment button { color: var(--dm-text-4); }

/* 認證頁（登入 / 註冊）背景 */
html.dark .auth-bg { background: linear-gradient(135deg, #0b1120 0%, #0f1a2e 50%, #140f24 100%); background-attachment: fixed; }

/* 載入圈圈 */
html.dark .loading-spinner { border-color: #334057; border-top-color: #3b82f6; }

/* ---------- 首頁 welcome ---------- */
/* 區塊底色交錯（沿用原深色首頁 slate-900 / 更深底的層次） */
html.dark #stats, html.dark #how-to-buy, html.dark #payment-methods { background-color: #0f172a; }
html.dark #services, html.dark #why-us, html.dark #faq { background-color: #0b1120; }

/* 背景模糊裝飾圓（淺色半透明 → 深色時改為低透明色調，避免出現灰白光暈） */
html.dark .bg-blue-100\/50, html.dark .bg-blue-100\/40 { background-color: rgba(59, 130, 246, .12); }
html.dark .bg-pink-100\/50, html.dark .bg-pink-100\/40 { background-color: rgba(236, 72, 153, .10); }
html.dark .bg-emerald-100\/40, html.dark .bg-emerald-100\/50 { background-color: rgba(16, 185, 129, .10); }

/* 漸層文字（「三步驟」、「愛粉絲」、下單頁標題等）：深色底改用較亮的漸層 */
html.dark .gradient-text, html.dark .text-brand-gradient { background-image: linear-gradient(135deg, #ffb3cb 0%, #ff6b9d 50%, #ff4d8d 100%); }
html.dark .gradient-text-gold { background-image: linear-gradient(135deg, #ffc2d6 0%, #ff6b9d 100%); }

/* 獨家功能區塊 */
html.dark .xf-section { background: linear-gradient(180deg, #0b1120 0%, #111a2e 50%, #0b1120 100%); }
html.dark .xf-card, html.dark .xf-legend { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }
html.dark .xf-title, html.dark .xf-legend-name { color: var(--dm-text); }
html.dark .xf-desc, html.dark .xf-legend-desc, html.dark .xf-small { color: var(--dm-text-4); }
html.dark .xf-points li, html.dark .xf-demo-title, html.dark .xf-svc-name, html.dark .xf-small b { color: var(--dm-text-2); }
html.dark .xf-demo, html.dark .xf-sample, html.dark .xf-legend-item { background: var(--dm-surface-2); border-color: var(--dm-border-strong); }
html.dark .xf-svc { background: var(--dm-surface); border-color: var(--dm-border); }
html.dark .xf-id { background: var(--dm-surface-3); color: var(--dm-text-3); }
html.dark .xf-demo-label { background: #334155; }
html.dark .xf-fastest { background: rgba(16, 185, 129, .18); color: #34d399; }
html.dark .xf-promo { background: rgba(249, 115, 22, .18); color: #fb923c; }
html.dark .xf-score { color: #fbbf24; }
html.dark .xf-link { color: #818cf8; }
html.dark .xf-c-indigo-strong { color: #a5b4fc; }
html.dark .xf-stars .far { color: #475569; }
html.dark .xf-note, html.dark .xf-muted { color: var(--dm-text-4); }
html.dark .hero-overlay-light { background: linear-gradient(135deg, rgba(11, 17, 32, .9) 0%, rgba(15, 23, 42, .88) 50%, rgba(12, 20, 36, .9) 100%); }
html.dark .glass-light { background: rgba(20, 28, 43, .7); border-color: rgba(255, 255, 255, .08); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35); }
html.dark .card-light { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 4px 20px -5px rgba(0, 0, 0, .45); }
html.dark .card-light:hover, html.dark .service-card:hover { box-shadow: 0 20px 45px -12px rgba(0, 0, 0, .65); }

/* Tailwind important 變體（會員中心 / 推薦中心側邊選單的選中項目） */
html.dark .\!text-sky-700 { color: #7dd3fc !important; }
html.dark .\!text-purple-700 { color: #d8b4fe !important; }

/* ---------- API 串接說明：程式碼範例頁籤 ---------- */
html.dark .code-tab { background: transparent; color: var(--dm-text-4); border-color: var(--dm-border); }
html.dark .code-tab:hover { background: var(--dm-surface-3); color: #fff; }
html.dark .code-tab.active { background: var(--dm-surface-2); color: #fff; }

/* ---------- 下單頁 ---------- */
html.dark .order-tab:not(.active) { background: var(--dm-surface-2); color: var(--dm-text-4); border-color: var(--dm-border); }
html.dark .form-label { color: var(--dm-text-2); }
html.dark .form-input { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border-strong); }
html.dark .info-value { color: var(--dm-text); }
html.dark .readonly-style { background-color: var(--dm-surface-3) !important; color: var(--dm-text-3); }
html.dark .gender-btn:not(.active) { background-color: var(--dm-surface-2); color: var(--dm-text-3); }
html.dark .scrollbar-thin::-webkit-scrollbar-track { background: var(--dm-surface-2); }

/* Select2 下拉（下單頁選服務） */
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple { background-color: var(--dm-surface-2); border-color: var(--dm-border-strong); color: var(--dm-text); }
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dm-text); }
html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--dm-text-5); }
html.dark .select2-dropdown { background-color: var(--dm-surface-2); border-color: var(--dm-border-strong); }
html.dark .select2-results__option { background-color: var(--dm-surface-2); color: var(--dm-text-2); }
html.dark .select2-results__group { background-color: var(--dm-surface-3); color: var(--dm-text); }
html.dark .select2-container--default .select2-results__option[aria-selected="true"],
html.dark .select2-container--default .select2-results__option--selected { background-color: var(--dm-surface-3); color: var(--dm-text); }
html.dark .select2-search--dropdown .select2-search__field { background-color: var(--dm-bg); color: var(--dm-text); border-color: var(--dm-border-strong); }
html.dark .select2-results__option { border-bottom-color: var(--dm-border); }
html.dark .select2-dropdown { box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
/* 下單頁 create.blade.php 的 hover / 選取樣式用了 !important 深藍、深粉文字，深色底看不清 → 同樣以 !important 覆蓋 */
html.dark .select2-container--default .select2-results__option--highlighted,
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--default .select2-results__option.select2-results__option--highlighted,
html.dark .select2-results__option--highlighted.select2-results__option--selectable,
html.dark .select2-container--default .select2-results__option:hover,
html.dark .select2-results__option--selectable:hover {
    background-color: rgba(56, 189, 248, .16) !important;
    color: #e0f2fe !important;
}
html.dark .select2-results__option--selected,
html.dark .select2-container--default .select2-results__option--selected,
html.dark .select2-container--default .select2-results__option[aria-selected=true],
html.dark .select2-container--default .select2-results__option[data-selected=true],
html.dark .select2-results__option[aria-selected=true].select2-results__option--highlighted {
    background-color: rgba(56, 189, 248, .24) !important;
    color: #7dd3fc !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #94a3b8 transparent transparent transparent; }
html.dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #94a3b8 transparent; }
html.dark .select2-container--default .select2-selection--single:hover { border-color: #38bdf8; }

/* ---------- 訂單紀錄頁 ---------- */
html.dark .status-filter-chip .chip-content { background: var(--dm-surface-2); color: var(--dm-text-3); }
html.dark .admin-overlay-content { background: var(--dm-surface); color: var(--dm-text); }
html.dark .admin-input, html.dark .admin-textarea { background: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border-strong); }

/* 半透明淺灰底（發票紀錄「已作廢」列等） */
html.dark .bg-gray-50\/50 { background-color: rgba(255, 255, 255, .025); }

/* ---------- 下單頁：價格與說明、系統訊息框 ---------- */
html.dark .info-item { border-bottom-color: var(--dm-border); }
html.dark .info-label { color: var(--dm-text-4); }
html.dark .info-value { background: var(--dm-surface-2); color: var(--dm-text); }
html.dark #sys_msg_box.bg-blue-100 { background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .35); }
html.dark #sys_msg_box.bg-blue-100 span { color: #93c5fd !important; }
html.dark #sys_msg_box.bg-green-100 { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .35); }
html.dark #sys_msg_box.bg-green-100 span { color: #86efac !important; }
html.dark #sys_msg_box.bg-red-100 { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .35); }
html.dark #sys_msg_box.bg-red-100 span { color: #fca5a5 !important; }

/* ---------- 會員中心：側邊選單、帳號資訊卡片 ---------- */
html.dark .menu-item { color: var(--dm-text-3); }
html.dark .menu-item:hover { background-color: var(--dm-surface-3); color: #fff; }
html.dark .menu-item.active { color: #ff6b9d; }
html.dark .info-card { background: var(--dm-surface-2); border-color: var(--dm-border); }
html.dark .info-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
html.dark .info-card-icon { background-color: rgba(255, 255, 255, .06); }
html.dark .info-card-label { color: var(--dm-text-4); }
html.dark .info-card-value { color: var(--dm-text); }

/* ---------- 點數紀錄：點數統計、分頁 ---------- */
html.dark .stat-item { background: var(--dm-surface-2); }
html.dark .stat-label { color: var(--dm-text-4); }
html.dark .stat-value { color: var(--dm-text); }
html.dark .stat-value.text-green-600 { color: #4ade80 !important; }
html.dark .stat-value.text-red-600 { color: #f87171 !important; }
html.dark .pagination .page-link { background: var(--dm-surface-2); color: var(--dm-text-3); border-color: var(--dm-border); }
html.dark .pagination .page-link:hover { background: rgba(245, 158, 11, .16); border-color: #f59e0b; color: #fbbf24; }
html.dark .pagination .page-item.active .page-link { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: transparent; }
html.dark .pagination .page-item.disabled .page-link { background: var(--dm-surface); color: var(--dm-text-5); border-color: var(--dm-border); }

/* ---------- 會員協議 / 隱私權條款卡片 ---------- */
html.dark .agreement-item { background: var(--dm-surface-2); border-color: var(--dm-border); }

/* ---------- 最新消息通知 ---------- */
html.dark #toast-container > .toast-info { background-color: rgba(20, 28, 43, .94) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06) inset !important; }
html.dark #toast-container > .toast-info .toast-title { background: linear-gradient(135deg, rgba(14, 165, 233, .12) 0%, rgba(236, 72, 153, .12) 100%); }
html.dark .news-toast-footer { background: rgba(255, 255, 255, .04); }
html.dark .news-toast-footer:hover { background: rgba(255, 255, 255, .08); }

/* ---------- 儲值頁：選擇支付方式（未選取的按鈕；選取中維持藍底） ---------- */
html.dark .payment-btn-tw input:not(:checked) + div { background-color: var(--dm-surface-2); border-color: var(--dm-border-strong); }
html.dark .payment-btn-tw input:not(:checked) + div:hover { background-color: rgba(59, 130, 246, .14); border-color: #60a5fa; }
html.dark .payment-btn-tw:hover .group-hover\:text-blue-500 { color: #93c5fd; }

/* ---------- 首頁底部 CTA：深色時壓暗漸層、上下柔和銜接，註冊按鈕維持白底 ---------- */
html.dark .bg-brand-cta { box-shadow: inset 0 60px 60px -40px #0b1120, inset 0 -60px 60px -40px #0b1120; }
html.dark .bg-brand-cta > .bg-black\/10 { background-color: rgba(11, 17, 32, .5); }
html.dark .bg-brand-cta .bg-white { background-color: #fff; }
html.dark .bg-brand-cta .text-blue-600 { color: #2563eb; }
html.dark .bg-brand-cta .hover\:bg-gray-100:hover { background-color: #f1f5f9; }

/* ---------- 改版說明統計卡、Email 自動完成 ---------- */
html.dark .stat-card { background: linear-gradient(135deg, rgba(20, 28, 43, .95) 0%, rgba(255, 215, 0, .08) 100%); }
html.dark .email-suggestions { background: var(--dm-surface-2); border-color: var(--dm-border-strong); }
html.dark .email-suggestion-item { color: var(--dm-text-2); }
html.dark .email-suggestion-item:hover, html.dark .email-suggestion-item.active { background-color: var(--dm-surface-3); }

/* ---------- AI 客服浮動視窗 ---------- */
html.dark #aiSupportTip, html.dark .ai-msg.bot { background: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border-strong); }
html.dark #aiSupportTip::after { border-left-color: var(--dm-surface-2); }
html.dark #aiSupportPanel, html.dark .ai-input, html.dark .ai-foot { background: var(--dm-surface); }
html.dark .ai-body { background: var(--dm-bg); }
html.dark .ai-input { border-top-color: var(--dm-border); }
html.dark .ai-input input { background: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border-strong); }
html.dark .ai-foot { color: var(--dm-text-5); }
html.dark .ai-disclaimer { color: #566275; }