/* ================= 閱讀器完整樣式表 (V1內核 + V2配色 + 指定按鈕紅) ================= */

:root {
    /* === 暗色模式 (Dark Mode - 保持 V1 原樣) === */
    --bg-body: #18181b;
    --bg-glass: rgba(24, 24, 27, 0.75);
    --border-glass: rgba(255, 255, 255, 0.08);
    --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.3);
    
    --btn-text-idle: #a1a1aa;
    --btn-text-hover: #ffffff;
    
    --btn-active-bg: rgba(255, 255, 255, 0.1);
    --btn-active-text: #ffffff;
    --btn-active-border: rgba(255, 255, 255, 0.15);
    
    --skeleton-base: #27272a;
    --skeleton-pulse: #18181b;
    
    --capsule-bg: rgba(0, 0, 0, 0.6);
    --capsule-text: #e4e4e7;
    
    --placeholder-bg: #27272a; 
    --placeholder-highlight: #3f3f46;

    /* 模式切換器變量 (暗色模式) */
    --switch-bg: rgba(0, 0, 0, 0.5);
    --switch-border: rgba(255, 255, 255, 0.1);
    --switch-btn-color: #a1a1aa;
    --switch-btn-active-bg: rgba(255, 255, 255, 0.15); /* 暗色模式下為半透明白 */
    --switch-btn-active-color: #ffffff;
    --switch-shadow: none;

    /* 自動滾動菜單背景 */
    --menu-bg: rgba(30, 30, 33, 0.85);
    --menu-border: rgba(255, 255, 255, 0.15);
    
    /* 滑塊樣式 */
    --slider-track: rgba(255, 255, 255, 0.3);
    --slider-thumb: #f4f4f5;
}

/* === 亮色模式 (Light Mode - V2 配色方案) === */
[data-theme="light"] {
    /* 背景：V2 灰色 */
    --bg-body: #dbdbdb;                  
    
    /* 玻璃：V2 深青色 */
    --bg-glass: rgba(30, 41, 45, 0.90); 
    --border-glass: rgba(255, 255, 255, 0.1);   
    --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.15); 
    
    /* 文字適配深色玻璃 */
    --btn-text-idle: #a0aec0;            
    --btn-text-hover: #ffffff;            
    
    /* 普通按鈕激活態 */
    --btn-active-bg: #2b3a3f; 
    --btn-active-text: #f3f5f5;
    --btn-active-border: rgba(255, 255, 255, 0.15);
    
    /* 骨架屏 */
    --skeleton-base: #c4c4c4;            
    --skeleton-pulse: #b0b0b0;            
    
    /* 底部膠囊 */
    --capsule-bg: rgba(43, 58, 63, 0.7); 
    --capsule-text: #f3f5f5;                       
    
    --placeholder-bg: #c4c4c4;
    --placeholder-highlight: #d4d4d8;

    /* === 模式切換器 (右側選項卡) V2 配色 === */
    --switch-bg: rgba(0, 0, 0, 0.25);
    --switch-border: rgba(255, 255, 255, 0.05);       
    --switch-btn-color: #a0aec0;                
    --switch-btn-active-bg: #2b3a3f; /* 激活時為深青色 */           
    --switch-btn-active-color: #ffffff;
    --switch-shadow: inset 0 1px 2px rgba(0,0,0,0.2); 

    /* 自動滾動菜單背景 */
    --menu-bg: rgba(30, 41, 45, 0.85);
    --menu-border: rgba(255, 255, 255, 0.1);

    /* 滑塊軌道 */
    --slider-track: rgba(255, 255, 255, 0.3);
    --slider-thumb: #ffffff;
}

/* ================= 特殊狀態覆蓋 ================= */

/* 1. 自動播放按鈕 (Auto) - 激活狀態強制為【紅色】 */
#btn-auto.is-active {
    background-color: #dc2626 !important; 
    color: #ffffff !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* 2. 模式切換器 (Switcher) - 激活狀態使用【變量】(即 V2 的深青色/V1 的半透明白) */
.switcher-btn.active {
    background-color: var(--switch-btn-active-bg);
    color: var(--switch-btn-active-color);
    box-shadow: var(--switch-shadow);
    font-weight: 600;
}


/* ================= 以下為基礎結構 (無需修改) ================= */

body {
    background-color: var(--bg-body);
    touch-action: manipulation;
    margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body:has(#viewport.mode-vertical) {
    overflow-y: auto !important; height: auto !important; min-height: 100vh; -webkit-overflow-scrolling: touch;
}
body:has(#viewport.mode-vertical) #viewport.mode-vertical {
    overflow: visible !important; height: auto !important; position: static !important; display: block !important;
}
body:has(#viewport.mode-vertical) #content { height: auto !important; }
body:has(#viewport.mode-vertical) #bottom-bar { padding-bottom: env(safe-area-inset-bottom); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

#viewport { width: 100%; height: 100%; position: relative; z-index: 1; outline: none; overflow: hidden; }
#viewport.mode-flip { display: block; }

#btn-s, #btn-d { display: none !important; }
@media (min-width: 640px) { #btn-s { display: block !important; } }
@media (min-width: 768px) { #btn-d { display: block !important; } }

#ad-footer { display: none !important; }
#viewport.mode-vertical #ad-footer { display: flex !important; padding-bottom: 80px; }

#btn-auto { display: none; }
#btn-auto.ready { display: block !important; }

/* 菜單容器 */
#auto-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    margin-top: 18px; z-index: -1;
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-radius: 999px; width: 44px; height: 200px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: top center;
    background-color: var(--menu-bg);
    border: 1px solid var(--menu-border);
}
#auto-menu.show { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%) translateY(0); }

/* 滑塊組件 */
input[type=range] {
    -webkit-appearance: none; transform: rotate(-90deg);
    width: 160px; height: 44px; background: transparent;
    cursor: pointer; touch-action: none;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px; border-radius: 2px;
    background: var(--slider-track);
    pointer-events: auto; 
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; box-sizing: border-box;
    height: 28px; width: 28px; border-radius: 50%; margin-top: -12px;
    background: var(--slider-thumb);
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.1s, box-shadow 0.1s;
}
input[type=range]:active::-webkit-slider-thumb {
    transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* UI 面板 */
.glass-panel {
    background-color: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass); 
    box-shadow: var(--shadow-glass); 
    transition: all 0.4s ease; transform: translateZ(0);
}

.mini-capsule {
    background-color: var(--capsule-bg); backdrop-filter: blur(12px); border: 1px solid var(--border-glass);
    border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.4s ease;
}
.mini-capsule span {
    color: var(--capsule-text); font-family: "Menlo", "Monaco", "Courier New", monospace; transition: color 0.4s ease;
}

.btn-glass {
    background: transparent; color: var(--btn-text-idle); 
    border: 1px solid transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-glass:hover { color: var(--btn-text-hover); background: rgba(255, 255, 255, 0.08); }
.btn-glass.active, .btn-glass.standalone { border: 1px solid var(--border-glass); }
.btn-glass.active {
    background: var(--btn-active-bg); color: var(--btn-active-text); font-weight: 500;
    border-color: var(--btn-active-border);
}

/* 模式切換器 */
#mode-switcher {
    background-color: var(--switch-bg);
    border: 1px solid var(--switch-border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.switcher-btn {
    color: var(--switch-btn-color); background: transparent;
    font-weight: 500; border: 0.5px solid transparent; transition: all 0.3s ease;
}
.switcher-btn:hover { color: var(--switch-btn-active-color); }

/* 加載與動畫 */
.slide-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    will-change: transform, opacity; backface-visibility: hidden; 
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: var(--bg-body); 
}
.mode-vertical .slide-view {
    position: relative; display: flex; flex-direction: column; height: auto; transition: none; background-color: transparent;
}
.img-placeholder {
    width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center;
    background-color: transparent; 
}
.img-placeholder::after {
    content: ""; border: 2px solid rgba(128,128,128,0.1); border-top: 2px solid rgba(128,128,128,0.5);
    border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; z-index: 2;
}
.img-placeholder img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; opacity: 0; transition: opacity 0.3s ease; z-index: 5;
}
.img-placeholder img.obj-right { object-position: right center; }
.img-placeholder img.obj-left { object-position: left center; }
.img-placeholder img.loaded { opacity: 1; }

@keyframes pulse-deep {
    0%, 100% { background-color: var(--skeleton-base); }
    50% { background-color: var(--skeleton-pulse); }
}
.skeleton-box {
    animation: pulse-deep 4s ease-in-out infinite; min-height: 200px;
    display: flex; align-items: center; justify-content: center; border-radius: 4px;
}
.loader {
    border: 2px solid rgba(255, 255, 255, 0.05); border-top: 2px solid #a1a1aa;
    border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.click-zone { z-index: 50; position: fixed; top: 0; bottom: 0; }
#top-bar { z-index: 9999 !important; }
#bottom-bar { z-index: 9990 !important; pointer-events: none; }