/* ==========================================================================
   智慧評量系統 - EFUN 全站黑金玻璃風 (終極細節+學習歷程閃光彈修復版)
   ========================================================================== */



/* 4. 鎖定排除：主頁儀表板 (Dashboard) 的學科卡片絕對不允許被全域渲染污染 */
div[class*="dashboard"] div,
.grid > div {
    background-color: rgba(30, 27, 46, 0.7) !important; /* 卡片回歸暗色系 */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}
/* 1. 全域底層設定 */ 
body, html {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #080314 !important; 
    background-image: radial-gradient(circle at center, #000000 0%, #170529 50%, #000000 100%) !important;
    color: #e2e8f0 !important; 
    margin: 0;
    min-height: 100vh;
}

/* 2. 核心防護區：強制排除指定區域被污染 */
header, nav, .hero, .navbar, .logo, 
[class*="hero"], [class*="navbar"], [class*="logo"],
[class*="bg-clip-text"], [class*="text-transparent"] {
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* 3. 黑金玻璃效果 (大卡片、側邊欄) */
.glass-card, .grid > div, aside, #sidebar {
    background-color: rgba(13, 7, 28, 0.94) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 4. 字體顏色層次修正 (保護按鈕與連結原色) */
.text-slate-900:not(button):not(button *):not(a):not(a *), 
.text-slate-800:not(button):not(button *):not(a):not(a *), 
.text-gray-900:not(button):not(button *):not(a):not(a *), 
.text-gray-800:not(button):not(button *):not(a):not(a *), 
.text-black:not(button):not(button *):not(a):not(a *) {
    color: #f8fafc !important;
}

.text-slate-700:not(button):not(button *):not(a):not(a *), 
.text-slate-600:not(button):not(button *):not(a):not(a *), 
.text-slate-500:not(button):not(button *):not(a):not(a *),
.text-gray-700:not(button):not(button *):not(a):not(a *), 
.text-gray-600:not(button):not(button *):not(a):not(a *), 
.text-gray-500:not(button):not(button *):not(a):not(a *) {
    color: #cbd5e1 !important;
}

/* 核心防護：救回圖示原始色彩 */
i, svg { opacity: 1 !important; text-shadow: none !important; }
[class*="text-blue"] i, [class*="text-blue"] svg { color: #3b82f6 !important; }
[class*="text-red"] i, [class*="text-red"] svg { color: #ef4444 !important; }
[class*="text-green"] i, [class*="text-green"] svg, [class*="text-emerald"] i, [class*="text-emerald"] svg { color: #10b981 !important; }
[class*="text-yellow"] i, [class*="text-yellow"] svg { color: #eab308 !important; }
[class*="text-amber"] i, [class*="text-amber"] svg { color: #f59e0b !important; }
[class*="text-purple"] i, [class*="text-purple"] svg { color: #8b5cf6 !important; }
[class*="text-indigo"] i, [class*="text-indigo"] svg { color: #6366f1 !important; }
[class*="text-pink"] i, [class*="text-pink"] svg { color: #ec4899 !important; }
[class*="text-orange"] i, [class*="text-orange"] svg { color: #f97316 !important; }
[class*="text-teal"] i, [class*="text-teal"] svg { color: #14b8a6 !important; }
[class*="text-cyan"] i, [class*="text-cyan"] svg { color: #06b6d4 !important; }

/* 5. 輸入框黑金化 (修改版) - 移除 !important，或將背景設為透明 */
input, textarea, select {
    background-color: transparent !important; /* 將背景直接改為透明 */
    color: #ffffff !important;
    border: 1px solid rgba(253, 224, 71, 0.2) !important;
    border-radius: 0.5rem !important;
}
input:focus { outline: 1px solid #fde047 !important; }

/* 6. 側邊欄 Active 狀態 */
aside a.active, #sidebar a.active {
    background: #fde047 !important;
    color: #000000 !important;
}
aside a.active i, aside a.active span, aside a.active svg { color: #000000 !important; }

/* 7. 殘留白底與單元列表容器修復 */
main { background-color: transparent !important; }

div.bg-white:not(header *):not(nav *):not(button), 
li.bg-white:not(button),
div[class*="bg-slate-1"]:not(button), div[class*="bg-slate-50"]:not(button),
div[class*="bg-gray-1"]:not(button), div[class*="bg-gray-50"]:not(button) {
    background-color: rgba(22, 13, 43, 0.6) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 8. 彈出視窗(Modal)防護 */
.fixed.inset-0, [role="dialog"] > div:first-child, .z-40.fixed {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

[role="dialog"] [class*="bg-white"]:not(button):not(a), 
.fixed [class*="bg-white"]:not(button):not(a) {
    background-color: rgba(13, 7, 28, 0.98) !important;
    border: 1px solid rgba(253, 224, 71, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

/* 9. 解決「白底配白字」看不見的標籤與按鈕 */
main span.bg-white, main span[class*="bg-slate-1"], main span[class*="bg-gray-1"], main span[class*="bg-gray-2"],
main button.bg-white, main button[class*="bg-slate-1"], main button[class*="bg-gray-1"],
main a.bg-white, main a[class*="bg-slate-1"], main a[class*="bg-gray-1"],
main div[class*="rounded-full"].bg-white, main div[class*="px-"].bg-white {
    background-color: rgba(255, 255, 255, 0.15) !important; 
    color: #f8fafc !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important; 
    box-shadow: none !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

main button.bg-white:hover, main button[class*="bg-slate-1"]:hover, main button[class*="bg-gray-1"]:hover,
main a.bg-white:hover, main a[class*="bg-slate-1"]:hover, main a[class*="bg-gray-1"]:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* 10. 儀表板 (Dashboard) 科目卡片「刺眼色塊」與「空白標籤」專屬修復 */
main [class*="bg-red-1"], main [class*="bg-red-5"],
main [class*="bg-blue-1"], main [class*="bg-blue-5"],
main [class*="bg-green-1"], main [class*="bg-green-5"],
main [class*="bg-purple-1"], main [class*="bg-purple-5"],
main [class*="bg-yellow-1"], main [class*="bg-yellow-5"],
main [class*="bg-indigo-1"], main [class*="bg-indigo-5"],
main [class*="bg-pink-1"], main [class*="bg-pink-5"],
main [class*="bg-orange-1"], main [class*="bg-orange-5"],
main [class*="bg-teal-1"], main [class*="bg-teal-5"],
main [class*="bg-cyan-1"], main [class*="bg-cyan-5"],
main [class*="bg-emerald-1"], main [class*="bg-emerald-5"] {
    background-color: rgba(255, 255, 255, 0.05) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.glass-card .bg-white, .grid > div .bg-white, 
main [class*="rounded-full"].bg-white,
main [class*="rounded-xl"].bg-white {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ==========================================================================
   11. 🌟 學習歷程與錯題 (上方死白導覽區塊與分頁標籤修復)
   ========================================================================== */
/* 針對頁面上方的標題與分頁區塊 (包含背景與底部框線)，強制轉為黑金玻璃 */
main > div.bg-white, main > div[class*="bg-slate-"], main > div[class*="bg-gray-"], main > div[class*="bg-zinc-"], main > div[class*="bg-neutral-"],
main > header.bg-white, main > header[class*="bg-slate-"],
div[class*="border-b"].bg-white, div[class*="border-b"][class*="bg-"] {
    background-color: rgba(13, 7, 28, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 救回隱形的分頁標籤 (Tabs: 考試紀錄 / 錯題集錦) 與右側的按鈕 */
[role="tablist"] button, [role="tablist"] a,
div[class*="border-b"] button, div[class*="border-b"] a {
    color: #94a3b8 !important; /* 預設灰白色 */
    background-color: transparent !important; /* 移除按鈕自帶的白底 */
    border-color: transparent !important;
}

/* 當分頁被選取時 (Active)，讓它變成亮眼的金黃色！ */
[role="tablist"] button[aria-selected="true"], [role="tablist"] button.active,
div[class*="border-b"] button.active, div[class*="border-b"] button[aria-selected="true"] {
    color: #fde047 !important; 
    border-bottom: 2px solid #fde047 !important;
}

/* 標題列右側的按鈕 (重新整理、新增) 轉為玻璃質感 */
main > div:first-of-type button.bg-white,
main > header button.bg-white,
div[class*="border-b"] button.bg-white {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
main > div:first-of-type button.bg-white:hover,
main > header button.bg-white:hover,
div[class*="border-b"] button.bg-white:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
/* ==========================================================================
   12. 📊 圖表標籤與 🗺️ 網站導覽 (Sitemap) 卡片專屬修復
   ========================================================================== */

/* 1. 若圖表是 SVG 格式 (如 ApexCharts, Recharts)，強制消滅裡面的白色背景方塊 */
svg rect[fill="#ffffff"], svg rect[fill="white"], svg rect[fill="#fff"] {
    fill: transparent !important;
}
svg text {
    fill: #f8fafc !important; /* 強制圖表內的文字變白 */
}

/* 2. 網站導覽 (Sitemap) 卡片與殘留暗灰色區塊修復 */
/* 針對 Sitemap 頁面中，原本可能是淺灰/中灰色，導致文字失去對比的卡片 */
main div[class*="bg-slate-2"], main div[class*="bg-slate-3"], main div[class*="bg-slate-4"],
main div[class*="bg-gray-2"], main div[class*="bg-gray-3"], main div[class*="bg-gray-4"],
main div[class*="bg-zinc-"], main div[class*="bg-neutral-"] {
    background-color: rgba(22, 13, 43, 0.5) !important; /* 轉為通透的深紫玻璃 */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 強制 Sitemap 卡片內的小標題與路徑文字變白 */
main div[class*="bg-slate-"] p, main div[class*="bg-gray-"] p, 
main div[class*="bg-slate-"] span, main div[class*="bg-gray-"] span {
    color: #cbd5e1 !important;
}
main div[class*="bg-slate-"] h3, main div[class*="bg-gray-"] h3,
main div[class*="bg-slate-"] h4, main div[class*="bg-gray-"] h4 {
    color: #f8fafc !important;
}

/* 確保 Sitemap 裡的 Icon 有漂亮的發光底色 */
main div[class*="bg-slate-"] div[class*="bg-green-"],
main div[class*="bg-slate-"] div[class*="bg-blue-"],
main div[class*="bg-slate-"] div[class*="bg-pink-"],
main div[class*="bg-slate-"] div[class*="bg-yellow-"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* ==========================================================================
   13. 儀表板 (Dashboard) 專屬修復：解決連結卡片內的黑字與死白標籤
   ========================================================================== */
/* 因為整張卡片是 <a> 連結，所以被前面的全域防護排除了。我們在這裡手動強制轉色！ */

/* 1. 科目名稱 (國文、數學...) 強制轉為亮白色 */
main .grid a h2, 
main .grid a h3, 
main .grid a h4, 
main .grid a p:not([class*="text-transparent"]),
main .grid a strong,
main .grid a b {
    color: #f8fafc !important;
}

/* 2. 「高一」標籤 (Pill) 強制轉為半透明微光玻璃與白字 */
main .grid a span[class*="bg-"], 
main .grid a div[class*="rounded-full"],
main .grid a span[class*="rounded-full"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* 確保卡片最下方的「進入課程 ->」這類彩色文字不會被洗掉 */
main .grid a span[class*="text-red"], main .grid a p[class*="text-red"] { color: #ef4444 !important; }
main .grid a span[class*="text-blue"], main .grid a p[class*="text-blue"] { color: #3b82f6 !important; }
main .grid a span[class*="text-green"], main .grid a p[class*="text-green"], main .grid a span[class*="text-emerald"] { color: #10b981 !important; }
main .grid a span[class*="text-purple"], main .grid a p[class*="text-purple"] { color: #8b5cf6 !important; }
main .grid a span[class*="text-yellow"], main .grid a p[class*="text-yellow"] { color: #eab308 !important; }
/* ==========================================================================
   14. 儀表板終極殺手鐧：暴力破解死白「高一」膠囊標籤
   ========================================================================== */
/* 不管它是什麼 HTML 標籤，只要在卡片連結內且帶有白/淺灰底色，通通強制玻璃化！ */
main .grid a .bg-white,
main .grid a [class*="bg-white"],
main .grid a [class*="bg-slate-1"],
main .grid a [class*="bg-gray-1"],
main .grid a [class*="bg-zinc-1"],
main .grid a [class*="bg-neutral-1"],
main .grid a [class*="badge"] /* 防呆：如果套件是用 badge 類別 */ {
    background-color: rgba(255, 255, 255, 0.15) !important; /* 轉為半透明玻璃底 */
    color: #ffffff !important; /* 強制文字為白 */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* 加上微光邊框 */
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    box-shadow: none !important;
}

/* 雙重保險：萬一它是被寫死 style 的圓角標籤，且不是上面的圖示框 (排除包含 w- 或 h- 的大容器) */
main .grid a [class*="rounded-full"]:not([class*="w-"]):not([class*="h-"]):not([class*="p-4"]) {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
/* ==========================================================================
   15. 🗺️ 網站導覽 (Sitemap) 終極精準修復版
   ========================================================================== */

/* 1. 頂部 Header 區塊與搜尋框玻璃化 */
header div[class*="bg-white/80"] {
    background: rgba(30, 20, 50, 0.6) !important;
    border-color: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

header h1 {
    color: #f8fafc !important;
}

header p {
    color: #cbd5e1 !important;
}

/* 搜尋框 */
#searchInput {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #f8fafc !important;
}

#searchInput::placeholder {
    color: #64748b !important;
}

#searchInput + div i {
    color: #94a3b8 !important;
}

/* 2. 分類標題 */
.sitemap-category h2 {
    background: rgba(255,255,255,0.08) !important;
    color: #f8fafc !important;
    border-left: 4px solid rgba(255,255,255,0.35) !important;
    backdrop-filter: blur(12px);
}

/* 3. Sitemap 卡片 */
.sitemap-card {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 32px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);

    transition: all 0.3s ease;
}

/* Hover */
.sitemap-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.35),
        0 0 20px rgba(99,102,241,0.15);
}

/* 卡片標題 */
.sitemap-card h3 {
    color: #f8fafc !important;
}

/* 卡片描述 */
.sitemap-card p {
    color: #cbd5e1 !important;
}

/* Icon */
.sitemap-card i,
.sitemap-card svg {
    color: #a78bfa !important;
}

/* 連結 */
.sitemap-card a {
    color: #f8fafc !important;
}

.sitemap-card a:hover {
    color: #c4b5fd !important;
}

/* 4. 統計資訊區 */
.sitemap-stats,
.stats-card {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #f8fafc !important;
    backdrop-filter: blur(18px);
}

/* 5. 底部提示區 */
.sitemap-footer,
.sitemap-note {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #cbd5e1 !important;
    backdrop-filter: blur(18px);
}/* Sidebar 所有分界線統一黑色 */
#sidebar {
    border-right-color: #000 !important;
}

#sidebar .border-b {
    border-bottom-color: #000 !important;
}

#sidebar .border-t {
    border-top-color: #000 !important;
}
/* ==========================================================================
   16. 🏠 首頁 (Landing Page) 專屬黑金與玻璃感終極修復 (精準版)
   ========================================================================== */

/* 1. ❌ 移除 main div 與 section 的全域背景覆蓋，改為只抓已知的大區塊 */
.hero-section,
main > section,
main > div.py-,         /* 只抓 main 的直系子 section/div，不往下追 */
main > div[class*="bg-slate-"],
main > div[class*="bg-gray-"],
main > div[class*="bg-zinc-"],
main > div[class*="bg-neutral-"] {
    background-color: rgba(13, 7, 28, 0.4) !important;
}

/* 2. 三張大特色卡片 */
main div.rounded-3xl,
main div[class*="rounded-2xl"] {
    background-color: rgba(22, 13, 43, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 3. 導覽列深色底 */
header, nav, .navbar, [class*="navbar"] {
    background-color: rgba(8, 3, 20, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 4. 大標題與說明文字 */
main h1, main h2, main h3, main h4 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

main p {
    color: #cbd5e1 !important;
}

/* 5. 卡片內的文字 */
main .grid div h3,
main .grid div p,
main div.text-3xl {
    color: #ffffff !important;
}
/* ==========================================================================
   17. 🐾 頁尾 (Footer) 與問答區 (FAQ) 完美黑金黑化修復
   ========================================================================== */

/* 1. 消除 Footer 的死沉底色，讓它完美透明並透出底層的深紫極光 */
footer, 
[class*="bg-"]:has(a[href*="privacy"]), /* 自動偵測含有隱私權政策的區塊 */
main + div,
div.border-t {
    background-color: rgba(8, 3, 20, 0.6) !important; /* 半透明深紫黑 */
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 2. 拯救 Footer 內所有隱形的連結與次要文字 */
footer a, 
footer span, 
footer p,
[class*="bg-"] a,
[class*="bg-"] p {
    color: #94a3b8 !important; /* 預設改為優雅的灰白色 */
    transition: color 0.2s ease;
}

/* 頁尾連結 Hover 效果：亮白色 */
footer a:hover,
[class*="bg-"] a:hover {
    color: #ffffff !important;
}

/* 頁尾的四個大分類標題（如：產品服務、學習資源）強制變白 */
footer h3, 
footer div strong,
[class*="bg-"] h3,
[class*="bg-"] h4 {
    color: #ffffff !important;
}

/* 3. 修復問答區 (FAQ) 卡片：加上微光邊框與玻璃質感，做出層次 */
main div:has(> p:contains("？")), /* 偵測含有問答的卡片 */
main div.rounded-xl:has(h3),
div:has(> div:contains("Q：")) {
    background-color: rgba(22, 13, 43, 0.5) !important;
    border: 1px solid rgba(253, 224, 71, 0.15) !important; /* 帶有一絲絲黑金的微光邊框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 如果你的 FAQ 用了特定的類別，以下做雙重保險暴力覆蓋 */
main .rounded-xl {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* ==========================================================================
   18. 🩹 修復「進入課程」按鈕區的醜方框
   ========================================================================== */

/* 清除科目卡片內底部按鈕區的多餘背景與邊框 */
main .grid a > div:last-child,
main .grid a > div:last-of-type,
main .grid a div[class*="border-t"],
main .grid a div[class*="mt-"],
main .grid a div[class*="pt-"],
main .grid a div[class*="py-"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* ==========================================================================
   19. 🩹 首頁灰白色大區塊終極清除
   ========================================================================== */

/* 直接暴力把所有 section 和頂層容器強制黑化（不透明版） */
section,
main > section,
main > div,
body > div,
.container,
[class*="bg-gray-50"],
[class*="bg-gray-100"],
[class*="bg-slate-50"],
[class*="bg-slate-100"],
[class*="bg-white"],
[class*="bg-zinc-50"],
[class*="bg-neutral-50"] {
    background-color: #080314 !important;
    background-image: none !important;
}

/* 只有 body 底層保留極光漸層 */
body {
    background-color: #080314 !important;
    background-image: radial-gradient(circle at center, #000000 0%, #170529 50%, #000000 100%) !important;
}

/* 17 節副作用修復：救回被洗白的彩色文字 */
[class*="bg-"] a:not(aside a):not(footer a) { color: inherit !important; }
[class*="bg-"] p:not(aside p):not(footer p) { color: inherit !important; }
/* ==========================================================================
   🔥 絕地救援補丁：消除無 <main> 標籤造成的「白底白字」隱形現象
   ========================================================================== */

/* 1. 強制將所有殘留、沒被黑化的考試選項與卡片轉為黑金玻璃風 */
[class*="option"],
[class*="choice"],
label[class*="rounded-xl"],
label[class*="rounded-2xl"],
div[class*="bg-white"]:not(header *):not(nav *):not(button),
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: #fff"] {
    background-color: rgba(15, 8, 35, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

/* 2. 雙重保險：確保被黑化容器內的所有文字與選項字母（A, B, C...）清晰可見 */
[class*="bg-white"] *,
[style*="background-color: rgb(255"] * {
    color: #e2e8f0 !important;
}

/* 3. 修正第四張圖：單元列表內「高一、數與式」等膠囊標籤變白塊的問題 */
[class*="rounded-full"][class*="bg-white"],
.grid a [class*="bg-"],
span[class*="rounded-full"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* 4. 滑鼠懸停選項時的微光反饋 */
[class*="option"]:hover, 
label[class*="rounded-xl"]:hover {
    background-color: rgba(253, 224, 71, 0.08) !important;
    border-color: rgba(253, 224, 71, 0.4) !important;
}
/* ==========================================================================
   🎯 答案選項專屬修復：強制黑色背景、白色文字
   ========================================================================== */

/* 1. 精準抓取所有測驗選項的容器（包含 div, label, button 等常見測驗元件） */
[class*="option"],
[class*="choice"],
[class*="question-answer"],
label[class*="rounded-xl"],
label[class*="rounded-2xl"],
.grid-cols-1 label,
.grid-cols-2 label,
div:has(> [class*="option"]) {
    background-color: #05020c !important; /* 極致深黑底色 */
    background-image: none !important;
    border: 1px solid rgba(253, 224, 71, 0.25) !important; /* 帶有一點點黑金微光邊框，更有質感 */
    color: #ffffff !important; /* 強制文字為純白色 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* 2. 強制破除前面「絕地救援補丁」把子元素字體洗成灰白色的副作用 */
[class*="option"] *,
[class*="choice"] *,
label[class*="rounded-xl"] *,
label[class*="rounded-2xl"] * {
    color: #ffffff !important; /* 選項內的所有文字（如 A, B, C, D 字母或題目內容）一律強制純白 */
}

/* 3. 當滑鼠懸停（Hover）在選項上時的黑金視覺回饋 */
[class*="option"]:hover, 
[class*="choice"]:hover,
label[class*="rounded-xl"]:hover,
label[class*="rounded-2xl"]:hover {
    background-color: #120924 !important; /* 稍微亮一點點的深紫黑 */
    border-color: #fde047 !important; /* 邊框變成明亮金黃色 */
    cursor: pointer;
}

/* 4. 如果選項被選中（Active / Checked 狀態），維持亮金邊框，背景依然是優雅的深色 */
[class*="option"].active,
[class*="choice"].selected,
label:has(input:checked) {
    background-color: rgba(253, 224, 71, 0.12) !important; /* 帶有金黃色微光的深黑底 */
    border: 2px solid #fde047 !important; /* 明亮金邊 */
}

label:has(input:checked) * {
    color: #fde047 !important; /* 選中時字體可自由選擇變成耀眼金黃色，若想維持純白可改為 #ffffff */
}
/* ==========================================================================
   🎯 答案選項專屬：只將底色變為黑色
   ========================================================================== */

/* 精準抓取所有測驗選項的容器，強制將背景改為純黑色 */
[class*="option"],
[class*="choice"],
[class*="question-answer"],
label[class*="rounded-xl"],
label[class*="rounded-2xl"],
.grid-cols-1 label,
.grid-cols-2 label,
main label,
div:has(> [class*="option"]) {
    background-color: #000000 !important; /* 強制背景為純黑色 */
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 保留一個極細的微光邊框，避免全黑時選項黏在一起 */
    box-shadow: none !important;
}

/* 移除滑鼠懸停時可能產生的任何發光或變白效果，維持黑底 */
[class*="option"]:hover, 
[class*="choice"]:hover,
label[class*="rounded-xl"]:hover,
label[class*="rounded-2xl"]:hover,
main label:hover {
    background-color: #0a0a0a !important; /* 懸停時頂多是非常深的一點點灰黑 */
}
/* ==========================================================================
   🎯 答案選項專屬：僅強制背景為純黑色
   ========================================================================== */

#optionsContainer > label,
#optionsContainer > div,
[class*="option"],
[class*="choice"] {
    background-color: #000000 !important; /* 強制底色為純黑色 */
    background-image: none !important;    /* 移除可能存在的漸層或白底圖片 */
}
/* 🎯 統一選項底色為黑色 */
[class*="option"],
[class*="choice"],
[class*="question-answer"],
label[class*="rounded-xl"],
label[class*="rounded-2xl"],
.grid-cols-1 label,
.grid-cols-2 label,
main label,
div:has(> [class*="option"]) {
    background-color: #000000 !important; /* 純黑底色 */
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 微光邊框 */
    color: #ffffff !important; /* 白字 */
}
/* 統一選項底色為純黑（放在檔案最末端以提高優先權） */
[class*="option"],
[class*="choice"],
[class*="question-answer"],
label[class*="rounded-xl"],
label[class*="rounded-2xl"],
.grid-cols-1 label,
.grid-cols-2 label,
main label,
#optionsContainer > label,
#optionsContainer > div,
div:has(> [class*="option"]) {
    background-color: #000000 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 懸停與選中狀態保持深色但提供視覺回饋 */
[class*="option"]:hover,
[class*="choice"]:hover,
label[class*="rounded-xl"]:hover,
label[class*="rounded-2xl"]:hover,
#optionsContainer > label:hover,
#optionsContainer > div:hover {
    background-color: #0a0a0a !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    cursor: pointer;
}

/* 選中狀態（可選：保留深色並改變邊框或字色） */
label:has(input:checked),
[class*="option"].active,
[class*="choice"].selected {
    background-color: #0b0b0b !important;
    border: 2px solid rgba(253, 224, 71, 0.12) !important;
    color: #fde047 !important;
}

label:has(input:checked) * {
    color: inherit !important;
}
/* 單純將選項底色改為黑色 */
#optionsContainer label,
#optionsContainer div,
[class*="option"],
[class*="choice"] {
    background-color: #000000 !important; /* 強制底色為純黑 */
    background-image: none !important;    /* 移除任何可能的漸層或白底圖片 */
}
/* ==========================================================================
   💎 降維打擊：依據元件 DNA 結構精準染色（主頁、側邊欄絕對免疫版）
   ========================================================================== */

/* 1. 答對狀態 (綠色微光玻璃) 
   核心邏輯：只抓含有 bg-green/bg-emerald，且絕對排除側邊欄與主頁特定網址 */
body:not(:has(a[href*="dashboard"].active)) div[class*="bg-green-"]:not(aside *):not(#sidebar *),
body:not(:has(a[href*="dashboard"].active)) div[class*="bg-emerald-"]:not(aside *):not(#sidebar *),
[class*="option"][class*="green"], [class*="choice"][class*="green"] {
    background-color: rgba(16, 185, 129, 0.15) !important; /* 半透明翡翠綠 */
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2) !important;
}
/* 答對區塊內的文字與英文字母強制變綠 */
body:not(:has(a[href*="dashboard"].active)) div[class*="bg-green-"] *,
body:not(:has(a[href*="dashboard"].active)) div[class*="bg-emerald-"] * {
    color: #34d399 !important;
}

/* 2. 答錯狀態 (紅色微光玻璃)
   核心邏輯：只抓含有 bg-red，且絕對排除側邊欄與主頁特定網址、登出按鈕 */
body:not(:has(a[href*="dashboard"].active)) div[class*="bg-red-"]:not(aside *):not(#sidebar *):not([onclick*="logout"]):not([href*="logout"]) {
    background-color: rgba(239, 68, 68, 0.15) !important; /* 半透明寶石紅 */
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important;
}
/* 答錯區塊內的文字與英文字母強制變紅 */
body:not(:has(a[href*="dashboard"].active)) div[class*="bg-red-"]:not(aside *):not(#sidebar *) * {
    color: #f87171 !important;
}

/* 3. 測驗/解析頁面的一般未選取選項 (強制維持深色玻璃，消滅死白) */
div[class*="rounded-"].p-4.border:has(span:first-child):not(aside *):not(#sidebar *):not(.grid *) {
    background-color: rgba(20, 12, 38, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   🌌 【天網除方・圓潤光譜矩陣】最終究極修正版（完美復活公民卡片）
   ========================================================================== */

/* 1. 基礎天網：強制注入極致深色宇宙底，並秒洗全域死白背景 -------------------- */
html, body, main, #app, .content-wrapper, #main-content {
    background-color: #0b0617 !important;
}

/* 精準擊殺測驗頁、解析頁的死白與老舊灰底（排除導覽列與側邊欄） */
.bg-white,
button[class*="bg-white"],
div[class*="choice-"],
div[class*="option-"] {
    &:not(aside *):not(#sidebar *):not(nav *):not(header *) {
        background-color: rgba(23, 16, 43, 0.96) !important;
        box-shadow: none !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
}



/* 3. 🎯 圓潤彩色霓虹矩陣（僅限真正的圓形題號、圓角按鈕與主題卡片渲染彩色微光） */

/* 🟢 綠色/翠綠/藍綠系（生物、💡公民卡片、答對選項、成功狀態、正確圓圈題號） */
[class*="green-"], [class*="emerald-"], [class*="teal-"], [class*="correct"], [class*="success"] {
    &:not(aside *):not(#sidebar *):not(nav *) {
        /* 只有當卡片或圈圈具備圓角時，才准發綠光、上藍綠框 */
        &[class*="rounded-"] {
            border: 1px solid rgba(20, 184, 166, 0.65) !important; /* 完美拯救公民的孔雀藍綠霓虹框 */
            box-shadow: 0 0 12px rgba(20, 184, 166, 0.2) !important;
            &:not(span):not(i):not(a) { background-color: rgba(20, 184, 166, 0.08) !important; }
        }
        &, & *, & i { color: #2dd4bf !important; }
    }
}

/* 🔴 紅色系（國文卡片、答錯選項、錯誤狀態、錯誤圓圈題號） */
[class*="red-"], [class*="wrong"], [class*="incorrect"], [class*="danger"] {
    &:not(aside *):not(#sidebar *):not(nav *) {
        &[class*="rounded-"] {
            border: 1px solid rgba(239, 68, 68, 0.65) !important;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.2) !important;
            &:not(span):not(i):not(a) { background-color: rgba(239, 68, 68, 0.08) !important; }
        }
        &, & *, & + span, & i { color: #f87171 !important; }
    }
}

/* 🔵 藍色/靛藍/青色系（數學、物理、進行測驗、已選中狀態、藍色圓圈題號） */
[class*="blue-"], [class*="indigo-"], [class*="cyan-"], [class*="sky-"], [class*="selected"], .active {
    &:not(aside *):not(#sidebar *):not(nav *):not(body) {
        &[class*="rounded-"] {
            border: 1px solid rgba(59, 130, 246, 0.65) !important;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.2) !important;
            &:not(span):not(i):not(a):not(button) { background-color: rgba(59, 130, 246, 0.08) !important; }
        }
        &, & *, & i { color: #60a5fa !important; }
    }
}

/* 🟣 紫色/粉紅系（英文、化學卡片、歷史分數圓圈、進度圓圈） */
[class*="purple-"], [class*="fuchsia-"], [class*="pink-"] {
    &:not(aside *):not(#sidebar *):not(nav *) {
        &[class*="rounded-"] {
            border: 1px solid rgba(168, 85, 247, 0.65) !important;
            box-shadow: 0 0 12px rgba(168, 85, 247, 0.2) !important;
            &:not(span):not(i):not(a) { background-color: rgba(168, 85, 247, 0.08) !important; }
        }
        &, & *, & i { color: #c084fc !important; }
    }
}

/* 🟡 黃色/橙色/琥珀系（地科、歷史、卡片、警告/提醒圓圈標籤） */
[class*="yellow-"], [class*="amber-"], [class*="orange-"] {
    &:not(aside *):not(#sidebar *):not(nav *) {
        &[class*="rounded-"] {
            border: 1px solid rgba(245, 158, 11, 0.55) !important;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.15) !important;
            &:not(span):not(i):not(a) { background-color: rgba(245, 158, 11, 0.06) !important; }
        }
        &, & *, & i { color: #fbbf24 !important; }
    }
}

/* 4. 全域普通文字與老舊灰色文字提亮 ----------------------------------------- */
span, p, h1, h2, h3, h4, h5, h6, a, label, li,
[class*="text-slate-"], [class*="text-gray-"], [class*="text-zinc-"] {
    &:not(aside *):not(#sidebar *):not(nav *):not([class*="red-"] *):not([class*="green-"] *):not([class*="blue-"] *):not([class*="purple-"] *):not([class*="yellow-"] *) {
        color: #e2e8f0 !important;
    }
}

/* 5. 側邊欄與導覽列防線（徹底杜絕干擾，還原原生經典黑金質感） --------------- */
aside, #sidebar, nav, header {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
nav a, nav div, nav span, nav i { box-shadow: none !important; text-shadow: none !important; }
aside a.active, #sidebar a.active, nav a.active {
    background: #fde047 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    & * { color: #000000 !important; }
}
/* 專門針對登入卡片內的輸入框，強制其背景設置為透明，以修正「方形底」問題 */
.glass-card input {
    background-color: transparent !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #1e1b4b inset !important; /* 換成你的輸入框背景色 */
    -webkit-text-fill-color: #fff !important; /* 換成你的文字顏色 */
}
/* ==========================================================================
   🌌 6. 破除區塊結界：消除版面死硬大方框，完美融合宇宙底色
   ========================================================================== */

/* 針對主要的排版容器、以及被硬上黑底的區塊，強制背景透明化 */
section, 
.container, 
main > div,
[class*="bg-black"], 
[class*="bg-gray-9"], 
[class*="bg-slate-9"] {
    /* 排除掉輸入框、按鈕、以及真正的毛玻璃卡片，避免誤傷 */
    &:not(input):not(button):not(.glass-card):not([class*="rounded-"]) {
        background-color: transparent !important;
        box-shadow: none !important;
    }
}

/* 如果下方的「三大特色區塊」剛好有圓角，且你希望它完全融入背景 */
/* 可以針對特定結構強制透明，例如通常放在 footer 或特定 grid 內 */
.grid > div[class*="bg-"] {
    background-color: transparent !important;
}
/* ==========================================================================
   🌌 6. 空間裂縫修補：強制排版容器透明化，完美透出宇宙底色
   ========================================================================== */
/* ==========================================================================
   1. 針對中央主視覺區塊的外層容器 (清除大範圍死黑)
   ========================================================================== */
.container, 
[class*="max-w-"], 
main > section,
main > div,
a {
    background-color: transparent !important;
}

/* ==========================================================================
   2. 針對登入表單與內層元素 (徹底拔除輸入框、註冊鈕與卡片的死黑)
   ========================================================================== */
/* 移除輸入框 (input) 的深黑色背景，改為透明或更輕量的深色 */
input[class*="bg-gray-"], 
input[class*="bg-slate-"],
#username, 
#password {
    background-color: rgba(255, 255, 255, 0.03) !important; /* 極透明白，能透出底色漸層 */
    border-color: rgba(255, 255, 255, 0.1) !important;     /* 稍微淡化邊框 */
}

/* 移除底部「立即註冊」那整條突兀的黑塊 */
div[class*="border-t"][class*="border-gray-"] {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 修正：如果登入卡片本身 (bg-gray-900/60) 顯得太重，可以調高它的透明度 */
main .rounded-2xl {
    background-color: rgba(17, 24, 39, 0.4) !important; /* 降低卡片底色，讓外層漸層透進來 */
    backdrop-filter: blur(12px) !important;             /* 增強毛玻璃質感 */
}

/* ==========================================================================
   3. 針對下方三個特色區塊 (AI題庫、學習分析、親師連動)
   ========================================================================== */
/* 只要不是帶有圓角的卡片，就強制拔掉網格或彈性排版子元素的黑色背景、陰影與邊框 */
.grid > div, 
.flex > div,
.grid > a,
.flex > a {
    &:not(.glass-card):not([class*="rounded-"]) {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* 額外補強：防止下方特色區塊的內層元素自己帶有 bg- 類別導致死黑 */
.grid > div *, 
.flex > div *,
.grid > a *,
.flex > a * {
    &[class*="bg-gray-950"], 
    &[class*="bg-slate-950"],
    &[class*="bg-black"] {
        background-color: transparent !important;
    }
}

/* =========================================================
   排行榜文字顏色自動適應 (深底變白字 / 黃底維持黑字)
   ========================================================= */

/* 1. 預設：將排行榜內原先深色的文字 (text-slate 或 text-gray) 強制轉為白色 */
#leaderboardList li [class*="text-slate-"],
#leaderboardList li [class*="text-gray-"] {
    color: #f8fafc !important; /* Tailwind 的 slate-50 亮白色 */
}

/* 2. 特例：如果這個項目 (li) 本身帶有黃色背景，裡面的文字維持深黑色 */
#leaderboardList li[class*="bg-yellow-"] [class*="text-slate-"],
#leaderboardList li[class*="bg-yellow-"] [class*="text-gray-"],
#leaderboardList li[class*="bg-amber-"] [class*="text-slate-"],
#leaderboardList li[class*="bg-amber-"] [class*="text-gray-"] {
    color: #1e293b !important; /* Tailwind 的 slate-800 深黑色 */
}

/* 3. 確保旁邊的排名圖示 (如皇冠、獎牌) 也跟著變色 */
#leaderboardList li[class*="bg-yellow-"] {
    color: #1e293b !important; 
}
#leaderboardList li:not([class*="bg-yellow-"]):not([class*="bg-amber-"]) {
    color: #f8fafc !important;
}
/* =========================================================
   1. 徹底消滅登入卡片內的「死黑方塊」
   ========================================================= */
/* 強制將登入表單內部的 div 容器背景設為透明 */
#loginForm div,
#loginForm label {
    background-color: transparent !important;
}

/* 確保輸入框 (Input) 是半透明，而不是死黑色 */
#loginForm input#username, 
#loginForm input#password {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* 移除最下方「立即註冊」區塊的黑色底色 */
.rounded-2xl > div.mt-6.border-t {
    background-color: transparent !important;
}

/* =========================================================
   2. 修正排行榜非第一名玩家的「深色隱形字」
   ========================================================= */
/* 針對「非黃色背景」的列表項目，強制將裡面所有元素的文字轉為亮白色 */
#leaderboardList li:not([class*="bg-yellow-"]):not([class*="bg-amber-"]) * {
    color: #f8fafc !important; /* 強制覆蓋深灰字體，改為亮白 */
}

/* 稍微提亮 2、3 名卡片本身的底色，讓層次更好看 (可選) */
#leaderboardList li:not([class*="bg-yellow-"]):not([class*="bg-amber-"]) {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 確保第一名（自己）黃色背景內的文字絕對是深色 */
#leaderboardList li[class*="bg-yellow-"] *,
#leaderboardList li[class*="bg-amber-"] * {
    color: #1e293b !important; 
}