:root {
    /* Default brand colors (科技深藍) */
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-15: rgba(59, 130, 246, 0.15);
}

/* Global Font Override for Simplified Chinese alignment */
body, input, textarea, button, select {
    font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif !important;
}

/* Custom spacing utilities for logo sizes requested by user */
.w-13 { width: 3.25rem !important; }
.h-13 { height: 3.25rem !important; }
.w-15 { width: 3.75rem !important; }
.h-15 { height: 3.75rem !important; }

@media (min-width: 640px) {
    .sm\:w-15 { width: 3.75rem !important; }
    .sm\:h-15 { height: 3.75rem !important; }
}

/* Base override rules using CSS Custom Properties */
.prose strong {
    color: var(--color-brand-400) !important;
}

.prose h2 {
    border-left-color: var(--color-brand-500) !important;
    background: linear-gradient(90deg, var(--color-brand-15) 0%, transparent 100%) !important;
}

.toc-link.active {
    color: var(--color-brand-400) !important;
    border-left-color: var(--color-brand-400) !important;
}

/* Upgrade card golden, purple, blue neon borders override */
.gold-glow {
    --glow-color: #fbbf24;
}

/* Support variable neon theme colors on HUD connections & indicators */
#glow-filter feDropShadow,
.glow-filter feDropShadow {
    flood-color: var(--color-brand-500) !important;
}

/* =========================================================================
   亮色模式 (Light Mode) 樣式覆寫
   ========================================================================= */

html.light body {
    background-color: #f8fafc !important;
    background-image: linear-gradient(rgba(248, 250, 252, 0.94), rgba(248, 250, 252, 0.98)), url('../images/free.webp') !important;
    color: #1e293b !important;
}

/* Hide dark backgrounds on body pseudo-elements in Light Mode */
html.light body::before,
html.light body::after {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
}

/* Overriding Tailwind Backgrounds in Light Mode */
html.light .bg-slate-700,
html.light .bg-slate-750,
html.light .bg-slate-800,
html.light .bg-slate-850,
html.light .bg-slate-900,
html.light .bg-slate-950,
html.light [class*="bg-slate-700/"],
html.light [class*="bg-slate-800/"],
html.light [class*="bg-slate-900/"],
html.light [class*="bg-slate-950/"],
html.light [class*="bg-slate-700\/"],
html.light [class*="bg-slate-800\/"],
html.light [class*="bg-slate-900\/"],
html.light [class*="bg-slate-950\/"],
html.light .bg-dark-800,
html.light .bg-dark-900,
html.light [class*="bg-dark-800/"],
html.light [class*="bg-dark-900/"],
html.light [class*="bg-dark-800\/"],
html.light [class*="bg-dark-900\/"] {
    background-color: rgba(255, 255, 255, 0.85) !important;
    background-image: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: #334155 !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important;
}

/* Strip dark background gradients to reveal overridden light background colors in Light Mode */
html.light [class*="from-slate-"],
html.light [class*="to-slate-"],
html.light [class*="from-dark-"],
html.light [class*="to-dark-"],
html.light [class*="via-amber-950"],
html.light [class*="via-fuchsia-950"] {
    background-image: none !important;
}

/* Global form controls and inputs adjustment in Light Mode */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light textarea,
html.light select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

html.light input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color-scheme: light !important;
}

/* Specific Light Mode overrides for glass-card, main, aside, toc */
html.light .glass-card,
html.light main,
html.light aside,
html.light #desktop-toc,
html.light #mobile-toc-modal > div {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: #334155 !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important;
}

/* Headings and bold text in Light Mode */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
html.light .text-white {
    color: #0f172a !important;
}

/* Restore legitimate white text on colored backgrounds / buttons in Light Mode */
html.light [class*="bg-brand-"].text-white,
html.light [class*="bg-blue-"].text-white,
html.light [class*="bg-emerald-"].text-white,
html.light [class*="bg-green-"].text-white,
html.light [class*="bg-red-"].text-white,
html.light [class*="bg-pink-"].text-white,
html.light [class*="bg-purple-"].text-white,
html.light [class*="bg-indigo-"].text-white,
html.light [class*="bg-amber-"].text-white,
html.light [class*="bg-orange-"].text-white,
html.light [class*="from-"].text-white {
    color: #ffffff !important;
}

html.light .prose p,
html.light .prose li,
html.light .prose ol,
html.light .prose ul {
    color: #334155 !important;
}

html.light .prose strong {
    color: var(--color-brand-600) !important; /* Themeable dark neon/brand color */
}

/* Ensure bold text inside quote blocks harmonizes with warm colors */
html.light .prose blockquote strong {
    color: #b45309 !important; /* amber-700 */
}

/* Text color overrides */
html.light .text-slate-100,
html.light .text-slate-200 {
    color: #1e293b !important;
}

html.light .text-slate-300,
html.light .text-slate-350,
html.light .text-slate-400,
html.light .text-slate-450 {
    color: #334155 !important;
}

html.light .text-slate-500,
html.light .text-slate-600 {
    color: #64748b !important;
}

html.light .text-gray-100,
html.light .text-gray-200,
html.light .text-gray-300,
html.light .text-gray-400 {
    color: #334155 !important;
}

/* Map neon highlight text to darker, highly legible tones in Light Mode */
html.light .text-brand-400,
html.light .text-brand-300 {
    color: var(--color-brand-600) !important;
}

html.light .text-yellow-100,
html.light .text-yellow-200,
html.light .text-yellow-300,
html.light .text-yellow-400,
html.light .text-amber-100,
html.light .text-amber-200,
html.light .text-amber-300,
html.light .text-amber-400 {
    color: #d97706 !important; /* amber-600 */
}

html.light .text-emerald-400,
html.light .text-green-400 {
    color: #059669 !important; /* emerald-600 */
}

html.light .text-pink-400,
html.light .text-fuchsia-400 {
    color: #db2777 !important; /* pink-600 */
}

html.light .text-blue-400,
html.light .text-cyan-400 {
    color: #2563eb !important; /* blue-600 */
}

/* Overriding Tailwind hover backgrounds in Light Mode */
html.light [class*="hover:bg-slate-"]:hover,
html.light [class*="hover:bg-dark-"]:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-700:hover,
html.light .hover\:bg-slate-700\/50:hover,
html.light .hover\:bg-slate-700\/80:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html.light .hover\:text-white:hover {
    color: #0f172a !important;
}

/* Overriding Tailwind borders */
html.light .border-slate-600,
html.light .border-slate-700,
html.light .border-slate-800,
html.light .border-slate-600\/50,
html.light .border-slate-700\/50,
html.light .border-slate-700\/80 {
    border-color: rgba(203, 213, 225, 0.8) !important;
}

/* Navigation bar in Light Mode */
html.light nav {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05) !important;
}

html.light nav a,
html.light nav button,
html.light nav span,
html.light nav i {
    color: #475569 !important;
}

/* Exclude colored nav buttons from being forced to dark gray text */
html.light nav a[class*="bg-blue-"],
html.light nav a[class*="bg-brand-"],
html.light nav a[class*="bg-emerald-"],
html.light nav a[class*="bg-amber-"],
html.light nav a[class*="from-"],
html.light nav button[class*="bg-blue-"],
html.light nav button[class*="bg-brand-"],
html.light nav button[class*="bg-emerald-"],
html.light nav button[class*="bg-amber-"],
html.light nav button[class*="from-"],
html.light nav a[class*="bg-blue-"] *,
html.light nav a[class*="bg-brand-"] *,
html.light nav a[class*="bg-emerald-"] *,
html.light nav a[class*="bg-amber-"] *,
html.light nav a[class*="from-"] *,
html.light nav button[class*="bg-blue-"] *,
html.light nav button[class*="bg-brand-"] *,
html.light nav button[class*="bg-emerald-"] *,
html.light nav button[class*="bg-amber-"] *,
html.light nav button[class*="from-"] * {
    color: #ffffff !important;
}

html.light nav a:hover,
html.light nav button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light #mobile-menu {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
}

html.light footer {
    background-color: #f1f5f9 !important;
    border-top-color: #cbd5e1 !important;
}

html.light footer h3,
html.light footer p {
    color: #334155 !important;
}

/* Search panel in Light Mode */
html.light #search-box {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1) !important;
}

html.light #search-box input {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light #search-results a {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html.light #search-results a:hover {
    border-color: var(--color-brand-500) !important;
}

html.light #search-results p {
    color: #475569 !important;
}

html.light #local-controls {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

html.light #mode-local:not(.bg-brand-600),
html.light #mode-global:not(.bg-brand-600) {
    color: #475569 !important;
}

/* Page visitor counter */
html.light footer #pv_total,
html.light footer #pv_month,
html.light footer #pv_today,
html.light footer #pv_online {
    color: #0f172a !important;
}

html.light footer .bg-slate-800\/60 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* Article code and quote blocks in Light Mode */
html.light .prose code {
    background: #f1f5f9 !important;
    color: #e11d48 !important;
}

html.light .prose blockquote {
    background: rgba(245, 158, 11, 0.05) !important;
    color: #475569 !important;
    border-left-color: #f97316 !important;
}

html.light .toc-link {
    color: #64748b !important;
}

html.light .toc-link:hover {
    color: var(--color-brand-500) !important;
}

html.light .toc-link.active {
    color: var(--color-brand-600) !important;
    border-left-color: var(--color-brand-600) !important;
}

/* Distinct styling for table headers and row grids in Light Mode */
html.light thead,
html.light thead[class*="bg-"] {
    background-color: #f1f5f9 !important;
    background-image: none !important;
}
html.light th {
    color: #0f172a !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
html.light td {
    border-bottom: 1px solid #cbd5e1 !important;
}

/* Dify chat bot modal & Lightbox in Light Mode */
html.light #chatbot-modal > div,
html.light #image-lightbox > div {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* Cloud archive database background and tag correction */
html.light .bg-slate-950/50 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* Ensure settings panel container boxes in Light Mode are styled correctly */
html.light .bg-slate-950\/80 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* Game interface overrides in Light Mode */
html.light .chat-bubble.other {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

html.light .chat-system {
    color: #64748b !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* =========================================================================
   控制中心面板與懸浮介面
   ========================================================================= */

#customizer-panel {
    z-index: 1000;
}

.color-dot.active {
    transform: scale(1.2);
    box-shadow: 0 0 14px var(--glow-color);
}

/* Premium custom slider styling */
#font-size-slider::-webkit-slider-runnable-track {
    background: #334155;
    height: 6px;
    border-radius: 9999px;
}
html.light #font-size-slider::-webkit-slider-runnable-track {
    background: #cbd5e1;
}

#font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-brand-500);
    box-shadow: 0 0 8px var(--color-brand-500);
    cursor: pointer;
    margin-top: -4px;
    transition: transform 0.1s;
}
#font-size-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* =========================================================================
   手機版漢堡選單按鈕地位增強 (中性且精緻的深 Slate 灰風格)
   ========================================================================= */
#mobile-menu-btn.enhanced-menu-btn {
    color: #f1f5f9 !important; /* text-slate-100 */
    background-color: rgba(30, 41, 59, 0.95) !important; /* bg-slate-800/95 */
    border: 1px solid rgba(71, 85, 105, 0.9) !important; /* border-slate-600/90 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
    width: 2.75rem !important; /* 相等於 w-11 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mobile-menu-btn.enhanced-menu-btn:hover {
    background-color: rgba(51, 65, 85, 0.95) !important; /* hover:bg-slate-700/95 */
    color: #ffffff !important;
    border-color: rgba(100, 116, 139, 0.9) !important;
}

/* 亮色模式覆寫 */
html.light #mobile-menu-btn.enhanced-menu-btn {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(203, 213, 225, 0.95) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

html.light #mobile-menu-btn.enhanced-menu-btn:hover {
    background-color: rgba(241, 245, 249, 0.95) !important;
    color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.9) !important;
}

/* =========================================================================
   字體大小個人化微調 (Font Size Personalization Scaling)
   ========================================================================= */

:root {
    --text-scale: 1.0;
}

/* Ensure the body base font size scales dynamically */
body {
    font-size: calc(1rem * var(--text-scale, 1)) !important;
}

/* Force lock navigation bar, desktop customizer panel, and entrance loader to standard size */
nav, nav *,
#customizer-panel, #customizer-panel *,
#entrance-loader, #entrance-loader * {
    --text-scale: 1.0 !important;
}

nav {
    font-size: 16px !important;
}

#customizer-panel {
    font-size: 16px !important;
}

#entrance-loader {
    font-size: 16px !important;
}

/* Override Tailwind CSS typography classes with scaling factor and line-heights */
.text-xs {
    font-size: calc(0.75rem * var(--text-scale, 1)) !important;
    line-height: calc(1rem * var(--text-scale, 1)) !important;
}
.text-sm {
    font-size: calc(0.875rem * var(--text-scale, 1)) !important;
    line-height: calc(1.25rem * var(--text-scale, 1)) !important;
}
.text-base {
    font-size: calc(1rem * var(--text-scale, 1)) !important;
    line-height: calc(1.5rem * var(--text-scale, 1)) !important;
}
.text-lg {
    font-size: calc(1.125rem * var(--text-scale, 1)) !important;
    line-height: calc(1.75rem * var(--text-scale, 1)) !important;
}
.text-xl {
    font-size: calc(1.25rem * var(--text-scale, 1)) !important;
    line-height: calc(1.75rem * var(--text-scale, 1)) !important;
}
.text-2xl {
    font-size: calc(1.5rem * var(--text-scale, 1)) !important;
    line-height: calc(2rem * var(--text-scale, 1)) !important;
}
.text-3xl {
    font-size: calc(1.875rem * var(--text-scale, 1)) !important;
    line-height: calc(2.25rem * var(--text-scale, 1)) !important;
}
.text-4xl {
    font-size: calc(2.25rem * var(--text-scale, 1)) !important;
    line-height: calc(2.5rem * var(--text-scale, 1)) !important;
}
.text-5xl {
    font-size: calc(3rem * var(--text-scale, 1)) !important;
    line-height: 1 !important;
}
.text-6xl {
    font-size: calc(3.75rem * var(--text-scale, 1)) !important;
    line-height: 1 !important;
}
.text-7xl {
    font-size: calc(4.5rem * var(--text-scale, 1)) !important;
    line-height: 1 !important;
}

/* Arbitrary pixel sizes used in pages outside navigation bar */
.text-\[8px\] { font-size: calc(8px * var(--text-scale, 1)) !important; }
.text-\[9px\] { font-size: calc(9px * var(--text-scale, 1)) !important; }
.text-\[10px\] { font-size: calc(10px * var(--text-scale, 1)) !important; }
.text-\[11px\] { font-size: calc(11px * var(--text-scale, 1)) !important; }
.text-\[12px\] { font-size: calc(12px * var(--text-scale, 1)) !important; }

/* Scale base content elements in .prose blocks */
.prose h1 { font-size: calc(2.25rem * var(--text-scale, 1)) !important; }
.prose h2 { font-size: calc(1.5rem * var(--text-scale, 1)) !important; }
.prose h3 { font-size: calc(1.25rem * var(--text-scale, 1)) !important; }
.prose p { font-size: calc(1.05rem * var(--text-scale, 1)) !important; }
.prose li { font-size: calc(1rem * var(--text-scale, 1)) !important; }
.prose ul { font-size: calc(1rem * var(--text-scale, 1)) !important; }
.prose ol { font-size: calc(1rem * var(--text-scale, 1)) !important; }

/* =========================================================================
   電腦版導覽列元件與字體放大優化 (Desktop Navigation Font & Spacing Optimization)
   ========================================================================= */

@media (min-width: 1024px) {
    /* 1. Logo 品牌文字放大 */
    nav a span.text-\[28px\], 
    nav a span.md\:text-3xl {
        font-size: 32px !important;
    }
    nav a span.text-\[14px\], 
    nav a span.md\:text-\[1\.6vw\] {
        font-size: 18px !important;
    }

    /* 2. 頂部主導覽連結與下拉按鈕字體放大 */
    nav div.hidden.lg\:flex > a,
    nav div.hidden.lg\:flex > div > button {
        font-size: 15.5px !important;
        font-weight: 700 !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    /* 3. 下拉選單內部連結字體與高度優化 */
    nav .absolute a {
        font-size: 15px !important;
        font-weight: 600 !important;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }

    /* 4. 右側功能性按鈕 (檔案庫、智能顧問、公告) 字體與圖示放大 */
    nav a[title="專屬檔案庫"] span,
    nav a[title="自由智能顧問"] span,
    #announcement-nav-btn span {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    nav a[title="專屬檔案庫"] i,
    nav a[title="自由智能顧問"] i,
    #announcement-nav-btn i {
        font-size: 15.5px !important;
    }
}

/* =========================================================================
   自訂滾動條樣式 (Custom Scrollbar Styling for TOC & Modals)
   ========================================================================= */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3) !important;
    border-radius: 9999px !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6) !important;
}