:root {
            --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);
            --btn-active-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
            --skeleton-base: #27272a;
            --skeleton-pulse: #18181b;
            --capsule-bg: rgba(0, 0, 0, 0.6);
            --capsule-text: #e4e4e7;
            --placeholder-bg: #27272a; 
            --placeholder-highlight: #3f3f46;
        }

        [data-theme="light"] {
            --bg-body: #dbdbdb;
            --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);
            --btn-active-shadow: none;
            --skeleton-base: #c4c4c4;
            --skeleton-pulse: #b0b0b0;
            --capsule-bg: rgba(43, 58, 63, 0.7);
            --capsule-text: #f3f5f5;
            --placeholder-bg: #c4c4c4;
            --placeholder-highlight: #d4d4d8;
        }

        body {
            background-color: var(--bg-body);
            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);
        }

        .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-vertical {
            overflow-y: auto !important; display: block; -webkit-overflow-scrolling: touch;
        }

        #viewport.mode-flip { display: block; }

        .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;
        }

        @keyframes skeleton-loading {
            0% { background-color: var(--placeholder-bg); }
            50% { background-color: var(--placeholder-highlight); }
            100% { background-color: var(--placeholder-bg); }
        }

        .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; }

        .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; }

        .glass-panel {
            background-color: var(--bg-glass);
            backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%);
            border-bottom: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); transition: all 0.4s ease;
        }

        .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.3); 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.05); }
        .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); box-shadow: var(--btn-active-shadow);
        }

        @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;
        }

        img { opacity: 0; display: block; margin: 0; } 
        .anim-fade { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        img.loaded { opacity: 1; }

        .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); } }