/* 特采系统主样式文件 */
/* 从 SPSV29.html 提取 */

        /* 下拉箭頭旋轉動畫 */
        .dropdown-arrow { transition: transform 0.18s ease; display: inline-block; }
        .dropdown-arrow.rotated { transform: rotate(180deg); }
        /* 基礎變數定義 */
        :root {
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --shadow-light: 0 1px 3px rgba(0,0,0,0.1);
            --shadow-normal: 0 4px 6px rgba(0,0,0,0.1);
            --border-radius: 0.5rem;
        }

        @keyframes cartItemAddPop {
            0% { transform: scale(0.94); background-color: rgba(59,130,246,0.18); }
            55% { transform: scale(1.04); background-color: rgba(59,130,246,0.08); }
            100% { transform: scale(1); background-color: transparent; }
        }

        @keyframes cartItemPulse {
            0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.35); }
            100% { box-shadow: 0 0 0 0.65rem rgba(59,130,246,0); }
        }

        @keyframes cartItemRemove {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.92); }
        }

        /* 飛飛果凍效果 - 彈跳落地 */
        @keyframes jellyBounce {
            0% { transform: scale(0.3) translateY(-20px); opacity: 0; }
            20% { transform: scale(1.15, 0.85) translateY(0); opacity: 1; }
            35% { transform: scale(0.9, 1.1) translateY(-8px); }
            50% { transform: scale(1.08, 0.92) translateY(0); }
            65% { transform: scale(0.97, 1.03) translateY(-3px); }
            80% { transform: scale(1.02, 0.98) translateY(0); }
            100% { transform: scale(1) translateY(0); }
        }

        /* 夾夾果凍效果 - 擠壓釋放 */
        @keyframes jellySquish {
            0% { transform: scale(0.5, 1.3); opacity: 0.5; }
            15% { transform: scale(1.25, 0.75); opacity: 1; }
            30% { transform: scale(0.85, 1.15); }
            45% { transform: scale(1.1, 0.9); }
            60% { transform: scale(0.95, 1.05); }
            75% { transform: scale(1.03, 0.97); }
            100% { transform: scale(1, 1); }
        }

        /* 貓車果凍效果 - 翻滾彈跳 */
        @keyframes jellyRoll {
            0% { transform: scale(0.6) rotate(-15deg); opacity: 0; }
            20% { transform: scale(1.1) rotate(10deg); opacity: 1; }
            35% { transform: scale(0.95) rotate(-8deg); }
            50% { transform: scale(1.05) rotate(5deg); }
            65% { transform: scale(0.98) rotate(-3deg); }
            80% { transform: scale(1.02) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        .cart-item-animate-add {
            animation: cartItemAddPop 0.55s cubic-bezier(0.16,1,0.3,1);
        }

        .cart-item-animate-quantity {
            animation: cartItemPulse 0.45s ease-out;
        }

        .cart-item-animate-remove {
            animation: cartItemRemove 0.3s ease-in forwards;
            pointer-events: none;
        }

        .cart-item-jelly-fly {
            animation: jellyBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .cart-item-jelly-claw {
            animation: jellySquish 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .cart-item-jelly-cat {
            animation: jellyRoll 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* 商品項目 li 的果凍效果 */
        [data-cart-item-id] {
            transform-origin: center center;
        }

        [data-cart-item-id].jelly-fly {
            animation: jellyBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        [data-cart-item-id].jelly-claw {
            animation: jellySquish 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        [data-cart-item-id].jelly-cat {
            animation: jellyRoll 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .cart-flight-ghost {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            border-radius: 0.75rem;
            background-color: #ffffff;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: 0 12px 24px rgba(30, 41, 59, 0.28);
            transform-origin: center;
        }

        /* 夾娃娃動畫樣式 */
        .claw-machine-container {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
        }
        .claw-arm {
            position: absolute;
            width: 8px;
            background: linear-gradient(to bottom, #6b7280, #9ca3af);
            border-radius: 4px;
            transform-origin: top center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        .claw-grabber {
            position: absolute;
            width: 60px;
            height: 30px;
            display: flex;
            justify-content: space-between;
        }
        .claw-finger {
            width: 12px;
            height: 30px;
            background: linear-gradient(to bottom, #f59e0b, #d97706);
            border-radius: 0 0 6px 6px;
            transform-origin: top center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            transition: transform 0.3s ease-out;
        }
        .claw-finger.left { transform: rotate(25deg); }
        .claw-finger.right { transform: rotate(-25deg); }
        .claw-finger.grabbing.left { transform: rotate(5deg); }
        .claw-finger.grabbing.right { transform: rotate(-5deg); }
        .claw-target-ghost {
            position: fixed;
            z-index: 9998;
            pointer-events: none;
            border-radius: 0.75rem;
            background-color: #ffffff;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: 0 8px 20px rgba(30, 41, 59, 0.35);
            transform-origin: center;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .claw-target-ghost.grabbed {
            animation: clawShake 0.15s ease-in-out 2;
        }
        @keyframes clawShake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-3deg); }
            75% { transform: rotate(3deg); }
        }

        /* 購物效果按鈕樣式 */
        .cart-effect-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 0.375rem;
            transition: all 0.2s ease;
            cursor: pointer;
            border: 1px solid;
        }
        .cart-effect-btn.active {
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }
        .cart-effect-btn-fly {
            background-color: #dbeafe;
            color: #1d4ed8;
            border-color: #93c5fd;
        }
        .cart-effect-btn-fly:hover { background-color: #bfdbfe; }
        .cart-effect-btn-fly.active { background-color: #3b82f6; color: white; border-color: #2563eb; }
        .cart-effect-btn-claw {
            background-color: #fef3c7;
            color: #b45309;
            border-color: #fcd34d;
        }
        .cart-effect-btn-claw:hover { background-color: #fde68a; }
        .cart-effect-btn-claw.active { background-color: #f59e0b; color: white; border-color: #d97706; }
        .cart-effect-btn-cat {
            background-color: #fce7f3;
            color: #be185d;
            border-color: #f9a8d4;
        }
        .cart-effect-btn-cat:hover { background-color: #fbcfe8; }
        .cart-effect-btn-cat.active { background-color: #ec4899; color: white; border-color: #db2777; }

        /* 貓車動畫樣式 */
        .cat-cart-container {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .cat-cart {
            width: 120px;
            height: 80px;
            position: relative;
        }
        .cat-cart-body {
            position: absolute;
            bottom: 12px;
            left: 10px;
            width: 100px;
            height: 40px;
            background: linear-gradient(to bottom, #8b5a2b, #654321);
            border-radius: 8px 8px 4px 4px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        .cat-cart-body::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 5px;
            right: 5px;
            height: 10px;
            background: linear-gradient(to bottom, #a0522d, #8b5a2b);
            border-radius: 4px 4px 0 0;
        }
        .cat-cart-wheel {
            position: absolute;
            bottom: 0;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, #4a4a4a, #2a2a2a);
            border-radius: 50%;
            border: 3px solid #5a5a5a;
        }
        .cat-cart-wheel.left { left: 15px; }
        .cat-cart-wheel.right { right: 15px; }
        .cat-cart-wheel::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background: #888;
            border-radius: 50%;
        }
        .cat-driver {
            position: absolute;
            bottom: 45px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 35px;
        }
        .cat-head {
            width: 30px;
            height: 28px;
            background: radial-gradient(ellipse at center, #f5deb3, #deb887);
            border-radius: 50% 50% 45% 45%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .cat-ear {
            position: absolute;
            top: -6px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 10px solid #deb887;
        }
        .cat-ear.left { left: 2px; transform: rotate(-15deg); }
        .cat-ear.right { right: 2px; transform: rotate(15deg); }
        .cat-ear::after {
            content: '';
            position: absolute;
            top: 4px;
            left: -3px;
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-bottom: 5px solid #ffb6c1;
        }
        .cat-face {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 12px;
        }
        .cat-eye {
            position: absolute;
            top: 0;
            width: 6px;
            height: 6px;
            background: #2a2a2a;
            border-radius: 50%;
        }
        .cat-eye.left { left: 0; }
        .cat-eye.right { right: 0; }
        .cat-eye::after {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
        }
        .cat-nose {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 4px solid #ffb6c1;
        }
        .cat-cart-cargo {
            position: absolute;
            bottom: 52px;
            left: 50%;
            transform: translateX(-50%);
            width: 48px;
            height: 48px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .cat-cart-cargo.loaded {
            opacity: 1;
        }
        .cat-cart-container.driving {
            animation: catCartBounce 0.15s ease-in-out infinite;
        }
        @keyframes catCartBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        .cat-cart-container.dumping .cat-cart {
            animation: catCartDump 0.5s ease-out forwards;
        }
        @keyframes catCartDump {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(-25deg); }
            100% { transform: rotate(0deg); }
        }
        .cat-cart-cargo.dumping {
            animation: cargoDump 0.5s ease-out forwards;
        }
        @keyframes cargoDump {
            0% { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 1; }
            50% { transform: translateX(-30%) translateY(20px) rotate(-15deg); opacity: 0.8; }
            100% { transform: translateX(-50%) translateY(40px) rotate(0deg); opacity: 0; }
        }

        /* 黑洞吸入動畫樣式 */
        .blackhole-container {
            position: fixed;
            z-index: 10000;
            pointer-events: none;
            width: 120px;
            height: 120px;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .blackhole-container.active {
            opacity: 1;
        }
        .blackhole-core {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, #000000 0%, #1a1a2e 40%, transparent 70%);
            border-radius: 50%;
            box-shadow: 0 0 40px 10px rgba(138, 43, 226, 0.6),
                        inset 0 0 20px 5px rgba(75, 0, 130, 0.8);
            animation: blackholePulse 1s ease-in-out infinite;
        }
        @keyframes blackholePulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
                box-shadow: 0 0 40px 10px rgba(138, 43, 226, 0.6),
                            inset 0 0 20px 5px rgba(75, 0, 130, 0.8);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
                box-shadow: 0 0 60px 15px rgba(138, 43, 226, 0.8),
                            inset 0 0 30px 8px rgba(75, 0, 130, 1);
            }
        }
        .blackhole-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px solid rgba(138, 43, 226, 0.4);
            animation: blackholeRotate 2s linear infinite;
        }
        .blackhole-ring.ring-1 {
            width: 80px;
            height: 80px;
            animation-duration: 1.5s;
        }
        .blackhole-ring.ring-2 {
            width: 100px;
            height: 100px;
            animation-duration: 2s;
            animation-direction: reverse;
        }
        .blackhole-ring.ring-3 {
            width: 120px;
            height: 120px;
            animation-duration: 2.5s;
        }
        @keyframes blackholeRotate {
            0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.6; }
            50% { transform: translate(-50%, -50%) rotate(180deg) scale(0.95); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); opacity: 0.6; }
        }
        .blackhole-ghost {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: left 0.8s cubic-bezier(0.6, 0, 0.4, 1),
                        top 0.8s cubic-bezier(0.6, 0, 0.4, 1),
                        opacity 0.4s ease;
        }
        .blackhole-ghost.sucking {
            animation: blackholeDistort 0.8s cubic-bezier(0.6, 0, 0.4, 1);
            filter: blur(2px);
        }
        @keyframes blackholeDistort {
            0% {
                transform: scale(1, 1) rotate(0deg);
                filter: blur(0px) brightness(1);
            }
            30% {
                transform: scale(0.6, 1.5) rotate(15deg);
                filter: blur(3px) brightness(1.2);
            }
            60% {
                transform: scale(1.2, 0.4) rotate(-10deg);
                filter: blur(5px) brightness(0.8);
            }
            100% {
                transform: scale(0.2, 0.2) rotate(720deg);
                filter: blur(8px) brightness(0.4);
            }
        }

        /* 爆發高亮黯淡動畫樣式 */
        .burst-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0);
            z-index: 9998;
            pointer-events: none;
            transition: background 0.3s ease;
        }
        .burst-overlay.active {
            background: rgba(0, 0, 0, 0.7);
        }
        .burst-ghost {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
            transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                        top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                        opacity 0.4s ease;
        }
        .burst-ghost.bursting {
            animation: burstEffect 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes burstEffect {
            0% {
                transform: scale(1) rotate(0deg);
                box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
                filter: brightness(1);
            }
            50% {
                transform: scale(2.5) rotate(180deg);
                box-shadow: 0 0 80px 20px rgba(255, 215, 0, 1),
                            0 0 120px 40px rgba(255, 165, 0, 0.8);
                filter: brightness(1.8) saturate(1.5);
            }
            100% {
                transform: scale(2) rotate(360deg);
                box-shadow: 0 0 60px 15px rgba(255, 215, 0, 0.9),
                            0 0 100px 30px rgba(255, 165, 0, 0.7);
                filter: brightness(1.5) saturate(1.3);
            }
        }
        .burst-ghost.flying {
            animation: burstShrink 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        @keyframes burstShrink {
            0% {
                transform: scale(2) rotate(360deg);
                box-shadow: 0 0 60px 15px rgba(255, 215, 0, 0.9);
                filter: brightness(1.5);
            }
            100% {
                transform: scale(0.5) rotate(720deg);
                box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
                filter: brightness(1);
            }
        }

        /* 果凍效果 - 黑洞 */
        @keyframes jellyBlackhole {
            0% { transform: scale(0.2) rotate(720deg); opacity: 0; filter: blur(8px); }
            20% { transform: scale(1.3, 0.7) rotate(0deg); opacity: 1; filter: blur(2px); }
            35% { transform: scale(0.8, 1.2) rotate(-5deg); filter: blur(0px); }
            50% { transform: scale(1.15, 0.85) rotate(3deg); }
            65% { transform: scale(0.95, 1.05) rotate(-2deg); }
            80% { transform: scale(1.03, 0.97) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); filter: blur(0px); }
        }
        [data-cart-item-id].jelly-blackhole {
            animation: jellyBlackhole 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* 果凍效果 - 爆發 */
        @keyframes jellyBurst {
            0% { transform: scale(0.5) rotate(720deg); opacity: 0; filter: brightness(2); }
            20% { transform: scale(1.4, 0.6) rotate(0deg); opacity: 1; filter: brightness(1.3); }
            35% { transform: scale(0.7, 1.3) rotate(-8deg); filter: brightness(1.1); }
            50% { transform: scale(1.2, 0.8) rotate(5deg); filter: brightness(1); }
            65% { transform: scale(0.9, 1.1) rotate(-3deg); }
            80% { transform: scale(1.05, 0.95) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
        }
        [data-cart-item-id].jelly-burst {
            animation: jellyBurst 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* 液態果凍效果 - 水滴融合彈動 */
        @keyframes jellyLiquid {
            0% { transform: scale(1) translateY(0); border-radius: 0.75rem; }
            15% { transform: scale(0.9, 1.15) translateY(-5px); border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
            30% { transform: scale(1.1, 0.9) translateY(0); border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }
            45% { transform: scale(0.95, 1.05); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
            60% { transform: scale(1.08, 0.95); }
            75% { transform: scale(0.98, 1.02); }
            100% { transform: scale(1) translateY(0); border-radius: 0.75rem; }
        }
        [data-cart-item-id].jelly-liquid {
            animation: jellyLiquid 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* 傳送門果凍效果 - 像素重組 */
        @keyframes jellyTeleport {
            0% { transform: scale(0.3); opacity: 0; filter: blur(5px) hue-rotate(0deg); }
            20% { transform: scale(1.15); opacity: 0.7; filter: blur(2px) hue-rotate(90deg); }
            40% { transform: scale(0.95); opacity: 1; filter: blur(0) hue-rotate(180deg); }
            60% { transform: scale(1.05); filter: hue-rotate(270deg); }
            80% { transform: scale(0.98); filter: hue-rotate(360deg); }
            100% { transform: scale(1); opacity: 1; filter: blur(0) hue-rotate(0deg); }
        }
        [data-cart-item-id].jelly-teleport {
            animation: jellyTeleport 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* 打包箱果凍效果 - 落地彈跳 */
        @keyframes jellyPackage {
            0% { transform: scale(0.5) translateY(-30px); }
            25% { transform: scale(1.1, 0.9) translateY(0); }
            40% { transform: scale(0.9, 1.1) translateY(-10px); }
            55% { transform: scale(1.05, 0.95) translateY(0); }
            70% { transform: scale(0.98, 1.02) translateY(-3px); }
            85% { transform: scale(1.01, 0.99) translateY(0); }
            100% { transform: scale(1) translateY(0); }
        }
        [data-cart-item-id].jelly-package {
            animation: jellyPackage 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* 抽離果凍效果 - 染色波動 */
        @keyframes jellyColorDrain {
            0% { transform: scale(1); filter: grayscale(100%); }
            30% { transform: scale(1.1); filter: grayscale(50%) saturate(1.5); }
            50% { transform: scale(0.95); filter: grayscale(0%) saturate(2); }
            70% { transform: scale(1.03); filter: saturate(1.2); }
            100% { transform: scale(1); filter: saturate(1); }
        }
        [data-cart-item-id].jelly-colordrain {
            animation: jellyColorDrain 0.7s ease-out;
        }

        /* 忍者果凍效果 - 閃現 */
        @keyframes jellyNinja {
            0% { transform: scale(0) rotate(-180deg); opacity: 0; }
            30% { transform: scale(1.2) rotate(0deg); opacity: 1; box-shadow: 0 0 30px rgba(251, 191, 36, 0.8); }
            50% { transform: scale(0.9) rotate(5deg); box-shadow: 0 0 15px rgba(251, 191, 36, 0.4); }
            70% { transform: scale(1.05) rotate(-3deg); box-shadow: none; }
            85% { transform: scale(0.98) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        [data-cart-item-id].jelly-ninja {
            animation: jellyNinja 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* 購物效果下拉選單樣式 */
        .cart-effect-dropdown {
            position: relative;
            display: inline-block;
            z-index: 100;
        }
        .cart-effect-dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 600;
            border-radius: 0.5rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        .cart-effect-dropdown-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
        }
        .cart-effect-dropdown-toggle svg {
            transition: transform 0.3s ease;
        }
        .cart-effect-dropdown.open .cart-effect-dropdown-toggle svg.dropdown-chevron {
            transform: rotate(180deg);
        }
        .cart-effect-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 0.5rem;
            min-width: 180px;
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
            overflow: hidden;
        }
        .cart-effect-dropdown.open .cart-effect-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .cart-effect-dropdown.open {
            z-index: 9999;
        }
        /* 當下拉選單開啟時，提升 sticky header 的 z-index，確保不被 sidebar-pane 覆蓋 */
        #newRequest-view > div.sticky:has(.cart-effect-dropdown.open) {
            z-index: 100 !important;
        }
        .cart-effect-dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: none;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }
        .cart-effect-dropdown-item:hover {
            background-color: #f3f4f6;
        }
        .cart-effect-dropdown-item.active {
            background-color: #eff6ff;
            color: #2563eb;
        }
        .cart-effect-dropdown-item .effect-icon {
            width: 32px;
            height: 32px;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-effect-dropdown-item .effect-icon.fly { background-color: #dbeafe; color: #2563eb; }
        .cart-effect-dropdown-item .effect-icon.claw { background-color: #fef3c7; color: #d97706; }
        .cart-effect-dropdown-item .effect-icon.cat { background-color: #fce7f3; color: #db2777; }
        .cart-effect-dropdown-item .effect-icon.blackhole { background-color: #1e1b4b; color: #a78bfa; }
        .cart-effect-dropdown-item .effect-icon.burst { background-color: #fef9c3; color: #ca8a04; }
        .cart-effect-dropdown-item .effect-icon.liquid { background-color: #e0f2fe; color: #0ea5e9; }
        .cart-effect-dropdown-item .effect-icon.teleport { background-color: #f0fdf4; color: #22c55e; }
        .cart-effect-dropdown-item .effect-icon.package { background-color: #fef3c7; color: #d97706; }
        .cart-effect-dropdown-item .effect-icon.colordrain { background: linear-gradient(135deg, #fecaca 0%, #bfdbfe 50%, #d9f99d 100%); color: #374151; }
        .cart-effect-dropdown-item .effect-icon.ninja { background-color: #1f2937; color: #fbbf24; }

        /* 液態動畫樣式 */
        .liquid-ghost {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transform-origin: center;
            filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.8));
        }
        @keyframes liquidMorph {
            0% { border-radius: 0.75rem; filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.8)) hue-rotate(0deg); }
            20% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; filter: drop-shadow(0 0 35px rgba(14, 165, 233, 1)) hue-rotate(30deg); }
            40% { border-radius: 30% 70% 70% 30% / 60% 30% 70% 40%; filter: drop-shadow(0 0 45px rgba(59, 130, 246, 1)) hue-rotate(60deg); }
            60% { border-radius: 60% 40% 30% 70% / 40% 70% 30% 60%; filter: drop-shadow(0 0 40px rgba(99, 102, 241, 1)) hue-rotate(90deg); }
            80% { border-radius: 40% 60% 60% 40% / 70% 40% 60% 30%; filter: drop-shadow(0 0 30px rgba(14, 165, 233, 0.9)) hue-rotate(45deg); }
            100% { border-radius: 0.75rem; filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.8)) hue-rotate(0deg); }
        }
        .liquid-merge-target {
            position: fixed;
            z-index: 9998;
            pointer-events: none;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(14, 165, 233, 0.6) 0%, rgba(59, 130, 246, 0.4) 40%, transparent 70%);
            animation: liquidTargetPulse 0.7s ease-out;
            box-shadow: 0 0 60px rgba(14, 165, 233, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.3);
        }
        @keyframes liquidTargetPulse {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
        }
        /* 液態水滴軌跡 */
        .liquid-droplet {
            position: fixed;
            z-index: 9997;
            pointer-events: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(14, 165, 233, 0.8));
            box-shadow: 0 0 20px rgba(14, 165, 233, 0.9);
            animation: liquidDropletFall 0.6s ease-out forwards;
        }
        @keyframes liquidDropletFall {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0.3) translateY(40px); opacity: 0; }
        }

        /* 傳送門動畫樣式 */
        .teleport-ghost {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 0.75rem;
            transform-origin: center;
            filter: drop-shadow(0 0 25px rgba(139, 92, 246, 0.9));
        }
        .teleport-vortex {
            position: fixed;
            z-index: 9998;
            pointer-events: none;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #22c55e, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #22c55e);
            animation: teleportVortexSpin 0.4s linear infinite;
            box-shadow: 0 0 50px rgba(139, 92, 246, 0.9), 0 0 100px rgba(59, 130, 246, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.4);
        }
        @keyframes teleportVortexSpin {
            from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
            50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); }
            to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
        }
        /* 傳送門粒子效果 */
        .teleport-particle {
            position: fixed;
            z-index: 9997;
            pointer-events: none;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            animation: teleportParticleSpin 0.8s ease-out forwards;
        }
        @keyframes teleportParticleSpin {
            0% { transform: rotate(0deg) translateX(0) scale(1); opacity: 1; }
            100% { transform: rotate(720deg) translateX(80px) scale(0); opacity: 0; }
        }
        /* 傳送門光環 */
        .teleport-ring {
            position: fixed;
            z-index: 9996;
            pointer-events: none;
            border-radius: 50%;
            border: 3px solid;
            border-color: #8b5cf6 #3b82f6 #22c55e #ec4899;
            animation: teleportRingExpand 0.6s ease-out forwards;
        }
        @keyframes teleportRingExpand {
            0% { transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(2.5) rotate(180deg); opacity: 0; }
        }

        /* 打包箱動畫樣式 */
        .package-container {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
        }
        .package-box {
            position: absolute;
            background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #92400e 100%);
            border-radius: 6px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
            border: 2px solid #92400e;
        }
        .package-box::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #92400e;
            transform: translateY(-50%);
        }
        .package-tape {
            position: absolute;
            background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        /* 打包箱彈跳軌跡 */
        .package-trail {
            position: fixed;
            z-index: 9998;
            pointer-events: none;
            width: 30px;
            height: 30px;
            background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%);
            border-radius: 50%;
            animation: packageTrailFade 0.4s ease-out forwards;
        }
        @keyframes packageTrailFade {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }
        /* 打包箱星星效果 */
        .package-star {
            position: fixed;
            z-index: 9997;
            pointer-events: none;
            font-size: 20px;
            animation: packageStarPop 0.5s ease-out forwards;
        }
        @keyframes packageStarPop {
            0% { transform: scale(0) rotate(0deg); opacity: 1; }
            50% { transform: scale(1.5) rotate(180deg); opacity: 1; }
            100% { transform: scale(0.5) rotate(360deg) translateY(-30px); opacity: 0; }
        }

        /* 抽離動畫樣式 */
        .colordrain-ghost {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 0.75rem;
            transform-origin: center;
            filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.4));
        }
        .colordrain-colors {
            position: fixed;
            z-index: 9998;
            pointer-events: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            animation: colordrainFly 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        @keyframes colordrainFly {
            0% { transform: scale(1) rotate(0deg); opacity: 1; }
            30% { transform: scale(1.5) rotate(90deg); opacity: 1; }
            100% { transform: scale(0.3) rotate(360deg) translateY(60px); opacity: 0; }
        }
        /* 抽離光線效果 */
        .colordrain-beam {
            position: fixed;
            z-index: 9997;
            pointer-events: none;
            width: 4px;
            height: 100px;
            background: linear-gradient(to bottom, transparent, currentColor, transparent);
            animation: colordrainBeam 0.4s ease-out forwards;
        }
        @keyframes colordrainBeam {
            0% { transform: scaleY(0); opacity: 1; }
            50% { transform: scaleY(1); opacity: 0.8; }
            100% { transform: scaleY(0.5) translateY(50px); opacity: 0; }
        }
        /* 抽離殘影 */
        .colordrain-afterimage {
            position: fixed;
            z-index: 9996;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            border-radius: 0.75rem;
            animation: colordrainAfterimage 0.5s ease-out forwards;
        }
        @keyframes colordrainAfterimage {
            0% { transform: scale(1); opacity: 0.6; filter: blur(0); }
            100% { transform: scale(1.3); opacity: 0; filter: blur(10px); }
        }

        /* 忍者動畫樣式 */
        .ninja-ghost {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 0.75rem;
            transform-origin: center;
            filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6));
        }
        .ninja-smoke {
            position: fixed;
            z-index: 9998;
            pointer-events: none;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(30, 30, 30, 0.9) 0%, rgba(60, 60, 60, 0.6) 40%, transparent 70%);
            animation: ninjaSmokeExpand 0.5s ease-out forwards;
        }
        @keyframes ninjaSmokeExpand {
            0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(2) rotate(180deg); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(4) rotate(360deg); opacity: 0; }
        }
        .ninja-log {
            position: fixed;
            z-index: 9997;
            pointer-events: none;
            width: 50px;
            height: 70px;
            background: linear-gradient(90deg, #5d3a1a 0%, #8b4513 30%, #a0522d 50%, #8b4513 70%, #5d3a1a 100%);
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 -5px 10px rgba(0,0,0,0.3);
            animation: ninjaLogAppear 0.3s ease-out;
        }
        .ninja-log::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 20%;
            width: 60%;
            height: 80%;
            border-radius: 50%;
            background: radial-gradient(ellipse, #6b4423 0%, transparent 70%);
        }
        @keyframes ninjaLogAppear {
            0% { transform: scale(0) rotate(-45deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(10deg); opacity: 1; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        .ninja-flash {
            position: fixed;
            z-index: 10000;
            pointer-events: none;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(251, 191, 36, 1) 0%, rgba(251, 146, 60, 0.8) 30%, transparent 70%);
            animation: ninjaFlash 0.4s ease-out forwards;
            box-shadow: 0 0 60px rgba(251, 191, 36, 1), 0 0 120px rgba(251, 146, 60, 0.8);
        }
        @keyframes ninjaFlash {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            30% { transform: translate(-50%, -50%) scale(2); opacity: 1; }
            60% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.7; }
            100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
        }
        /* 忍者手裏劍 */
        .ninja-shuriken {
            position: fixed;
            z-index: 9996;
            pointer-events: none;
            width: 30px;
            height: 30px;
            animation: ninjaShurikenSpin 0.4s linear forwards;
        }
        .ninja-shuriken::before {
            content: '✦';
            font-size: 30px;
            color: #374151;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
        @keyframes ninjaShurikenSpin {
            0% { transform: rotate(0deg) scale(1); opacity: 1; }
            100% { transform: rotate(1080deg) scale(0.3) translateX(100px); opacity: 0; }
        }
        /* 忍者殘影 */
        .ninja-afterimage {
            position: fixed;
            z-index: 9995;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            border-radius: 0.75rem;
            filter: brightness(0) opacity(0.4);
            animation: ninjaAfterimage 0.3s ease-out forwards;
        }
        @keyframes ninjaAfterimage {
            0% { transform: scale(1); opacity: 0.5; }
            100% { transform: scale(1.1) translateX(20px); opacity: 0; }
        }

        /* ========== 增強動畫效果 ========== */
        
        /* 飛飛速度線動畫 */
        @keyframes flySpeedLine {
            0% { transform: rotate(var(--angle, 0)) scaleY(0); opacity: 1; }
            50% { transform: rotate(var(--angle, 0)) scaleY(1); opacity: 0.8; }
            100% { transform: rotate(var(--angle, 0)) scaleY(0.3) translateY(50px); opacity: 0; }
        }
        @keyframes flyGlowParticle {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            50% { transform: translate(calc(-50% + cos(var(--angle, 0)) * 40px), calc(-50% + sin(var(--angle, 0)) * 40px)) scale(1.5); opacity: 0.8; }
            100% { transform: translate(calc(-50% + cos(var(--angle, 0)) * 80px), calc(-50% + sin(var(--angle, 0)) * 80px)) scale(0.5); opacity: 0; }
        }
        
        /* 夾夾樂金幣爆發 */
        @keyframes clawCoinBurst {
            0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
            50% { transform: translate(calc(-50% + cos(var(--angle, 0)) * 50px), calc(-50% + sin(var(--angle, 0)) * 50px)) scale(1.3) rotate(180deg); opacity: 1; }
            100% { transform: translate(calc(-50% + cos(var(--angle, 0)) * 100px), calc(-50% + sin(var(--angle, 0)) * 100px - 30px)) scale(0.5) rotate(360deg); opacity: 0; }
        }
        @keyframes clawShake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }
        
        /* 貓車效果 */
        @keyframes catDustFade {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(2) translateY(-20px); opacity: 0; }
        }
        @keyframes catHeartFloat {
            0% { transform: translateY(0) scale(0); opacity: 1; }
            50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
            100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
        }
        @keyframes catCargoLoad {
            0% { transform: scale(0) rotate(-10deg); }
            60% { transform: scale(1.2) rotate(5deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        
        /* 黑洞效果 */
        @keyframes blackholeSuck {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0) translate(calc(var(--targetX) - 50%), calc(var(--targetY) - 50%)); opacity: 0; }
        }
        @keyframes blackholeFlash {
            0% { transform: scale(0.5); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.8; }
            100% { transform: scale(3); opacity: 0; }
        }
        .blackhole-ring.ring-4 {
            width: 150px;
            height: 150px;
            border: 3px solid rgba(139, 92, 246, 0.4);
            animation-delay: 0.3s;
        }
        
        /* 爆發效果 */
        @keyframes burstRayExpand {
            0% { transform: rotate(var(--angle, 0)) scaleY(0); opacity: 1; }
            50% { transform: rotate(var(--angle, 0)) scaleY(1.5); opacity: 0.8; }
            100% { transform: rotate(var(--angle, 0)) scaleY(0.3) translateY(-100px); opacity: 0; }
        }
        @keyframes burstParticleFly {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            50% { transform: translate(calc(-50% + cos(var(--angle, 0)) * var(--distance, 80px) * 0.5), calc(-50% + sin(var(--angle, 0)) * var(--distance, 80px) * 0.5)) scale(1.5); opacity: 1; }
            100% { transform: translate(calc(-50% + cos(var(--angle, 0)) * var(--distance, 80px)), calc(-50% + sin(var(--angle, 0)) * var(--distance, 80px) - 50px)) scale(0.3); opacity: 0; }
        }
        @keyframes burstShockwave {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(15); opacity: 0; }
        }

        /* ========== 增強動畫效果結束 ========== */

        /* 檔案選擇按鈕共用樣式 */
        .file-select-btn { cursor:pointer; padding:0.375rem 0.75rem; font-size:0.875rem; line-height:1.25rem; border-radius:0.375rem; background:#e5e7eb; color:#1f2937; transition:background-color .18s ease, color .18s ease; display:inline-flex; align-items:center; }
        .file-select-btn:hover { background:#d1d5db; }
        /* 深色主題反轉 */
        .theme-midnight .file-select-btn,
        .theme-graphite .file-select-btn,
        .theme-charcoal .file-select-btn,
        .theme-cinder .file-select-btn,
        .theme-slate .file-select-btn,
        .theme-neon .file-select-btn { background:#374151; color:#f1f5f9; }
        .theme-midnight .file-select-btn:hover,
        .theme-graphite .file-select-btn:hover,
        .theme-charcoal .file-select-btn:hover,
        .theme-cinder .file-select-btn:hover,
        .theme-slate .file-select-btn:hover,
        .theme-neon .file-select-btn:hover { background:#4b5563; }

    /* 關閉按鈕統一樣式 */
    .close-btn { cursor:pointer; padding:0.5rem 1rem; font-size:0.875rem; line-height:1.25rem; border-radius:0.375rem; background:#e5e7eb; color:#1f2937; font-weight:600; transition:background-color .18s ease, color .18s ease; display:inline-flex; align-items:center; }
    .close-btn:hover { background:#d1d5db; }
    .close-btn:active { background:#cfd2d7; }
    /* 深色主題 */
    .theme-midnight .close-btn,
    .theme-graphite .close-btn,
    .theme-charcoal .close-btn,
    .theme-cinder .close-btn,
    .theme-slate .close-btn,
    .theme-neon .close-btn { background:#374151; color:#f1f5f9; }
    .theme-midnight .close-btn:hover,
    .theme-graphite .close-btn:hover,
    .theme-charcoal .close-btn:hover,
    .theme-cinder .close-btn:hover,
    .theme-slate .close-btn:hover,
    .theme-neon .close-btn:hover { background:#4b5563; }
    .theme-midnight .close-btn:active,
    .theme-graphite .close-btn:active,
    .theme-charcoal .close-btn:active,
    .theme-cinder .close-btn:active,
    .theme-slate .close-btn:active,
    .theme-neon .close-btn:active { background:#555f6d; }

    .draft-save-banner {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.35rem 0.75rem;
        border-radius: 9999px;
        border: 1px solid #A7F3D0;
        background: #ECFDF5;
        color: #047857;
        font-size: 0.75rem;
        font-weight: 500;
        box-shadow: 0 1px 2px rgba(16, 185, 129, 0.12);
    }

    .draft-save-banner svg {
        width: 0.9rem;
        height: 0.9rem;
        color: #10B981;
        flex-shrink: 0;
    }

    .draft-save-banner span {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        white-space: nowrap;
    }

    [data-theme-tone="dark"] .draft-save-banner {
        background: rgba(16, 185, 129, 0.18);
        border-color: rgba(16, 185, 129, 0.35);
        color: #A7F3D0;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
    }

    [data-theme-tone="dark"] .draft-save-banner svg {
        color: #34D399;
    }

    .cart-info-sticky {
        position: sticky;
        top: calc(var(--app-sticky-offset, 0px));
        z-index: 40;
        padding: 1rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(226, 232, 240, 0.7);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    [data-theme-tone="dark"] .cart-info-sticky {
        background: rgba(15, 23, 42, 0.9);
        border-color: rgba(148, 163, 184, 0.4);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
    }

        /* 效能優化的動畫 */
        .spinner-container { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            will-change: transform;
        }
        .spinner-dot { 
            width: 1.5rem; 
            height: 1.5rem; 
            background-color: #3b82f6; 
            border-radius: 50%; 
            margin: 0 0.5rem; 
            animation: bounce-delay 1.4s infinite ease-in-out both;
            will-change: transform;
        }
        .spinner-dot:nth-child(1) { animation-delay: -0.32s; }
        .spinner-dot:nth-child(2) { animation-delay: -0.16s; }
        
        @keyframes bounce-delay { 
            0%, 80%, 100% { transform: scale(0); } 
            40% { transform: scale(1.0); } 
        }
        
        .view { 
            display: none; 
            animation: fadeIn var(--transition-normal);
            will-change: opacity;
        }

        body.has-rendered-dashboard #dashboard-view {
            animation: none !important;
        }
        
        @keyframes fadeIn { 
            from { opacity: 0; } 
            to { opacity: 1; } 
        }
        
        /* 通知系統優化 */
        #notification-container { 
            position: fixed; 
            top: 1rem; 
            right: 1rem; 
            z-index: 1000; 
            display: flex; 
            flex-direction: column; 
            gap: 0.5rem;
            pointer-events: none;
        }
        
        .notification { 
            padding: 1rem; 
            border-radius: var(--border-radius); 
            color: white; 
            box-shadow: var(--shadow-normal); 
            animation: slideIn var(--transition-normal) ease-out, fadeOut 0.5s ease-in 2.5s forwards; 
            white-space: pre-wrap;
            pointer-events: auto;
            will-change: transform, opacity;
        }
        
        .notification.success { background-color: #10b981; }
        .notification.error { background-color: #ef4444; }
        
        @keyframes slideIn { 
            from { transform: translateX(100%); opacity: 0; } 
            to { transform: translateX(0); opacity: 1; } 
        }
        
        @keyframes fadeOut { 
            from { opacity: 1; } 
            to { opacity: 0; transform: scale(0.95); } 
        }
        
        /* 互動元素優化 */
        .tab-button.active { 
            border-color: #3b82f6; 
            color: #3b82f6;
            transition: all var(--transition-fast);
        }
        
        .sortable {
            transition: background-color var(--transition-fast);
            cursor: pointer;
        }
        
        .sortable:hover { 
            background-color: #f9fafb; 
        }
        
        .sort-icon { 
            opacity: 0.4; 
            display: inline-block; 
            margin-left: 4px;
            transition: opacity var(--transition-fast);
        }
        
        .sortable.active .sort-icon { 
            opacity: 1; 
            color: #3b82f6; 
        }

        /* 個人表單管理 - 收件資料夾既有樣式 */
        .personal-inbox-item {
            background-color: var(--inbox-item-bg, #f9fafb);
            border: 1px solid var(--inbox-item-border, #e5e7eb);
            color: var(--inbox-item-text, #1f2937);
            transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
        }
        .personal-inbox-item.personal-inbox-unread {
            background-color: var(--inbox-item-bg-unread, #eff6ff);
            border-color: var(--inbox-item-border-unread, #bfdbfe);
        }
        .personal-inbox-item:hover {
            background-color: var(--inbox-item-bg-hover, #f3f4f6);
        }
        .personal-inbox-item.personal-inbox-unread:hover {
            background-color: var(--inbox-item-bg-unread-hover, #dbeafe);
        }
        .personal-inbox-link {
            color: inherit;
        }
        .personal-inbox-message {
            color: var(--inbox-item-text, #1f2937);
        }
        .personal-inbox-time {
            color: var(--inbox-item-meta, #6b7280);
        }

        /* 深色主題收件資料夾調色表 */
        .theme-midnight #personalForms-view,
        .theme-scifi #personalForms-view,
        .theme-abstract #personalForms-view,
        .theme-forest #personalForms-view,
        .theme-ocean #personalForms-view,
        .theme-sunset #personalForms-view,
        .theme-hotel-lux #personalForms-view,
        .theme-nord #personalForms-view,
        .theme-neon #personalForms-view,
        .theme-cobalt #personalForms-view,
        .theme-aurora #personalForms-view,
        .theme-slate #personalForms-view,
        .theme-rosewood #personalForms-view,
        .theme-graphite #personalForms-view,
        .theme-charcoal #personalForms-view,
        .theme-cinder #personalForms-view,
        .theme-onyx #personalForms-view,
        .theme-obsidian #personalForms-view,
        .theme-storm #personalForms-view,
        .theme-mocha #personalForms-view,
        .theme-carbon #personalForms-view {
            --inbox-item-bg: rgba(255, 255, 255, 0.06);
            --inbox-item-bg-hover: rgba(255, 255, 255, 0.12);
            --inbox-item-bg-unread: rgba(255, 255, 255, 0.18);
            --inbox-item-bg-unread-hover: rgba(255, 255, 255, 0.24);
            --inbox-item-border: rgba(255, 255, 255, 0.14);
            --inbox-item-border-unread: var(--accent-color, rgba(255, 255, 255, 0.32));
            --inbox-item-text: var(--text-color, #f9fafb);
            --inbox-item-meta: var(--subtle-text-color, #d1d5db);
        }
        .theme-midnight #personalForms-view .personal-inbox-item,
        .theme-scifi #personalForms-view .personal-inbox-item,
        .theme-abstract #personalForms-view .personal-inbox-item,
        .theme-forest #personalForms-view .personal-inbox-item,
        .theme-ocean #personalForms-view .personal-inbox-item,
        .theme-sunset #personalForms-view .personal-inbox-item,
        .theme-hotel-lux #personalForms-view .personal-inbox-item,
        .theme-nord #personalForms-view .personal-inbox-item,
        .theme-neon #personalForms-view .personal-inbox-item,
        .theme-cobalt #personalForms-view .personal-inbox-item,
        .theme-aurora #personalForms-view .personal-inbox-item,
        .theme-slate #personalForms-view .personal-inbox-item,
        .theme-rosewood #personalForms-view .personal-inbox-item,
        .theme-graphite #personalForms-view .personal-inbox-item,
        .theme-charcoal #personalForms-view .personal-inbox-item,
        .theme-cinder #personalForms-view .personal-inbox-item,
        .theme-onyx #personalForms-view .personal-inbox-item,
        .theme-obsidian #personalForms-view .personal-inbox-item,
        .theme-storm #personalForms-view .personal-inbox-item,
        .theme-mocha #personalForms-view .personal-inbox-item,
        .theme-carbon #personalForms-view .personal-inbox-item {
            color: var(--inbox-item-text, #f9fafb);
        }
        .theme-midnight #personalForms-view .personal-inbox-link,
        .theme-scifi #personalForms-view .personal-inbox-link,
        .theme-abstract #personalForms-view .personal-inbox-link,
        .theme-forest #personalForms-view .personal-inbox-link,
        .theme-ocean #personalForms-view .personal-inbox-link,
        .theme-sunset #personalForms-view .personal-inbox-link,
        .theme-hotel-lux #personalForms-view .personal-inbox-link,
        .theme-nord #personalForms-view .personal-inbox-link,
        .theme-neon #personalForms-view .personal-inbox-link,
        .theme-cobalt #personalForms-view .personal-inbox-link,
        .theme-aurora #personalForms-view .personal-inbox-link,
        .theme-slate #personalForms-view .personal-inbox-link,
        .theme-rosewood #personalForms-view .personal-inbox-link,
        .theme-graphite #personalForms-view .personal-inbox-link,
        .theme-charcoal #personalForms-view .personal-inbox-link,
        .theme-cinder #personalForms-view .personal-inbox-link,
        .theme-onyx #personalForms-view .personal-inbox-link,
        .theme-obsidian #personalForms-view .personal-inbox-link,
        .theme-storm #personalForms-view .personal-inbox-link,
        .theme-mocha #personalForms-view .personal-inbox-link,
        .theme-carbon #personalForms-view .personal-inbox-link {
            color: inherit;
        }

        /* Hover popover for dashboard request ID */
        .request-id-hover {
            text-decoration: underline;
            text-decoration-style: dotted;
            cursor: help;
        }
        .hover-popover {
            position: fixed;
            z-index: 50;
            width: 320px;
            max-width: calc(100vw - 24px);
            background: #ffffff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            border-radius: 0.5rem;
            padding: 12px;
            display: none;
        }
        .hover-popover.show { display: block; }
        .hover-popover .title { font-weight: 700; font-size: 14px; color: #111827; }
        .hover-popover .kv { display: grid; grid-template-columns: 90px 1fr; gap: 6px 8px; margin-top: 8px; font-size: 12px; color: #374151; }
        .hover-popover .actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
        .hover-popover .btn { padding: 4px 8px; border-radius: 6px; font-size: 12px; border: 1px solid #e5e7eb; background: #f9fafb; color: #111827; }
        .hover-popover .btn:hover { background: #f3f4f6; }
    .hover-popover .close-btn { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 9999px; border: 1px solid #e5e7eb; background: #ffffff; color: #6b7280; }
    .hover-popover .close-btn:hover { background: #f3f4f6; color: #111827; }

    /* 發票分配模態框樣式 */
    #invoice-distribution-modal {
        transition: opacity 0.3s ease;
    }
    #invoice-distribution-modal.hidden {
        display: none !important;
    }
    #invoice-distribution-modal > div {
        animation: modalSlideIn 0.3s ease-out;
    }
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .selection-header { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: default; }
    .selection-header .chevron { font-size: 10px; color: var(--subtle-text-color, #9ca3af); transition: color 0.2s ease; }
    .selection-header:focus-within .chevron,
    .selection-header:hover .chevron { color: var(--accent-color, #2563eb); }
    .selection-header .selection-popover { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 10.5rem; padding: 0.5rem; background: var(--card-bg-color, #ffffff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.75rem; box-shadow: 0 18px 24px -12px rgba(15,23,42,0.35), 0 8px 10px -6px rgba(15,23,42,0.15); display: none; flex-direction: column; gap: 0.25rem; z-index: 58; color: var(--text-color, #111827); }
    .selection-header .selection-popover::before { content: ""; position: absolute; top: -8px; left: 18px; width: 14px; height: 14px; background: inherit; border-left: 1px solid var(--border-color, #e5e7eb); border-top: 1px solid var(--border-color, #e5e7eb); transform: rotate(45deg); border-radius: 2px; z-index: 0; }
    .selection-header:hover .selection-popover,
    .selection-header:focus-within .selection-popover { display: flex; }
    .selection-header .selection-popover button { width: 100%; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.35rem; padding: 0.4rem 0.55rem; border-radius: 0.5rem; font-size: 12px; font-weight: 600; color: var(--text-color, #1f2937); background: transparent; border: 1px solid transparent; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
    .selection-header .selection-popover button:hover {
        color: var(--accent-color, #2563eb);
        border-color: rgba(37,99,235,0.24);
        border-color: color-mix(in srgb, var(--accent-color, #2563eb) 26%, transparent);
        background: rgba(37,99,235,0.12);
        background: color-mix(in srgb, var(--accent-color, #2563eb) 14%, var(--card-bg-color, #ffffff));
        box-shadow: inset 0 1px 2px rgba(15,23,42,0.08);
    }
    .selection-header .selection-popover button:active { transform: translateY(0.5px); box-shadow: inset 0 1px 3px rgba(15,23,42,0.16); }
    .selection-header .selection-popover button:focus-visible { outline: 2px solid var(--accent-color, #2563eb); outline-offset: 2px; }
    .dashboard-approver-col { width: 260px; min-width: 220px; }
    .dashboard-approver-cell { width: 260px; max-width: 320px; }
    .dashboard-approver-text { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Global dropdown flyouts (appear above header toolbar) */
        .dropdown-flyout {
            position: fixed;
            z-index: 60;
            background: var(--card-bg-color, #ffffff);
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            min-width: 176px; /* ~w-44 */
            display: none;
        }
        .dropdown-flyout.show { display: block; }
        .dropdown-flyout ul { padding: 6px; margin: 0; color: var(--text-color, #111827) !important; }
        .dropdown-flyout li { list-style: none; }
        .dropdown-flyout li + li { margin-top: 6px; }
        .dropdown-flyout button { width: 100%; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; }
        .dropdown-flyout button[disabled] { opacity: 0.5; cursor: not-allowed; }

        /* Floating toolbar (right side) */
        .floating-tool-stack {
            position: fixed;
            top: calc(50% - 150px);
            right: 0;
            transform: translateY(-50%);
            z-index: 40;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
            width: max-content;
            max-width: calc(100vw - 4px);
            pointer-events: auto;
            padding-right: 0;
        }

        #floating-management-stack {
            top: 12.5vh;
            left: 0;
            right: auto;
            transform: none;
            align-items: flex-start;
            padding-left: 0;
            pointer-events: none;
        }
        #floating-management-stack .floating-toolbar {
            width: 240px;
            transform: translateX(calc(-100% + 44px));
            transition: transform var(--transition-normal, 0.25s ease);
            pointer-events: none;
        }
        #floating-management-stack .floating-toolbar .toolbar-handle {
            pointer-events: auto;
        }
        #floating-management-stack .floating-toolbar .toolbar-content {
            pointer-events: none;
        }
        #floating-management-stack.open {
            pointer-events: auto;
        }
        #floating-management-stack.open > .floating-toolbar {
            transform: translateX(0);
            pointer-events: auto;
        }
        #floating-management-stack.open .floating-toolbar .toolbar-content {
            pointer-events: auto;
        }
        #floating-management-stack .toolbar-inner {
            flex-direction: row-reverse;
        }
        #floating-management-stack .toolbar-handle {
            border-right: none;
            border-left: 1px solid var(--border-color, #e5e7eb);
        }
        .floating-toolbar {
            width: 44px;
            max-width: 100%;
            border: 1px solid var(--border-color, #e5e7eb);
            background: var(--card-bg-color, #ffffff);
            color: var(--text-color, #111827);
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            border-radius: 10px;
            overflow: hidden;
            transition: width var(--transition-normal, 0.25s ease);
        }
        /* 移除 hover 自動展開，改用點擊控制 */
        .floating-tool-stack.open > .floating-toolbar { width: 240px; }
        .floating-toolbar .toolbar-inner { display: flex; align-items: stretch; }
        .floating-toolbar .toolbar-handle {
            width: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center;
            border-right: 1px solid var(--border-color, #e5e7eb);
            cursor: pointer; user-select: none;
            color: var(--subtle-text-color, #6b7280);
            transition: background-color 0.2s ease;
        }
        .floating-toolbar .toolbar-handle:hover {
            background-color: var(--hover-bg-color, rgba(0,0,0,0.05));
        }
        .floating-toolbar .toolbar-handle svg { width: 18px; height: 18px; opacity: 0.75; }
    .floating-toolbar .toolbar-content { padding: 10px; min-width: 196px; display: flex; flex-direction: column; gap: 8px; }
    .floating-toolbar .toolbar-content button { width: 100%; text-align: center; }

    .floating-attachment-stack {
        top: 12.5vh;
        transform: none;
        pointer-events: none;
    }
    .floating-attachment-stack .floating-attachment-toolbar {
        pointer-events: none;
    }
    .floating-attachment-stack .floating-attachment-toolbar .toolbar-handle {
        pointer-events: auto;
    }
    .floating-attachment-stack.open {
        pointer-events: auto;
    }
        /* 移除 hover 自動展開，改用點擊控制 */
    .floating-attachment-stack.open > .floating-attachment-toolbar { 
        width: 320px;
        pointer-events: auto;
    }
        .floating-attachment-toolbar .toolbar-content { padding: 0; min-width: 280px; }

        .floating-utilities {
            width: 100%;
            max-width: calc(100vw - 16px);
            border: 1px solid var(--border-color, #e5e7eb);
            background: var(--card-bg-color, #ffffff);
            color: var(--text-color, #111827);
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            border-radius: 12px;
            padding: 14px;
            opacity: 0;
            visibility: hidden;
            transform: translateX(12px);
            pointer-events: none;
            transition: opacity var(--transition-normal, 0.25s ease), transform var(--transition-normal, 0.25s ease);
        }
        .floating-attachment-stack.open .floating-utilities {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
            pointer-events: auto;
        }
        .floating-utilities .utility-section + .utility-section { margin-top: 12px; }
        .floating-utilities details.utility-section {
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: 10px;
            padding: 10px 12px;
            background: rgba(249, 250, 251, 0.75);
        }
        .floating-utilities details.utility-section[open] { background: rgba(237, 242, 247, 0.9); }
        .floating-utilities details.utility-section summary {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-color, #111827);
        }
        .floating-utilities details.utility-section summary::-webkit-details-marker { display: none; }
        .floating-utilities details.utility-section .section-content {
            margin-top: 10px;
            font-size: 0.8125rem;
            color: var(--subtle-text-color, #6b7280);
        }
        .floating-utilities dl {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 4px 8px;
            margin: 0;
        }
        .floating-utilities dl dt {
            font-weight: 600;
            color: var(--text-color, #111827);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .floating-utilities dl dd {
            margin: 0;
            color: var(--subtle-text-color, #6b7280);
            font-variant-numeric: tabular-nums;
            text-align: right;
        }
        .floating-utilities .utility-hint {
            font-size: 0.75rem;
            color: var(--subtle-text-color, #6b7280);
            margin-bottom: 8px;
        }
        .floating-utilities .utility-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        /* 主題樣式優化 - 使用 CSS 自訂屬性提升效能 */
    
        /* Apple Theme Styles */
        .theme-apple {
            --bg-color: #f5f5f7;
            --card-bg-color: #ffffff;
            --text-color: #1d1d1f;
            --subtle-text-color: #6e6e73;
            --border-color: #d2d2d7;
            --accent-color: #007aff;
            --accent-hover-color: #0071e3;
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            
            background-color: var(--bg-color) !important;
            font-family: var(--font-family) !important;
            color: var(--text-color) !important;
        }
        .theme-apple body, .theme-apple .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-apple .bg-white, .theme-apple .bg-gray-100 { background-color: var(--card-bg-color) !important; }
        .theme-apple .shadow-sm, .theme-apple .shadow-md, .theme-apple .shadow-lg, .theme-apple .shadow-xl {
             box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
             border: 1px solid var(--border-color);
        }
        .theme-apple .rounded-lg { border-radius: 12px !important; }
        .theme-apple .rounded-md { border-radius: 8px !important; }
        .theme-apple .border, .theme-apple .border-gray-300, .theme-apple .border-gray-200, .theme-apple .divide-y > :not([hidden]) ~ :not([hidden]), .theme-apple .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-apple .text-gray-900, .theme-apple .text-gray-800, .theme-apple .text-gray-700 { color: var(--text-color) !important; }
        .theme-apple .text-gray-600, .theme-apple .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-apple .text-blue-600 { color: var(--accent-color) !important; }
        .theme-apple .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-apple .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-apple input, .theme-apple select, .theme-apple textarea {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
            border: 1px solid var(--border-color) !important;
        }
        .theme-apple input:focus, .theme-apple select:focus, .theme-apple textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important;
            outline: none !important;
        }
        .theme-apple .tab-button.active {
            border-color: var(--accent-color) !important;
            color: var(--accent-color) !important;
        }

        /* Sci-Fi Theme Styles */
        .theme-scifi {
            --bg-color: #0a0f1a;
            --card-bg-color: #1a202c;
            --text-color: #00f7ff;
            --subtle-text-color: #8a9ecb;
            --border-color: #2d3748;
            --accent-color: #00f7ff;
            --accent-hover-color: #00d1db;
            --font-family: 'Montserrat', 'Noto Sans TC', sans-serif;

            background-color: var(--bg-color) !important;
            font-family: var(--font-family) !important;
            color: var(--text-color) !important;
        }
        .theme-scifi body, .theme-scifi .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-scifi .bg-white, .theme-scifi .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-scifi .shadow-sm, .theme-scifi .shadow-md, .theme-scifi .shadow-lg, .theme-scifi .shadow-xl {
             box-shadow: 0 0 15px rgba(0, 247, 255, 0.1), 0 0 5px rgba(0, 247, 255, 0.05) !important;
             border: 1px solid var(--border-color);
        }
        .theme-scifi .rounded-lg, .theme-scifi .rounded-md { border-radius: 4px !important; }
        .theme-scifi .border, .theme-scifi .border-gray-300, .theme-scifi .border-gray-200, .theme-scifi .divide-y > :not([hidden]) ~ :not([hidden]), .theme-scifi .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-scifi .text-gray-900, .theme-scifi .text-gray-800, .theme-scifi .text-gray-700 { color: var(--text-color) !important; }
        .theme-scifi .text-gray-600, .theme-scifi .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-scifi .text-blue-600 { color: var(--accent-color) !important; }
        .theme-scifi .bg-blue-600 { background-color: var(--accent-color) !important; color: #0a0f1a !important; }
        .theme-scifi .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-scifi input, .theme-scifi select, .theme-scifi textarea {
            background-color: #0a0f1a !important;
            border-radius: 4px !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-scifi input:focus, .theme-scifi select:focus, .theme-scifi textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(0, 247, 255, 0.3) !important;
            outline: none !important;
        }
        .theme-scifi .tab-button.active {
            border-color: var(--accent-color) !important;
            color: var(--accent-color) !important;
        }
        .theme-scifi .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #0d1117, #161b22) !important; border-color: var(--border-color) !important; }
        .theme-scifi nav button.bg-white { background-color: #1c2128 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-scifi nav button.bg-white:hover { background-color: #2d333b !important; border-color: var(--accent-color) !important; }
        .theme-scifi nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #0d1117 !important; }
        .theme-scifi nav .bg-white.border { background-color: #1c2128 !important; border-color: var(--border-color) !important; }
        .theme-scifi nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #0d1117 !important; }
        .theme-scifi nav .text-gray-700, .theme-scifi nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-scifi nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-scifi nav .text-blue-700, .theme-scifi nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Ghibli Theme Styles */
        .theme-ghibli {
            --bg-color: #fbf1c7;
            --card-bg-color: #fdf6e3;
            --text-color: #3c3836;
            --subtle-text-color: #7c6f64;
            --border-color: #d5c4a1;
            --accent-color: #458588;
            --accent-hover-color: #076678;
            --font-family: 'Noto Sans TC', sans-serif;

            background-color: var(--bg-color) !important;
            font-family: var(--font-family) !important;
            color: var(--text-color) !important;
        }
        .theme-ghibli body, .theme-ghibli .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-ghibli .bg-white, .theme-ghibli .bg-gray-100 { background-color: var(--card-bg-color) !important; }
        .theme-ghibli .shadow-sm, .theme-ghibli .shadow-md, .theme-ghibli .shadow-lg, .theme-ghibli .shadow-xl {
             box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important;
             border: 1px solid var(--border-color);
        }
        .theme-ghibli .rounded-lg { border-radius: 10px !important; }
        .theme-ghibli .rounded-md { border-radius: 6px !important; }
        .theme-ghibli .border, .theme-ghibli .border-gray-300, .theme-ghibli .border-gray-200, .theme-ghibli .divide-y > :not([hidden]) ~ :not([hidden]), .theme-ghibli .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-ghibli .text-gray-900, .theme-ghibli .text-gray-800, .theme-ghibli .text-gray-700 { color: var(--text-color) !important; }
        .theme-ghibli .text-gray-600, .theme-ghibli .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-ghibli .text-blue-600 { color: var(--accent-color) !important; }
        .theme-ghibli .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-ghibli .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-ghibli input, .theme-ghibli select, .theme-ghibli textarea {
            background-color: #f9f5d7 !important;
            border-radius: 6px !important;
            border: 1px solid var(--border-color) !important;
        }
        .theme-ghibli input:focus, .theme-ghibli select:focus, .theme-ghibli textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(69, 133, 136, 0.2) !important;
            outline: none !important;
        }
        .theme-ghibli .tab-button.active {
            border-color: var(--accent-color) !important;
            color: var(--accent-color) !important;
        }

        /* Abstract Art Theme Styles */
        .theme-abstract {
            --bg-color: #1a1a1a;
            --card-bg-color: #2a2a2a;
            --text-color: #f0f0f0;
            --subtle-text-color: #aaaaaa;
            --border-color: #444444;
            --accent-color: #ff00ff;
            --accent-hover-color: #cc00cc;
            --font-family: 'Montserrat', sans-serif;

            background-color: var(--bg-color) !important;
            font-family: var(--font-family) !important;
            color: var(--text-color) !important;
        }
        .theme-abstract body, .theme-abstract .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-abstract .bg-white, .theme-abstract .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-abstract .shadow-sm, .theme-abstract .shadow-md, .theme-abstract .shadow-lg, .theme-abstract .shadow-xl {
             box-shadow: none !important;
             border: 2px solid var(--border-color);
        }
        .theme-abstract .rounded-lg, .theme-abstract .rounded-md { border-radius: 0 !important; }
        .theme-abstract .border, .theme-abstract .border-gray-300, .theme-abstract .border-gray-200, .theme-abstract .divide-y > :not([hidden]) ~ :not([hidden]), .theme-abstract .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-abstract .text-gray-900, .theme-abstract .text-gray-800, .theme-abstract .text-gray-700 { color: var(--text-color) !important; }
        .theme-abstract .text-gray-600, .theme-abstract .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-abstract .text-blue-600 { color: var(--accent-color) !important; }
        .theme-abstract .bg-blue-600 { background-color: var(--accent-color) !important; color: #1a1a1a !important; }
        .theme-abstract .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-abstract input, .theme-abstract select, .theme-abstract textarea {
            background-color: #1a1a1a !important;
            border-radius: 0 !important;
            border: 2px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-abstract input:focus, .theme-abstract select:focus, .theme-abstract textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: none !important;
            outline: none !important;
        }
        .theme-abstract .tab-button.active {
            border-color: var(--accent-color) !important;
            color: var(--accent-color) !important;
            border-bottom-width: 4px !important;
        }
        .theme-abstract .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1a1a2e, #2a2a3e) !important; border-color: var(--border-color) !important; }
        .theme-abstract nav button.bg-white { background-color: #2a2a40 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-abstract nav button.bg-white:hover { background-color: #353550 !important; border-color: var(--accent-color) !important; }
        .theme-abstract nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #1a1a2e !important; }
        .theme-abstract nav .bg-white.border { background-color: #2a2a40 !important; border-color: var(--border-color) !important; }
        .theme-abstract nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1a1a2e !important; }
        .theme-abstract nav .text-gray-700, .theme-abstract nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-abstract nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-abstract nav .text-blue-700, .theme-abstract nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Eldercare Soft Theme */
        .theme-care-soft {
            --bg-color: #fff7ed; /* orange-50 */
            --card-bg-color: #fffaf0; /* warm cream */
            --text-color: #3f2d20; /* warm brown */
            --subtle-text-color: #a16207; /* amber-700 */
            --border-color: #fed7aa; /* orange-200 */
            --accent-color: #f59e0b; /* amber-500 */
            --accent-hover-color: #d97706; /* amber-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-care-soft body, .theme-care-soft .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-care-soft .bg-white, .theme-care-soft .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-care-soft .shadow-sm, .theme-care-soft .shadow-md, .theme-care-soft .shadow-lg, .theme-care-soft .shadow-xl {
             box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important;
             border: 1px solid var(--border-color);
        }
        .theme-care-soft .rounded-lg { border-radius: 12px !important; }
        .theme-care-soft .rounded-md { border-radius: 8px !important; }
        .theme-care-soft .border, .theme-care-soft .border-gray-300, .theme-care-soft .border-gray-200, .theme-care-soft .divide-y > :not([hidden]) ~ :not([hidden]), .theme-care-soft .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-care-soft .text-gray-900, .theme-care-soft .text-gray-800, .theme-care-soft .text-gray-700 { color: var(--text-color) !important; }
        .theme-care-soft .text-gray-600, .theme-care-soft .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-care-soft .text-blue-600 { color: var(--accent-color) !important; }
        .theme-care-soft .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-care-soft .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-care-soft input, .theme-care-soft select, .theme-care-soft textarea {
            background-color: #fffef9 !important;
            border-radius: 10px !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-care-soft input:focus, .theme-care-soft select:focus, .theme-care-soft textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
            outline: none !important;
        }
        .theme-care-soft .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Eldercare Fresh Theme */
        .theme-care-fresh {
            --bg-color: #ecfdf5; /* emerald-50 */
            --card-bg-color: #ffffff;
            --text-color: #064e3b; /* emerald-900 */
            --subtle-text-color: #10b981; /* emerald-500 */
            --border-color: #d1fae5; /* emerald-200 */
            --accent-color: #10b981; /* emerald-500 */
            --accent-hover-color: #059669; /* emerald-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-care-fresh body, .theme-care-fresh .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-care-fresh .bg-white, .theme-care-fresh .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-care-fresh .shadow-sm, .theme-care-fresh .shadow-md, .theme-care-fresh .shadow-lg, .theme-care-fresh .shadow-xl { box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important; border: 1px solid var(--border-color); }
        .theme-care-fresh .rounded-lg { border-radius: 12px !important; }
        .theme-care-fresh .rounded-md { border-radius: 8px !important; }
        .theme-care-fresh .border, .theme-care-fresh .border-gray-300, .theme-care-fresh .border-gray-200, .theme-care-fresh .divide-y > :not([hidden]) ~ :not([hidden]), .theme-care-fresh .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-care-fresh .text-gray-900, .theme-care-fresh .text-gray-800, .theme-care-fresh .text-gray-700 { color: var(--text-color) !important; }
        .theme-care-fresh .text-gray-600, .theme-care-fresh .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-care-fresh .text-blue-600 { color: var(--accent-color) !important; }
        .theme-care-fresh .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-care-fresh .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-care-fresh input, .theme-care-fresh select, .theme-care-fresh textarea { background-color: #f7fff9 !important; border-radius: 10px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-care-fresh input:focus, .theme-care-fresh select:focus, .theme-care-fresh textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important; outline: none !important; }
        .theme-care-fresh .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Medical Clean Theme */
        .theme-med-clean {
            --bg-color: #f8fafc; /* slate-50 */
            --card-bg-color: #ffffff;
            --text-color: #0f172a; /* slate-900 */
            --subtle-text-color: #64748b; /* slate-500 */
            --border-color: #e2e8f0; /* slate-200 */
            --accent-color: #3b82f6; /* blue-500 */
            --accent-hover-color: #2563eb; /* blue-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-med-clean body, .theme-med-clean .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-med-clean .bg-white, .theme-med-clean .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-med-clean .shadow-sm, .theme-med-clean .shadow-md, .theme-med-clean .shadow-lg, .theme-med-clean .shadow-xl { box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; border: 1px solid var(--border-color); }
        .theme-med-clean .rounded-lg, .theme-med-clean .rounded-md { border-radius: 8px !important; }
        .theme-med-clean .border, .theme-med-clean .border-gray-300, .theme-med-clean .border-gray-200, .theme-med-clean .divide-y > :not([hidden]) ~ :not([hidden]), .theme-med-clean .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-med-clean .text-gray-900, .theme-med-clean .text-gray-800, .theme-med-clean .text-gray-700 { color: var(--text-color) !important; }
        .theme-med-clean .text-gray-600, .theme-med-clean .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-med-clean .text-blue-600 { color: var(--accent-color) !important; }
        .theme-med-clean .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-med-clean .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-med-clean input, .theme-med-clean select, .theme-med-clean textarea { background-color: #ffffff !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-med-clean input:focus, .theme-med-clean select:focus, .theme-med-clean textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; outline: none !important; }
        .theme-med-clean .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Medical Trust Theme */
        .theme-med-trust {
            --bg-color: #eff6ff; /* blue-50 */
            --card-bg-color: #ffffff;
            --text-color: #0c4a6e; /* sky-900 */
            --subtle-text-color: #60a5fa; /* blue-400 */
            --border-color: #bfdbfe; /* blue-200 */
            --accent-color: #0ea5e9; /* sky-500 */
            --accent-hover-color: #0284c7; /* sky-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-med-trust body, .theme-med-trust .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-med-trust .bg-white, .theme-med-trust .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-med-trust .shadow-sm, .theme-med-trust .shadow-md, .theme-med-trust .shadow-lg, .theme-med-trust .shadow-xl { box-shadow: 0 1px 3px rgba(2,132,199,0.08) !important; border: 1px solid var(--border-color); }
        .theme-med-trust .rounded-lg, .theme-med-trust .rounded-md { border-radius: 8px !important; }
        .theme-med-trust .border, .theme-med-trust .border-gray-300, .theme-med-trust .border-gray-200, .theme-med-trust .divide-y > :not([hidden]) ~ :not([hidden]), .theme-med-trust .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-med-trust .text-gray-900, .theme-med-trust .text-gray-800, .theme-med-trust .text-gray-700 { color: var(--text-color) !important; }
        .theme-med-trust .text-gray-600, .theme-med-trust .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-med-trust .text-blue-600 { color: var(--accent-color) !important; }
        .theme-med-trust .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-med-trust .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-med-trust input, .theme-med-trust select, .theme-med-trust textarea { background-color: #ffffff !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-med-trust input:focus, .theme-med-trust select:focus, .theme-med-trust textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25) !important; outline: none !important; }
        .theme-med-trust .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Hotel Luxury Theme */
        .theme-hotel-lux {
            --bg-color: #0f0f13; /* near black */
            --card-bg-color: #1a1a22; /* deep charcoal */
            --text-color: #f5f5f5; /* light */
            --subtle-text-color: #cbd5e1; /* slate-300 */
            --border-color: #2a2a33; /* dark border */
            --accent-color: #d4af37; /* gold */
            --accent-hover-color: #b38e1d; /* darker gold */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-hotel-lux body, .theme-hotel-lux .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-hotel-lux .bg-white, .theme-hotel-lux .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-hotel-lux .shadow-sm, .theme-hotel-lux .shadow-md, .theme-hotel-lux .shadow-lg, .theme-hotel-lux .shadow-xl { box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important; border: 1px solid var(--border-color); }
        .theme-hotel-lux .rounded-lg, .theme-hotel-lux .rounded-md { border-radius: 10px !important; }
        .theme-hotel-lux .border, .theme-hotel-lux .border-gray-300, .theme-hotel-lux .border-gray-200, .theme-hotel-lux .divide-y > :not([hidden]) ~ :not([hidden]), .theme-hotel-lux .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-hotel-lux .text-gray-900, .theme-hotel-lux .text-gray-800, .theme-hotel-lux .text-gray-700 { color: var(--text-color) !important; }
        .theme-hotel-lux .text-gray-600, .theme-hotel-lux .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-hotel-lux .text-blue-600 { color: var(--accent-color) !important; }
        .theme-hotel-lux .bg-blue-600 { background-color: var(--accent-color) !important; color: #111111 !important; }
        .theme-hotel-lux .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-hotel-lux input, .theme-hotel-lux select, .theme-hotel-lux textarea { background-color: #111216 !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-hotel-lux input:focus, .theme-hotel-lux select:focus, .theme-hotel-lux textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3) !important; outline: none !important; }
        .theme-hotel-lux .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-hotel-lux .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1a1410, #2a1f18) !important; border-color: var(--border-color) !important; }
        .theme-hotel-lux nav button.bg-white { background-color: #2f2620 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-hotel-lux nav button.bg-white:hover { background-color: #3f3228 !important; border-color: var(--accent-color) !important; }
        .theme-hotel-lux nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #1a1410 !important; }
        .theme-hotel-lux nav .bg-white.border { background-color: #2f2620 !important; border-color: var(--border-color) !important; }
        .theme-hotel-lux nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1a1410 !important; }
        .theme-hotel-lux nav .text-gray-700, .theme-hotel-lux nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-hotel-lux nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-hotel-lux nav .text-blue-700, .theme-hotel-lux nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Hotel Resort Theme */
        .theme-hotel-resort {
            --bg-color: #fef3c7; /* amber-100 sand */
            --card-bg-color: #ffffff;
            --text-color: #3b2210; /* warm brown */
            --subtle-text-color: #8b5e34; /* sand brown */
            --border-color: #fde68a; /* amber-200 */
            --accent-color: #14b8a6; /* teal-500 */
            --accent-hover-color: #0d9488; /* teal-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-hotel-resort body, .theme-hotel-resort .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-hotel-resort .bg-white, .theme-hotel-resort .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-hotel-resort .shadow-sm, .theme-hotel-resort .shadow-md, .theme-hotel-resort .shadow-lg, .theme-hotel-resort .shadow-xl { box-shadow: 0 2px 6px rgba(13,148,136,0.12) !important; border: 1px solid var(--border-color); }
        .theme-hotel-resort .rounded-lg { border-radius: 12px !important; }
        .theme-hotel-resort .rounded-md { border-radius: 8px !important; }
        .theme-hotel-resort .border, .theme-hotel-resort .border-gray-300, .theme-hotel-resort .border-gray-200, .theme-hotel-resort .divide-y > :not([hidden]) ~ :not([hidden]), .theme-hotel-resort .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-hotel-resort .text-gray-900, .theme-hotel-resort .text-gray-800, .theme-hotel-resort .text-gray-700 { color: var(--text-color) !important; }
        .theme-hotel-resort .text-gray-600, .theme-hotel-resort .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-hotel-resort .text-blue-600 { color: var(--accent-color) !important; }
        .theme-hotel-resort .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-hotel-resort .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-hotel-resort input, .theme-hotel-resort select, .theme-hotel-resort textarea { background-color: #ffffff !important; border-radius: 10px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-hotel-resort input:focus, .theme-hotel-resort select:focus, .theme-hotel-resort textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.25) !important; outline: none !important; }
        .theme-hotel-resort .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Forest Theme Styles */
        .theme-forest {
            --bg-color: #0b2e13; /* deep forest green */
            --card-bg-color: #123524; /* darker green */
            --text-color: #e8f5e9; /* minty light */
            --subtle-text-color: #a7d7c5; /* soft teal */
            --border-color: #1f4d2e; /* green border */
            --accent-color: #34d399; /* emerald-400 */
            --accent-hover-color: #10b981; /* emerald-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-forest body, .theme-forest .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-forest .bg-white, .theme-forest .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-forest .shadow-sm, .theme-forest .shadow-md, .theme-forest .shadow-lg, .theme-forest .shadow-xl {
             box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15) !important;
             border: 1px solid var(--border-color);
        }
        .theme-forest .rounded-lg { border-radius: 12px !important; }
        .theme-forest .rounded-md { border-radius: 8px !important; }
        .theme-forest .border, .theme-forest .border-gray-300, .theme-forest .border-gray-200, .theme-forest .divide-y > :not([hidden]) ~ :not([hidden]), .theme-forest .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-forest .text-gray-900, .theme-forest .text-gray-800, .theme-forest .text-gray-700 { color: var(--text-color) !important; }
        .theme-forest .text-gray-600, .theme-forest .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-forest .text-blue-600 { color: var(--accent-color) !important; }
        .theme-forest .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-forest .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-forest input, .theme-forest select, .theme-forest textarea {
            background-color: var(--card-bg-color) !important;
            border-radius: 8px !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-forest input:focus, .theme-forest select:focus, .theme-forest textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25) !important;
            outline: none !important;
        }
        .theme-forest .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-forest .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #0f1a14, #1a2820) !important; border-color: var(--border-color) !important; }
        .theme-forest nav button.bg-white { background-color: #1f3028 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-forest nav button.bg-white:hover { background-color: #2a3f35 !important; border-color: var(--accent-color) !important; }
        .theme-forest nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #0f1a14 !important; }
        .theme-forest nav .bg-white.border { background-color: #1f3028 !important; border-color: var(--border-color) !important; }
        .theme-forest nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #0f1a14 !important; }
        .theme-forest nav .text-gray-700, .theme-forest nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-forest nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-forest nav .text-blue-700, .theme-forest nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Ocean Theme Styles */
        .theme-ocean {
            --bg-color: #0b1220; /* deep navy */
            --card-bg-color: #0e2239; /* ocean deep */
            --text-color: #e0f2fe; /* sky-100 */
            --subtle-text-color: #93c5fd; /* blue-300 */
            --border-color: #1e3a8a; /* indigo-800 */
            --accent-color: #38bdf8; /* sky-400 */
            --accent-hover-color: #0ea5e9; /* sky-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-ocean body, .theme-ocean .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-ocean .bg-white, .theme-ocean .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-ocean .shadow-sm, .theme-ocean .shadow-md, .theme-ocean .shadow-lg, .theme-ocean .shadow-xl {
             box-shadow: 0 0 20px rgba(14, 165, 233, 0.08), 0 0 6px rgba(56, 189, 248, 0.05) !important;
             border: 1px solid var(--border-color);
        }
        .theme-ocean .rounded-lg, .theme-ocean .rounded-md { border-radius: 6px !important; }
        .theme-ocean .border, .theme-ocean .border-gray-300, .theme-ocean .border-gray-200, .theme-ocean .divide-y > :not([hidden]) ~ :not([hidden]), .theme-ocean .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-ocean .text-gray-900, .theme-ocean .text-gray-800, .theme-ocean .text-gray-700 { color: var(--text-color) !important; }
        .theme-ocean .text-gray-600, .theme-ocean .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-ocean .text-blue-600 { color: var(--accent-color) !important; }
        .theme-ocean .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-ocean .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-ocean input, .theme-ocean select, .theme-ocean textarea {
            background-color: #0b1220 !important;
            border-radius: 6px !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-ocean input:focus, .theme-ocean select:focus, .theme-ocean textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3) !important;
            outline: none !important;
        }
        .theme-ocean .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-ocean .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #0b1220, #0e2239) !important; border-color: var(--border-color) !important; }
        .theme-ocean nav button.bg-white { background-color: #152d48 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-ocean nav button.bg-white:hover { background-color: #1f3a58 !important; border-color: var(--accent-color) !important; }
        .theme-ocean nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #0b1220 !important; }
        .theme-ocean nav .bg-white.border { background-color: #152d48 !important; border-color: var(--border-color) !important; }
        .theme-ocean nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #0b1220 !important; }
        .theme-ocean nav .text-gray-700, .theme-ocean nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-ocean nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-ocean nav .text-blue-700, .theme-ocean nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Sunset Theme Styles */
        .theme-sunset {
            --bg-color: #2b0a1a; /* dark wine */
            --card-bg-color: #3a0e22; /* deeper rose */
            --text-color: #ffe4e6; /* rose-100 */
            --subtle-text-color: #fecdd3; /* pink-200 */
            --border-color: #7f1d1d; /* red-900 */
            --accent-color: #fb7185; /* rose-400 */
            --accent-hover-color: #f43f5e; /* rose-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-sunset body, .theme-sunset .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-sunset .bg-white, .theme-sunset .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-sunset .shadow-sm, .theme-sunset .shadow-md, .theme-sunset .shadow-lg, .theme-sunset .shadow-xl {
             box-shadow: 0 2px 6px 0 rgba(244, 63, 94, 0.15) !important;
             border: 1px solid var(--border-color);
        }
        .theme-sunset .rounded-lg { border-radius: 10px !important; }
        .theme-sunset .rounded-md { border-radius: 6px !important; }
        .theme-sunset .border, .theme-sunset .border-gray-300, .theme-sunset .border-gray-200, .theme-sunset .divide-y > :not([hidden]) ~ :not([hidden]), .theme-sunset .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-sunset .text-gray-900, .theme-sunset .text-gray-800, .theme-sunset .text-gray-700 { color: var(--text-color) !important; }
        .theme-sunset .text-gray-600, .theme-sunset .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-sunset .text-blue-600 { color: var(--accent-color) !important; }
        .theme-sunset .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-sunset .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-sunset input, .theme-sunset select, .theme-sunset textarea {
            background-color: var(--card-bg-color) !important;
            border-radius: 6px !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-sunset input:focus, .theme-sunset select:focus, .theme-sunset textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.25) !important;
            outline: none !important;
        }
        .theme-sunset .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-sunset .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1a0f12, #2a1820) !important; border-color: var(--border-color) !important; }
        .theme-sunset nav button.bg-white { background-color: #2f1f28 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-sunset nav button.bg-white:hover { background-color: #3f2a35 !important; border-color: var(--accent-color) !important; }
        .theme-sunset nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #1a0f12 !important; }
        .theme-sunset nav .bg-white.border { background-color: #2f1f28 !important; border-color: var(--border-color) !important; }
        .theme-sunset nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1a0f12 !important; }
        .theme-sunset nav .text-gray-700, .theme-sunset nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-sunset nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-sunset nav .text-blue-700, .theme-sunset nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Midnight Theme Styles */
        .theme-midnight {
            --bg-color: #0a0a0f; /* near black */
            --card-bg-color: #14141f; /* dark indigo */
            --text-color: #e5e7eb; /* gray-200 */
            --subtle-text-color: #9ca3af; /* gray-400 */
            --border-color: #1f2937; /* gray-800 */
            --accent-color: #8b5cf6; /* violet-500 */
            --accent-hover-color: #7c3aed; /* violet-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-midnight body, .theme-midnight .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-midnight .bg-white, .theme-midnight .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-midnight .shadow-sm, .theme-midnight .shadow-md, .theme-midnight .shadow-lg, .theme-midnight .shadow-xl {
             box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
             border: 1px solid var(--border-color);
        }
        .theme-midnight .rounded-lg, .theme-midnight .rounded-md { border-radius: 6px !important; }
        .theme-midnight .border, .theme-midnight .border-gray-300, .theme-midnight .border-gray-200, .theme-midnight .divide-y > :not([hidden]) ~ :not([hidden]), .theme-midnight .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-midnight .text-gray-900, .theme-midnight .text-gray-800, .theme-midnight .text-gray-700 { color: var(--text-color) !important; }
        .theme-midnight .text-gray-600, .theme-midnight .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-midnight .text-blue-600 { color: var(--accent-color) !important; }
        .theme-midnight .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-midnight .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-midnight input, .theme-midnight select, .theme-midnight textarea {
            background-color: var(--card-bg-color) !important;
            border-radius: 6px !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-midnight input:focus, .theme-midnight select:focus, .theme-midnight textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25) !important;
            outline: none !important;
        }
        .theme-midnight .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-midnight .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1a1625, #221e30) !important; border-color: var(--border-color) !important; }
        .theme-midnight nav button.bg-white { background-color: #2a2640 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-midnight nav button.bg-white:hover { background-color: #352f50 !important; border-color: var(--accent-color) !important; }
        .theme-midnight nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #1a1625 !important; }
        .theme-midnight nav .bg-white.border { background-color: #2a2640 !important; border-color: var(--border-color) !important; }
        .theme-midnight nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1a1625 !important; }
        .theme-midnight nav .text-gray-700, .theme-midnight nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-midnight nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-midnight nav .text-blue-700, .theme-midnight nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Sakura Theme Styles */
        .theme-sakura {
            --bg-color: #fff1f2; /* rose-50 */
            --card-bg-color: #ffe4e6; /* rose-100 */
            --text-color: #3f1d2b; /* plum */
            --subtle-text-color: #9f1239; /* rose-800 */
            --border-color: #fecdd3; /* pink-200 */
            --accent-color: #f472b6; /* pink-400 */
            --accent-hover-color: #ec4899; /* pink-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-sakura body, .theme-sakura .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-sakura .bg-white, .theme-sakura .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-sakura .shadow-sm, .theme-sakura .shadow-md, .theme-sakura .shadow-lg, .theme-sakura .shadow-xl {
             box-shadow: 0 2px 4px 0 rgba(244, 114, 182, 0.15) !important;
             border: 1px solid var(--border-color);
        }
        .theme-sakura .rounded-lg { border-radius: 10px !important; }
        .theme-sakura .rounded-md { border-radius: 6px !important; }
        .theme-sakura .border, .theme-sakura .border-gray-300, .theme-sakura .border-gray-200, .theme-sakura .divide-y > :not([hidden]) ~ :not([hidden]), .theme-sakura .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--border-color) !important;
        }
        .theme-sakura .text-gray-900, .theme-sakura .text-gray-800, .theme-sakura .text-gray-700 { color: var(--text-color) !important; }
        .theme-sakura .text-gray-600, .theme-sakura .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-sakura .text-blue-600 { color: var(--accent-color) !important; }
        .theme-sakura .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-sakura .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-sakura input, .theme-sakura select, .theme-sakura textarea {
            background-color: #fff7f8 !important;
            border-radius: 8px !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-color) !important;
        }
        .theme-sakura input:focus, .theme-sakura select:focus, .theme-sakura textarea:focus {
            border-color: var(--accent-color) !important;
            box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.25) !important;
            outline: none !important;
        }
        .theme-sakura .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Nord Theme */
        .theme-nord {
            --bg-color: #2e3440; /* nord0 */
            --card-bg-color: #3b4252; /* nord1 */
            --text-color: #eceff4; /* nord6 */
            --subtle-text-color: #a3be8c; /* nord14 */
            --border-color: #434c5e; /* nord2 */
            --accent-color: #88c0d0; /* nord8 */
            --accent-hover-color: #81a1c1; /* nord9 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-nord body, .theme-nord .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-nord .bg-white, .theme-nord .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-nord .shadow-sm, .theme-nord .shadow-md, .theme-nord .shadow-lg, .theme-nord .shadow-xl { box-shadow: 0 2px 6px rgba(129,161,193,0.15) !important; border: 1px solid var(--border-color); }
        .theme-nord .rounded-lg, .theme-nord .rounded-md { border-radius: 8px !important; }
        .theme-nord .border, .theme-nord .border-gray-300, .theme-nord .border-gray-200, .theme-nord .divide-y > :not([hidden]) ~ :not([hidden]), .theme-nord .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-nord .text-gray-900, .theme-nord .text-gray-800, .theme-nord .text-gray-700 { color: var(--text-color) !important; }
        .theme-nord .text-gray-600, .theme-nord .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-nord .text-blue-600 { color: var(--accent-color) !important; }
        .theme-nord .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-nord .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-nord input, .theme-nord select, .theme-nord textarea { background-color: var(--card-bg-color) !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-nord input:focus, .theme-nord select:focus, .theme-nord textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.25) !important; outline: none !important; }
        .theme-nord .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-nord .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1e2430, #2e3440) !important; border-color: var(--border-color) !important; }
        .theme-nord nav button.bg-white { background-color: #353b48 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-nord nav button.bg-white:hover { background-color: #404854 !important; border-color: var(--accent-color) !important; }
        .theme-nord nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #1e2430 !important; }
        .theme-nord nav .bg-white.border { background-color: #353b48 !important; border-color: var(--border-color) !important; }
        .theme-nord nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1e2430 !important; }
        .theme-nord nav .text-gray-700, .theme-nord nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-nord nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-nord nav .text-blue-700, .theme-nord nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Latte Theme */
        .theme-latte {
            --bg-color: #faf3e0; /* warm beige */
            --card-bg-color: #fffaf0; /* ivory */
            --text-color: #3f2e1e; /* coffee */
            --subtle-text-color: #b08968; /* caramel */
            --border-color: #f1e3c6; /* light beige */
            --accent-color: #d97706; /* amber-600 */
            --accent-hover-color: #b45309; /* amber-700 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-latte body, .theme-latte .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-latte .bg-white, .theme-latte .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-latte .shadow-sm, .theme-latte .shadow-md, .theme-latte .shadow-lg, .theme-latte .shadow-xl { box-shadow: 0 2px 4px rgba(217,119,6,0.08) !important; border: 1px solid var(--border-color); }
        .theme-latte .rounded-lg, .theme-latte .rounded-md { border-radius: 10px !important; }
        .theme-latte .border, .theme-latte .border-gray-300, .theme-latte .border-gray-200, .theme-latte .divide-y > :not([hidden]) ~ :not([hidden]), .theme-latte .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-latte .text-gray-900, .theme-latte .text-gray-800, .theme-latte .text-gray-700 { color: var(--text-color) !important; }
        .theme-latte .text-gray-600, .theme-latte .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-latte .text-blue-600 { color: var(--accent-color) !important; }
        .theme-latte .bg-blue-600 { background-color: var(--accent-color) !important; color: #fff !important; }
        .theme-latte .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-latte input, .theme-latte select, .theme-latte textarea { background-color: #ffffff !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-latte input:focus, .theme-latte select:focus, .theme-latte textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) !important; outline: none !important; }
        .theme-latte .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Mint Theme */
        .theme-mint {
            --bg-color: #f0fdf4; /* green-50 */
            --card-bg-color: #ffffff;
            --text-color: #064e3b; /* emerald-900 */
            --subtle-text-color: #10b981; /* emerald-500 */
            --border-color: #bbf7d0; /* green-200 */
            --accent-color: #34d399; /* emerald-400 */
            --accent-hover-color: #10b981; /* emerald-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-mint body, .theme-mint .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-mint .bg-white, .theme-mint .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-mint .shadow-sm, .theme-mint .shadow-md, .theme-mint .shadow-lg, .theme-mint .shadow-xl { box-shadow: 0 1px 3px rgba(16,185,129,0.12) !important; border: 1px solid var(--border-color); }
        .theme-mint .rounded-lg, .theme-mint .rounded-md { border-radius: 10px !important; }
        .theme-mint .border, .theme-mint .border-gray-300, .theme-mint .border-gray-200, .theme-mint .divide-y > :not([hidden]) ~ :not([hidden]), .theme-mint .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-mint .text-gray-900, .theme-mint .text-gray-800, .theme-mint .text-gray-700 { color: var(--text-color) 
            !important; }
        .theme-mint .text-gray-600, .theme-mint .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-mint .text-blue-600 { color: var(--accent-color) !important; }
        .theme-mint .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-mint .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-mint input, .theme-mint select, .theme-mint textarea { background-color: #ffffff !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-mint input:focus, .theme-mint select:focus, .theme-mint textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25) !important; outline: none !important; }
        .theme-mint .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Solar Theme */
        .theme-solar {
            --bg-color: #fffbea; /* warm light */
            --card-bg-color: #fffef3; /* near white */
            --text-color: #7c2d12; /* amber-900 */
            --subtle-text-color: #f59e0b; /* amber-500 */
            --border-color: #fde68a; /* amber-200 */
            --accent-color: #fb923c; /* orange-400 */
            --accent-hover-color: #f97316; /* orange-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-solar body, .theme-solar .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-solar .bg-white, .theme-solar .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-solar .shadow-sm, .theme-solar .shadow-md, .theme-solar .shadow-lg, .theme-solar .shadow-xl { box-shadow: 0 2px 4px rgba(249,115,22,0.12) !important; border: 1px solid var(--border-color); }
        .theme-solar .rounded-lg, .theme-solar .rounded-md { border-radius: 8px !important; }
        .theme-solar .border, .theme-solar .border-gray-300, .theme-solar .border-gray-200, .theme-solar .divide-y > :not([hidden]) ~ :not([hidden]), .theme-solar .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-solar .text-gray-900, .theme-solar .text-gray-800, .theme-solar .text-gray-700 { color: var(--text-color) !important; }
        .theme-solar .text-gray-600, .theme-solar .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-solar .text-blue-600 { color: var(--accent-color) !important; }
        .theme-solar .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-solar .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-solar input, .theme-solar select, .theme-solar textarea { background-color: #ffffff !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-solar input:focus, .theme-solar select:focus, .theme-solar textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.25) !important; outline: none !important; }
        .theme-solar .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Slate Theme */
        .theme-slate {
            --bg-color: #111827; /* gray-900 */
            --card-bg-color: #1f2937; /* gray-800 */
            --text-color: #e5e7eb; /* gray-200 */
            --subtle-text-color: #9ca3af; /* gray-400 */
            --border-color: #374151; /* gray-700 */
            --accent-color: #60a5fa; /* blue-400 */
            --accent-hover-color: #3b82f6; /* blue-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-slate body, .theme-slate .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-slate .bg-white, .theme-slate .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-slate .shadow-sm, .theme-slate .shadow-md, .theme-slate .shadow-lg, .theme-slate .shadow-xl { box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important; border: 1px solid var(--border-color); }
        .theme-slate .rounded-lg, .theme-slate .rounded-md { border-radius: 6px !important; }
        .theme-slate .border, .theme-slate .border-gray-300, .theme-slate .border-gray-200, .theme-slate .divide-y > :not([hidden]) ~ :not([hidden]), .theme-slate .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-slate .text-gray-900, .theme-slate .text-gray-800, .theme-slate .text-gray-700 { color: var(--text-color) !important; }
        .theme-slate .text-gray-600, .theme-slate .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-slate .text-blue-600 { color: var(--accent-color) !important; }
        .theme-slate .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-slate .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-slate input, .theme-slate select, .theme-slate textarea { background-color: var(--card-bg-color) !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-slate input:focus, .theme-slate select:focus, .theme-slate textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25) !important; outline: none !important; }
        .theme-slate .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-slate .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1e293b, #283445) !important; border-color: var(--border-color) !important; }
        .theme-slate nav button.bg-white { background-color: #2d3c50 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-slate nav button.bg-white:hover { background-color: #374a60 !important; border-color: var(--accent-color) !important; }
        .theme-slate nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #1e293b !important; }
        .theme-slate nav .bg-white.border { background-color: #2d3c50 !important; border-color: var(--border-color) !important; }
        .theme-slate nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1e293b !important; }
        .theme-slate nav .text-gray-700, .theme-slate nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-slate nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-slate nav .text-blue-700, .theme-slate nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Metro Theme */
        .theme-metro {
            --bg-color: #f3f4f6; /* gray-100 */
            --card-bg-color: #ffffff;
            --text-color: #111827; /* gray-900 */
            --subtle-text-color: #6b7280; /* gray-500 */
            --border-color: #e5e7eb; /* gray-200 */
            --accent-color: #2563eb; /* blue-600 */
            --accent-hover-color: #1d4ed8; /* blue-700 */
            --font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
            font-family: var(--font-family) !important;
        }
        .theme-metro body, .theme-metro .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-metro .bg-white, .theme-metro .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-metro .shadow-sm, .theme-metro .shadow-md, .theme-metro .shadow-lg, .theme-metro .shadow-xl { box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; border: 1px solid var(--border-color); }
        .theme-metro .rounded-lg, .theme-metro .rounded-md { border-radius: 4px !important; }
        .theme-metro .border, .theme-metro .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
        .theme-metro .text-blue-600 { color: var(--accent-color) !important; }
        .theme-metro .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-metro .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-metro input, .theme-metro select, .theme-metro textarea { background-color: #f9fafb !important; border-radius: 4px !important; border: 1px solid var(--border-color) !important; }
        .theme-metro input:focus, .theme-metro select:focus, .theme-metro textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important; outline: none !important; }
        .theme-metro .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Pastel Theme */
        .theme-pastel {
            --bg-color: #faf5ff; /* violet-50 */
            --card-bg-color: #ffffff;
            --text-color: #292524; /* stone-800 */
            --subtle-text-color: #6d6875; /* pastel gray */
            --border-color: #e9d5ff; /* violet-200 */
            --accent-color: #a78bfa; /* violet-400 */
            --accent-hover-color: #8b5cf6; /* violet-500 */
            --font-family: 'Noto Sans TC', sans-serif;

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
            font-family: var(--font-family) !important;
        }
        .theme-pastel body, .theme-pastel .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-pastel .bg-white, .theme-pastel .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-pastel .shadow-sm, .theme-pastel .shadow-md, .theme-pastel .shadow-lg, .theme-pastel .shadow-xl { box-shadow: 0 2px 6px rgba(167,139,250,0.12) !important; border: 1px solid var(--border-color); }
        .theme-pastel .rounded-lg { border-radius: 12px !important; }
        .theme-pastel .rounded-md { border-radius: 8px !important; }
        .theme-pastel .text-blue-600 { color: var(--accent-color) !important; }
        .theme-pastel .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-pastel .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-pastel input, .theme-pastel select, .theme-pastel textarea { background-color: #ffffff !important; border-radius: 10px !important; border: 1px solid var(--border-color) !important; }
        .theme-pastel input:focus, .theme-pastel select:focus, .theme-pastel textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(167,139,250,0.25) !important; outline: none !important; }
        .theme-pastel .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Neon Theme */
        .theme-neon {
            --bg-color: #0a0a0a;
            --card-bg-color: #111827; /* gray-900 */
            --text-color: #e2e8f0; /* slate-200 */
            --subtle-text-color: #34d399; /* emerald-400 */
            --border-color: #1f2937; /* gray-800 */
            --accent-color: #22d3ee; /* cyan-400 */
            --accent-hover-color: #06b6d4; /* cyan-500 */
            --font-family: 'Montserrat', 'Noto Sans TC', sans-serif;

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
            font-family: var(--font-family) !important;
        }
        .theme-neon body, .theme-neon .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-neon .bg-white, .theme-neon .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-neon .shadow-sm, .theme-neon .shadow-md, .theme-neon .shadow-lg, .theme-neon .shadow-xl { box-shadow: 0 0 20px rgba(34, 211, 238, 0.12), 0 0 6px rgba(34, 211, 238, 0.08) !important; border: 1px solid var(--border-color); }
        .theme-neon .rounded-lg, .theme-neon .rounded-md { border-radius: 4px !important; }
        .theme-neon .text-blue-600 { color: var(--accent-color) !important; }
        .theme-neon .bg-blue-600 { background-color: var(--accent-color) !important; color: #0a0a0a !important; }
        .theme-neon .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-neon input, .theme-neon select, .theme-neon textarea { background-color: #0a0a0a !important; border-radius: 4px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-neon input:focus, .theme-neon select:focus, .theme-neon textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3) !important; outline: none !important; }
        .theme-neon .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        
        /* Neon 主題標籤列深色樣式 */
        .theme-neon .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1a1a1a, #262626) !important; border-color: var(--border-color) !important; }
        .theme-neon nav button.bg-white { background-color: #2a2a2a !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-neon nav button.bg-white:hover { background-color: #333333 !important; border-color: var(--accent-color) !important; }
        .theme-neon nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #0a0a0a !important; }
        .theme-neon nav .bg-white.border { background-color: #2a2a2a !important; border-color: var(--border-color) !important; }
        .theme-neon nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1a1a1a !important; }
        .theme-neon nav .text-gray-700 { color: var(--text-color) !important; }
        .theme-neon nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-neon nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-neon nav .text-blue-700 { color: var(--accent-color) !important; }
        .theme-neon nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Retro Theme */
        .theme-retro {
            --bg-color: #fff7ed; /* orange-50 */
            --card-bg-color: #fef3c7; /* amber-100 */
            --text-color: #1f2937; /* slate-800 */
            --subtle-text-color: #b45309; /* amber-700 */
            --border-color: #fcd34d; /* amber-300 */
            --accent-color: #d97706; /* amber-600 */
            --accent-hover-color: #b45309; /* amber-700 */
            --font-family: 'Montserrat', sans-serif;

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
            font-family: var(--font-family) !important;
        }
        .theme-retro body, .theme-retro .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-retro .bg-white, .theme-retro .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-retro .shadow-sm, .theme-retro .shadow-md, .theme-retro .shadow-lg, .theme-retro .shadow-xl { box-shadow: 0 2px 4px rgba(217,119,6,0.12) !important; border: 1px solid var(--border-color); }
        .theme-retro .rounded-lg { border-radius: 12px !important; }
        .theme-retro .rounded-md { border-radius: 8px !important; }
        .theme-retro .text-blue-600 { color: var(--accent-color) !important; }
        .theme-retro .bg-blue-600 { background-color: var(--accent-color) !important; color: #fff !important; }
        .theme-retro .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-retro input, .theme-retro select, .theme-retro textarea { background-color: #fffdf5 !important; border-radius: 10px !important; border: 1px solid var(--border-color) !important; }
        .theme-retro input:focus, .theme-retro select:focus, .theme-retro textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25) !important; outline: none !important; }
        .theme-retro .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Minimal Theme */
        .theme-minimal {
            --bg-color: #ffffff;
            --card-bg-color: #ffffff;
            --text-color: #111827; /* gray-900 */
            --subtle-text-color: #6b7280; /* gray-500 */
            --border-color: #e5e7eb; /* gray-200 */
            --accent-color: #111827; /* gray-900 */
            --accent-hover-color: #000000; /* black */
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
            font-family: var(--font-family) !important;
        }
        .theme-minimal body, .theme-minimal .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-minimal .bg-white, .theme-minimal .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-minimal .shadow-sm, .theme-minimal .shadow-md, .theme-minimal .shadow-lg, .theme-minimal .shadow-xl { box-shadow: none !important; border: 1px solid var(--border-color); }
        .theme-minimal .rounded-lg, .theme-minimal .rounded-md { border-radius: 0 !important; }
        .theme-minimal .text-blue-600 { color: var(--accent-color) !important; }
        .theme-minimal .bg-blue-600 { background-color: var(--accent-color) !important; color: #fff !important; }
        .theme-minimal .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-minimal input, .theme-minimal select, .theme-minimal textarea { background-color: #ffffff !important; border-radius: 0 !important; border: 1px solid var(--border-color) !important; }
        .theme-minimal input:focus, .theme-minimal select:focus, .theme-minimal textarea:focus { border-color: var(--accent-color) !important; box-shadow: none !important; outline: none !important; }
        .theme-minimal .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; border-bottom-width: 2px !important; }

        /* Paper Theme */
        .theme-paper {
            --bg-color: #fefcf3; /* paper */
            --card-bg-color: #ffffff;
            --text-color: #1f2937; /* slate-800 */
            --subtle-text-color: #6b7280; /* gray-500 */
            --border-color: #f3e8ff; /* violet-100 */
            --accent-color: #16a34a; /* green-600 */
            --accent-hover-color: #15803d; /* green-700 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-paper body, .theme-paper .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-paper .bg-white, .theme-paper .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-paper .shadow-sm, .theme-paper .shadow-md, .theme-paper .shadow-lg, .theme-paper .shadow-xl { box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important; border: 1px solid var(--border-color); }
        .theme-paper .rounded-lg, .theme-paper .rounded-md { border-radius: 8px !important; }
        .theme-paper .text-blue-600 { color: var(--accent-color) !important; }
        .theme-paper .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-paper .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-paper input, .theme-paper select, .theme-paper textarea { background-color: #ffffff !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; }
        .theme-paper input:focus, .theme-paper select:focus, .theme-paper textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2) !important; outline: none !important; }
        .theme-paper .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Grape Theme */
        .theme-grape {
            --bg-color: #faf5ff; /* violet-50 */
            --card-bg-color: #f5f3ff; /* violet-100 */
            --text-color: #1f2937; /* slate-800 */
            --subtle-text-color: #7c3aed; /* violet-600 */
            --border-color: #ddd6fe; /* violet-200 */
            --accent-color: #8b5cf6; /* violet-500 */
            --accent-hover-color: #7c3aed; /* violet-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-grape body, .theme-grape .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-grape .bg-white, .theme-grape .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-grape .shadow-sm, .theme-grape .shadow-md, .theme-grape .shadow-lg, .theme-grape .shadow-xl { box-shadow: 0 2px 6px rgba(139,92,246,0.12) !important; border: 1px solid var(--border-color); }
        .theme-grape .rounded-lg, .theme-grape .rounded-md { border-radius: 8px !important; }
        .theme-grape .text-blue-600 { color: var(--accent-color) !important; }
        .theme-grape .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-grape .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-grape input, .theme-grape select, .theme-grape textarea { background-color: #ffffff !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; }
        .theme-grape input:focus, .theme-grape select:focus, .theme-grape textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25) !important; outline: none !important; }
        .theme-grape .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Cobalt Theme */
        .theme-cobalt {
            --bg-color: #0b1020; /* deep navy */
            --card-bg-color: #0f1b2d; /* cobalt deep */
            --text-color: #e2e8f0; /* slate-200 */
            --subtle-text-color: #60a5fa; /* blue-400 */
            --border-color: #1e3a8a; /* indigo-800 */
            --accent-color: #3b82f6; /* blue-500 */
            --accent-hover-color: #2563eb; /* blue-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-cobalt body, .theme-cobalt .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-cobalt .bg-white, .theme-cobalt .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-cobalt .shadow-sm, .theme-cobalt .shadow-md, .theme-cobalt .shadow-lg, .theme-cobalt .shadow-xl { box-shadow: 0 0 16px rgba(59,130,246,0.10) !important; border: 1px solid var(--border-color); }
        .theme-cobalt .rounded-lg, .theme-cobalt .rounded-md { border-radius: 6px !important; }
        .theme-cobalt .text-blue-600 { color: var(--accent-color) !important; }
        .theme-cobalt .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-cobalt .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-cobalt input, .theme-cobalt select, .theme-cobalt textarea { background-color: #0f1b2d !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-cobalt input:focus, .theme-cobalt select:focus, .theme-cobalt textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important; outline: none !important; }
        .theme-cobalt .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-cobalt .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #15202b, #1e2a38) !important; border-color: var(--border-color) !important; }
        .theme-cobalt nav button.bg-white { background-color: #253340 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-cobalt nav button.bg-white:hover { background-color: #2f3f50 !important; border-color: var(--accent-color) !important; }
        .theme-cobalt nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #15202b !important; }
        .theme-cobalt nav .bg-white.border { background-color: #253340 !important; border-color: var(--border-color) !important; }
        .theme-cobalt nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #15202b !important; }
        .theme-cobalt nav .text-gray-700, .theme-cobalt nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-cobalt nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-cobalt nav .text-blue-700, .theme-cobalt nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Sand Theme */
        .theme-sand {
            --bg-color: #fdf6e3; /* sand */
            --card-bg-color: #fffaf0; /* ivory */
            --text-color: #3f2d1c; /* warm brown */
            --subtle-text-color: #b08968; /* caramel */
            --border-color: #f1e3c6; /* light beige */
            --accent-color: #eab308; /* amber-500 */
            --accent-hover-color: #ca8a04; /* amber-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-sand body, .theme-sand .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-sand .bg-white, .theme-sand .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-sand .shadow-sm, .theme-sand .shadow-md, .theme-sand .shadow-lg, .theme-sand .shadow-xl { box-shadow: 0 2px 4px rgba(202,138,4,0.10) !important; border: 1px solid var(--border-color); }
        .theme-sand .rounded-lg, .theme-sand .rounded-md { border-radius: 10px !important; }
        .theme-sand .text-blue-600 { color: var(--accent-color) !important; }
        .theme-sand .bg-blue-600 { background-color: var(--accent-color) !important; color: #111827 !important; }
        .theme-sand .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-sand input, .theme-sand select, .theme-sand textarea { background-color: #ffffff !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; }
        .theme-sand input:focus, .theme-sand select:focus, .theme-sand textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(234,179,8,0.25) !important; outline: none !important; }
        .theme-sand .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Rosewood Theme */
        .theme-rosewood {
            --bg-color: #1b0a0a; /* deep burgundy */
            --card-bg-color: #2a0f0f; /* darker burgundy */
            --text-color: #fde2e2; /* rose-100 */
            --subtle-text-color: #fecaca; /* rose-200 */
            --border-color: #7f1d1d; /* red-900 */
            --accent-color: #f87171; /* red-400 */
            --accent-hover-color: #ef4444; /* red-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-rosewood body, .theme-rosewood .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-rosewood .bg-white, .theme-rosewood .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-rosewood .shadow-sm, .theme-rosewood .shadow-md, .theme-rosewood .shadow-lg, .theme-rosewood .shadow-xl { box-shadow: 0 2px 6px rgba(239,68,68,0.12) !important; border: 1px solid var(--border-color); }
        .theme-rosewood .rounded-lg, .theme-rosewood .rounded-md { border-radius: 8px !important; }
        .theme-rosewood .text-blue-600 { color: var(--accent-color) !important; }
        .theme-rosewood .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-rosewood .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-rosewood input, .theme-rosewood select, .theme-rosewood textarea { background-color: #2a0f0f !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-rosewood input:focus, .theme-rosewood select:focus, .theme-rosewood textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(248,113,113,0.25) !important; outline: none !important; }
        .theme-rosewood .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-rosewood .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1a0f0f, #2a1818) !important; border-color: var(--border-color) !important; }
        .theme-rosewood nav button.bg-white { background-color: #2f2020 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-rosewood nav button.bg-white:hover { background-color: #3f2828 !important; border-color: var(--accent-color) !important; }
        .theme-rosewood nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #1a0f0f !important; }
        .theme-rosewood nav .bg-white.border { background-color: #2f2020 !important; border-color: var(--border-color) !important; }
        .theme-rosewood nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1a0f0f !important; }
        .theme-rosewood nav .text-gray-700, .theme-rosewood nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-rosewood nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-rosewood nav .text-blue-700, .theme-rosewood nav .text-blue-500 { color: var(--accent-color) !important; }

        /* Blossom Theme */
        .theme-blossom {
            --bg-color: #fff7fb; /* pink tint */
            --card-bg-color: #fff0f6; /* lighter pink */
            --text-color: #3f1d2b; /* plum */
            --subtle-text-color: #e879f9; /* fuchsia-400 */
            --border-color: #fbcfe8; /* pink-200 */
            --accent-color: #f472b6; /* pink-400 */
            --accent-hover-color: #ec4899; /* pink-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-blossom body, .theme-blossom .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-blossom .bg-white, .theme-blossom .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-blossom .shadow-sm, .theme-blossom .shadow-md, .theme-blossom .shadow-lg, .theme-blossom .shadow-xl { box-shadow: 0 2px 4px rgba(236,72,153,0.12) !important; border: 1px solid var(--border-color); }
        .theme-blossom .rounded-lg, .theme-blossom .rounded-md { border-radius: 10px !important; }
        .theme-blossom .text-blue-600 { color: var(--accent-color) !important; }
        .theme-blossom .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-blossom .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-blossom input, .theme-blossom select, .theme-blossom textarea { background-color: #fff7fb !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; }
        .theme-blossom input:focus, .theme-blossom select:focus, .theme-blossom textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.25) !important; outline: none !important; }
        .theme-blossom .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Jade Theme */
        .theme-jade {
            --bg-color: #ecfdf5; /* emerald-50 */
            --card-bg-color: #f0fdf4; /* green-50 */
            --text-color: #064e3b; /* emerald-900 */
            --subtle-text-color: #10b981; /* emerald-500 */
            --border-color: #d1fae5; /* emerald-200 */
            --accent-color: #22c55e; /* green-500 */
            --accent-hover-color: #16a34a; /* green-600 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-jade body, .theme-jade .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-jade .bg-white, .theme-jade .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-jade .shadow-sm, .theme-jade .shadow-md, .theme-jade .shadow-lg, .theme-jade .shadow-xl { box-shadow: 0 2px 4px rgba(34,197,94,0.10) !important; border: 1px solid var(--border-color); }
        .theme-jade .rounded-lg, .theme-jade .rounded-md { border-radius: 10px !important; }
        .theme-jade .text-blue-600 { color: var(--accent-color) !important; }
        .theme-jade .bg-blue-600 { background-color: var(--accent-color) !important; }
        .theme-jade .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-jade input, .theme-jade select, .theme-jade textarea { background-color: #ffffff !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; }
        .theme-jade input:focus, .theme-jade select:focus, .theme-jade textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(34,197,94,0.25) !important; outline: none !important; }
        .theme-jade .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

        /* Cinder Theme */
        .theme-cinder {
            --bg-color: #0f0f10; /* near black */
            --card-bg-color: #16161a; /* dark graphite */
            --text-color: #e5e7eb; /* gray-200 */
            --subtle-text-color: #9ca3af; /* gray-400 */
            --border-color: #27272a; /* zinc-800 */
            --accent-color: #fbbf24; /* amber-400 */
            --accent-hover-color: #f59e0b; /* amber-500 */

            background-color: var(--bg-color) !important;
            color: var(--text-color) !important;
        }
        .theme-cinder body, .theme-cinder .bg-gray-50 { background-color: var(--bg-color) !important; }
        .theme-cinder .bg-white, .theme-cinder .bg-gray-100 { background-color: var(--card-bg-color) !important; border: 1px solid var(--border-color); }
        .theme-cinder .shadow-sm, .theme-cinder .shadow-md, .theme-cinder .shadow-lg, .theme-cinder .shadow-xl { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; border: 1px solid var(--border-color); }
        .theme-cinder .rounded-lg, .theme-cinder .rounded-md { border-radius: 6px !important; }
        .theme-cinder .text-blue-600 { color: var(--accent-color) !important; }
        .theme-cinder .bg-blue-600 { background-color: var(--accent-color) !important; color: #111827 !important; }
        .theme-cinder .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
        .theme-cinder input, .theme-cinder select, .theme-cinder textarea { background-color: #16161a !important; border-radius: 6px !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
        .theme-cinder input:focus, .theme-cinder select:focus, .theme-cinder textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 2px rgba(251,191,36,0.25) !important; outline: none !important; }
        .theme-cinder .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }
        .theme-cinder .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #0a0a0a, #1a1a1a) !important; border-color: var(--border-color) !important; }
        .theme-cinder nav button.bg-white { background-color: #222222 !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
        .theme-cinder nav button.bg-white:hover { background-color: #2f2f2f !important; border-color: var(--accent-color) !important; }
        .theme-cinder nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #0a0a0a !important; }
        .theme-cinder nav .bg-white.border { background-color: #222222 !important; border-color: var(--border-color) !important; }
        .theme-cinder nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #0a0a0a !important; }
        .theme-cinder nav .text-gray-700, .theme-cinder nav .text-gray-800 { color: var(--text-color) !important; }
        .theme-cinder nav .text-gray-500 { color: var(--subtle-text-color) !important; }
        .theme-cinder nav .text-blue-700, .theme-cinder nav .text-blue-500 { color: var(--accent-color) !important; }

        /* === Theme-specific dark-button palette for requested buttons === */
        /* Sci-Fi (高科技) - dark base with neon text/border per button */
    .theme-scifi button.view-switch-btn[data-view="departmentManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="departmentManagement"] {
            background-color: #0a0f1a !important; color: #34d399 !important; border: 1px solid #34d399 !important;
            box-shadow: 0 0 10px rgba(52,211,153,.25) !important;
        }
    .theme-scifi button.view-switch-btn[data-view="departmentManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="departmentManagement"]:hover { background-color: #0e1623 !important; }

    .theme-scifi button.view-switch-btn[data-view="userManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="userManagement"] {
            background-color: #0a0f1a !important; color: #22d3ee !important; border: 1px solid #22d3ee !important;
            box-shadow: 0 0 10px rgba(34,211,238,.25) !important;
        }
    .theme-scifi button.view-switch-btn[data-view="userManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="userManagement"]:hover { background-color: #0e1623 !important; }

    .theme-scifi button.view-switch-btn[data-view="vendorManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="vendorManagement"] {
            background-color: #0a0f1a !important; color: #a78bfa !important; border: 1px solid #a78bfa !important;
            box-shadow: 0 0 10px rgba(167,139,250,.25) !important;
        }
    .theme-scifi button.view-switch-btn[data-view="vendorManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="vendorManagement"]:hover { background-color: #0e1623 !important; }

    .theme-scifi button.view-switch-btn[data-view="classroomManagement"],
    .theme-scifi button.view-switch-btn[data-view="headerManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="classroomManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="headerManagement"] {
            background-color: #0a0f1a !important; color: #4ade80 !important; border: 1px solid #4ade80 !important;
            box-shadow: 0 0 10px rgba(74,222,128,.25) !important;
        }
    .theme-scifi button.view-switch-btn[data-view="classroomManagement"]:hover,
    .theme-scifi button.view-switch-btn[data-view="headerManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="classroomManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="headerManagement"]:hover { background-color: #0e1623 !important; }

    .theme-scifi button.view-switch-btn[data-view="invoiceManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="invoiceManagement"] {
            background-color: #0a0f1a !important; color: #c084fc !important; border: 1px solid #c084fc !important;
            box-shadow: 0 0 10px rgba(192,132,252,.25) !important;
        }
    .theme-scifi button.view-switch-btn[data-view="invoiceManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="invoiceManagement"]:hover { background-color: #0e1623 !important; }

        .theme-scifi label[for="request-attachment-input"] {
            background-color: #0a0f1a !important; color: #f59e0b !important; border: 1px solid #f59e0b !important;
            box-shadow: 0 0 10px rgba(245,158,11,.25) !important;
        }
        .theme-scifi label[for="request-attachment-input"]:hover { background-color: #0e1623 !important; }

        .theme-scifi button[data-action="cancel-multi-select"],
        .theme-scifi button[data-action="cancel-modal"] {
            background-color: #0a0f1a !important; color: #fb7185 !important; border: 1px solid #fb7185 !important;
            box-shadow: 0 0 10px rgba(251,113,133,.25) !important;
        }
        .theme-scifi button[data-action="cancel-multi-select"]:hover,
        .theme-scifi button[data-action="cancel-modal"]:hover { background-color: #0e1623 !important; }

    .theme-scifi button.view-switch-btn[data-view="dashboard"],
    .theme-scifi button.view-switch-btn[data-view="productManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="productManagement"],
    .theme-scifi button.view-switch-btn[data-view="announcementManagement"],
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="announcementManagement"] {
            background-color: #0a0f1a !important; color: #38bdf8 !important; border: 1px solid #38bdf8 !important;
            box-shadow: 0 0 10px rgba(56,189,248,.25) !important;
        }
    .theme-scifi button.view-switch-btn[data-view="dashboard"]:hover,
    .theme-scifi button.view-switch-btn[data-view="productManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="productManagement"]:hover,
    .theme-scifi button.view-switch-btn[data-view="announcementManagement"]:hover,
    .theme-scifi .floating-toolbar button.view-switch-btn[data-view="announcementManagement"]:hover { background-color: #0e1623 !important; }

    /* Theme-scifi: dropdown flyout buttons styling */
    .theme-scifi .dropdown-flyout { background-color: #0a0f1a !important; border-color: #2d3748 !important; }
    .theme-scifi .dropdown-flyout button { background-color: #0a0f1a !important; color: #9ca3af !important; border: 1px solid #334155 !important; }
    .theme-scifi .dropdown-flyout button:hover { background-color: #0e1623 !important; color: #e5e7eb !important; }
    .theme-scifi .dropdown-flyout button[data-action="batch-approve"] { color: #34d399 !important; border-color: #34d399 !important; box-shadow: 0 0 8px rgba(52,211,153,.25) !important; }
    .theme-scifi .dropdown-flyout button[data-action="batch-reject"] { color: #fb7185 !important; border-color: #fb7185 !important; box-shadow: 0 0 8px rgba(251,113,133,.25) !important; }
    .theme-scifi .dropdown-flyout button[data-action="batch-close"] { color: #f59e0b !important; border-color: #f59e0b !important; box-shadow: 0 0 8px rgba(245,158,11,.25) !important; }
    .theme-scifi .dropdown-flyout button[data-action="consolidate-by-vendor"] { color: #22d3ee !important; border-color: #22d3ee !important; box-shadow: 0 0 8px rgba(34,211,238,.25) !important; }
    .theme-scifi .dropdown-flyout button[data-action="export"] { color: #22c55e !important; border-color: #22c55e !important; box-shadow: 0 0 8px rgba(34,197,94,.25) !important; }

    /* Theme-abstract: dropdown flyout buttons styling */
    .theme-abstract .dropdown-flyout { background-color: #1f1f1f !important; border-color: #333 !important; }
    .theme-abstract .dropdown-flyout button { background-color: #1f1f1f !important; color: #ddd !important; border: 2px solid #444 !important; }
    .theme-abstract .dropdown-flyout button:hover { background-color: #2a2a2a !important; }
    .theme-abstract .dropdown-flyout button[data-action="batch-approve"] { color: #00ff7f !important; border-color: #00ff7f !important; box-shadow: 0 0 10px rgba(0,255,127,.25) !important; }
    .theme-abstract .dropdown-flyout button[data-action="batch-reject"] { color: #ff4d4f !important; border-color: #ff4d4f !important; box-shadow: 0 0 10px rgba(255,77,79,.25) !important; }
    .theme-abstract .dropdown-flyout button[data-action="batch-close"] { color: #ffd166 !important; border-color: #ffd166 !important; box-shadow: 0 0 10px rgba(255,209,102,.25) !important; }
    .theme-abstract .dropdown-flyout button[data-action="consolidate-by-vendor"] { color: #00bcd4 !important; border-color: #00bcd4 !important; box-shadow: 0 0 10px rgba(0,188,212,.25) !important; }
    .theme-abstract .dropdown-flyout button[data-action="export"] { color: #4caf50 !important; border-color: #4caf50 !important; box-shadow: 0 0 10px rgba(76,175,80,.25) !important; }

        /* Abstract (藝術) - dark graphite base with vivid accents per button */
        .theme-abstract button.view-switch-btn[data-view="departmentManagement"] {
            background-color: #2a2a2a !important; color: #00ff7f !important; border: 2px solid #00ff7f !important;
            box-shadow: 0 0 10px rgba(0,255,127,.25) !important;
        }
        .theme-abstract button.view-switch-btn[data-view="departmentManagement"]:hover { background-color: #333333 !important; }

        .theme-abstract button.view-switch-btn[data-view="userManagement"] {
            background-color: #2a2a2a !important; color: #00ffff !important; border: 2px solid #00ffff !important;
            box-shadow: 0 0 10px rgba(0,255,255,.25) !important;
        }
        .theme-abstract button.view-switch-btn[data-view="userManagement"]:hover { background-color: #333333 !important; }

        .theme-abstract button.view-switch-btn[data-view="vendorManagement"] {
            background-color: #2a2a2a !important; color: #ff00ff !important; border: 2px solid #ff00ff !important;
            box-shadow: 0 0 10px rgba(255,0,255,.25) !important;
        }
        .theme-abstract button.view-switch-btn[data-view="vendorManagement"]:hover { background-color: #333333 !important; }

        .theme-abstract button.view-switch-btn[data-view="classroomManagement"],
        .theme-abstract button.view-switch-btn[data-view="headerManagement"] {
            background-color: #2a2a2a !important; color: #7dff4d !important; border: 2px solid #7dff4d !important;
            box-shadow: 0 0 10px rgba(125,255,77,.25) !important;
        }
        .theme-abstract button.view-switch-btn[data-view="classroomManagement"]:hover,
        .theme-abstract button.view-switch-btn[data-view="headerManagement"]:hover { background-color: #333333 !important; }

        .theme-abstract button.view-switch-btn[data-view="invoiceManagement"] {
            background-color: #2a2a2a !important; color: #ff99ff !important; border: 2px solid #ff99ff !important;
            box-shadow: 0 0 10px rgba(255,153,255,.25) !important;
        }
        .theme-abstract button.view-switch-btn[data-view="invoiceManagement"]:hover { background-color: #333333 !important; }

        .theme-abstract label[for="request-attachment-input"] {
            background-color: #2a2a2a !important; color: #ffa500 !important; border: 2px solid #ffa500 !important;
            box-shadow: 0 0 10px rgba(255,165,0,.25) !important;
        }
        .theme-abstract label[for="request-attachment-input"]:hover { background-color: #333333 !important; }

        .theme-abstract button[data-action="cancel-multi-select"],
        .theme-abstract button[data-action="cancel-modal"] {
            background-color: #2a2a2a !important; color: #ff7f50 !important; border: 2px solid #ff7f50 !important;
            box-shadow: 0 0 10px rgba(255,127,80,.25) !important;
        }
        .theme-abstract button[data-action="cancel-multi-select"]:hover,
        .theme-abstract button[data-action="cancel-modal"]:hover { background-color: #333333 !important; }

        .theme-abstract button.view-switch-btn[data-view="dashboard"],
        .theme-abstract button.view-switch-btn[data-view="productManagement"],
        .theme-abstract button.view-switch-btn[data-view="announcementManagement"] {
            background-color: #2a2a2a !important; color: #ffff00 !important; border: 2px solid #ffff00 !important;
            box-shadow: 0 0 10px rgba(255,255,0,.25) !important;
        }
        .theme-abstract button.view-switch-btn[data-view="dashboard"]:hover,
        .theme-abstract button.view-switch-btn[data-view="productManagement"]:hover,
        .theme-abstract button.view-switch-btn[data-view="announcementManagement"]:hover { background-color: #333333 !important; }

        /* === Dark Themes Button Variables === */
        /* Sci-Fi */
    .theme-scifi { --btn-dark-base:#0a0f1a; --btn-dept-color:#34d399; --btn-user-color:#22d3ee; --btn-vendor-color:#a78bfa; --btn-classroom-color:#4ade80; --btn-invoice-color:#c084fc; --btn-attach-color:#f59e0b; --btn-cancel-color:#fb7185; --btn-back-color:#38bdf8; }
        /* Abstract */
    .theme-abstract { --btn-dark-base:#2a2a2a; --btn-dept-color:#00ff7f; --btn-user-color:#00ffff; --btn-vendor-color:#ff00ff; --btn-classroom-color:#7dff4d; --btn-invoice-color:#ff99ff; --btn-attach-color:#ffa500; --btn-cancel-color:#ff7f50; --btn-back-color:#ffff00; }
        /* Forest */
    .theme-forest { --btn-dark-base:#123524; --btn-dept-color:#34d399; --btn-user-color:#10b981; --btn-vendor-color:#a7f3d0; --btn-classroom-color:#bbf7d0; --btn-invoice-color:#f0abfc; --btn-attach-color:#f59e0b; --btn-cancel-color:#ef4444; --btn-back-color:#93c5fd; }
        /* Ocean */
    .theme-ocean { --btn-dark-base:#0b1220; --btn-dept-color:#38bdf8; --btn-user-color:#0ea5e9; --btn-vendor-color:#93c5fd; --btn-classroom-color:#22d3ee; --btn-invoice-color:#a855f7; --btn-attach-color:#14b8a6; --btn-cancel-color:#fb7185; --btn-back-color:#60a5fa; }
        /* Sunset */
    .theme-sunset { --btn-dark-base:#3a0e22; --btn-dept-color:#fb7185; --btn-user-color:#f472b6; --btn-vendor-color:#f59e0b; --btn-classroom-color:#f97316; --btn-invoice-color:#a855f7; --btn-attach-color:#a78bfa; --btn-cancel-color:#ef4444; --btn-back-color:#38bdf8; }
        /* Midnight */
    .theme-midnight { --btn-dark-base:#14141f; --btn-dept-color:#8b5cf6; --btn-user-color:#7c3aed; --btn-vendor-color:#a78bfa; --btn-classroom-color:#22d3ee; --btn-invoice-color:#a855f7; --btn-attach-color:#22c55e; --btn-cancel-color:#f87171; --btn-back-color:#60a5fa; }
        /* Nord */
    .theme-nord { --btn-dark-base:#3b4252; --btn-dept-color:#88c0d0; --btn-user-color:#81a1c1; --btn-vendor-color:#a3be8c; --btn-classroom-color:#8fbcbb; --btn-invoice-color:#d8dee9; --btn-attach-color:#ebcb8b; --btn-cancel-color:#bf616a; --btn-back-color:#5e81ac; }
        /* Slate */
    .theme-slate { --btn-dark-base:#111827; --btn-dept-color:#3b82f6; --btn-user-color:#60a5fa; --btn-vendor-color:#22c55e; --btn-classroom-color:#10b981; --btn-invoice-color:#a855f7; --btn-attach-color:#f59e0b; --btn-cancel-color:#ef4444; --btn-back-color:#a78bfa; }
        /* Neon */
    .theme-neon { --btn-dark-base:#0a0a0a; --btn-dept-color:#22d3ee; --btn-user-color:#34d399; --btn-vendor-color:#a78bfa; --btn-classroom-color:#facc15; --btn-invoice-color:#f472b6; --btn-attach-color:#fbbf24; --btn-cancel-color:#fb7185; --btn-back-color:#38bdf8; }
        /* Hotel Lux */
    .theme-hotel-lux { --btn-dark-base:#1a1a22; --btn-dept-color:#d4af37; --btn-user-color:#14b8a6; --btn-vendor-color:#a78bfa; --btn-classroom-color:#f97316; --btn-invoice-color:#facc15; --btn-attach-color:#f59e0b; --btn-cancel-color:#f87171; --btn-back-color:#38bdf8; }
        /* Cobalt */
    .theme-cobalt { --btn-dark-base:#0b1020; --btn-dept-color:#3b82f6; --btn-user-color:#60a5fa; --btn-vendor-color:#93c5fd; --btn-classroom-color:#22d3ee; --btn-invoice-color:#a855f7; --btn-attach-color:#22d3ee; --btn-cancel-color:#f87171; --btn-back-color:#0ea5e9; }
    /* Rosewood (紅木) */
    .theme-rosewood { --btn-dark-base:#2a0f0f; --btn-dept-color:#fbbf24; --btn-user-color:#f59e0b; --btn-vendor-color:#f87171; --btn-classroom-color:#a78bfa; --btn-invoice-color:#38bdf8; --btn-attach-color:#a78bfa; --btn-cancel-color:#ef4444; --btn-back-color:#fb7185; }
    /* Cinder */
    .theme-cinder { --btn-dark-base:#16161a; --btn-dept-color:#f59e0b; --btn-user-color:#22d3ee; --btn-vendor-color:#a78bfa; --btn-classroom-color:#34d399; --btn-invoice-color:#fbbf24; --btn-attach-color:#34d399; --btn-cancel-color:#ef4444; --btn-back-color:#60a5fa; }
        /* Graphite */
    .theme-graphite { --btn-dark-base:#181b22; --btn-dept-color:#60a5fa; --btn-user-color:#34d399; --btn-vendor-color:#a78bfa; --btn-classroom-color:#f59e0b; --btn-invoice-color:#f87171; --btn-attach-color:#f59e0b; --btn-cancel-color:#ef4444; --btn-back-color:#22d3ee; }
        /* Charcoal */
    .theme-charcoal { --btn-dark-base:#151820; --btn-dept-color:#22d3ee; --btn-user-color:#34d399; --btn-vendor-color:#f59e0b; --btn-classroom-color:#a78bfa; --btn-invoice-color:#f87171; --btn-attach-color:#a78bfa; --btn-cancel-color:#ef4444; --btn-back-color:#60a5fa; }

        /* === Unified Rules for Dark Themes (apply variables) === */
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="departmentManagement"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-dept-color) !important; border: 1px solid var(--btn-dept-color) !important;
        }
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="userManagement"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-user-color) !important; border: 1px solid var(--btn-user-color) !important;
        }
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="vendorManagement"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-vendor-color) !important; border: 1px solid var(--btn-vendor-color) !important;
        }
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="classroomManagement"],
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="headerManagement"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-classroom-color) !important; border: 1px solid var(--btn-classroom-color) !important;
        }
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="invoiceManagement"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-invoice-color) !important; border: 1px solid var(--btn-invoice-color) !important;
        }
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) label[for="request-attachment-input"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-attach-color) !important; border: 1px solid var(--btn-attach-color) !important;
        }
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button[data-action="cancel-multi-select"],
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button[data-action="cancel-modal"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-cancel-color) !important; border: 1px solid var(--btn-cancel-color) !important;
        }
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="dashboard"],
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="productManagement"],
    :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view="announcementManagement"] {
            background-color: var(--btn-dark-base) !important; color: var(--btn-back-color) !important; border: 1px solid var(--btn-back-color) !important;
        }
        /* Hover effect (slightly darker base) */
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view],
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) label[for="request-attachment-input"],
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) button[data-action="cancel-multi-select"],
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) button[data-action="cancel-modal"] {
            transition: background-color .2s ease, border-color .2s ease, color .2s ease;
        }
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) button.view-switch-btn[data-view]:hover,
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) label[for="request-attachment-input"]:hover,
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) button[data-action="cancel-multi-select"]:hover,
        :is(.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-midnight,.theme-nord,.theme-slate,.theme-neon,.theme-hotel-lux,.theme-cobalt,.theme-cinder,.theme-graphite,.theme-charcoal) button[data-action="cancel-modal"]:hover {
            filter: brightness(1.08);
        }
        /* === Global Product Category Button 標準化 (A+B+C) === */
        .product-category-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0 8px;
            height: 32px;
            max-width: 160px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--card-bg-color, #fff);
            background-image: none !important;
            animation: none !important;
            box-shadow: none !important;
            filter: none !important;
            line-height: 1.25rem;
            transition: color .18s ease, border-color .18s ease, background-color .18s ease;
        }
        .product-category-btn.border-blue-500 { background-color: rgba(30,64,175,0.08); }
        .product-category-btn:hover { background-color: rgba(0,0,0,0.04); }
        .product-category-btn:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
        @media (max-width:640px){ .product-category-btn { max-width:120px; } }
        /* 深色主題 hover (不影響原 nav 排版，只調整按鈕背景) */
        :is(.theme-midnight,.theme-slate,.theme-neon,.theme-ocean,.theme-cobalt,.theme-graphite,.theme-charcoal,.theme-cinder,.theme-rosewood,.theme-forest) .product-category-btn:hover {
            background-color: rgba(255,255,255,0.08);
        }
        :is(.theme-midnight,.theme-slate,.theme-neon,.theme-ocean,.theme-cobalt,.theme-graphite,.theme-charcoal,.theme-cinder,.theme-rosewood,.theme-forest) .product-category-btn.border-blue-500 {
            background-color: rgba(255,255,255,0.12);
        }
        /* 分類 nav 外框統一（依主題變數） */
        .product-categories {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: 8px;
            padding: 0 6px; /* 緊縮 */
            background: var(--card-bg-color, #fff);
            height: 40px;
            white-space: nowrap;
        }
        /* 深色系再稍微提高邊框可見度 */
        :is(.theme-midnight,.theme-slate,.theme-neon,.theme-ocean,.theme-cobalt,.theme-graphite,.theme-charcoal,.theme-cinder,.theme-rosewood,.theme-forest) .product-categories {
            border-color: rgba(255,255,255,0.12) !important;
            background: linear-gradient(
                135deg,
                rgba(255,255,255,0.04),
                rgba(255,255,255,0.02)
            );
        }
        /* 柔和 / 亮色主題保留乾淨感，略淡處理 */
        :is(.theme-apple,.theme-pastel,.theme-care-soft,.theme-care-fresh,.theme-metro,.theme-paper,.theme-retro,.theme-solar,.theme-latte,.theme-mint,.theme-jade,.theme-grape,.theme-ghibli,.theme-pearl,.theme-denim,.theme-cocoa,.theme-sand,.theme-sky,.theme-lime,.theme-plum,.theme-blossom,.theme-colorful,.theme-luhong,.theme-lugreen) .product-categories {
            border-color: var(--border-color,#e5e7eb);
            background: var(--card-bg-color,#fff);
        }
        /* 內部按鈕與容器間距微調：避免邊框貼緊第一個/最後一個按鈕 */
        .product-categories .product-category-btn { margin-top: 0; }
        /* 統一新申請雙欄 layout（僅作用在 newRequest-view，避免影響其它 view） */
        #newRequest-view .layout-two-column { align-items: flex-start; }
        #newRequest-view .layout-two-column > .layout-pane { box-sizing: border-box; }
    /* Ultra Compact 密度：再降 5px（原 12→8 / 桌面 10→6） */
    :root { --pane-padding-x:8px; --pane-padding-y:8px; --app-line-height:1.45; }
    #newRequest-view .layout-pane { padding: var(--pane-padding-y) var(--pane-padding-x); line-height: var(--app-line-height); }
    /* 桌面再緊（原 10px → 6px） */
    @media (min-width:1024px){ #newRequest-view .layout-pane { --pane-padding-x:6px; } }
    /* 小螢幕同步維持 8px（避免過窄觸控區），如需更緊可改 6px */
    @media (max-width:640px){ #newRequest-view .layout-pane { --pane-padding-x:8px; --pane-padding-y:8px; } }

    @media (min-width:1024px){
        #newRequest-view {
            --sidebar-sticky-top: 132px;
            --sidebar-sticky-gap: 24px;
        }
        #newRequest-view .layout-two-column > .layout-pane.sidebar-pane {
            position: sticky;
            top: var(--sidebar-sticky-top, 132px);
            align-self: flex-start;
            height: fit-content;
            z-index: 10;
        }
        #newRequest-view .layout-two-column > .layout-pane.sidebar-pane > #new-request-sidebar {
            max-height: calc(100vh - var(--sidebar-sticky-top, 132px) - var(--sidebar-sticky-gap, 24px));
            overflow-y: auto;
        }
    }

    @media (max-width:1023px){
        #newRequest-view .layout-two-column > .layout-pane.sidebar-pane {
            position: static;
            top: auto;
        }
        #newRequest-view .layout-two-column > .layout-pane.sidebar-pane > #new-request-sidebar {
            max-height: none;
            overflow: visible;
        }
    }

    /* 移除商品項目清單區塊的外框線（覆蓋所有主題樣式） */
    [class*="theme-"] #new-request-sidebar .sidebar-section.cart-items-container,
    [class*="theme-"] #new-request-sidebar .sidebar-section.cart-items-container.bg-white {
        border: none !important;
        box-shadow: none !important;
    }

    /* 雙欄網格模式預設取消邊框，改由 cart-item-card 控制 */
    [class*="theme-"] .cart-items ul.grid li,
    [class*="theme-"] .cart-items ul.grid > li {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    [class*="theme-"] .cart-items ul.grid li.cart-item-card {
        border: 1px solid var(--cart-divider-color, var(--border-color, #d1d5db)) !important;
        border-radius: 12px !important;
        background: var(--cart-card-bg, var(--card-bg-color, #ffffff)) !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    }

    /* 單欄列表模式 - 僅保留項目間的分隔線 */
    [class*="theme-"] .cart-items ul.divide-y li,
    [class*="theme-"] .cart-items ul.divide-y > li,
    [class*="theme-"] .cart-items ul.divide-y > :not([hidden]) ~ :not([hidden]) {
        border-left: none !important;
        border-right: none !important;
        border-bottom-width: 0 !important;
        border-top-width: 1px !important;
        border-top-color: var(--cart-divider-color, var(--border-color, #e5e7eb)) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    [class*="theme-"] .cart-items ul.divide-y li:first-child,
    [class*="theme-"] .cart-items ul.divide-y > li:first-child {
        border-top-width: 0 !important;
    }

    /* === Extra 30 Themes === */
    /* Aurora */
    .theme-aurora { --bg-color:#0b1220; --card-bg-color:#102336; --text-color:#e6fffb; --subtle-text-color:#6ee7b7; --border-color:#1e3a8a; --accent-color:#34d399; --accent-hover-color:#10b981; }
    .theme-aurora body, .theme-aurora .bg-gray-50 { background-color: var(--bg-color) !important; }
    .theme-aurora .bg-white, .theme-aurora .bg-gray-100 { background-color: var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-aurora .shadow-sm, .theme-aurora .shadow-md, .theme-aurora .shadow-lg, .theme-aurora .shadow-xl { box-shadow:0 0 16px rgba(52,211,153,.1) !important; border:1px solid var(--border-color); }
    .theme-aurora .rounded-lg, .theme-aurora .rounded-md { border-radius:8px !important; }
    .theme-aurora .border, .theme-aurora .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
    .theme-aurora .text-blue-600 { color: var(--accent-color) !important; }
    .theme-aurora .bg-blue-600 { background-color: var(--accent-color) !important; }
    .theme-aurora .bg-blue-600:hover { background-color: var(--accent-hover-color) !important; }
    .theme-aurora input, .theme-aurora select, .theme-aurora textarea { background:#0b1220 !important; border:1px solid var(--border-color) !important; color:var(--text-color) !important; border-radius:6px !important; }
    .theme-aurora input:focus, .theme-aurora select:focus, .theme-aurora textarea:focus { border-color: var(--accent-color) !important; box-shadow:0 0 0 2px rgba(52,211,153,.25) !important; outline:none !important; }
    .theme-aurora .tab-button.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; }

    /* Cocoa */
    .theme-cocoa { --bg-color:#f7efe7; --card-bg-color:#fffaf5; --text-color:#3e2c20; --subtle-text-color:#a16207; --border-color:#f3e0d0; --accent-color:#b45309; --accent-hover-color:#92400e; }
    .theme-cocoa body, .theme-cocoa .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-cocoa .bg-white, .theme-cocoa .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-cocoa .shadow-sm, .theme-cocoa .shadow-md, .theme-cocoa .shadow-lg, .theme-cocoa .shadow-xl { box-shadow:0 2px 4px rgba(180,83,9,.08) !important; border:1px solid var(--border-color); }
    .theme-cocoa .rounded-lg, .theme-cocoa .rounded-md { border-radius:10px !important; }
    .theme-cocoa .border, .theme-cocoa .divide-y > :not([hidden]) ~ :not([hidden]) { border-color:var(--border-color) !important; }
    .theme-cocoa .text-blue-600 { color: var(--accent-color) !important; }
    .theme-cocoa .bg-blue-600 { background: var(--accent-color) !important; color:#fff !important; }
    .theme-cocoa .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-cocoa input, .theme-cocoa select, .theme-cocoa textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; color:var(--text-color) !important; }
    .theme-cocoa input:focus, .theme-cocoa select:focus, .theme-cocoa textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(180,83,9,.2) !important; outline:none !important; }
    .theme-cocoa .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Denim */
    .theme-denim { --bg-color:#eaf2ff; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#1d4ed8; --border-color:#bfdbfe; --accent-color:#2563eb; --accent-hover-color:#1d4ed8; }
    .theme-denim body, .theme-denim .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-denim .bg-white, .theme-denim .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-denim .shadow-sm, .theme-denim .shadow-md, .theme-denim .shadow-lg, .theme-denim .shadow-xl { box-shadow:0 1px 3px rgba(37,99,235,.12) !important; border:1px solid var(--border-color); }
    .theme-denim .rounded-lg, .theme-denim .rounded-md { border-radius:8px !important; }
    .theme-denim .border, .theme-denim .divide-y > :not([hidden]) ~ :not([hidden]) { border-color:var(--border-color) !important; }
    .theme-denim .text-blue-600 { color: var(--accent-color) !important; }
    .theme-denim .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-denim .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-denim input, .theme-denim select, .theme-denim textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:6px !important; }
    .theme-denim input:focus, .theme-denim select:focus, .theme-denim textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(37,99,235,.2) !important; outline:none !important; }
    .theme-denim .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Lime */
    .theme-lime { --bg-color:#f7fee7; --card-bg-color:#ffffff; --text-color:#1a2e05; --subtle-text-color:#84cc16; --border-color:#d9f99d; --accent-color:#65a30d; --accent-hover-color:#4d7c0f; }
    .theme-lime body, .theme-lime .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-lime .bg-white, .theme-lime .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-lime .shadow-sm, .theme-lime .shadow-md, .theme-lime .shadow-lg, .theme-lime .shadow-xl { box-shadow:0 1px 3px rgba(101,163,13,.12) !important; border:1px solid var(--border-color); }
    .theme-lime .rounded-lg, .theme-lime .rounded-md { border-radius:8px !important; }
    .theme-lime .text-blue-600 { color: var(--accent-color) !important; }
    .theme-lime .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-lime .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-lime input, .theme-lime select, .theme-lime textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-lime input:focus, .theme-lime select:focus, .theme-lime textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(101,163,13,.22) !important; outline:none !important; }
    .theme-lime .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Coral */
    .theme-coral { --bg-color:#fff1f2; --card-bg-color:#ffffff; --text-color:#4a1d1d; --subtle-text-color:#fb7185; --border-color:#fecdd3; --accent-color:#f43f5e; --accent-hover-color:#e11d48; }
    .theme-coral body, .theme-coral .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-coral .bg-white, .theme-coral .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-coral .shadow-sm, .theme-coral .shadow-md, .theme-coral .shadow-lg, .theme-coral .shadow-xl { box-shadow:0 2px 6px rgba(244,63,94,.12) !important; border:1px solid var(--border-color); }
    .theme-coral .rounded-lg, .theme-coral .rounded-md { border-radius:10px !important; }
    .theme-coral .text-blue-600 { color: var(--accent-color) !important; }
    .theme-coral .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-coral .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-coral input, .theme-coral select, .theme-coral textarea { background:#fff7f8 !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-coral input:focus, .theme-coral select:focus, .theme-coral textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(244,63,94,.22) !important; outline:none !important; }
    .theme-coral .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Plum */
    .theme-plum { --bg-color:#faf5ff; --card-bg-color:#ffffff; --text-color:#2e1065; --subtle-text-color:#a78bfa; --border-color:#e9d5ff; --accent-color:#8b5cf6; --accent-hover-color:#7c3aed; }
    .theme-plum body, .theme-plum .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-plum .bg-white, .theme-plum .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-plum .shadow-sm, .theme-plum .shadow-md, .theme-plum .shadow-lg, .theme-plum .shadow-xl { box-shadow:0 2px 6px rgba(139,92,246,.12) !important; border:1px solid var(--border-color); }
    .theme-plum .rounded-lg, .theme-plum .rounded-md { border-radius:8px !important; }
    .theme-plum .text-blue-600 { color: var(--accent-color) !important; }
    .theme-plum .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-plum .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-plum input, .theme-plum select, .theme-plum textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-plum input:focus, .theme-plum select:focus, .theme-plum textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(139,92,246,.22) !important; outline:none !important; }
    .theme-plum .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Sky */
    .theme-sky { --bg-color:#e0f2fe; --card-bg-color:#ffffff; --text-color:#0c4a6e; --subtle-text-color:#38bdf8; --border-color:#bae6fd; --accent-color:#0ea5e9; --accent-hover-color:#0284c7; }
    .theme-sky body, .theme-sky .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-sky .bg-white, .theme-sky .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-sky .shadow-sm, .theme-sky .shadow-md, .theme-sky .shadow-lg, .theme-sky .shadow-xl { box-shadow:0 1px 3px rgba(14,165,233,.12) !important; border:1px solid var(--border-color); }
    .theme-sky .rounded-lg, .theme-sky .rounded-md { border-radius:8px !important; }
    .theme-sky .text-blue-600 { color: var(--accent-color) !important; }
    .theme-sky .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-sky .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-sky input, .theme-sky select, .theme-sky textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-sky input:focus, .theme-sky select:focus, .theme-sky textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(14,165,233,.22) !important; outline:none !important; }
    .theme-sky .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Graphite */
    .theme-graphite { --bg-color:#0f1115; --card-bg-color:#181b22; --text-color:#e5e7eb; --subtle-text-color:#9ca3af; --border-color:#2b2f37; --accent-color:#60a5fa; --accent-hover-color:#3b82f6; }
    .theme-graphite body, .theme-graphite .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-graphite .bg-white, .theme-graphite .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-graphite .shadow-sm, .theme-graphite .shadow-md, .theme-graphite .shadow-lg, .theme-graphite .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.35) !important; border:1px solid var(--border-color); }
    .theme-graphite .rounded-lg, .theme-graphite .rounded-md { border-radius:6px !important; }
    .theme-graphite .text-blue-600 { color: var(--accent-color) !important; }
    .theme-graphite .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-graphite .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-graphite input, .theme-graphite select, .theme-graphite textarea { background:#181b22 !important; border:1px solid var(--border-color) !important; border-radius:6px !important; color:var(--text-color) !important; }
    .theme-graphite input:focus, .theme-graphite select:focus, .theme-graphite textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(96,165,250,.22) !important; outline:none !important; }
    .theme-graphite .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Pearl */
    .theme-pearl { --bg-color:#fbfbfb; --card-bg-color:#ffffff; --text-color:#111827; --subtle-text-color:#6b7280; --border-color:#e5e7eb; --accent-color:#10b981; --accent-hover-color:#059669; }
    .theme-pearl body, .theme-pearl .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-pearl .bg-white, .theme-pearl .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-pearl .shadow-sm, .theme-pearl .shadow-md, .theme-pearl .shadow-lg, .theme-pearl .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-pearl .rounded-lg, .theme-pearl .rounded-md { border-radius:10px !important; }
    .theme-pearl .text-blue-600 { color: var(--accent-color) !important; }
    .theme-pearl .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-pearl .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-pearl input, .theme-pearl select, .theme-pearl textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-pearl input:focus, .theme-pearl select:focus, .theme-pearl textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(16,185,129,.2) !important; outline:none !important; }
    .theme-pearl .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Rust */
    .theme-rust { --bg-color:#fff7ed; --card-bg-color:#fffbeb; --text-color:#7c2d12; --subtle-text-color:#ea580c; --border-color:#fed7aa; --accent-color:#f97316; --accent-hover-color:#ea580c; }
    .theme-rust body, .theme-rust .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-rust .bg-white, .theme-rust .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-rust .shadow-sm, .theme-rust .shadow-md, .theme-rust .shadow-lg, .theme-rust .shadow-xl { box-shadow:0 1px 3px rgba(249,115,22,.12) !important; border:1px solid var(--border-color); }
    .theme-rust .rounded-lg, .theme-rust .rounded-md { border-radius:8px !important; }
    .theme-rust .text-blue-600 { color: var(--accent-color) !important; }
    .theme-rust .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-rust .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-rust input, .theme-rust select, .theme-rust textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-rust input:focus, .theme-rust select:focus, .theme-rust textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(249,115,22,.22) !important; outline:none !important; }
    .theme-rust .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Berry */
    .theme-berry { --bg-color:#fdf2f8; --card-bg-color:#ffffff; --text-color:#4a044e; --subtle-text-color:#f472b6; --border-color:#fce7f3; --accent-color:#db2777; --accent-hover-color:#be185d; }
    .theme-berry body, .theme-berry .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-berry .bg-white, .theme-berry .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-berry .shadow-sm, .theme-berry .shadow-md, .theme-berry .shadow-lg, .theme-berry .shadow-xl { box-shadow:0 1px 3px rgba(219,39,119,.12) !important; border:1px solid var(--border-color); }
    .theme-berry .rounded-lg, .theme-berry .rounded-md { border-radius:8px !important; }
    .theme-berry .text-blue-600 { color: var(--accent-color) !important; }
    .theme-berry .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-berry .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-berry input, .theme-berry select, .theme-berry textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-berry input:focus, .theme-berry select:focus, .theme-berry textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(219,39,119,.22) !important; outline:none !important; }
    .theme-berry .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Moss */
    .theme-moss { --bg-color:#ecfdf5; --card-bg-color:#ffffff; --text-color:#064e3b; --subtle-text-color:#34d399; --border-color:#d1fae5; --accent-color:#10b981; --accent-hover-color:#059669; }
    .theme-moss body, .theme-moss .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-moss .bg-white, .theme-moss .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-moss .shadow-sm, .theme-moss .shadow-md, .theme-moss .shadow-lg, .theme-moss .shadow-xl { box-shadow:0 1px 3px rgba(16,185,129,.12) !important; border:1px solid var(--border-color); }
    .theme-moss .rounded-lg, .theme-moss .rounded-md { border-radius:10px !important; }
    .theme-moss .text-blue-600 { color: var(--accent-color) !important; }
    .theme-moss .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-moss .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-moss input, .theme-moss select, .theme-moss textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-moss input:focus, .theme-moss select:focus, .theme-moss textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(16,185,129,.22) !important; outline:none !important; }
    .theme-moss .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Teal */
    .theme-teal { --bg-color:#f0fdfa; --card-bg-color:#ffffff; --text-color:#134e4a; --subtle-text-color:#14b8a6; --border-color:#ccfbf1; --accent-color:#0d9488; --accent-hover-color:#0f766e; }
    .theme-teal body, .theme-teal .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-teal .bg-white, .theme-teal .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-teal .shadow-sm, .theme-teal .shadow-md, .theme-teal .shadow-lg, .theme-teal .shadow-xl { box-shadow:0 1px 3px rgba(13,148,136,.12) !important; border:1px solid var(--border-color); }
    .theme-teal .rounded-lg, .theme-teal .rounded-md { border-radius:8px !important; }
    .theme-teal .text-blue-600 { color: var(--accent-color) !important; }
    .theme-teal .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-teal .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-teal input, .theme-teal select, .theme-teal textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-teal input:focus, .theme-teal select:focus, .theme-teal textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(13,148,136,.22) !important; outline:none !important; }
    .theme-teal .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Sepia */
    .theme-sepia { --bg-color:#fdf6e3; --card-bg-color:#fffaf0; --text-color:#3f2d1c; --subtle-text-color:#b08968; --border-color:#f1e3c6; --accent-color:#d97706; --accent-hover-color:#b45309; }
    .theme-sepia body, .theme-sepia .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-sepia .bg-white, .theme-sepia .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-sepia .shadow-sm, .theme-sepia .shadow-md, .theme-sepia .shadow-lg, .theme-sepia .shadow-xl { box-shadow:0 1px 3px rgba(217,119,6,.1) !important; border:1px solid var(--border-color); }
    .theme-sepia .rounded-lg, .theme-sepia .rounded-md { border-radius:10px !important; }
    .theme-sepia .text-blue-600 { color: var(--accent-color) !important; }
    .theme-sepia .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-sepia .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-sepia input, .theme-sepia select, .theme-sepia textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-sepia input:focus, .theme-sepia select:focus, .theme-sepia textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(217,119,6,.22) !important; outline:none !important; }
    .theme-sepia .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Charcoal */
    .theme-charcoal { --bg-color:#0b0c10; --card-bg-color:#151820; --text-color:#e5e7eb; --subtle-text-color:#9ca3af; --border-color:#2e3340; --accent-color:#22d3ee; --accent-hover-color:#06b6d4; }
    .theme-charcoal body, .theme-charcoal .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-charcoal .bg-white, .theme-charcoal .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-charcoal .shadow-sm, .theme-charcoal .shadow-md, .theme-charcoal .shadow-lg, .theme-charcoal .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.4) !important; border:1px solid var(--border-color); }
    .theme-charcoal .rounded-lg, .theme-charcoal .rounded-md { border-radius:6px !important; }
    .theme-charcoal .text-blue-600 { color: var(--accent-color) !important; }
    .theme-charcoal .bg-blue-600 { background: var(--accent-color) !important; color:#0b0c10 !important; }
    .theme-charcoal .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-charcoal input, .theme-charcoal select, .theme-charcoal textarea { background:#151820 !important; border:1px solid var(--border-color) !important; border-radius:6px !important; color:var(--text-color) !important; }
    .theme-charcoal input:focus, .theme-charcoal select:focus, .theme-charcoal textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(34,211,238,.28) !important; outline:none !important; }
    .theme-charcoal .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Ivory */
    .theme-ivory { --bg-color:#fffef8; --card-bg-color:#ffffff; --text-color:#1f2937; --subtle-text-color:#6b7280; --border-color:#f3f4f6; --accent-color:#0ea5e9; --accent-hover-color:#0284c7; }
    .theme-ivory body, .theme-ivory .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-ivory .bg-white, .theme-ivory .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-ivory .shadow-sm, .theme-ivory .shadow-md, .theme-ivory .shadow-lg, .theme-ivory .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-ivory .rounded-lg, .theme-ivory .rounded-md { border-radius:10px !important; }
    .theme-ivory .text-blue-600 { color: var(--accent-color) !important; }
    .theme-ivory .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-ivory .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-ivory input, .theme-ivory select, .theme-ivory textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-ivory input:focus, .theme-ivory select:focus, .theme-ivory textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(14,165,233,.22) !important; outline:none !important; }
    .theme-ivory .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Azure */
    .theme-azure { --bg-color:#eff6ff; --card-bg-color:#ffffff; --text-color:#0c4a6e; --subtle-text-color:#60a5fa; --border-color:#dbeafe; --accent-color:#3b82f6; --accent-hover-color:#2563eb; }
    .theme-azure body, .theme-azure .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-azure .bg-white, .theme-azure .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-azure .shadow-sm, .theme-azure .shadow-md, .theme-azure .shadow-lg, .theme-azure .shadow-xl { box-shadow:0 1px 3px rgba(59,130,246,.12) !important; border:1px solid var(--border-color); }
    .theme-azure .rounded-lg, .theme-azure .rounded-md { border-radius:8px !important; }
    .theme-azure .text-blue-600 { color: var(--accent-color) !important; }
    .theme-azure .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-azure .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-azure input, .theme-azure select, .theme-azure textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-azure input:focus, .theme-azure select:focus, .theme-azure textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(59,130,246,.22) !important; outline:none !important; }
    .theme-azure .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Blush */
    .theme-blush { --bg-color:#fff1f2; --card-bg-color:#fff7f8; --text-color:#4a1d2b; --subtle-text-color:#f472b6; --border-color:#fecdd3; --accent-color:#ec4899; --accent-hover-color:#db2777; }
    .theme-blush body, .theme-blush .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-blush .bg-white, .theme-blush .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-blush .shadow-sm, .theme-blush .shadow-md, .theme-blush .shadow-lg, .theme-blush .shadow-xl { box-shadow:0 1px 3px rgba(236,72,153,.12) !important; border:1px solid var(--border-color); }
    .theme-blush .rounded-lg, .theme-blush .rounded-md { border-radius:10px !important; }
    .theme-blush .text-blue-600 { color: var(--accent-color) !important; }
    .theme-blush .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-blush .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-blush input, .theme-blush select, .theme-blush textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-blush input:focus, .theme-blush select:focus, .theme-blush textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(236,72,153,.22) !important; outline:none !important; }
    .theme-blush .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Saffron */
    .theme-saffron { --bg-color:#fffbeb; --card-bg-color:#ffffff; --text-color:#7c2d12; --subtle-text-color:#f59e0b; --border-color:#fde68a; --accent-color:#f59e0b; --accent-hover-color:#d97706; }
    .theme-saffron body, .theme-saffron .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-saffron .bg-white, .theme-saffron .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-saffron .shadow-sm, .theme-saffron .shadow-md, .theme-saffron .shadow-lg, .theme-saffron .shadow-xl { box-shadow:0 1px 3px rgba(245,158,11,.12) !important; border:1px solid var(--border-color); }
    .theme-saffron .rounded-lg, .theme-saffron .rounded-md { border-radius:8px !important; }
    .theme-saffron .text-blue-600 { color: var(--accent-color) !important; }
    .theme-saffron .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-saffron .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-saffron input, .theme-saffron select, .theme-saffron textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-saffron input:focus, .theme-saffron select:focus, .theme-saffron textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(245,158,11,.22) !important; outline:none !important; }
    .theme-saffron .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Indigo */
    .theme-indigo { --bg-color:#eef2ff; --card-bg-color:#ffffff; --text-color:#312e81; --subtle-text-color:#6366f1; --border-color:#c7d2fe; --accent-color:#4f46e5; --accent-hover-color:#4338ca; }
    .theme-indigo body, .theme-indigo .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-indigo .bg-white, .theme-indigo .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-indigo .shadow-sm, .theme-indigo .shadow-md, .theme-indigo .shadow-lg, .theme-indigo .shadow-xl { box-shadow:0 1px 3px rgba(79,70,229,.12) !important; border:1px solid var(--border-color); }
    .theme-indigo .rounded-lg, .theme-indigo .rounded-md { border-radius:8px !important; }
    .theme-indigo .text-blue-600 { color: var(--accent-color) !important; }
    .theme-indigo .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-indigo .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-indigo input, .theme-indigo select, .theme-indigo textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-indigo input:focus, .theme-indigo select:focus, .theme-indigo textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(79,70,229,.22) !important; outline:none !important; }
    .theme-indigo .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Copper */
    .theme-copper { --bg-color:#fff7ed; --card-bg-color:#ffffff; --text-color:#4a2c1a; --subtle-text-color:#ea580c; --border-color:#fed7aa; --accent-color:#c2410c; --accent-hover-color:#9a3412; }
    .theme-copper body, .theme-copper .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-copper .bg-white, .theme-copper .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-copper .shadow-sm, .theme-copper .shadow-md, .theme-copper .shadow-lg, .theme-copper .shadow-xl { box-shadow:0 1px 3px rgba(194,65,12,.12) !important; border:1px solid var(--border-color); }
    .theme-copper .rounded-lg, .theme-copper .rounded-md { border-radius:8px !important; }
    .theme-copper .text-blue-600 { color: var(--accent-color) !important; }
    .theme-copper .bg-blue-600 { background: var(--accent-color) !important; color:#fff !important; }
    .theme-copper .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-copper input, .theme-copper select, .theme-copper textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-copper input:focus, .theme-copper select:focus, .theme-copper textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(194,65,12,.22) !important; outline:none !important; }
    .theme-copper .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Lavender */
    .theme-lavender { --bg-color:#faf5ff; --card-bg-color:#ffffff; --text-color:#4c1d95; --subtle-text-color:#a78bfa; --border-color:#e9d5ff; --accent-color:#8b5cf6; --accent-hover-color:#7c3aed; }
    .theme-lavender body, .theme-lavender .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-lavender .bg-white, .theme-lavender .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-lavender .shadow-sm, .theme-lavender .shadow-md, .theme-lavender .shadow-lg, .theme-lavender .shadow-xl { box-shadow:0 1px 3px rgba(139,92,246,.12) !important; border:1px solid var(--border-color); }
    .theme-lavender .rounded-lg, .theme-lavender .rounded-md { border-radius:10px !important; }
    .theme-lavender .text-blue-600 { color: var(--accent-color) !important; }
    .theme-lavender .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-lavender .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-lavender input, .theme-lavender select, .theme-lavender textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-lavender input:focus, .theme-lavender select:focus, .theme-lavender textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(139,92,246,.22) !important; outline:none !important; }
    .theme-lavender .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Steel */
    .theme-steel { --bg-color:#f1f5f9; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#64748b; --border-color:#e2e8f0; --accent-color:#475569; --accent-hover-color:#334155; }
    .theme-steel body, .theme-steel .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-steel .bg-white, .theme-steel .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-steel .shadow-sm, .theme-steel .shadow-md, .theme-steel .shadow-lg, .theme-steel .shadow-xl { box-shadow:0 1px 3px rgba(15,23,42,.08) !important; border:1px solid var(--border-color); }
    .theme-steel .rounded-lg, .theme-steel .rounded-md { border-radius:8px !important; }
    .theme-steel .text-blue-600 { color: var(--accent-color) !important; }
    .theme-steel .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-steel .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-steel input, .theme-steel select, .theme-steel textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:6px !important; }
    .theme-steel input:focus, .theme-steel select:focus, .theme-steel textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(71,85,105,.2) !important; outline:none !important; }
    .theme-steel .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Clay */
    .theme-clay { --bg-color:#f9f5f2; --card-bg-color:#ffffff; --text-color:#3f2d20; --subtle-text-color:#a16207; --border-color:#eadbd1; --accent-color:#9a3412; --accent-hover-color:#7c2d12; }
    .theme-clay body, .theme-clay .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-clay .bg-white, .theme-clay .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-clay .shadow-sm, .theme-clay .shadow-md, .theme-clay .shadow-lg, .theme-clay .shadow-xl { box-shadow:0 1px 3px rgba(154,52,18,.10) !important; border:1px solid var(--border-color); }
    .theme-clay .rounded-lg, .theme-clay .rounded-md { border-radius:10px !important; }
    .theme-clay .text-blue-600 { color: var(--accent-color) !important; }
    .theme-clay .bg-blue-600 { background: var(--accent-color) !important; color:#fff !important; }
    .theme-clay .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-clay input, .theme-clay select, .theme-clay textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-clay input:focus, .theme-clay select:focus, .theme-clay textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(154,52,18,.22) !important; outline:none !important; }
    .theme-clay .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Cyan */
    .theme-cyan { --bg-color:#ecfeff; --card-bg-color:#ffffff; --text-color:#164e63; --subtle-text-color:#22d3ee; --border-color:#cffafe; --accent-color:#06b6d4; --accent-hover-color:#0891b2; }
    .theme-cyan body, .theme-cyan .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-cyan .bg-white, .theme-cyan .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-cyan .shadow-sm, .theme-cyan .shadow-md, .theme-cyan .shadow-lg, .theme-cyan .shadow-xl { box-shadow:0 1px 3px rgba(6,182,212,.12) !important; border:1px solid var(--border-color); }
    .theme-cyan .rounded-lg, .theme-cyan .rounded-md { border-radius:8px !important; }
    .theme-cyan .text-blue-600 { color: var(--accent-color) !important; }
    .theme-cyan .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-cyan .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-cyan input, .theme-cyan select, .theme-cyan textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-cyan input:focus, .theme-cyan select:focus, .theme-cyan textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(6,182,212,.22) !important; outline:none !important; }
    .theme-cyan .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Olive */
    .theme-olive { --bg-color:#f7fee7; --card-bg-color:#ffffff; --text-color:#1a2e05; --subtle-text-color:#84cc16; --border-color:#d9f99d; --accent-color:#4d7c0f; --accent-hover-color:#3f6212; }
    .theme-olive body, .theme-olive .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-olive .bg-white, .theme-olive .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-olive .shadow-sm, .theme-olive .shadow-md, .theme-olive .shadow-lg, .theme-olive .shadow-xl { box-shadow:0 1px 3px rgba(77,124,15,.12) !important; border:1px solid var(--border-color); }
    .theme-olive .rounded-lg, .theme-olive .rounded-md { border-radius:8px !important; }
    .theme-olive .text-blue-600 { color: var(--accent-color) !important; }
    .theme-olive .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-olive .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-olive input, .theme-olive select, .theme-olive textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-olive input:focus, .theme-olive select:focus, .theme-olive textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(77,124,15,.22) !important; outline:none !important; }
    .theme-olive .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Marigold */
    .theme-marigold { --bg-color:#fff7ed; --card-bg-color:#ffffff; --text-color:#7c2d12; --subtle-text-color:#f59e0b; --border-color:#fed7aa; --accent-color:#f97316; --accent-hover-color:#ea580c; }
    .theme-marigold body, .theme-marigold .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-marigold .bg-white, .theme-marigold .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-marigold .shadow-sm, .theme-marigold .shadow-md, .theme-marigold .shadow-lg, .theme-marigold .shadow-xl { box-shadow:0 1px 3px rgba(249,115,22,.12) !important; border:1px solid var(--border-color); }
    .theme-marigold .rounded-lg, .theme-marigold .rounded-md { border-radius:10px !important; }
    .theme-marigold .text-blue-600 { color: var(--accent-color) !important; }
    .theme-marigold .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-marigold .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-marigold input, .theme-marigold select, .theme-marigold textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-marigold input:focus, .theme-marigold select:focus, .theme-marigold textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(249,115,22,.22) !important; outline:none !important; }
    .theme-marigold .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Orchid */
    .theme-orchid { --bg-color:#fdf4ff; --card-bg-color:#ffffff; --text-color:#4a044e; --subtle-text-color:#d946ef; --border-color:#f5d0fe; --accent-color:#a21caf; --accent-hover-color:#86198f; }
    .theme-orchid body, .theme-orchid .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-orchid .bg-white, .theme-orchid .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-orchid .shadow-sm, .theme-orchid .shadow-md, .theme-orchid .shadow-lg, .theme-orchid .shadow-xl { box-shadow:0 1px 3px rgba(162,28,175,.12) !important; border:1px solid var(--border-color); }
    .theme-orchid .rounded-lg, .theme-orchid .rounded-md { border-radius:10px !important; }
    .theme-orchid .text-blue-600 { color: var(--accent-color) !important; }
    .theme-orchid .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-orchid .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-orchid input, .theme-orchid select, .theme-orchid textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-orchid input:focus, .theme-orchid select:focus, .theme-orchid textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(162,28,175,.22) !important; outline:none !important; }
    .theme-orchid .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Flamingo */
    .theme-flamingo { --bg-color:#fff0f6; --card-bg-color:#ffffff; --text-color:#3f1d2b; --subtle-text-color:#fb7185; --border-color:#ffe4e6; --accent-color:#f43f5e; --accent-hover-color:#e11d48; }
    .theme-flamingo body, .theme-flamingo .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-flamingo .bg-white, .theme-flamingo .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-flamingo .shadow-sm, .theme-flamingo .shadow-md, .theme-flamingo .shadow-lg, .theme-flamingo .shadow-xl { box-shadow:0 1px 3px rgba(244,63,94,.12) !important; border:1px solid var(--border-color); }
    .theme-flamingo .rounded-lg, .theme-flamingo .rounded-md { border-radius:10px !important; }
    .theme-flamingo .text-blue-600 { color: var(--accent-color) !important; }
    .theme-flamingo .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-flamingo .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-flamingo input, .theme-flamingo select, .theme-flamingo textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-flamingo input:focus, .theme-flamingo select:focus, .theme-flamingo textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(244,63,94,.22) !important; outline:none !important; }
    .theme-flamingo .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* Iceberg */
    .theme-iceberg { --bg-color:#e0f2fe; --card-bg-color:#f0f9ff; --text-color:#0c4a6e; --subtle-text-color:#38bdf8; --border-color:#bae6fd; --accent-color:#0ea5e9; --accent-hover-color:#0284c7; }
    .theme-iceberg body, .theme-iceberg .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-iceberg .bg-white, .theme-iceberg .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-iceberg .shadow-sm, .theme-iceberg .shadow-md, .theme-iceberg .shadow-lg, .theme-iceberg .shadow-xl { box-shadow:0 1px 3px rgba(14,165,233,.12) !important; border:1px solid var(--border-color); }
    .theme-iceberg .rounded-lg, .theme-iceberg .rounded-md { border-radius:8px !important; }
    .theme-iceberg .text-blue-600 { color: var(--accent-color) !important; }
    .theme-iceberg .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-iceberg .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-iceberg input, .theme-iceberg select, .theme-iceberg textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-iceberg input:focus, .theme-iceberg select:focus, .theme-iceberg textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(14,165,233,.22) !important; outline:none !important; }
    .theme-iceberg .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* === 50 More Themes === */
    /* helper skeleton
    .theme-NAME { --bg-color:; --card-bg-color:; --text-color:; --subtle-text-color:; --border-color:; --accent-color:; --accent-hover-color:; }
    .theme-NAME body, .theme-NAME .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-NAME .bg-white, .theme-NAME .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-NAME .shadow-sm, .theme-NAME .shadow-md, .theme-NAME .shadow-lg, .theme-NAME .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.08) !important; border:1px solid var(--border-color); }
    .theme-NAME .rounded-lg, .theme-NAME .rounded-md { border-radius:8px !important; }
    .theme-NAME .text-blue-600 { color: var(--accent-color) !important; }
    .theme-NAME .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-NAME .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-NAME input, .theme-NAME select, .theme-NAME textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; color:var(--text-color) !important; }
    .theme-NAME input:focus, .theme-NAME select:focus, .theme-NAME textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(0,0,0,.12) !important; outline:none !important; }
    .theme-NAME .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }
    */

    .theme-blossom { --bg-color:#fff5f7; --card-bg-color:#ffffff; --text-color:#4a1d2b; --subtle-text-color:#f472b6; --border-color:#fde2e7; --accent-color:#ec4899; --accent-hover-color:#db2777; }
    .theme-blossom body, .theme-blossom .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-blossom .bg-white, .theme-blossom .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-blossom .shadow-sm, .theme-blossom .shadow-md, .theme-blossom .shadow-lg, .theme-blossom .shadow-xl { box-shadow:0 2px 6px rgba(236,72,153,.10) !important; border:1px solid var(--border-color); }
    .theme-blossom .rounded-lg, .theme-blossom .rounded-md { border-radius:10px !important; }
    .theme-blossom .text-blue-600 { color: var(--accent-color) !important; }
    .theme-blossom .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-blossom .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-blossom input, .theme-blossom select, .theme-blossom textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; color:var(--text-color) !important; }
    .theme-blossom input:focus, .theme-blossom select:focus, .theme-blossom textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(236,72,153,.20) !important; outline:none !important; }
    .theme-blossom .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-jade { --bg-color:#ecfdf5; --card-bg-color:#ffffff; --text-color:#064e3b; --subtle-text-color:#34d399; --border-color:#d1fae5; --accent-color:#10b981; --accent-hover-color:#059669; }
    .theme-jade body, .theme-jade .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-jade .bg-white, .theme-jade .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-jade .shadow-sm, .theme-jade .shadow-md, .theme-jade .shadow-lg, .theme-jade .shadow-xl { box-shadow:0 1px 3px rgba(16,185,129,.12) !important; border:1px solid var(--border-color); }
    .theme-jade .rounded-lg, .theme-jade .rounded-md { border-radius:10px !important; }
    .theme-jade .text-blue-600 { color: var(--accent-color) !important; }
    .theme-jade .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-jade .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-jade input, .theme-jade select, .theme-jade textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; color:var(--text-color) !important; }
    .theme-jade input:focus, .theme-jade select:focus, .theme-jade textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(16,185,129,.22) !important; outline:none !important; }
    .theme-jade .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-cinder { --bg-color:#0f1115; --card-bg-color:#181b22; --text-color:#e5e7eb; --subtle-text-color:#9ca3af; --border-color:#2b2f37; --accent-color:#f59e0b; --accent-hover-color:#d97706; }
    .theme-cinder body, .theme-cinder .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-cinder .bg-white, .theme-cinder .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-cinder .shadow-sm, .theme-cinder .shadow-md, .theme-cinder .shadow-lg, .theme-cinder .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.35) !important; border:1px solid var(--border-color); }
    .theme-cinder .rounded-lg, .theme-cinder .rounded-md { border-radius:6px !important; }
    .theme-cinder .text-blue-600 { color: var(--accent-color) !important; }
    .theme-cinder .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-cinder .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-cinder input, .theme-cinder select, .theme-cinder textarea { background:#181b22 !important; border:1px solid var(--border-color) !important; border-radius:6px !important; color:var(--text-color) !important; }
    .theme-cinder input:focus, .theme-cinder select:focus, .theme-cinder textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(245,158,11,.22) !important; outline:none !important; }
    .theme-cinder .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-fern { --bg-color:#f0fdf4; --card-bg-color:#ffffff; --text-color:#064e3b; --subtle-text-color:#22c55e; --border-color:#dcfce7; --accent-color:#16a34a; --accent-hover-color:#15803d; }
    .theme-fern body, .theme-fern .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-fern .bg-white, .theme-fern .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-fern .shadow-sm, .theme-fern .shadow-md, .theme-fern .shadow-lg, .theme-fern .shadow-xl { box-shadow:0 1px 3px rgba(22,163,74,.12) !important; border:1px solid var(--border-color); }
    .theme-fern .rounded-lg, .theme-fern .rounded-md { border-radius:8px !important; }
    .theme-fern .text-blue-600 { color: var(--accent-color) !important; }
    .theme-fern .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-fern .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-fern input, .theme-fern select, .theme-fern textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-fern input:focus, .theme-fern select:focus, .theme-fern textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(22,163,74,.22) !important; outline:none !important; }
    .theme-fern .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-glacier { --bg-color:#e0f2fe; --card-bg-color:#f0f9ff; --text-color:#0c4a6e; --subtle-text-color:#38bdf8; --border-color:#bae6fd; --accent-color:#0ea5e9; --accent-hover-color:#0284c7; }
    .theme-glacier body, .theme-glacier .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-glacier .bg-white, .theme-glacier .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-glacier .shadow-sm, .theme-glacier .shadow-md, .theme-glacier .shadow-lg, .theme-glacier .shadow-xl { box-shadow:0 1px 3px rgba(14,165,233,.12) !important; border:1px solid var(--border-color); }
    .theme-glacier .rounded-lg, .theme-glacier .rounded-md { border-radius:8px !important; }
    .theme-glacier .text-blue-600 { color: var(--accent-color) !important; }
    .theme-glacier .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-glacier .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-glacier input, .theme-glacier select, .theme-glacier textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-glacier input:focus, .theme-glacier select:focus, .theme-glacier textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(14,165,233,.22) !important; outline:none !important; }
    .theme-glacier .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-ember { --bg-color:#fff7ed; --card-bg-color:#ffffff; --text-color:#7c2d12; --subtle-text-color:#f97316; --border-color:#fed7aa; --accent-color:#ea580c; --accent-hover-color:#c2410c; }
    .theme-ember body, .theme-ember .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-ember .bg-white, .theme-ember .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-ember .shadow-sm, .theme-ember .shadow-md, .theme-ember .shadow-lg, .theme-ember .shadow-xl { box-shadow:0 1px 3px rgba(234,88,12,.12) !important; border:1px solid var(--border-color); }
    .theme-ember .rounded-lg, .theme-ember .rounded-md { border-radius:8px !important; }
    .theme-ember .text-blue-600 { color: var(--accent-color) !important; }
    .theme-ember .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-ember .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-ember input, .theme-ember select, .theme-ember textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-ember input:focus, .theme-ember select:focus, .theme-ember textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(234,88,12,.22) !important; outline:none !important; }
    .theme-ember .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-horizon { --bg-color:#f1f5f9; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#64748b; --border-color:#e2e8f0; --accent-color:#3b82f6; --accent-hover-color:#2563eb; }
    .theme-horizon body, .theme-horizon .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-horizon .bg-white, .theme-horizon .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-horizon .shadow-sm, .theme-horizon .shadow-md, .theme-horizon .shadow-lg, .theme-horizon .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-horizon .rounded-lg, .theme-horizon .rounded-md { border-radius:10px !important; }
    .theme-horizon .text-blue-600 { color: var(--accent-color) !important; }
    .theme-horizon .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-horizon .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-horizon input, .theme-horizon select, .theme-horizon textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-horizon input:focus, .theme-horizon select:focus, .theme-horizon textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(59,130,246,.22) !important; outline:none !important; }
    .theme-horizon .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-canyon { --bg-color:#fff7ed; --card-bg-color:#fffbeb; --text-color:#7c2d12; --subtle-text-color:#f59e0b; --border-color:#fde68a; --accent-color:#d97706; --accent-hover-color:#b45309; }
    .theme-canyon body, .theme-canyon .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-canyon .bg-white, .theme-canyon .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-canyon .shadow-sm, .theme-canyon .shadow-md, .theme-canyon .shadow-lg, .theme-canyon .shadow-xl { box-shadow:0 1px 3px rgba(217,119,6,.12) !important; border:1px solid var(--border-color); }
    .theme-canyon .rounded-lg, .theme-canyon .rounded-md { border-radius:8px !important; }
    .theme-canyon .text-blue-600 { color: var(--accent-color) !important; }
    .theme-canyon .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-canyon .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-canyon input, .theme-canyon select, .theme-canyon textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-canyon input:focus, .theme-canyon select:focus, .theme-canyon textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(217,119,6,.22) !important; outline:none !important; }
    .theme-canyon .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-lagoon { --bg-color:#ecfeff; --card-bg-color:#ffffff; --text-color:#164e63; --subtle-text-color:#22d3ee; --border-color:#cffafe; --accent-color:#06b6d4; --accent-hover-color:#0891b2; }
    .theme-lagoon body, .theme-lagoon .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-lagoon .bg-white, .theme-lagoon .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-lagoon .shadow-sm, .theme-lagoon .shadow-md, .theme-lagoon .shadow-lg, .theme-lagoon .shadow-xl { box-shadow:0 1px 3px rgba(6,182,212,.12) !important; border:1px solid var(--border-color); }
    .theme-lagoon .rounded-lg, .theme-lagoon .rounded-md { border-radius:8px !important; }
    .theme-lagoon .text-blue-600 { color: var(--accent-color) !important; }
    .theme-lagoon .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-lagoon .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-lagoon input, .theme-lagoon select, .theme-lagoon textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-lagoon input:focus, .theme-lagoon select:focus, .theme-lagoon textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(6,182,212,.22) !important; outline:none !important; }
    .theme-lagoon .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-meadow { --bg-color:#f0fdf4; --card-bg-color:#ffffff; --text-color:#14532d; --subtle-text-color:#22c55e; --border-color:#dcfce7; --accent-color:#65a30d; --accent-hover-color:#4d7c0f; }
    .theme-meadow body, .theme-meadow .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-meadow .bg-white, .theme-meadow .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-meadow .shadow-sm, .theme-meadow .shadow-md, .theme-meadow .shadow-lg, .theme-meadow .shadow-xl { box-shadow:0 1px 3px rgba(101,163,13,.12) !important; border:1px solid var(--border-color); }
    .theme-meadow .rounded-lg, .theme-meadow .rounded-md { border-radius:8px !important; }
    .theme-meadow .text-blue-600 { color: var(--accent-color) !important; }
    .theme-meadow .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-meadow .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-meadow input, .theme-meadow select, .theme-meadow textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-meadow input:focus, .theme-meadow select:focus, .theme-meadow textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(101,163,13,.22) !important; outline:none !important; }
    .theme-meadow .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-tundra { --bg-color:#f8fafc; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#64748b; --border-color:#e2e8f0; --accent-color:#0ea5e9; --accent-hover-color:#0284c7; }
    .theme-tundra body, .theme-tundra .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-tundra .bg-white, .theme-tundra .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-tundra .shadow-sm, .theme-tundra .shadow-md, .theme-tundra .shadow-lg, .theme-tundra .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-tundra .rounded-lg, .theme-tundra .rounded-md { border-radius:10px !important; }
    .theme-tundra .text-blue-600 { color: var(--accent-color) !important; }
    .theme-tundra .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-tundra .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-tundra input, .theme-tundra select, .theme-tundra textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-tundra input:focus, .theme-tundra select:focus, .theme-tundra textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(14,165,233,.22) !important; outline:none !important; }
    .theme-tundra .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-dune { --bg-color:#fdf6e3; --card-bg-color:#fffaf0; --text-color:#3f2d1c; --subtle-text-color:#b08968; --border-color:#f1e3c6; --accent-color:#d97706; --accent-hover-color:#b45309; }
    .theme-dune body, .theme-dune .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-dune .bg-white, .theme-dune .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-dune .shadow-sm, .theme-dune .shadow-md, .theme-dune .shadow-lg, .theme-dune .shadow-xl { box-shadow:0 1px 3px rgba(217,119,6,.10) !important; border:1px solid var(--border-color); }
    .theme-dune .rounded-lg, .theme-dune .rounded-md { border-radius:10px !important; }
    .theme-dune .text-blue-600 { color: var(--accent-color) !important; }
    .theme-dune .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-dune .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-dune input, .theme-dune select, .theme-dune textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-dune input:focus, .theme-dune select:focus, .theme-dune textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(217,119,6,.22) !important; outline:none !important; }
    .theme-dune .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-willow { --bg-color:#f0fdf4; --card-bg-color:#ffffff; --text-color:#064e3b; --subtle-text-color:#34d399; --border-color:#dcfce7; --accent-color:#22c55e; --accent-hover-color:#16a34a; }
    .theme-willow body, .theme-willow .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-willow .bg-white, .theme-willow .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-willow .shadow-sm, .theme-willow .shadow-md, .theme-willow .shadow-lg, .theme-willow .shadow-xl { box-shadow:0 1px 3px rgba(34,197,94,.12) !important; border:1px solid var(--border-color); }
    .theme-willow .rounded-lg, .theme-willow .rounded-md { border-radius:10px !important; }
    .theme-willow .text-blue-600 { color: var(--accent-color) !important; }
    .theme-willow .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-willow .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-willow input, .theme-willow select, .theme-willow textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-willow input:focus, .theme-willow select:focus, .theme-willow textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(34,197,94,.22) !important; outline:none !important; }
    .theme-willow .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* 多彩主題 - 基於訪客資料與新增申請單的色彩設計 */
    .theme-colorful {
        --bg-color: #D9F3FD; /* 淡藍色背景 */
        --card-bg-color: #ffffff;
        --text-color: #2C3E50; /* 深藍灰色文字 */
        --subtle-text-color: #34495E;
        --border-color: #AEBFED; /* 淡紫藍邊框 */
        --accent-color: #E74C3C; /* 紅色強調 */
        --accent-hover-color: #C0392B;
        --secondary-green: #C7E2B2; /* 淡綠色 */
        --secondary-pink: #FFB2C8; /* 淡粉色 */
        --secondary-purple: #AEBFED; /* 淡紫色 */

        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-green) 25%, var(--secondary-pink) 50%, var(--secondary-purple) 75%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
        font-family: 'Noto Sans TC', sans-serif !important;
    }

    /* === 尺寸統一調整：多彩 / 魯紅 / 魯綠 比照 Apple 主題框體尺寸 ===
       說明：原本三個主題的 input/select/textarea padding、邊框粗細、圓角不一致，
             為了統一視覺密度與可讀性，以下覆寫採用 Apple 主題的：
             - 邊框: 1px
             - 圓角: 8px
             - 內距: 0.5rem 0.75rem (Tailwind 相當於 py-2 px-3)
             - 背景: Apple 使用 #f0f0f0，這裡保留各自背景策略但若為半透明則改為實心 #ffffff 以維持清晰度
             - 聚焦樣式：改為 Apple 的 0 0 0 2px 外框，使用各主題 accent 色
    */
    .theme-colorful input,
    .theme-colorful select,
    .theme-colorful textarea,
    .theme-luhong input,
    .theme-luhong select,
    .theme-luhong textarea,
    .theme-lugreen input,
    .theme-lugreen select,
    .theme-lugreen textarea {
        min-height: 40px !important;           /* 與 Apple 常見控制高度接近 */
        padding: 8px 12px !important;          /* 0.5rem 0.75rem */
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
        background: #ffffff !important;        /* 確保文字對比，避免漸層干擾 */
        font-size: 0.875rem !important;        /* 與 Apple 控件字級比照 (text-sm) */
        font-weight: 500;
        transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }

    .theme-colorful input:focus,
    .theme-colorful select:focus,
    .theme-colorful textarea:focus,
    .theme-luhong input:focus,
    .theme-luhong select:focus,
    .theme-luhong textarea:focus,
    .theme-lugreen input:focus,
    .theme-lugreen select:focus,
    .theme-lugreen textarea:focus {
        outline: none !important;
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.04), 0 0 0 2px var(--accent-color, #007aff)40 !important;
        /* 若有 transform:scale 在舊樣式出現，強制移除避免抖動 */
        transform: none !important;
    }

    /* 按鈕圓角統一（保留主題色但改為 8px 以對齊 Apple） */
    .theme-colorful button,
    .theme-luhong button,
    .theme-lugreen button {
        border-radius: 8px !important;
    }

    /* Tab / 分頁按鈕圓角對齊 */
    .theme-colorful .tab-button,
    .theme-luhong .tab-button,
    .theme-lugreen .tab-button { border-radius: 8px !important; }
    .theme-colorful body, .theme-colorful .bg-gray-50 { 
        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-green) 25%, var(--secondary-pink) 50%, var(--secondary-purple) 75%, var(--bg-color) 100%) !important; 
    }
    .theme-colorful .bg-white, .theme-colorful .bg-gray-100 { 
        background: var(--card-bg-color) !important; 
        border: 2px solid var(--border-color); 
        border-radius: 15px !important;
        box-shadow: 0 8px 25px rgba(174, 191, 237, 0.3) !important;
    }
    .theme-colorful .shadow-sm, .theme-colorful .shadow-md, .theme-colorful .shadow-lg, .theme-colorful .shadow-xl { 
        box-shadow: 0 8px 25px rgba(174, 191, 237, 0.3) !important; 
        border: 2px solid var(--border-color); 
        border-radius: 15px !important;
    }
    .theme-colorful .rounded-lg, .theme-colorful .rounded-md { border-radius: 15px !important; }
    .theme-colorful .border, .theme-colorful .border-gray-300, .theme-colorful .border-gray-200 {
        border-color: var(--border-color) !important;
        border-width: 2px !important;
    }

    /* 修復：商品類別按鈕和分頁按鈕在多彩主題下保持標準尺寸 */
    .theme-colorful .product-category-btn,
    .theme-colorful #product-list-pagination button {
        border-width: 1px !important;
        border-radius: 8px !important;
    }
    .theme-colorful .divide-y > :not([hidden]) ~ :not([hidden]),
    .theme-colorful .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        border-top: 1px solid var(--border-color) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }
    .theme-colorful .text-gray-900, .theme-colorful .text-gray-800, .theme-colorful .text-gray-700 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-colorful .text-gray-600, .theme-colorful .text-gray-500 { color: var(--subtle-text-color) !important; }
    .theme-colorful .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-colorful .bg-blue-600 { 
        background: linear-gradient(45deg, var(--accent-color), var(--accent-hover-color)) !important; 
        border-radius: 10px !important;
        transition: all 0.3s ease !important;
    }
    .theme-colorful .bg-blue-600:hover { 
        background: linear-gradient(45deg, var(--accent-hover-color), var(--accent-color)) !important; 
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4) !important;
    }
    .theme-colorful input, .theme-colorful select, .theme-colorful textarea { 
        background: rgba(255, 255, 255, 0.9) !important; 
        border: 2px solid var(--border-color) !important; 
        border-radius: 12px !important; 
        padding: 8px 12px !important;
        transition: all 0.3s ease !important;
    }
    .theme-colorful input:focus, .theme-colorful select:focus, .theme-colorful textarea:focus { 
        border-color: var(--accent-color) !important; 
        box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2) !important; 
        outline: none !important; 
        transform: scale(1.02) !important;
    }
    .theme-colorful .tab-button.active { 
        border-color: var(--accent-color) !important; 
        color: var(--accent-color) !important; 
        background: rgba(231, 76, 60, 0.1) !important;
        border-radius: 8px !important;
        font-weight: bold !important;
    }
    .theme-colorful .hover\:bg-gray-50:hover { 
        background: linear-gradient(45deg, var(--secondary-green), var(--secondary-pink)) !important; 
        transition: all 0.3s ease !important;
    }
    .theme-colorful button { 
        transition: all 0.3s ease !important; 
        border-radius: 8px !important;
    }
    .theme-colorful button:hover { 
        transform: translateY(-1px) !important; 
    }
    .theme-willow .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* 多彩主題：flatpickr 視覺整合 */
    .theme-colorful .flatpickr-calendar { 
        background: #ffffff !important; 
        border: 2px solid var(--border-color) !important; 
        box-shadow: 0 8px 25px rgba(174, 191, 237, 0.3) !important; 
        border-radius: 12px !important; 
        overflow: hidden; 
    }
    .theme-colorful .flatpickr-weekday { color: var(--subtle-text-color) !important; font-weight: 600; }
    .theme-colorful .flatpickr-day.selected, 
    .theme-colorful .flatpickr-day.startRange, 
    .theme-colorful .flatpickr-day.endRange { 
        background: linear-gradient(45deg, var(--accent-color), var(--accent-hover-color)) !important; 
        border-color: transparent !important; color:#fff !important; 
    }

    /* 防止標題列搜尋框聚焦時放大造成換行（多彩/魯紅/魯綠）*/
    .theme-colorful .header-toolbar input:focus,
    .theme-colorful .header-toolbar select:focus,
    .theme-colorful .header-toolbar textarea:focus { transform: none !important; }

    /* 確保多彩/魯紅/魯綠主題的購物車 SVG 尺寸維持一致 */
    .theme-colorful :is(#app-header, #dashboard-header-right) .view-switch-btn svg,
    .theme-luhong :is(#app-header, #dashboard-header-right) .view-switch-btn svg,
    .theme-lugreen :is(#app-header, #dashboard-header-right) .view-switch-btn svg {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0;
    }

    .theme-colorful :is(#app-header, #dashboard-header-right) .view-switch-btn svg path,
    .theme-colorful :is(#app-header, #dashboard-header-right) .view-switch-btn svg circle,
    .theme-luhong :is(#app-header, #dashboard-header-right) .view-switch-btn svg path,
    .theme-luhong :is(#app-header, #dashboard-header-right) .view-switch-btn svg circle,
    .theme-lugreen :is(#app-header, #dashboard-header-right) .view-switch-btn svg path,
    .theme-lugreen :is(#app-header, #dashboard-header-right) .view-switch-btn svg circle {
        stroke-width: 1.8 !important;
    }

    /* 魯紅主題：flatpickr 視覺整合 */
    .theme-luhong .flatpickr-calendar { 
        background: #ffffff !important; 
        border: 2px solid var(--border-color) !important; 
        box-shadow: 0 4px 20px rgba(182, 73, 78, 0.15) !important; 
        border-radius: 12px !important; 
        overflow: hidden; 
    }
    .theme-luhong .flatpickr-weekday { color: var(--subtle-text-color) !important; font-weight: 600; }
    .theme-luhong .flatpickr-day.selected, 
    .theme-luhong .flatpickr-day.startRange, 
    .theme-luhong .flatpickr-day.endRange { 
        background: linear-gradient(45deg, var(--accent-color), var(--secondary-dark)) !important; 
        border-color: transparent !important; color:#fff !important; 
    }
    .theme-luhong .header-toolbar input:focus,
    .theme-luhong .header-toolbar select:focus,
    .theme-luhong .header-toolbar textarea:focus { transform: none !important; }

    /* 魯綠主題：flatpickr 視覺整合 */
    .theme-lugreen .flatpickr-calendar { 
        background: #ffffff !important; 
        border: 2px solid var(--border-color) !important; 
        box-shadow: 0 4px 20px rgba(44, 193, 133, 0.15) !important; 
        border-radius: 12px !important; 
        overflow: hidden; 
    }
    .theme-lugreen .flatpickr-weekday { color: var(--subtle-text-color) !important; font-weight: 600; }
    .theme-lugreen .flatpickr-day.selected, 
    .theme-lugreen .flatpickr-day.startRange, 
    .theme-lugreen .flatpickr-day.endRange { 
        background: linear-gradient(45deg, var(--accent-color), var(--secondary-dark)) !important; 
        border-color: transparent !important; color:#fff !important; 
    }
    .theme-lugreen .header-toolbar input:focus,
    .theme-lugreen .header-toolbar select:focus,
    .theme-lugreen .header-toolbar textarea:focus { transform: none !important; }

    /* 修復：多彩 / 魯紅 / 魯綠 主題下購物清單分隔線重複設定導致邊框加粗 */
    .theme-colorful .cart-items ul.divide-y li,
    .theme-colorful .cart-items ul.divide-y > li,
    .theme-colorful .cart-items ul.divide-y > :not([hidden]) ~ :not([hidden]) {
        border: none !important;
        border-top: 1px solid var(--cart-divider-color, var(--border-color, #e5e7eb)) !important;
    }
    .theme-colorful .cart-items ul.divide-y > li:first-child {
        border-top-width: 0 !important;
    }

    .theme-luhong .cart-items ul.divide-y li,
    .theme-luhong .cart-items ul.divide-y > li,
    .theme-luhong .cart-items ul.divide-y > :not([hidden]) ~ :not([hidden]) {
        border: none !important;
        border-top: 1px solid var(--cart-divider-color, var(--border-color, #e5e7eb)) !important;
    }
    .theme-luhong .cart-items ul.divide-y > li:first-child {
        border-top-width: 0 !important;
    }

    .theme-lugreen .cart-items ul.divide-y li,
    .theme-lugreen .cart-items ul.divide-y > li,
    .theme-lugreen .cart-items ul.divide-y > :not([hidden]) ~ :not([hidden]) {
        border: none !important;
        border-top: 1px solid var(--cart-divider-color, var(--border-color, #e5e7eb)) !important;
    }
    .theme-lugreen .cart-items ul.divide-y > li:first-child {
        border-top-width: 0 !important;
    }

    /* --- 修復：多彩 / 魯紅 / 魯綠 主題下「版面風格」選取框被放大 --- */
    .theme-colorful :is(#app-header, #dashboard-header-right) .theme-switcher select,
    .theme-colorful :is(#app-header, #dashboard-header-right) .theme-switcher select:focus,
    .theme-luhong :is(#app-header, #dashboard-header-right) .theme-switcher select,
    .theme-luhong :is(#app-header, #dashboard-header-right) .theme-switcher select:focus,
    .theme-lugreen :is(#app-header, #dashboard-header-right) .theme-switcher select,
    .theme-lugreen :is(#app-header, #dashboard-header-right) .theme-switcher select:focus {
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
        padding: 0.25rem 0.5rem !important; /* 與原本 p-1 對齊 */
        height: 2rem !important;            /* h-8 */
        line-height: 1.5rem !important;
        box-shadow: none !important;
        transform: none !important;
        background: #fff !important;
    }

    /* --- 修復：多彩 / 魯紅 / 魯綠 主題下「檢視權限」與「日期區間」高度一致（以日期區間 h-10 為基準）--- */
    .theme-colorful #dashboard-filters select[data-filter="permission"],
    .theme-luhong   #dashboard-filters select[data-filter="permission"],
    .theme-lugreen  #dashboard-filters select[data-filter="permission"] {
        height: 2.5rem !important;          /* h-10 */
        line-height: 2.5rem !important;     /* 文字垂直置中 */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0.75rem !important;   /* px-3 */
        padding-right: 0.75rem !important;
        transform: none !important;         /* 避免 focus 時放大 */
    }
    .theme-colorful #dashboard-filters select[data-filter="permission"]:focus,
    .theme-luhong   #dashboard-filters select[data-filter="permission"]:focus,
    .theme-lugreen  #dashboard-filters select[data-filter="permission"]:focus {
        transform: none !important;
    }

    .theme-bronze { --bg-color:#fff7ed; --card-bg-color:#ffffff; --text-color:#4a2c1a; --subtle-text-color:#ea580c; --border-color:#fed7aa; --accent-color:#b45309; --accent-hover-color:#92400e; }
    .theme-bronze body, .theme-bronze .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-bronze .bg-white, .theme-bronze .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-bronze .shadow-sm, .theme-bronze .shadow-md, .theme-bronze .shadow-lg, .theme-bronze .shadow-xl { box-shadow:0 1px 3px rgba(180,83,9,.12) !important; border:1px solid var(--border-color); }
    .theme-bronze .rounded-lg, .theme-bronze .rounded-md { border-radius:8px !important; }
    .theme-bronze .text-blue-600 { color: var(--accent-color) !important; }
    .theme-bronze .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-bronze .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-bronze input, .theme-bronze select, .theme-bronze textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-bronze input:focus, .theme-bronze select:focus, .theme-bronze textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(180,83,9,.22) !important; outline:none !important; }
    .theme-bronze .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-silver { --bg-color:#f8fafc; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#64748b; --border-color:#e2e8f0; --accent-color:#64748b; --accent-hover-color:#475569; }
    .theme-silver body, .theme-silver .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-silver .bg-white, .theme-silver .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-silver .shadow-sm, .theme-silver .shadow-md, .theme-silver .shadow-lg, .theme-silver .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-silver .rounded-lg, .theme-silver .rounded-md { border-radius:8px !important; }
    .theme-silver .text-blue-600 { color: var(--accent-color) !important; }
    .theme-silver .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-silver .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-silver input, .theme-silver select, .theme-silver textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-silver input:focus, .theme-silver select:focus, .theme-silver textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(100,116,139,.22) !important; outline:none !important; }
    .theme-silver .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-gold { --bg-color:#fffbeb; --card-bg-color:#ffffff; --text-color:#713f12; --subtle-text-color:#f59e0b; --border-color:#fde68a; --accent-color:#d97706; --accent-hover-color:#b45309; }
    .theme-gold body, .theme-gold .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-gold .bg-white, .theme-gold .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-gold .shadow-sm, .theme-gold .shadow-md, .theme-gold .shadow-lg, .theme-gold .shadow-xl { box-shadow:0 1px 3px rgba(245,158,11,.12) !important; border:1px solid var(--border-color); }
    .theme-gold .rounded-lg, .theme-gold .rounded-md { border-radius:10px !important; }
    .theme-gold .text-blue-600 { color: var(--accent-color) !important; }
    .theme-gold .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-gold .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-gold input, .theme-gold select, .theme-gold textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-gold input:focus, .theme-gold select:focus, .theme-gold textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(217,119,6,.22) !important; outline:none !important; }
    .theme-gold .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-amethyst { --bg-color:#f5f3ff; --card-bg-color:#ffffff; --text-color:#3730a3; --subtle-text-color:#a78bfa; --border-color:#ddd6fe; --accent-color:#8b5cf6; --accent-hover-color:#7c3aed; }
    .theme-amethyst body, .theme-amethyst .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-amethyst .bg-white, .theme-amethyst .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-amethyst .shadow-sm, .theme-amethyst .shadow-md, .theme-amethyst .shadow-lg, .theme-amethyst .shadow-xl { box-shadow:0 1px 3px rgba(139,92,246,.12) !important; border:1px solid var(--border-color); }
    .theme-amethyst .rounded-lg, .theme-amethyst .rounded-md { border-radius:8px !important; }
    .theme-amethyst .text-blue-600 { color: var(--accent-color) !important; }
    .theme-amethyst .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-amethyst .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-amethyst input, .theme-amethyst select, .theme-amethyst textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-amethyst input:focus, .theme-amethyst select:focus, .theme-amethyst textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(139,92,246,.22) !important; outline:none !important; }
    .theme-amethyst .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-sapphire { --bg-color:#eff6ff; --card-bg-color:#ffffff; --text-color:#1e3a8a; --subtle-text-color:#60a5fa; --border-color:#dbeafe; --accent-color:#2563eb; --accent-hover-color:#1d4ed8; }
    .theme-sapphire body, .theme-sapphire .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-sapphire .bg-white, .theme-sapphire .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-sapphire .shadow-sm, .theme-sapphire .shadow-md, .theme-sapphire .shadow-lg, .theme-sapphire .shadow-xl { box-shadow:0 1px 3px rgba(37,99,235,.12) !important; border:1px solid var(--border-color); }
    .theme-sapphire .rounded-lg, .theme-sapphire .rounded-md { border-radius:8px !important; }
    .theme-sapphire .text-blue-600 { color: var(--accent-color) !important; }
    .theme-sapphire .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-sapphire .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-sapphire input, .theme-sapphire select, .theme-sapphire textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-sapphire input:focus, .theme-sapphire select:focus, .theme-sapphire textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(37,99,235,.22) !important; outline:none !important; }
    .theme-sapphire .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-ruby { --bg-color:#fff1f2; --card-bg-color:#ffffff; --text-color:#7f1d1d; --subtle-text-color:#f87171; --border-color:#fecaca; --accent-color:#ef4444; --accent-hover-color:#dc2626; }
    .theme-ruby body, .theme-ruby .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-ruby .bg-white, .theme-ruby .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-ruby .shadow-sm, .theme-ruby .shadow-md, .theme-ruby .shadow-lg, .theme-ruby .shadow-xl { box-shadow:0 1px 3px rgba(239,68,68,.12) !important; border:1px solid var(--border-color); }
    .theme-ruby .rounded-lg, .theme-ruby .rounded-md { border-radius:10px !important; }
    .theme-ruby .text-blue-600 { color: var(--accent-color) !important; }
    .theme-ruby .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-ruby .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-ruby input, .theme-ruby select, .theme-ruby textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-ruby input:focus, .theme-ruby select:focus, .theme-ruby textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(239,68,68,.22) !important; outline:none !important; }
    .theme-ruby .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-emerald { --bg-color:#ecfdf5; --card-bg-color:#ffffff; --text-color:#064e3b; --subtle-text-color:#34d399; --border-color:#d1fae5; --accent-color:#10b981; --accent-hover-color:#059669; }
    .theme-emerald body, .theme-emerald .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-emerald .bg-white, .theme-emerald .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-emerald .shadow-sm, .theme-emerald .shadow-md, .theme-emerald .shadow-lg, .theme-emerald .shadow-xl { box-shadow:0 1px 3px rgba(16,185,129,.12) !important; border:1px solid var(--border-color); }
    .theme-emerald .rounded-lg, .theme-emerald .rounded-md { border-radius:10px !important; }
    .theme-emerald .text-blue-600 { color: var(--accent-color) !important; }
    .theme-emerald .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-emerald .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-emerald input, .theme-emerald select, .theme-emerald textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-emerald input:focus, .theme-emerald select:focus, .theme-emerald textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(16,185,129,.22) !important; outline:none !important; }
    .theme-emerald .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-topaz { --bg-color:#fffbeb; --card-bg-color:#ffffff; --text-color:#78350f; --subtle-text-color:#f59e0b; --border-color:#fde68a; --accent-color:#f59e0b; --accent-hover-color:#d97706; }
    .theme-topaz body, .theme-topaz .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-topaz .bg-white, .theme-topaz .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-topaz .shadow-sm, .theme-topaz .shadow-md, .theme-topaz .shadow-lg, .theme-topaz .shadow-xl { box-shadow:0 1px 3px rgba(245,158,11,.12) !important; border:1px solid var(--border-color); }
    .theme-topaz .rounded-lg, .theme-topaz .rounded-md { border-radius:8px !important; }
    .theme-topaz .text-blue-600 { color: var(--accent-color) !important; }
    .theme-topaz .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-topaz .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-topaz input, .theme-topaz select, .theme-topaz textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-topaz input:focus, .theme-topaz select:focus, .theme-topaz textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(245,158,11,.22) !important; outline:none !important; }
    .theme-topaz .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-garnet { --bg-color:#fff1f2; --card-bg-color:#ffffff; --text-color:#701a1a; --subtle-text-color:#fb7185; --border-color:#fecdd3; --accent-color:#e11d48; --accent-hover-color:#be123c; }
    .theme-garnet body, .theme-garnet .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-garnet .bg-white, .theme-garnet .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-garnet .shadow-sm, .theme-garnet .shadow-md, .theme-garnet .shadow-lg, .theme-garnet .shadow-xl { box-shadow:0 1px 3px rgba(225,29,72,.12) !important; border:1px solid var(--border-color); }
    .theme-garnet .rounded-lg, .theme-garnet .rounded-md { border-radius:10px !important; }
    .theme-garnet .text-blue-600 { color: var(--accent-color) !important; }
    .theme-garnet .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-garnet .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-garnet input, .theme-garnet select, .theme-garnet textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-garnet input:focus, .theme-garnet select:focus, .theme-garnet textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(225,29,72,.22) !important; outline:none !important; }
    .theme-garnet .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-quartz { --bg-color:#f8fafc; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#64748b; --border-color:#e2e8f0; --accent-color:#14b8a6; --accent-hover-color:#0d9488; }
    .theme-quartz body, .theme-quartz .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-quartz .bg-white, .theme-quartz .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-quartz .shadow-sm, .theme-quartz .shadow-md, .theme-quartz .shadow-lg, .theme-quartz .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-quartz .rounded-lg, .theme-quartz .rounded-md { border-radius:8px !important; }
    .theme-quartz .text-blue-600 { color: var(--accent-color) !important; }
    .theme-quartz .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-quartz .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-quartz input, .theme-quartz select, .theme-quartz textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-quartz input:focus, .theme-quartz select:focus, .theme-quartz textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(20,184,166,.22) !important; outline:none !important; }
    .theme-quartz .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-onyx { --bg-color:#0b0c10; --card-bg-color:#151820; --text-color:#e5e7eb; --subtle-text-color:#9ca3af; --border-color:#2e3340; --accent-color:#a3a3a3; --accent-hover-color:#737373; }
    .theme-onyx body, .theme-onyx .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-onyx .bg-white, .theme-onyx .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-onyx .shadow-sm, .theme-onyx .shadow-md, .theme-onyx .shadow-lg, .theme-onyx .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.4) !important; border:1px solid var(--border-color); }
    .theme-onyx .rounded-lg, .theme-onyx .rounded-md { border-radius:6px !important; }
    .theme-onyx .text-blue-600 { color: var(--accent-color) !important; }
    .theme-onyx .bg-blue-600 { background: var(--accent-color) !important; color:#0b0c10 !important; }
    .theme-onyx .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-onyx input, .theme-onyx select, .theme-onyx textarea { background:#151820 !important; border:1px solid var(--border-color) !important; border-radius:6px !important; color:var(--text-color) !important; }
    .theme-onyx input:focus, .theme-onyx select:focus, .theme-onyx textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(163,163,163,.28) !important; outline:none !important; }
    .theme-onyx .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-obsidian { --bg-color:#0f1115; --card-bg-color:#181b22; --text-color:#e5e7eb; --subtle-text-color:#9ca3af; --border-color:#2b2f37; --accent-color:#22d3ee; --accent-hover-color:#06b6d4; }
    .theme-obsidian body, .theme-obsidian .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-obsidian .bg-white, .theme-obsidian .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-obsidian .shadow-sm, .theme-obsidian .shadow-md, .theme-obsidian .shadow-lg, .theme-obsidian .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.35) !important; border:1px solid var(--border-color); }
    .theme-obsidian .rounded-lg, .theme-obsidian .rounded-md { border-radius:6px !important; }
    .theme-obsidian .text-blue-600 { color: var(--accent-color) !important; }
    .theme-obsidian .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-obsidian .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-obsidian input, .theme-obsidian select, .theme-obsidian textarea { background:#181b22 !important; border:1px solid var(--border-color) !important; border-radius:6px !important; color:var(--text-color) !important; }
    .theme-obsidian input:focus, .theme-obsidian select:focus, .theme-obsidian textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(34,211,238,.28) !important; outline:none !important; }
    .theme-obsidian .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-smoke { --bg-color:#f3f4f6; --card-bg-color:#ffffff; --text-color:#111827; --subtle-text-color:#6b7280; --border-color:#e5e7eb; --accent-color:#9ca3af; --accent-hover-color:#6b7280; }
    .theme-smoke body, .theme-smoke .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-smoke .bg-white, .theme-smoke .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-smoke .shadow-sm, .theme-smoke .shadow-md, .theme-smoke .shadow-lg, .theme-smoke .shadow-xl { box-shadow:0 1px 2px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-smoke .rounded-lg, .theme-smoke .rounded-md { border-radius:6px !important; }
    .theme-smoke .text-blue-600 { color: var(--accent-color) !important; }
    .theme-smoke .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-smoke .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-smoke input, .theme-smoke select, .theme-smoke textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:6px !important; }
    .theme-smoke input:focus, .theme-smoke select:focus, .theme-smoke textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(156,163,175,.22) !important; outline:none !important; }
    .theme-smoke .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-cloud { --bg-color:#f8fafc; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#94a3b8; --border-color:#e2e8f0; --accent-color:#38bdf8; --accent-hover-color:#0ea5e9; }
    .theme-cloud body, .theme-cloud .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-cloud .bg-white, .theme-cloud .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-cloud .shadow-sm, .theme-cloud .shadow-md, .theme-cloud .shadow-lg, .theme-cloud .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-cloud .rounded-lg, .theme-cloud .rounded-md { border-radius:10px !important; }
    .theme-cloud .text-blue-600 { color: var(--accent-color) !important; }
    .theme-cloud .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-cloud .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-cloud input, .theme-cloud select, .theme-cloud textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-cloud input:focus, .theme-cloud select:focus, .theme-cloud textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(56,189,248,.22) !important; outline:none !important; }
    .theme-cloud .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-storm { --bg-color:#0f172a; --card-bg-color:#111827; --text-color:#e2e8f0; --subtle-text-color:#94a3b8; --border-color:#1f2937; --accent-color:#38bdf8; --accent-hover-color:#0ea5e9; }
    .theme-storm body, .theme-storm .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-storm .bg-white, .theme-storm .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-storm .shadow-sm, .theme-storm .shadow-md, .theme-storm .shadow-lg, .theme-storm .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.35) !important; border:1px solid var(--border-color); }
    .theme-storm .rounded-lg, .theme-storm .rounded-md { border-radius:6px !important; }
    .theme-storm .text-blue-600 { color: var(--accent-color) !important; }
    .theme-storm .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-storm .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-storm input, .theme-storm select, .theme-storm textarea { background:#111827 !important; border:1px solid var(--border-color) !important; border-radius:6px !important; color:var(--text-color) !important; }
    .theme-storm input:focus, .theme-storm select:focus, .theme-storm textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(56,189,248,.28) !important; outline:none !important; }
    .theme-storm .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-frost { --bg-color:#f1f5f9; --card-bg-color:#ffffff; --text-color:#0c4a6e; --subtle-text-color:#94a3b8; --border-color:#e2e8f0; --accent-color:#38bdf8; --accent-hover-color:#0ea5e9; }
    .theme-frost body, .theme-frost .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-frost .bg-white, .theme-frost .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-frost .shadow-sm, .theme-frost .shadow-md, .theme-frost .shadow-lg, .theme-frost .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-frost .rounded-lg, .theme-frost .rounded-md { border-radius:8px !important; }
    .theme-frost .text-blue-600 { color: var(--accent-color) !important; }
    .theme-frost .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-frost .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-frost input, .theme-frost select, .theme-frost textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-frost input:focus, .theme-frost select:focus, .theme-frost textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(56,189,248,.22) !important; outline:none !important; }
    .theme-frost .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-cherry { --bg-color:#fff1f2; --card-bg-color:#ffffff; --text-color:#701a1a; --subtle-text-color:#fb7185; --border-color:#fecdd3; --accent-color:#f43f5e; --accent-hover-color:#e11d48; }
    .theme-cherry body, .theme-cherry .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-cherry .bg-white, .theme-cherry .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-cherry .shadow-sm, .theme-cherry .shadow-md, .theme-cherry .shadow-lg, .theme-cherry .shadow-xl { box-shadow:0 2px 6px rgba(244,63,94,.12) !important; border:1px solid var(--border-color); }
    .theme-cherry .rounded-lg, .theme-cherry .rounded-md { border-radius:10px !important; }
    .theme-cherry .text-blue-600 { color: var(--accent-color) !important; }
    .theme-cherry .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-cherry .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-cherry input, .theme-cherry select, .theme-cherry textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-cherry input:focus, .theme-cherry select:focus, .theme-cherry textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(244,63,94,.22) !important; outline:none !important; }
    .theme-cherry .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-espresso { --bg-color:#f5f5f4; --card-bg-color:#ffffff; --text-color:#1c1917; --subtle-text-color:#a8a29e; --border-color:#e7e5e4; --accent-color:#7c2d12; --accent-hover-color:#4a1d09; }
    .theme-espresso body, .theme-espresso .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-espresso .bg-white, .theme-espresso .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-espresso .shadow-sm, .theme-espresso .shadow-md, .theme-espresso .shadow-lg, .theme-espresso .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-espresso .rounded-lg, .theme-espresso .rounded-md { border-radius:8px !important; }
    .theme-espresso .text-blue-600 { color: var(--accent-color) !important; }
    .theme-espresso .bg-blue-600 { background: var(--accent-color) !important; color:#fff !important; }
    .theme-espresso .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-espresso input, .theme-espresso select, .theme-espresso textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-espresso input:focus, .theme-espresso select:focus, .theme-espresso textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(124,45,18,.22) !important; outline:none !important; }
    .theme-espresso .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-mocha { --bg-color:#f5efe6; --card-bg-color:#ffffff; --text-color:#3f2d20; --subtle-text-color:#a16207; --border-color:#eadbd1; --accent-color:#9a3412; --accent-hover-color:#7c2d12; }
    .theme-mocha body, .theme-mocha .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-mocha .bg-white, .theme-mocha .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-mocha .shadow-sm, .theme-mocha .shadow-md, .theme-mocha .shadow-lg, .theme-mocha .shadow-xl { box-shadow:0 1px 3px rgba(154,52,18,.10) !important; border:1px solid var(--border-color); }
    .theme-mocha .rounded-lg, .theme-mocha .rounded-md { border-radius:10px !important; }
    .theme-mocha .text-blue-600 { color: var(--accent-color) !important; }
    .theme-mocha .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-mocha .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-mocha input, .theme-mocha select, .theme-mocha textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-mocha input:focus, .theme-mocha select:focus, .theme-mocha textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(154,52,18,.22) !important; outline:none !important; }
    .theme-mocha .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-avocado { --bg-color:#f7fee7; --card-bg-color:#ffffff; --text-color:#1a2e05; --subtle-text-color:#84cc16; --border-color:#d9f99d; --accent-color:#65a30d; --accent-hover-color:#4d7c0f; }
    .theme-avocado body, .theme-avocado .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-avocado .bg-white, .theme-avocado .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-avocado .shadow-sm, .theme-avocado .shadow-md, .theme-avocado .shadow-lg, .theme-avocado .shadow-xl { box-shadow:0 1px 3px rgba(101,163,13,.12) !important; border:1px solid var(--border-color); }
    .theme-avocado .rounded-lg, .theme-avocado .rounded-md { border-radius:8px !important; }
    .theme-avocado .text-blue-600 { color: var(--accent-color) !important; }
    .theme-avocado .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-avocado .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-avocado input, .theme-avocado select, .theme-avocado textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-avocado input:focus, .theme-avocado select:focus, .theme-avocado textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(101,163,13,.22) !important; outline:none !important; }
    .theme-avocado .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-banana { --bg-color:#fef9c3; --card-bg-color:#ffffff; --text-color:#3f2d1c; --subtle-text-color:#facc15; --border-color:#fde68a; --accent-color:#eab308; --accent-hover-color:#ca8a04; }
    .theme-banana body, .theme-banana .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-banana .bg-white, .theme-banana .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-banana .shadow-sm, .theme-banana .shadow-md, .theme-banana .shadow-lg, .theme-banana .shadow-xl { box-shadow:0 1px 3px rgba(234,179,8,.12) !important; border:1px solid var(--border-color); }
    .theme-banana .rounded-lg, .theme-banana .rounded-md { border-radius:10px !important; }
    .theme-banana .text-blue-600 { color: var(--accent-color) !important; }
    .theme-banana .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-banana .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-banana input, .theme-banana select, .theme-banana textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-banana input:focus, .theme-banana select:focus, .theme-banana textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(234,179,8,.22) !important; outline:none !important; }
    .theme-banana .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-plumeria { --bg-color:#fff7fb; --card-bg-color:#ffffff; --text-color:#4a1d2b; --subtle-text-color:#f472b6; --border-color:#fde2f2; --accent-color:#be185d; --accent-hover-color:#9d174d; }
    .theme-plumeria body, .theme-plumeria .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-plumeria .bg-white, .theme-plumeria .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-plumeria .shadow-sm, .theme-plumeria .shadow-md, .theme-plumeria .shadow-lg, .theme-plumeria .shadow-xl { box-shadow:0 2px 6px rgba(190,24,93,.10) !important; border:1px solid var(--border-color); }
    .theme-plumeria .rounded-lg, .theme-plumeria .rounded-md { border-radius:10px !important; }
    .theme-plumeria .text-blue-600 { color: var(--accent-color) !important; }
    .theme-plumeria .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-plumeria .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-plumeria input, .theme-plumeria select, .theme-plumeria textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-plumeria input:focus, .theme-plumeria select:focus, .theme-plumeria textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(190,24,93,.20) !important; outline:none !important; }
    .theme-plumeria .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-reef { --bg-color:#ecfeff; --card-bg-color:#ffffff; --text-color:#164e63; --subtle-text-color:#22d3ee; --border-color:#cffafe; --accent-color:#06b6d4; --accent-hover-color:#0891b2; }
    .theme-reef body, .theme-reef .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-reef .bg-white, .theme-reef .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-reef .shadow-sm, .theme-reef .shadow-md, .theme-reef .shadow-lg, .theme-reef .shadow-xl { box-shadow:0 1px 3px rgba(6,182,212,.12) !important; border:1px solid var(--border-color); }
    .theme-reef .rounded-lg, .theme-reef .rounded-md { border-radius:8px !important; }
    .theme-reef .text-blue-600 { color: var(--accent-color) !important; }
    .theme-reef .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-reef .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-reef input, .theme-reef select, .theme-reef textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-reef input:focus, .theme-reef select:focus, .theme-reef textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(6,182,212,.22) !important; outline:none !important; }
    .theme-reef .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-seafoam { --bg-color:#f0fdfa; --card-bg-color:#ffffff; --text-color:#134e4a; --subtle-text-color:#14b8a6; --border-color:#ccfbf1; --accent-color:#0d9488; --accent-hover-color:#0f766e; }
    .theme-seafoam body, .theme-seafoam .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-seafoam .bg-white, .theme-seafoam .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-seafoam .shadow-sm, .theme-seafoam .shadow-md, .theme-seafoam .shadow-lg, .theme-seafoam .shadow-xl { box-shadow:0 1px 3px rgba(13,148,136,.12) !important; border:1px solid var(--border-color); }
    .theme-seafoam .rounded-lg, .theme-seafoam .rounded-md { border-radius:8px !important; }
    .theme-seafoam .text-blue-600 { color: var(--accent-color) !important; }
    .theme-seafoam .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-seafoam .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-seafoam input, .theme-seafoam select, .theme-seafoam textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-seafoam input:focus, .theme-seafoam select:focus, .theme-seafoam textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(13,148,136,.22) !important; outline:none !important; }
    .theme-seafoam .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-pine { --bg-color:#ecfdf5; --card-bg-color:#ffffff; --text-color:#064e3b; --subtle-text-color:#34d399; --border-color:#d1fae5; --accent-color:#065f46; --accent-hover-color:#064e3b; }
    .theme-pine body, .theme-pine .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-pine .bg-white, .theme-pine .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-pine .shadow-sm, .theme-pine .shadow-md, .theme-pine .shadow-lg, .theme-pine .shadow-xl { box-shadow:0 1px 3px rgba(6,95,70,.12) !important; border:1px solid var(--border-color); }
    .theme-pine .rounded-lg, .theme-pine .rounded-md { border-radius:10px !important; }
    .theme-pine .text-blue-600 { color: var(--accent-color) !important; }
    .theme-pine .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-pine .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-pine input, .theme-pine select, .theme-pine textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-pine input:focus, .theme-pine select:focus, .theme-pine textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(6,95,70,.22) !important; outline:none !important; }
    .theme-pine .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-iron { --bg-color:#f1f5f9; --card-bg-color:#ffffff; --text-color:#0f172a; --subtle-text-color:#64748b; --border-color:#e2e8f0; --accent-color:#475569; --accent-hover-color:#334155; }
    .theme-iron body, .theme-iron .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-iron .bg-white, .theme-iron .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-iron .shadow-sm, .theme-iron .shadow-md, .theme-iron .shadow-lg, .theme-iron .shadow-xl { box-shadow:0 1px 3px rgba(15,23,42,.08) !important; border:1px solid var(--border-color); }
    .theme-iron .rounded-lg, .theme-iron .rounded-md { border-radius:8px !important; }
    .theme-iron .text-blue-600 { color: var(--accent-color) !important; }
    .theme-iron .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-iron .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-iron input, .theme-iron select, .theme-iron textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:6px !important; }
    .theme-iron input:focus, .theme-iron select:focus, .theme-iron textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(71,85,105,.2) !important; outline:none !important; }
    .theme-iron .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-carbon { --bg-color:#0b0c10; --card-bg-color:#151820; --text-color:#e5e7eb; --subtle-text-color:#9ca3af; --border-color:#2e3340; --accent-color:#22c55e; --accent-hover-color:#16a34a; }
    .theme-carbon body, .theme-carbon .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-carbon .bg-white, .theme-carbon .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-carbon .shadow-sm, .theme-carbon .shadow-md, .theme-carbon .shadow-lg, .theme-carbon .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.4) !important; border:1px solid var(--border-color); }
    .theme-carbon .rounded-lg, .theme-carbon .rounded-md { border-radius:6px !important; }
    .theme-carbon .text-blue-600 { color: var(--accent-color) !important; }
    .theme-carbon .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-carbon .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-carbon input, .theme-carbon select, .theme-carbon textarea { background:#151820 !important; border:1px solid var(--border-color) !important; border-radius:6px !important; color:var(--text-color) !important; }
    .theme-carbon input:focus, .theme-carbon select:focus, .theme-carbon textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(34,197,94,.28) !important; outline:none !important; }
    .theme-carbon .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }
    
    /* Carbon 主題標籤列深色樣式 */
    .theme-carbon .bg-gradient-to-r.from-gray-50.to-gray-100 { background: linear-gradient(to right, #1a1d26, #242832) !important; border-color: var(--border-color) !important; }
    .theme-carbon nav button.bg-white { background-color: #1f242f !important; color: var(--text-color) !important; border-color: var(--border-color) !important; }
    .theme-carbon nav button.bg-white:hover { background-color: #2a2f3a !important; border-color: var(--accent-color) !important; }
    .theme-carbon nav button.bg-blue-600 { background-color: var(--accent-color) !important; color: #0b0c10 !important; }
    .theme-carbon nav .bg-white.border { background-color: #1f242f !important; border-color: var(--border-color) !important; }
    .theme-carbon nav .border-blue-500 { border-color: var(--accent-color) !important; background-color: #1a1d26 !important; }
    .theme-carbon nav .text-gray-700 { color: var(--text-color) !important; }
    .theme-carbon nav .text-gray-800 { color: var(--text-color) !important; }
    .theme-carbon nav .text-gray-500 { color: var(--subtle-text-color) !important; }
    .theme-carbon nav .text-blue-700 { color: var(--accent-color) !important; }
    .theme-carbon nav .text-blue-500 { color: var(--accent-color) !important; }

    /* Detail modal drag handle - 融入版面：淺色主題與深色主題覆蓋 */
    .detail-modal-drag-handle,
    .management-modal-drag-handle {
        /* 改為柔和灰階漸層，減少原本的亮藍色突兀 */
        background: linear-gradient(90deg, rgba(249,250,251,0.9), rgba(241,245,249,0.9)) !important;
        border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
        color: var(--text-color, #111827) !important;
        /* 保持原本的 padding 與排版，不改變高度 */
    }

    /* 深色主題覆蓋：使用微亮的疊層及較明顯的底色分隔，與各深色主題變數相容 */
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .detail-modal-drag-handle,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .management-modal-drag-handle {
        background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        color: var(--text-color) !important;
    }

    /* 公告區塊 - 深色主題覆蓋：深色底亮色字 */
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .bg-blue-50 {
        background-color: rgba(255,255,255,0.03) !important;
    }
    
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .border-blue-500 {
        border-color: var(--accent-color) !important;
    }
    
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .text-blue-800,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .text-blue-700,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .text-blue-600 {
        color: var(--text-color) !important;
    }

    /* 返回列表按鈕 - 深色主題覆蓋：深色底亮色字 */
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.bg-gray-200,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .bg-gray-200 {
        background-color: rgba(255,255,255,0.08) !important;
        color: var(--text-color) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
    }
    
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) button.bg-gray-200:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .bg-gray-200:hover {
        background-color: rgba(255,255,255,0.12) !important;
        border-color: var(--accent-color) !important;
    }

    /* 結案狀態標籤 - 深色主題覆蓋：深色底亮色字 */
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .bg-gray-300 {
        background-color: rgba(255,255,255,0.15) !important;
        color: var(--text-color) !important;
    }
    
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-carbon,.theme-cobalt,.theme-slate,.theme-rosewood,.theme-cinder,.theme-graphite,.theme-charcoal) .text-gray-800 {
        color: var(--text-color) !important;
    }

    /* 公告區塊 - 非深色主題樣式：融入主題色彩 */
    .theme-navy .bg-blue-50 { background-color: rgba(99, 102, 241, 0.08) !important; }
    .theme-navy .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-navy .text-blue-800, .theme-navy .text-blue-700, .theme-navy .text-blue-600 { color: var(--text-color) !important; }

    .theme-air .bg-blue-50 { background-color: rgba(56, 189, 248, 0.08) !important; }
    .theme-air .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-air .text-blue-800, .theme-air .text-blue-700, .theme-air .text-blue-600 { color: var(--text-color) !important; }

    .theme-violet .bg-blue-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
    .theme-violet .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-violet .text-blue-800, .theme-violet .text-blue-700, .theme-violet .text-blue-600 { color: var(--text-color) !important; }

    .theme-caramel .bg-blue-50 { background-color: rgba(234, 88, 12, 0.08) !important; }
    .theme-caramel .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-caramel .text-blue-800, .theme-caramel .text-blue-700, .theme-caramel .text-blue-600 { color: var(--text-color) !important; }

    .theme-peach .bg-blue-50 { background-color: rgba(249, 115, 22, 0.08) !important; }
    .theme-peach .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-peach .text-blue-800, .theme-peach .text-blue-700, .theme-peach .text-blue-600 { color: var(--text-color) !important; }

    .theme-lilac .bg-blue-50 { background-color: rgba(167, 139, 250, 0.08) !important; }
    .theme-lilac .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-lilac .text-blue-800, .theme-lilac .text-blue-700, .theme-lilac .text-blue-600 { color: var(--text-color) !important; }

    .theme-rose .bg-blue-50 { background-color: rgba(236, 72, 153, 0.08) !important; }
    .theme-rose .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-rose .text-blue-800, .theme-rose .text-blue-700, .theme-rose .text-blue-600 { color: var(--text-color) !important; }

    .theme-magenta .bg-blue-50 { background-color: rgba(162, 28, 175, 0.08) !important; }
    .theme-magenta .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-magenta .text-blue-800, .theme-magenta .text-blue-700, .theme-magenta .text-blue-600 { color: var(--text-color) !important; }

    .theme-periwinkle .bg-blue-50 { background-color: rgba(99, 102, 241, 0.08) !important; }
    .theme-periwinkle .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-periwinkle .text-blue-800, .theme-periwinkle .text-blue-700, .theme-periwinkle .text-blue-600 { color: var(--text-color) !important; }

    .theme-teak .bg-blue-50 { background-color: rgba(139, 94, 52, 0.08) !important; }
    .theme-teak .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-teak .text-blue-800, .theme-teak .text-blue-700, .theme-teak .text-blue-600 { color: var(--text-color) !important; }

    .theme-luhong .bg-blue-50 { background-color: rgba(182, 73, 78, 0.08) !important; }
    .theme-luhong .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-luhong .text-blue-800, .theme-luhong .text-blue-700, .theme-luhong .text-blue-600 { color: var(--text-color) !important; }

    .theme-lugreen .bg-blue-50 { background-color: rgba(52, 211, 153, 0.08) !important; }
    .theme-lugreen .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-lugreen .text-blue-800, .theme-lugreen .text-blue-700, .theme-lugreen .text-blue-600 { color: var(--text-color) !important; }

    .theme-cocoa .bg-blue-50 { background-color: rgba(180, 83, 9, 0.08) !important; }
    .theme-cocoa .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-cocoa .text-blue-800, .theme-cocoa .text-blue-700, .theme-cocoa .text-blue-600 { color: var(--text-color) !important; }

    .theme-denim .bg-blue-50 { background-color: rgba(37, 99, 235, 0.08) !important; }
    .theme-denim .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-denim .text-blue-800, .theme-denim .text-blue-700, .theme-denim .text-blue-600 { color: var(--text-color) !important; }

    .theme-lime .bg-blue-50 { background-color: rgba(101, 163, 13, 0.08) !important; }
    .theme-lime .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-lime .text-blue-800, .theme-lime .text-blue-700, .theme-lime .text-blue-600 { color: var(--text-color) !important; }

    .theme-coral .bg-blue-50 { background-color: rgba(244, 63, 94, 0.08) !important; }
    .theme-coral .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-coral .text-blue-800, .theme-coral .text-blue-700, .theme-coral .text-blue-600 { color: var(--text-color) !important; }

    .theme-plum .bg-blue-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
    .theme-plum .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-plum .text-blue-800, .theme-plum .text-blue-700, .theme-plum .text-blue-600 { color: var(--text-color) !important; }

    .theme-sky .bg-blue-50 { background-color: rgba(14, 165, 233, 0.08) !important; }
    .theme-sky .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-sky .text-blue-800, .theme-sky .text-blue-700, .theme-sky .text-blue-600 { color: var(--text-color) !important; }

    .theme-pearl .bg-blue-50 { background-color: rgba(16, 185, 129, 0.08) !important; }
    .theme-pearl .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-pearl .text-blue-800, .theme-pearl .text-blue-700, .theme-pearl .text-blue-600 { color: var(--text-color) !important; }

    .theme-rust .bg-blue-50 { background-color: rgba(249, 115, 22, 0.08) !important; }
    .theme-rust .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-rust .text-blue-800, .theme-rust .text-blue-700, .theme-rust .text-blue-600 { color: var(--text-color) !important; }

    .theme-berry .bg-blue-50 { background-color: rgba(219, 39, 119, 0.08) !important; }
    .theme-berry .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-berry .text-blue-800, .theme-berry .text-blue-700, .theme-berry .text-blue-600 { color: var(--text-color) !important; }

    .theme-moss .bg-blue-50 { background-color: rgba(16, 185, 129, 0.08) !important; }
    .theme-moss .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-moss .text-blue-800, .theme-moss .text-blue-700, .theme-moss .text-blue-600 { color: var(--text-color) !important; }

    .theme-teal .bg-blue-50 { background-color: rgba(13, 148, 136, 0.08) !important; }
    .theme-teal .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-teal .text-blue-800, .theme-teal .text-blue-700, .theme-teal .text-blue-600 { color: var(--text-color) !important; }

    .theme-sepia .bg-blue-50 { background-color: rgba(217, 119, 6, 0.08) !important; }
    .theme-sepia .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-sepia .text-blue-800, .theme-sepia .text-blue-700, .theme-sepia .text-blue-600 { color: var(--text-color) !important; }

    .theme-ivory .bg-blue-50 { background-color: rgba(14, 165, 233, 0.08) !important; }
    .theme-ivory .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-ivory .text-blue-800, .theme-ivory .text-blue-700, .theme-ivory .text-blue-600 { color: var(--text-color) !important; }

    .theme-azure .bg-blue-50 { background-color: rgba(59, 130, 246, 0.08) !important; }
    .theme-azure .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-azure .text-blue-800, .theme-azure .text-blue-700, .theme-azure .text-blue-600 { color: var(--text-color) !important; }

    .theme-blush .bg-blue-50 { background-color: rgba(236, 72, 153, 0.08) !important; }
    .theme-blush .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-blush .text-blue-800, .theme-blush .text-blue-700, .theme-blush .text-blue-600 { color: var(--text-color) !important; }

    .theme-saffron .bg-blue-50 { background-color: rgba(245, 158, 11, 0.08) !important; }
    .theme-saffron .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-saffron .text-blue-800, .theme-saffron .text-blue-700, .theme-saffron .text-blue-600 { color: var(--text-color) !important; }

    .theme-indigo .bg-blue-50 { background-color: rgba(79, 70, 229, 0.08) !important; }
    .theme-indigo .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-indigo .text-blue-800, .theme-indigo .text-blue-700, .theme-indigo .text-blue-600 { color: var(--text-color) !important; }

    .theme-copper .bg-blue-50 { background-color: rgba(194, 65, 12, 0.08) !important; }
    .theme-copper .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-copper .text-blue-800, .theme-copper .text-blue-700, .theme-copper .text-blue-600 { color: var(--text-color) !important; }

    .theme-lavender .bg-blue-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
    .theme-lavender .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-lavender .text-blue-800, .theme-lavender .text-blue-700, .theme-lavender .text-blue-600 { color: var(--text-color) !important; }

    .theme-steel .bg-blue-50 { background-color: rgba(71, 85, 105, 0.08) !important; }
    .theme-steel .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-steel .text-blue-800, .theme-steel .text-blue-700, .theme-steel .text-blue-600 { color: var(--text-color) !important; }

    .theme-clay .bg-blue-50 { background-color: rgba(154, 52, 18, 0.08) !important; }
    .theme-clay .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-clay .text-blue-800, .theme-clay .text-blue-700, .theme-clay .text-blue-600 { color: var(--text-color) !important; }

    .theme-cyan .bg-blue-50 { background-color: rgba(6, 182, 212, 0.08) !important; }
    .theme-cyan .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-cyan .text-blue-800, .theme-cyan .text-blue-700, .theme-cyan .text-blue-600 { color: var(--text-color) !important; }

    .theme-olive .bg-blue-50 { background-color: rgba(77, 124, 15, 0.08) !important; }
    .theme-olive .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-olive .text-blue-800, .theme-olive .text-blue-700, .theme-olive .text-blue-600 { color: var(--text-color) !important; }

    .theme-marigold .bg-blue-50 { background-color: rgba(249, 115, 22, 0.08) !important; }
    .theme-marigold .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-marigold .text-blue-800, .theme-marigold .text-blue-700, .theme-marigold .text-blue-600 { color: var(--text-color) !important; }

    .theme-orchid .bg-blue-50 { background-color: rgba(162, 28, 175, 0.08) !important; }
    .theme-orchid .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-orchid .text-blue-800, .theme-orchid .text-blue-700, .theme-orchid .text-blue-600 { color: var(--text-color) !important; }

    .theme-flamingo .bg-blue-50 { background-color: rgba(244, 63, 94, 0.08) !important; }
    .theme-flamingo .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-flamingo .text-blue-800, .theme-flamingo .text-blue-700, .theme-flamingo .text-blue-600 { color: var(--text-color) !important; }

    .theme-iceberg .bg-blue-50 { background-color: rgba(14, 165, 233, 0.08) !important; }
    .theme-iceberg .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-iceberg .text-blue-800, .theme-iceberg .text-blue-700, .theme-iceberg .text-blue-600 { color: var(--text-color) !important; }

    .theme-blossom .bg-blue-50 { background-color: rgba(236, 72, 153, 0.08) !important; }
    .theme-blossom .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-blossom .text-blue-800, .theme-blossom .text-blue-700, .theme-blossom .text-blue-600 { color: var(--text-color) !important; }

    .theme-jade .bg-blue-50 { background-color: rgba(16, 185, 129, 0.08) !important; }
    .theme-jade .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-jade .text-blue-800, .theme-jade .text-blue-700, .theme-jade .text-blue-600 { color: var(--text-color) !important; }

    .theme-fern .bg-blue-50 { background-color: rgba(22, 163, 74, 0.08) !important; }
    .theme-fern .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-fern .text-blue-800, .theme-fern .text-blue-700, .theme-fern .text-blue-600 { color: var(--text-color) !important; }

    .theme-glacier .bg-blue-50 { background-color: rgba(14, 165, 233, 0.08) !important; }
    .theme-glacier .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-glacier .text-blue-800, .theme-glacier .text-blue-700, .theme-glacier .text-blue-600 { color: var(--text-color) !important; }

    .theme-ember .bg-blue-50 { background-color: rgba(234, 88, 12, 0.08) !important; }
    .theme-ember .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-ember .text-blue-800, .theme-ember .text-blue-700, .theme-ember .text-blue-600 { color: var(--text-color) !important; }

    .theme-horizon .bg-blue-50 { background-color: rgba(59, 130, 246, 0.08) !important; }
    .theme-horizon .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-horizon .text-blue-800, .theme-horizon .text-blue-700, .theme-horizon .text-blue-600 { color: var(--text-color) !important; }

    .theme-canyon .bg-blue-50 { background-color: rgba(217, 119, 6, 0.08) !important; }
    .theme-canyon .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-canyon .text-blue-800, .theme-canyon .text-blue-700, .theme-canyon .text-blue-600 { color: var(--text-color) !important; }

    .theme-lagoon .bg-blue-50 { background-color: rgba(6, 182, 212, 0.08) !important; }
    .theme-lagoon .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-lagoon .text-blue-800, .theme-lagoon .text-blue-700, .theme-lagoon .text-blue-600 { color: var(--text-color) !important; }

    .theme-meadow .bg-blue-50 { background-color: rgba(101, 163, 13, 0.08) !important; }
    .theme-meadow .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-meadow .text-blue-800, .theme-meadow .text-blue-700, .theme-meadow .text-blue-600 { color: var(--text-color) !important; }

    .theme-tundra .bg-blue-50 { background-color: rgba(14, 165, 233, 0.08) !important; }
    .theme-tundra .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-tundra .text-blue-800, .theme-tundra .text-blue-700, .theme-tundra .text-blue-600 { color: var(--text-color) !important; }

    .theme-dune .bg-blue-50 { background-color: rgba(217, 119, 6, 0.08) !important; }
    .theme-dune .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-dune .text-blue-800, .theme-dune .text-blue-700, .theme-dune .text-blue-600 { color: var(--text-color) !important; }

    .theme-willow .bg-blue-50 { background-color: rgba(34, 197, 94, 0.08) !important; }
    .theme-willow .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-willow .text-blue-800, .theme-willow .text-blue-700, .theme-willow .text-blue-600 { color: var(--text-color) !important; }

    .theme-bronze .bg-blue-50 { background-color: rgba(180, 83, 9, 0.08) !important; }
    .theme-bronze .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-bronze .text-blue-800, .theme-bronze .text-blue-700, .theme-bronze .text-blue-600 { color: var(--text-color) !important; }

    .theme-silver .bg-blue-50 { background-color: rgba(100, 116, 139, 0.08) !important; }
    .theme-silver .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-silver .text-blue-800, .theme-silver .text-blue-700, .theme-silver .text-blue-600 { color: var(--text-color) !important; }

    .theme-gold .bg-blue-50 { background-color: rgba(217, 119, 6, 0.08) !important; }
    .theme-gold .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-gold .text-blue-800, .theme-gold .text-blue-700, .theme-gold .text-blue-600 { color: var(--text-color) !important; }

    .theme-amethyst .bg-blue-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
    .theme-amethyst .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-amethyst .text-blue-800, .theme-amethyst .text-blue-700, .theme-amethyst .text-blue-600 { color: var(--text-color) !important; }

    .theme-sapphire .bg-blue-50 { background-color: rgba(37, 99, 235, 0.08) !important; }
    .theme-sapphire .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-sapphire .text-blue-800, .theme-sapphire .text-blue-700, .theme-sapphire .text-blue-600 { color: var(--text-color) !important; }

    .theme-ruby .bg-blue-50 { background-color: rgba(239, 68, 68, 0.08) !important; }
    .theme-ruby .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-ruby .text-blue-800, .theme-ruby .text-blue-700, .theme-ruby .text-blue-600 { color: var(--text-color) !important; }

    .theme-emerald .bg-blue-50 { background-color: rgba(16, 185, 129, 0.08) !important; }
    .theme-emerald .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-emerald .text-blue-800, .theme-emerald .text-blue-700, .theme-emerald .text-blue-600 { color: var(--text-color) !important; }

    .theme-topaz .bg-blue-50 { background-color: rgba(245, 158, 11, 0.08) !important; }
    .theme-topaz .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-topaz .text-blue-800, .theme-topaz .text-blue-700, .theme-topaz .text-blue-600 { color: var(--text-color) !important; }

    .theme-garnet .bg-blue-50 { background-color: rgba(225, 29, 72, 0.08) !important; }
    .theme-garnet .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-garnet .text-blue-800, .theme-garnet .text-blue-700, .theme-garnet .text-blue-600 { color: var(--text-color) !important; }

    .theme-quartz .bg-blue-50 { background-color: rgba(20, 184, 166, 0.08) !important; }
    .theme-quartz .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-quartz .text-blue-800, .theme-quartz .text-blue-700, .theme-quartz .text-blue-600 { color: var(--text-color) !important; }

    .theme-smoke .bg-blue-50 { background-color: rgba(156, 163, 175, 0.08) !important; }
    .theme-smoke .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-smoke .text-blue-800, .theme-smoke .text-blue-700, .theme-smoke .text-blue-600 { color: var(--text-color) !important; }

    .theme-cloud .bg-blue-50 { background-color: rgba(56, 189, 248, 0.08) !important; }
    .theme-cloud .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-cloud .text-blue-800, .theme-cloud .text-blue-700, .theme-cloud .text-blue-600 { color: var(--text-color) !important; }

    .theme-frost .bg-blue-50 { background-color: rgba(56, 189, 248, 0.08) !important; }
    .theme-frost .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-frost .text-blue-800, .theme-frost .text-blue-700, .theme-frost .text-blue-600 { color: var(--text-color) !important; }

    .theme-cherry .bg-blue-50 { background-color: rgba(244, 63, 94, 0.08) !important; }
    .theme-cherry .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-cherry .text-blue-800, .theme-cherry .text-blue-700, .theme-cherry .text-blue-600 { color: var(--text-color) !important; }

    .theme-espresso .bg-blue-50 { background-color: rgba(124, 45, 18, 0.08) !important; }
    .theme-espresso .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-espresso .text-blue-800, .theme-espresso .text-blue-700, .theme-espresso .text-blue-600 { color: var(--text-color) !important; }

    .theme-mocha .bg-blue-50 { background-color: rgba(154, 52, 18, 0.08) !important; }
    .theme-mocha .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-mocha .text-blue-800, .theme-mocha .text-blue-700, .theme-mocha .text-blue-600 { color: var(--text-color) !important; }

    .theme-avocado .bg-blue-50 { background-color: rgba(101, 163, 13, 0.08) !important; }
    .theme-avocado .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-avocado .text-blue-800, .theme-avocado .text-blue-700, .theme-avocado .text-blue-600 { color: var(--text-color) !important; }

    .theme-banana .bg-blue-50 { background-color: rgba(234, 179, 8, 0.08) !important; }
    .theme-banana .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-banana .text-blue-800, .theme-banana .text-blue-700, .theme-banana .text-blue-600 { color: var(--text-color) !important; }

    .theme-plumeria .bg-blue-50 { background-color: rgba(190, 24, 93, 0.08) !important; }
    .theme-plumeria .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-plumeria .text-blue-800, .theme-plumeria .text-blue-700, .theme-plumeria .text-blue-600 { color: var(--text-color) !important; }

    .theme-reef .bg-blue-50 { background-color: rgba(6, 182, 212, 0.08) !important; }
    .theme-reef .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-reef .text-blue-800, .theme-reef .text-blue-700, .theme-reef .text-blue-600 { color: var(--text-color) !important; }

    .theme-seafoam .bg-blue-50 { background-color: rgba(13, 148, 136, 0.08) !important; }
    .theme-seafoam .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-seafoam .text-blue-800, .theme-seafoam .text-blue-700, .theme-seafoam .text-blue-600 { color: var(--text-color) !important; }

    .theme-pine .bg-blue-50 { background-color: rgba(6, 95, 70, 0.08) !important; }
    .theme-pine .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-pine .text-blue-800, .theme-pine .text-blue-700, .theme-pine .text-blue-600 { color: var(--text-color) !important; }

    .theme-iron .bg-blue-50 { background-color: rgba(71, 85, 105, 0.08) !important; }
    .theme-iron .border-blue-500 { border-color: var(--accent-color) !important; }
    .theme-iron .text-blue-800, .theme-iron .text-blue-700, .theme-iron .text-blue-600 { color: var(--text-color) !important; }

    .theme-navy { --bg-color:#e0e7ff; --card-bg-color:#ffffff; --text-color:#1e3a8a; --subtle-text-color:#6366f1; --border-color:#c7d2fe; --accent-color:#4f46e5; --accent-hover-color:#4338ca; }
    .theme-navy body, .theme-navy .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-navy .bg-white, .theme-navy .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-navy .shadow-sm, .theme-navy .shadow-md, .theme-navy .shadow-lg, .theme-navy .shadow-xl { box-shadow:0 1px 3px rgba(79,70,229,.12) !important; border:1px solid var(--border-color); }
    .theme-navy .rounded-lg, .theme-navy .rounded-md { border-radius:8px !important; }
    .theme-navy .text-blue-600 { color: var(--accent-color) !important; }
    .theme-navy .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-navy .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-navy input, .theme-navy select, .theme-navy textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-navy input:focus, .theme-navy select:focus, .theme-navy textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(79,70,229,.22) !important; outline:none !important; }
    .theme-navy .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-air { --bg-color:#eef2ff; --card-bg-color:#ffffff; --text-color:#0c4a6e; --subtle-text-color:#60a5fa; --border-color:#e0e7ff; --accent-color:#38bdf8; --accent-hover-color:#0ea5e9; }
    .theme-air body, .theme-air .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-air .bg-white, .theme-air .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-air .shadow-sm, .theme-air .shadow-md, .theme-air .shadow-lg, .theme-air .shadow-xl { box-shadow:0 1px 3px rgba(0,0,0,.06) !important; border:1px solid var(--border-color); }
    .theme-air .rounded-lg, .theme-air .rounded-md { border-radius:10px !important; }
    .theme-air .text-blue-600 { color: var(--accent-color) !important; }
    .theme-air .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-air .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-air input, .theme-air select, .theme-air textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-air input:focus, .theme-air select:focus, .theme-air textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(56,189,248,.22) !important; outline:none !important; }
    .theme-air .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-violet { --bg-color:#f5f3ff; --card-bg-color:#ffffff; --text-color:#4c1d95; --subtle-text-color:#a78bfa; --border-color:#ddd6fe; --accent-color:#8b5cf6; --accent-hover-color:#7c3aed; }
    .theme-violet body, .theme-violet .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-violet .bg-white, .theme-violet .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-violet .shadow-sm, .theme-violet .shadow-md, .theme-violet .shadow-lg, .theme-violet .shadow-xl { box-shadow:0 1px 3px rgba(139,92,246,.12) !important; border:1px solid var(--border-color); }
    .theme-violet .rounded-lg, .theme-violet .rounded-md { border-radius:8px !important; }
    .theme-violet .text-blue-600 { color: var(--accent-color) !important; }
    .theme-violet .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-violet .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-violet input, .theme-violet select, .theme-violet textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-violet input:focus, .theme-violet select:focus, .theme-violet textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(139,92,246,.22) !important; outline:none !important; }
    .theme-violet .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-caramel { --bg-color:#fff7ed; --card-bg-color:#ffffff; --text-color:#7c2d12; --subtle-text-color:#fb923c; --border-color:#fed7aa; --accent-color:#ea580c; --accent-hover-color:#c2410c; }
    .theme-caramel body, .theme-caramel .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-caramel .bg-white, .theme-caramel .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-caramel .shadow-sm, .theme-caramel .shadow-md, .theme-caramel .shadow-lg, .theme-caramel .shadow-xl { box-shadow:0 1px 3px rgba(234,88,12,.12) !important; border:1px solid var(--border-color); }
    .theme-caramel .rounded-lg, .theme-caramel .rounded-md { border-radius:8px !important; }
    .theme-caramel .text-blue-600 { color: var(--accent-color) !important; }
    .theme-caramel .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-caramel .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-caramel input, .theme-caramel select, .theme-caramel textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-caramel input:focus, .theme-caramel select:focus, .theme-caramel textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(234,88,12,.22) !important; outline:none !important; }
    .theme-caramel .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-peach { --bg-color:#fff1f2; --card-bg-color:#ffffff; --text-color:#7c2d12; --subtle-text-color:#fb7185; --border-color:#fecdd3; --accent-color:#f97316; --accent-hover-color:#ea580c; }
    .theme-peach body, .theme-peach .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-peach .bg-white, .theme-peach .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-peach .shadow-sm, .theme-peach .shadow-md, .theme-peach .shadow-lg, .theme-peach .shadow-xl { box-shadow:0 1px 3px rgba(249,115,22,.12) !important; border:1px solid var(--border-color); }
    .theme-peach .rounded-lg, .theme-peach .rounded-md { border-radius:10px !important; }
    .theme-peach .text-blue-600 { color: var(--accent-color) !important; }
    .theme-peach .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-peach .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-peach input, .theme-peach select, .theme-peach textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-peach input:focus, .theme-peach select:focus, .theme-peach textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(249,115,22,.22) !important; outline:none !important; }
    .theme-peach .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-lilac { --bg-color:#faf5ff; --card-bg-color:#ffffff; --text-color:#4c1d95; --subtle-text-color:#c4b5fd; --border-color:#e9d5ff; --accent-color:#a78bfa; --accent-hover-color:#8b5cf6; }
    .theme-lilac body, .theme-lilac .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-lilac .bg-white, .theme-lilac .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-lilac .shadow-sm, .theme-lilac .shadow-md, .theme-lilac .shadow-lg, .theme-lilac .shadow-xl { box-shadow:0 1px 3px rgba(167,139,250,.12) !important; border:1px solid var(--border-color); }
    .theme-lilac .rounded-lg, .theme-lilac .rounded-md { border-radius:8px !important; }
    .theme-lilac .text-blue-600 { color: var(--accent-color) !important; }
    .theme-lilac .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-lilac .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-lilac input, .theme-lilac select, .theme-lilac textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-lilac input:focus, .theme-lilac select:focus, .theme-lilac textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(167,139,250,.22) !important; outline:none !important; }
    .theme-lilac .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-rose { --bg-color:#fff1f2; --card-bg-color:#ffffff; --text-color:#4a1d2b; --subtle-text-color:#f472b6; --border-color:#fecdd3; --accent-color:#ec4899; --accent-hover-color:#db2777; }
    .theme-rose body, .theme-rose .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-rose .bg-white, .theme-rose .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-rose .shadow-sm, .theme-rose .shadow-md, .theme-rose .shadow-lg, .theme-rose .shadow-xl { box-shadow:0 1px 3px rgba(236,72,153,.12) !important; border:1px solid var(--border-color); }
    .theme-rose .rounded-lg, .theme-rose .rounded-md { border-radius:10px !important; }
    .theme-rose .text-blue-600 { color: var(--accent-color) !important; }
    .theme-rose .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-rose .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-rose input, .theme-rose select, .theme-rose textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-rose input:focus, .theme-rose select:focus, .theme-rose textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(236,72,153,.22) !important; outline:none !important; }
    .theme-rose .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-magenta { --bg-color:#fdf4ff; --card-bg-color:#ffffff; --text-color:#4a044e; --subtle-text-color:#d946ef; --border-color:#f5d0fe; --accent-color:#a21caf; --accent-hover-color:#86198f; }
    .theme-magenta body, .theme-magenta .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-magenta .bg-white, .theme-magenta .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-magenta .shadow-sm, .theme-magenta .shadow-md, .theme-magenta .shadow-lg, .theme-magenta .shadow-xl { box-shadow:0 1px 3px rgba(162,28,175,.12) !important; border:1px solid var(--border-color); }
    .theme-magenta .rounded-lg, .theme-magenta .rounded-md { border-radius:10px !important; }
    .theme-magenta .text-blue-600 { color: var(--accent-color) !important; }
    .theme-magenta .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-magenta .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-magenta input, .theme-magenta select, .theme-magenta textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-magenta input:focus, .theme-magenta select:focus, .theme-magenta textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(162,28,175,.22) !important; outline:none !important; }
    .theme-magenta .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-periwinkle { --bg-color:#eef2ff; --card-bg-color:#ffffff; --text-color:#3730a3; --subtle-text-color:#93c5fd; --border-color:#e0e7ff; --accent-color:#6366f1; --accent-hover-color:#4f46e5; }
    .theme-periwinkle body, .theme-periwinkle .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-periwinkle .bg-white, .theme-periwinkle .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-periwinkle .shadow-sm, .theme-periwinkle .shadow-md, .theme-periwinkle .shadow-lg, .theme-periwinkle .shadow-xl { box-shadow:0 1px 3px rgba(99,102,241,.12) !important; border:1px solid var(--border-color); }
    .theme-periwinkle .rounded-lg, .theme-periwinkle .rounded-md { border-radius:8px !important; }
    .theme-periwinkle .text-blue-600 { color: var(--accent-color) !important; }
    .theme-periwinkle .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-periwinkle .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-periwinkle input, .theme-periwinkle select, .theme-periwinkle textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-periwinkle input:focus, .theme-periwinkle select:focus, .theme-periwinkle textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(99,102,241,.22) !important; outline:none !important; }
    .theme-periwinkle .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    .theme-teak { --bg-color:#f9f5f2; --card-bg-color:#ffffff; --text-color:#3f2d20; --subtle-text-color:#a16207; --border-color:#eadbd1; --accent-color:#8b5e34; --accent-hover-color:#734a2e; }
    .theme-teak body, .theme-teak .bg-gray-50 { background:var(--bg-color) !important; }
    .theme-teak .bg-white, .theme-teak .bg-gray-100 { background:var(--card-bg-color) !important; border:1px solid var(--border-color); }
    .theme-teak .shadow-sm, .theme-teak .shadow-md, .theme-teak .shadow-lg, .theme-teak .shadow-xl { box-shadow:0 1px 3px rgba(139,94,52,.10) !important; border:1px solid var(--border-color); }
    .theme-teak .rounded-lg, .theme-teak .rounded-md { border-radius:10px !important; }
    .theme-teak .text-blue-600 { color: var(--accent-color) !important; }
    .theme-teak .bg-blue-600 { background: var(--accent-color) !important; }
    .theme-teak .bg-blue-600:hover { background: var(--accent-hover-color) !important; }
    .theme-teak input, .theme-teak select, .theme-teak textarea { background:#ffffff !important; border:1px solid var(--border-color) !important; border-radius:8px !important; }
    .theme-teak input:focus, .theme-teak select:focus, .theme-teak textarea:focus { border-color:var(--accent-color) !important; box-shadow:0 0 0 2px rgba(139,94,52,.22) !important; outline:none !important; }
    .theme-teak .tab-button.active { border-color:var(--accent-color) !important; color:var(--accent-color) !important; }

    /* 魯紅主題 - 基於訪客資料與新增申請單的紅色設計 */
    .theme-luhong {
        --bg-color: #FEF6F5; /* 淡粉色背景，來自SVG */
        --card-bg-color: #ffffff;
        --text-color: #2C1B1D; /* 深色文字，與紅色主題配合 */
        --subtle-text-color: #6B2C30;
        --border-color: #E8C5C7; /* 淡紅邊框，基於主色調 */
        --accent-color: #B6494E; /* 主要紅色，直接來自SVG */
        --accent-hover-color: #A03E43;
        --secondary-light: #FDF2F2; /* 極淡粉色 */
        --secondary-dark: #8B3A3F; /* 深紅色 */

        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-light) 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
        font-family: 'Noto Sans TC', sans-serif !important;
    }
    .theme-luhong body, .theme-luhong .bg-gray-50 { 
        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-light) 50%, var(--bg-color) 100%) !important; 
    }
    .theme-luhong .bg-white, .theme-luhong .bg-gray-100 { 
        background: var(--card-bg-color) !important; 
        border: 2px solid var(--border-color); 
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(182, 73, 78, 0.15) !important;
    }
    .theme-luhong .shadow-sm, .theme-luhong .shadow-md, .theme-luhong .shadow-lg, .theme-luhong .shadow-xl { 
        box-shadow: 0 4px 20px rgba(182, 73, 78, 0.15) !important; 
        border: 2px solid var(--border-color); 
        border-radius: 12px !important;
    }
    .theme-luhong .rounded-lg, .theme-luhong .rounded-md { border-radius: 12px !important; }
    .theme-luhong .border, .theme-luhong .border-gray-300, .theme-luhong .border-gray-200 {
        border-color: var(--border-color) !important;
        border-width: 2px !important;
    }

    /* 修復：商品類別按鈕和分頁按鈕在魯紅主題下保持標準尺寸 */
    .theme-luhong .product-category-btn,
    .theme-luhong #product-list-pagination button {
        border-width: 1px !important;
        border-radius: 8px !important;
    }
    .theme-luhong .divide-y > :not([hidden]) ~ :not([hidden]),
    .theme-luhong .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        border-top: 1px solid var(--border-color) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }
    .theme-luhong .text-gray-900, .theme-luhong .text-gray-800, .theme-luhong .text-gray-700 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-luhong .text-gray-600, .theme-luhong .text-gray-500 { color: var(--subtle-text-color) !important; }
    .theme-luhong .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-luhong .bg-blue-600 { 
        background: linear-gradient(45deg, var(--accent-color), var(--secondary-dark)) !important; 
        border-radius: 10px !important;
        transition: all 0.3s ease !important;
    }
    .theme-luhong .bg-blue-600:hover { 
        background: linear-gradient(45deg, var(--accent-hover-color), var(--accent-color)) !important; 
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(182, 73, 78, 0.4) !important;
    }
    .theme-luhong input, .theme-luhong select, .theme-luhong textarea { 
        background: rgba(255, 255, 255, 0.95) !important; 
        border: 2px solid var(--border-color) !important; 
        border-radius: 10px !important; 
        padding: 10px 14px !important;
        transition: all 0.3s ease !important;
    }
    .theme-luhong input:focus, .theme-luhong select:focus, .theme-luhong textarea:focus { 
        border-color: var(--accent-color) !important; 
        box-shadow: 0 0 0 4px rgba(182, 73, 78, 0.2) !important; 
        outline: none !important; 
        transform: scale(1.02) !important;
        background: #ffffff !important;
    }
    .theme-luhong .tab-button.active { 
        border-color: var(--accent-color) !important; 
        color: var(--accent-color) !important; 
        background: rgba(182, 73, 78, 0.1) !important;
        border-radius: 8px !important;
        font-weight: bold !important;
    }
    .theme-luhong .hover\:bg-gray-50:hover { 
        background: linear-gradient(45deg, var(--secondary-light), var(--bg-color)) !important; 
        transition: all 0.3s ease !important;
    }
    .theme-luhong button { 
        transition: all 0.3s ease !important; 
        border-radius: 8px !important;
    }
    .theme-luhong button:hover { 
        transform: translateY(-1px) !important; 
    }

    /* 魯綠主題 - 基於訪客資料與新增申請單的綠色設計 */
    .theme-lugreen {
        --bg-color: #F0F8F5; /* 淡綠色背景 */
        --card-bg-color: #ffffff;
        --text-color: #313A46; /* 深色文字 */
        --subtle-text-color: #555E68;
        --border-color: #C5E4D6; /* 淡綠邊框 */
        --accent-color: #2CC185; /* 主要綠色 */
        --accent-hover-color: #24A36B;
        --secondary-light: #E8F5F0; /* 極淡綠色 */
        --secondary-dark: #1B7F5A; /* 深綠色 */

        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-light) 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
        font-family: 'Noto Sans TC', sans-serif !important;
    }
    .theme-lugreen body, .theme-lugreen .bg-gray-50 { 
        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-light) 50%, var(--bg-color) 100%) !important; 
    }
    .theme-lugreen .bg-white, .theme-lugreen .bg-gray-100 { 
        background: var(--card-bg-color) !important; 
        border: 2px solid var(--border-color); 
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(44, 193, 133, 0.15) !important;
    }
    .theme-lugreen .shadow-sm, .theme-lugreen .shadow-md, .theme-lugreen .shadow-lg, .theme-lugreen .shadow-xl { 
        box-shadow: 0 4px 20px rgba(44, 193, 133, 0.15) !important; 
        border: 2px solid var(--border-color); 
        border-radius: 12px !important;
    }
    .theme-lugreen .rounded-lg, .theme-lugreen .rounded-md { border-radius: 12px !important; }
    .theme-lugreen .border, .theme-lugreen .border-gray-300, .theme-lugreen .border-gray-200 {
        border-color: var(--border-color) !important;
        border-width: 2px !important;
    }

    /* 修復：商品類別按鈕和分頁按鈕在魯綠主題下保持標準尺寸 */
    .theme-lugreen .product-category-btn,
    .theme-lugreen #product-list-pagination button {
        border-width: 1px !important;
        border-radius: 8px !important;
    }
    .theme-lugreen .divide-y > :not([hidden]) ~ :not([hidden]),
    .theme-lugreen .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        border-top: 1px solid var(--border-color) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }
    .theme-lugreen .text-gray-900, .theme-lugreen .text-gray-800, .theme-lugreen .text-gray-700 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-lugreen .text-gray-600, .theme-lugreen .text-gray-500 { color: var(--subtle-text-color) !important; }
    .theme-lugreen .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-lugreen .bg-blue-600 { 
        background: linear-gradient(45deg, var(--accent-color), var(--secondary-dark)) !important; 
        border-radius: 10px !important;
        transition: all 0.3s ease !important;
    }
    .theme-lugreen .bg-blue-600:hover { 
        background: linear-gradient(45deg, var(--accent-hover-color), var(--accent-color)) !important; 
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(44, 193, 133, 0.4) !important;
    }
    .theme-lugreen input, .theme-lugreen select, .theme-lugreen textarea { 
        background: rgba(255, 255, 255, 0.95) !important; 
        border: 2px solid var(--border-color) !important; 
        border-radius: 10px !important; 
        padding: 10px 14px !important;
        transition: all 0.3s ease !important;
    }
    .theme-lugreen input:focus, .theme-lugreen select:focus, .theme-lugreen textarea:focus { 
        border-color: var(--accent-color) !important; 
        box-shadow: 0 0 0 4px rgba(44, 193, 133, 0.2) !important; 
        outline: none !important; 
        transform: scale(1.02) !important;
        background: #ffffff !important;
    }
    .theme-lugreen .tab-button.active { 
        border-color: var(--accent-color) !important; 
        color: var(--accent-color) !important; 
        background: rgba(44, 193, 133, 0.1) !important;
        border-radius: 8px !important;
        font-weight: bold !important;
    }
    .theme-lugreen .hover\:bg-gray-50:hover { 
        background: linear-gradient(45deg, var(--secondary-light), var(--bg-color)) !important; 
        transition: all 0.3s ease !important;
    }
    .theme-lugreen button { 
        transition: all 0.3s ease !important; 
        border-radius: 8px !important;
    }
    .theme-lugreen button:hover { 
        transform: translateY(-1px) !important; 
    }

    /* 修復 flatpickr 在「多彩」「魯紅」「魯綠」主題下，月份/年份選取被週標題覆蓋的問題 */
    .theme-colorful .flatpickr-calendar,
    .theme-luhong .flatpickr-calendar,
    .theme-lugreen .flatpickr-calendar { 
        z-index: 9999 !important; /* 確保日曆本體浮在其他容器之上 */
    }
    .theme-colorful .flatpickr-calendar .flatpickr-months,
    .theme-luhong .flatpickr-calendar .flatpickr-months,
    .theme-lugreen .flatpickr-calendar .flatpickr-months { 
        position: relative; 
        z-index: 3;              /* 月份/年份列優先顯示於週標題之上 */
        background: var(--card-bg-color, #ffffff); 
        padding-bottom: 6px;     /* 與週標題留間距，避免視覺堆疊 */
    }
    .theme-colorful .flatpickr-calendar .flatpickr-weekdays,
    .theme-luhong .flatpickr-calendar .flatpickr-weekdays,
    .theme-lugreen .flatpickr-calendar .flatpickr-weekdays { 
        position: relative; 
        z-index: 1;              /* 週標題層級較低，不覆蓋月份/年份 */
    }
    .theme-colorful .flatpickr-calendar .flatpickr-current-month,
    .theme-luhong .flatpickr-calendar .flatpickr-current-month,
    .theme-lugreen .flatpickr-calendar .flatpickr-current-month { 
        position: relative; 
        z-index: 4;              /* 年度輸入與月份下拉再提高一層，確保點擊區域不被遮擋 */
        line-height: 1.4;        /* 增加可讀性並避免擠壓 */
        padding-top: 2px; 
        padding-bottom: 2px; 
    }
    /* 置中月份/年份，與櫻花(預設)一致 */
    .theme-colorful .flatpickr-calendar .flatpickr-current-month { text-align: center !important; position: absolute !important; left: 0; right: 0; width: 100%; }
    .theme-luhong .flatpickr-calendar .flatpickr-current-month { text-align: center !important; position: absolute !important; left: 0; right: 0; width: 100%; }
    .theme-lugreen .flatpickr-calendar .flatpickr-current-month { text-align: center !important; position: absolute !important; left: 0; right: 0; width: 100%; }
    /* 多彩/魯紅/魯綠：讓月份/年份欄位尺寸與櫻花主題一致（回到 flatpickr 預設的精簡尺寸） */
    .theme-colorful .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-colorful .flatpickr-calendar .numInputWrapper input { 
        padding: 0 !important;               /* 去除多彩主題對 input/select 的內邊距放大 */
    border: 1px solid var(--border-color) !important; /* 預設就有邊框顏色 */
        background: transparent !important;  /* 與預設一致 */
        border-radius: 0 !important;         /* 與預設一致的直角控件 */
        box-shadow: none !important;         /* 移除多彩主題可能加上的陰影 */
    text-align: center !important;       /* 明確置中文本，與櫻花一致 */
    }
    .theme-luhong .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-luhong .flatpickr-calendar .numInputWrapper input { 
        padding: 0 !important;
    border: 1px solid var(--border-color) !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-align: center !important;
    }
    .theme-lugreen .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-lugreen .flatpickr-calendar .numInputWrapper input { 
        padding: 0 !important;
    border: 1px solid var(--border-color) !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-align: center !important;
    }

    /* 互動過渡：聚焦邊框/陰影/背景的動畫（鍵盤友善 :focus-visible） */
    .theme-colorful .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-colorful .flatpickr-calendar .numInputWrapper input,
    .theme-luhong .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-luhong .flatpickr-calendar .numInputWrapper input,
    .theme-lugreen .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-lugreen .flatpickr-calendar .numInputWrapper input {
        transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    }

    /* 微調 focus ring 濃度（各主題視覺一致性） */
    .theme-colorful .flatpickr-calendar .flatpickr-monthDropdown-months:focus,
    .theme-colorful .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
    .theme-colorful .flatpickr-calendar .numInputWrapper input:focus,
    .theme-colorful .flatpickr-calendar .numInputWrapper input:focus-visible {
        box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.28) !important;
    }
    .theme-luhong .flatpickr-calendar .flatpickr-monthDropdown-months:focus,
    .theme-luhong .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
    .theme-luhong .flatpickr-calendar .numInputWrapper input:focus,
    .theme-luhong .flatpickr-calendar .numInputWrapper input:focus-visible {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.26) !important;
    }
    .theme-lugreen .flatpickr-calendar .flatpickr-monthDropdown-months:focus,
    .theme-lugreen .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
    .theme-lugreen .flatpickr-calendar .numInputWrapper input:focus,
    .theme-lugreen .flatpickr-calendar .numInputWrapper input:focus-visible {
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.24) !important;
    }
    /* 點到月份/年份時恢復邊框效果（:focus 與 :focus-visible） */
    .theme-colorful .flatpickr-calendar .flatpickr-monthDropdown-months:focus,
    .theme-colorful .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
    .theme-colorful .flatpickr-calendar .numInputWrapper input:focus,
    .theme-colorful .flatpickr-calendar .numInputWrapper input:focus-visible {
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important; /* 與多彩主題整體焦點風格一致 */
        outline: none !important;
        background: #ffffff !important; /* 聚焦時更清晰 */
    }
    .theme-luhong .flatpickr-calendar .flatpickr-monthDropdown-months:focus,
    .theme-luhong .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
    .theme-luhong .flatpickr-calendar .numInputWrapper input:focus,
    .theme-luhong .flatpickr-calendar .numInputWrapper input:focus-visible {
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
        outline: none !important;
        background: #ffffff !important;
    }
    .theme-lugreen .flatpickr-calendar .flatpickr-monthDropdown-months:focus,
    .theme-lugreen .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
    .theme-lugreen .flatpickr-calendar .numInputWrapper input:focus,
    .theme-lugreen .flatpickr-calendar .numInputWrapper input:focus-visible {
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
        outline: none !important;
        background: #ffffff !important;
    }
    /* 月份下拉與年份數字輸入的局部層級提升（不同瀏覽器行為更穩定） */
    .theme-colorful .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-luhong .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-lugreen .flatpickr-calendar .flatpickr-monthDropdown-months,
    .theme-colorful .flatpickr-calendar .numInputWrapper,
    .theme-luhong .flatpickr-calendar .numInputWrapper,
    .theme-lugreen .flatpickr-calendar .numInputWrapper { 
        position: relative; 
        z-index: 5; 
    }

    /* 修復：多彩 / 魯紅 / 魯綠 主題下，日期區間快捷視窗（flatpickr）左右箭頭無法切換月份
       原因：為置中月份/年份而將 .flatpickr-current-month 設為 position:absolute 並全寬，導致其覆蓋左右箭頭層級
       作法：
       1) 提高左右箭頭層級，確保可點擊
       2) 將 .flatpickr-current-month 設為 pointer-events: none；但保留內部月份下拉與年份輸入可互動（pointer-events: auto）
    */
    .theme-colorful .flatpickr-calendar .flatpickr-prev-month,
    .theme-colorful .flatpickr-calendar .flatpickr-next-month,
    .theme-luhong   .flatpickr-calendar .flatpickr-prev-month,
    .theme-luhong   .flatpickr-calendar .flatpickr-next-month,
    .theme-lugreen  .flatpickr-calendar .flatpickr-prev-month,
    .theme-lugreen  .flatpickr-calendar .flatpickr-next-month {
        position: relative;
        z-index: 6; /* 高於 .flatpickr-current-month (z=4) 與 .flatpickr-months (z=3) */
        pointer-events: auto;
    }

    .theme-colorful .flatpickr-calendar .flatpickr-current-month,
    .theme-luhong   .flatpickr-calendar .flatpickr-current-month,
    .theme-lugreen  .flatpickr-calendar .flatpickr-current-month {
        pointer-events: none; /* 讓覆蓋層不攔截箭頭點擊 */
    }
    .theme-colorful .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
    .theme-colorful .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
    .theme-luhong   .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
    .theme-luhong   .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
    .theme-lugreen  .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
    .theme-lugreen  .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
        pointer-events: auto; /* 保留月份下拉與年份輸入可操作 */
        position: relative;
        z-index: 7; /* 保證其可點擊，仍高於箭頭下層 */
    }
    
    
    /* 確保多彩/魯紅/魯綠主題 header 總金額/按鈕群組仍右移 20px */
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .header-total-actions { margin-left:20px !important; }
    
    /* 深色主題：懸浮工具列 附件摘要 / 批次套用設定 區塊暗色底亮字 */
    
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .floating-utilities details.utility-section {
        background: linear-gradient(145deg, rgba(31,41,55,0.92), rgba(17,24,39,0.9));
        border-color: rgba(75,85,99,0.6) !important;
        color: #e5e7eb;
    }
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .floating-utilities details.utility-section[open] {
        background: linear-gradient(145deg, rgba(55,65,81,0.95), rgba(31,41,55,0.92));
    }
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .floating-utilities details.utility-section summary {
        color: #f1f5f9;
    }
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .floating-utilities details.utility-section .section-content {
        color: #cbd5e1;
    }
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .floating-utilities details.utility-section a,
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .floating-utilities details.utility-section button {
        color: #93c5fd;
    }
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .floating-utilities details.utility-section button:hover {
        color: #bfdbfe;
    }
    
    
    /* === 深色主題：亮色背景按鈕 → 深色背景 + 明亮文字/邊框 === */
    /* 適用主題：midnight, scifi, abstract, forest, ocean, sunset, hotel-lux, nord, neon, slate, cobalt, rosewood, graphite, charcoal, cinder */
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-blue-500,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-blue-600 {
        background-color: var(--card-bg-color) !important;
        color: var(--accent-color) !important;
        border: 1px solid var(--accent-color) !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-blue-500:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-blue-600:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-blue-700 {
        background-color: var(--border-color) !important;
        color: var(--accent-hover-color) !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-indigo-600 {
        background-color: var(--card-bg-color) !important;
        color: #a78bfa !important;
        border: 1px solid #a78bfa !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-indigo-600:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-indigo-700 {
        background-color: var(--border-color) !important;
        color: #8b5cf6 !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-green-600 {
        background-color: var(--card-bg-color) !important;
        color: #34d399 !important;
        border: 1px solid #34d399 !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-green-600:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-green-700 {
        background-color: var(--border-color) !important;
        color: #10b981 !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-emerald-600 {
        background-color: var(--card-bg-color) !important;
        color: #34d399 !important;
        border: 1px solid #34d399 !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-emerald-600:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-emerald-700 {
        background-color: var(--border-color) !important;
        color: #10b981 !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-gray-700 {
        background-color: var(--card-bg-color) !important;
        color: #d1d5db !important;
        border: 1px solid #d1d5db !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-gray-700:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-gray-800 {
        background-color: var(--border-color) !important;
        color: #f3f4f6 !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-red-500,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-red-600 {
        background-color: var(--card-bg-color) !important;
        color: #fb7185 !important;
        border: 1px solid #fb7185 !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-red-500:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-red-600:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-red-700 {
        background-color: var(--border-color) !important;
        color: #f43f5e !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-teal-600 {
        background-color: var(--card-bg-color) !important;
        color: #2dd4bf !important;
        border: 1px solid #2dd4bf !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-teal-600:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-teal-700 {
        background-color: var(--border-color) !important;
        color: #14b8a6 !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-violet-600 {
        background-color: var(--card-bg-color) !important;
        color: #c084fc !important;
        border: 1px solid #c084fc !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-violet-600:hover,
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-violet-700 {
        background-color: var(--border-color) !important;
        color: #a78bfa !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-amber-600 {
        background-color: var(--card-bg-color) !important;
        color: #fbbf24 !important;
        border: 1px solid #fbbf24 !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-amber-600:hover {
        background-color: var(--border-color) !important;
        color: #f59e0b !important;
    }

    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-yellow-500 {
        background-color: var(--card-bg-color) !important;
        color: #fde047 !important;
        border: 1px solid #fde047 !important;
    }
    :is(.theme-midnight,.theme-scifi,.theme-abstract,.theme-forest,.theme-ocean,.theme-sunset,.theme-hotel-lux,.theme-nord,.theme-neon,.theme-slate,.theme-cobalt,.theme-rosewood,.theme-graphite,.theme-charcoal,.theme-cinder) .bg-yellow-500:hover {
        background-color: var(--border-color) !important;
        color: #eab308 !important;
    }

    /* 統一主題感知特效按鈕：.btn-theme 取代個別虹彩並依主題 accent 調色 */

    .btn-theme {
        position:relative; isolation:isolate; overflow:hidden; border-radius:0.5rem; padding-inline:1rem; padding-block:.5rem;
        font-weight:600; line-height:1.25rem; display:inline-flex; align-items:center; gap:.35rem; color:var(--btn-fg,#fff);
        background: linear-gradient(135deg,var(--accent-color,#2563eb),var(--accent-hover-color,#1d4ed8));
        box-shadow: 0 2px 6px -1px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.08) inset;
        transition: box-shadow .35s ease, transform .35s ease, background .35s ease;
    }
    .btn-theme:before { content:""; position:absolute; inset:-2px; background:conic-gradient(from 0deg,var(--btn-spectrum-start,#60a5fa),var(--btn-spectrum-mid,#a78bfa),var(--btn-spectrum-alt,#34d399),var(--btn-spectrum-accent,#f472b6),var(--btn-spectrum-warm,#fbbf24),var(--btn-spectrum-start,#60a5fa)); filter:blur(8px) brightness(var(--btn-spectrum-bright,1.2)) saturate(var(--btn-spectrum-sat,1.1)); opacity:.55; z-index:-2; }
    .btn-theme:after { content:""; position:absolute; inset:2px; border-radius:inherit; background:linear-gradient(145deg,var(--accent-color,#2563eb),var(--accent-hover-color,#1d4ed8)); z-index:-1; box-shadow:0 0 0 0 rgba(255,255,255,.15) inset; }
    .btn-theme:hover { transform:translateY(-2px); box-shadow:0 6px 18px -4px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.15) inset; }
    .btn-theme:active { transform:translateY(0); box-shadow:0 3px 10px -2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.25) inset; }
    .btn-theme:focus-visible { outline:2px solid var(--accent-color,#2563eb); outline-offset:2px; }
    .btn-theme[data-pulse="true"]:after { animation:btn-theme-pulse 3s ease-in-out infinite; }
    @keyframes btn-theme-spin { to { transform:rotate(1turn);} }
    @keyframes btn-theme-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.22) inset;} 50%{ box-shadow:0 0 0 6px rgba(255,255,255,0) inset; } }
    @media (prefers-reduced-motion:reduce){ .btn-theme:before,.btn-theme[data-pulse="true"]:after{ animation:none; } .btn-theme{ transition:none; } }

    /* 主題映射：以主題 accent 為基底，設定 spectrum 變數 */
    /* 深色強化 */
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-cobalt,.theme-scifi,.theme-abstract) .btn-theme {
        --btn-spectrum-start:#3b82f6; --btn-spectrum-mid:#6366f1; --btn-spectrum-alt:#06b6d4; --btn-spectrum-accent:#8b5cf6; --btn-spectrum-warm:#f59e0b; --btn-spectrum-bright:1.4; --btn-spectrum-sat:1.3; --btn-fg:#ffffff;
    }
    /* 暖色 / 粉系 */
    :is(.theme-latte,.theme-retro,.theme-solar,.theme-care-soft,.theme-hotel-resort,.theme-sand,.theme-luhong,.theme-colorful,.theme-pastel,.theme-sakura,.theme-blossom,.theme-coral,.theme-cocoa,.theme-lime) .btn-theme {
        --btn-spectrum-start:#fbbf24; --btn-spectrum-mid:#fb7185; --btn-spectrum-alt:#f472b6; --btn-spectrum-accent:#d946ef; --btn-spectrum-warm:#f59e0b; --btn-spectrum-bright:1.25; --btn-spectrum-sat:1.2; --btn-fg:#ffffff;
    }
    /* 中性 / 清爽 */
    :is(.theme-apple,.theme-minimal,.theme-paper,.theme-pearl,.theme-med-clean,.theme-med-trust,.theme-metro,.theme-jade,.theme-mint,.theme-grape,.theme-denim,.theme-sky,.theme-nord,.theme-ghibli) .btn-theme {
        --btn-spectrum-start:#60a5fa; --btn-spectrum-mid:#a78bfa; --btn-spectrum-alt:#34d399; --btn-spectrum-accent:#10b981; --btn-spectrum-warm:#f87171; --btn-spectrum-bright:1.15; --btn-spectrum-sat:1.1; --btn-fg:#ffffff;
    }

    /* 主題導向：炫麗新增申請按鈕彩邊顏色動態調整 */

    /* 深色主題群組：提高亮度與飽和度，偏藍青+洋紅對比 */
    :is(.theme-midnight,.theme-slate,.theme-neon,.theme-cinder,.theme-graphite,.theme-charcoal,.theme-ocean,.theme-forest,.theme-rosewood,.theme-cobalt,.theme-scifi,.theme-abstract) .btn-glow-rainbow:before {
        background: conic-gradient(from 0deg,
            #3b82f6,
            #06b6d4,
            #10b981,
            #8b5cf6,
            #ec4899,
            #f59e0b,
            #3b82f6
        );
        filter: blur(7px) brightness(1.35) saturate(1.25);
        opacity: .78;
    }

    /* 暖色/奶油/陽光/木質系：以琥珀桃紅夕陽色帶，降低藍綠，加入柔和粉橘 */
    :is(.theme-latte,.theme-retro,.theme-solar,.theme-care-soft,.theme-hotel-resort,.theme-sand,.theme-luhong,.theme-colorful,.theme-pastel,.theme-sakura,.theme-blossom,.theme-coral,.theme-cocoa,.theme-lime) .btn-glow-rainbow:before {
        background: conic-gradient(from 0deg,
            #fbbf24,
            #f59e0b,
            #fb7185,
            #f472b6,
            #d946ef,
            #fca5a5,
            #fbbf24
        );
        filter: blur(6px) brightness(1.2) saturate(1.15);
        opacity: .7;
    }

    /* Apple / Minimal / Paper / Pearl 等中性主題：保持原生但稍微柔化 */
    :is(.theme-apple,.theme-minimal,.theme-paper,.theme-pearl,.theme-med-clean,.theme-med-trust,.theme-metro,.theme-jade,.theme-mint,.theme-grape,.theme-denim,.theme-sky,.theme-nord,.theme-ghibli,.theme-pastel-neutral) .btn-glow-rainbow:before {
        background: conic-gradient(from 0deg,
            #60a5fa,
            #a78bfa,
            #34d399,
            #10b981,
            #f87171,
            #60a5fa
        );
        filter: blur(6px) brightness(1.15) saturate(1.05);
        opacity: .65;
    }

    /* Fallback：若主題未列出仍使用原定義，無需額外處理 */

    /* 新增申請 按鈕炫麗特效樣式 */

    /* Rainbow Glow Button */
    .btn-glow-rainbow {
        position: relative;
        isolation: isolate;
        background: linear-gradient(135deg,#2563eb,#1d4ed8);
        overflow: hidden;
        transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
        box-shadow: 0 0 0 0 rgba(59,130,246,0.4),0 0 0 0 rgba(255,255,255,0.3) inset;
    }
    .btn-glow-rainbow:before, .btn-glow-rainbow:after { content:""; position:absolute; inset:0; pointer-events:none; }
    /* 流動彩邊 */
    .btn-glow-rainbow:before {
        background: conic-gradient(from 0deg, #60a5fa, #a78bfa, #f472b6, #fbbf24, #34d399, #60a5fa);
        animation: btn-rainbow-spin 6s linear infinite;
        filter: blur(6px) brightness(1.15);
        opacity: .65;
        z-index: -2;
    }
    /* 內層遮罩製造邊框感 */
    .btn-glow-rainbow:after {
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0) 60%), linear-gradient(135deg,#2563eb,#1d4ed8);
        inset: 2px;
        border-radius: 6px;
        z-index: -1;
    }
    .btn-glow-rainbow:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px -4px rgba(37,99,235,0.55), 0 0 0 2px rgba(255,255,255,0.15) inset;
    }
    .btn-glow-rainbow:active { transform: translateY(0); box-shadow: 0 3px 10px -2px rgba(37,99,235,0.6),0 0 0 1px rgba(255,255,255,0.25) inset; }
    .btn-glow-rainbow:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

    /* 外圈脈衝光暈 */
    .btn-glow-rainbow[data-pulse="true"] { --pulse-color: rgba(96,165,250,0.55); }
    .btn-glow-rainbow[data-pulse="true"]:after { box-shadow: 0 0 0 0 var(--pulse-color); animation: btn-pulse 2.8s ease-in-out infinite; }

    @keyframes btn-rainbow-spin { to { transform: rotate(1turn); } }
    @keyframes btn-pulse { 0%,100% { box-shadow:0 0 0 0 var(--pulse-color);} 50% { box-shadow:0 0 0 12px rgba(96,165,250,0); } }

    /* 偏好減少動畫時停用動態 */
    @media (prefers-reduced-motion: reduce) {
        .btn-glow-rainbow:before { animation: none; }
        .btn-glow-rainbow[data-pulse="true"]:after { animation: none; }
        .btn-glow-rainbow { transition: none; }
    }

    /* 深色主題可選微調（如有需要再加） */
    body[class*='theme-'] .btn-glow-rainbow { color:#fff; }

    /* 後置細緻字重調整：降低多彩/魯紅/魯綠 600 到 500 以貼近 Apple 輕量感 */

    /* 字重微調：避免全域搜尋替換造成副作用，採最末端覆寫提升優先度 */
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .text-gray-900,
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .text-gray-800,
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .text-gray-700 {
        font-weight: 500 !important;
    }

    /* 日期元件星期列字重同步降為 500 */
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .flatpickr-weekday {
        font-weight: 500 !important;
    }

    /* 針對可能使用 text-blue-600 且先前未強制字重的情況維持設計，不做調整；若需再降可再指示 */

    /* 追加：多彩 / 魯紅 / 魯綠 主題內的 .text-blue-600 以及所有按鈕字重降為 500 */

    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .text-blue-600 { font-weight: 500 !important; }
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) button { font-weight: 500 !important; }
    /* 若之後需要僅針對主要操作按鈕 (例如 .bg-blue-600) 再做差異，可額外覆寫 */
    
    
        /* === 二次調整：多彩 / 魯紅 / 魯綠 與 Apple 對齊框體尺寸 (更進一步壓縮厚度與邊框) ===
           問題：前一次僅統一表單控件；卡片(.bg-white)、陰影組、按鈕仍保留 2px 邊框、15/12px 大圓角與放大視覺，
                 視覺上仍「比 Apple 大」。這裡進一步覆寫：
                 1) 邊框厚度 -> 1px
                 2) 圓角 -> 與 Apple 對齊：.rounded-lg=12px .rounded-md=8px 卡片/按鈕=8px
                 3) 陰影 -> 輕量化 (Apple 風格 0 1px 3px / 0 1px 2px)
                 4) 表單控件 min-height 由 40px 調回 36px (接近 Apple 預設高度)
                 5) 移除原主題 2px border 及過度膨脹的 padding
        */
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .bg-white,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .bg-gray-100 {
            border: 1px solid var(--border-color) !important;
            border-radius: 12px !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.04) !important;
        }
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .shadow-sm,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .shadow-md,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .shadow-lg,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .shadow-xl {
            box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.04) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 12px !important;
        }
        /* 圓角統一 */
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .rounded-lg { border-radius: 12px !important; }
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .rounded-md { border-radius: 8px !important; }
        /* 按鈕壓縮：去除過大圓角與高度膨脹 */
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) button {
            border-radius: 8px !important;
            padding: 0.45rem 0.9rem !important; /* 比 Apple 稍微緊湊但仍舒適 */
            line-height: 1.25 !important;
            box-shadow: none !important;
        }
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .bg-blue-600 {
            border-radius: 8px !important;
        }
        /* 表單控件高度調整（覆蓋之前 40px）*/
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) input,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) select,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) textarea {
            min-height: 36px !important; /* 約等同 Apple 標準控制高度 */
            padding: 8px 12px !important; /* 與 Apple 對齊 */
            border: 1px solid var(--border-color) !important; /* 覆蓋 2px */
            border-radius: 8px !important;
        }
        /* 頁面細緻調整：購物車降低至 24px、特採物品申請菜單降低至 18px */
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) #cart-view :is(input, select, textarea) {
            min-height: 24px !important;
        }
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) #newRequest-view :is(input, select, textarea) {
            min-height: 18px !important;
        }
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) input:focus,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) select:focus,
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) textarea:focus {
            box-shadow: 0 0 0 2px rgba(0,0,0,0.03), 0 0 0 2px var(--accent-color) !important;
            transform: none !important;
        }
        /* 去除主題對外框的 2px 統一規則（若先前套在 .border 類別） */
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .border {
            border-width: 1px !important;
        }
        /* 標籤 / Tag / Badge 若受之前 2px 邊框影響也統一 */
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) .rounded-full { border-radius: 9999px !important; }
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .px-3.py-1,
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) .px-2.py-1 { border-radius: 8px !important; }

    /* 修復申請單列表在多彩/魯紅/魯綠風格下的高度問題 - 排除申請單列表中的checkbox */
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) #dashboard-view table tbody input.request-checkbox {
        min-height: auto !important;
        padding: 0 !important;
        width: 1rem;
        height: 1rem;
    }

    /* 修復申請單列表在多彩/魯紅/魯綠風格下的高度問題 - 排除申請單列表中的checkbox */
    :is(.theme-colorful,.theme-luhong,.theme-lugreen) #dashboard-view table tbody input.request-checkbox {
        min-height: auto !important;
        padding: 0 !important;
        width: 1rem;
        height: 1rem;
    }        /* 儀表板表頭控制按鈕維持緊湊高度，避免多彩 / 魯紅 / 魯綠 主題造成雙行撐開 */
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) #dashboard-view table thead button[data-action="sort"] {
            padding: 0 !important;
            min-height: 0 !important;
            line-height: 1 !important;
            background: transparent !important;
        }
        :is(.theme-colorful,.theme-luhong,.theme-lugreen) #dashboard-view .column-filter-trigger {
            padding: 0 !important;
            min-height: 0 !important;
            width: 1.75rem !important;
            height: 1.75rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

    /* ========== 特殊風格主題 - 動漫遊戲系列 ========== */

    /* 森友會主題 - 動物森友會風格 */
    .theme-animalcrossing {
        --bg-color: #E8F4E8; /* 淡綠色背景 */
        --card-bg-color: #FFFEF5; /* 米白色卡片 */
        --text-color: #4A5C3A; /* 深綠文字 */
        --subtle-text-color: #6B7D5A;
        --border-color: #B8D4A8; /* 清新綠邊框 */
        --accent-color: #8BC34A; /* 主要綠色 */
        --accent-hover-color: #7CB342;
        --secondary-light: #F1F8ED; /* 極淡綠 */
        --secondary-brown: #8B6F47; /* 木質棕色 */
        --font-family: 'Noto Sans TC', 'Arial Rounded MT Bold', sans-serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-light) 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-animalcrossing .bg-white, .theme-animalcrossing .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 16px !important;
        box-shadow: 0 4px 12px rgba(139, 195, 74, 0.15) !important;
    }
    .theme-animalcrossing .text-gray-900, .theme-animalcrossing .text-gray-800 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-animalcrossing .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-animalcrossing .bg-blue-600 {
        background: linear-gradient(45deg, var(--accent-color), var(--accent-hover-color)) !important;
        border-radius: 12px !important;
    }
    .theme-animalcrossing button {
        border-radius: 12px !important;
        transition: all 0.3s ease !important;
    }
    .theme-animalcrossing button:hover {
        transform: scale(1.05) !important;
    }

    /* 瑪利歐主題 - 超級瑪利歐兄弟風格 */
    .theme-mario {
        --bg-color: #5C94FC; /* 天空藍背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #2C2C2C; /* 深灰文字 */
        --subtle-text-color: #555555;
        --border-color: #E52521; /* 紅色邊框 */
        --accent-color: #E52521; /* 瑪利歐紅 */
        --accent-hover-color: #C41E1A;
        --secondary-yellow: #FBD000; /* 金幣黃 */
        --secondary-brown: #8B4513; /* 磚塊棕 */
        --font-family: 'Noto Sans TC', 'Arial Black', sans-serif;

        background: linear-gradient(180deg, var(--bg-color) 0%, #89CFF0 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-mario .bg-white, .theme-mario .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 8px !important;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
    }
    .theme-mario .text-gray-900, .theme-mario .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-mario .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-mario .bg-blue-600 {
        background: var(--accent-color) !important;
        border-radius: 8px !important;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3) !important;
    }
    .theme-mario .bg-blue-600:hover {
        transform: translateY(-2px) !important;
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3) !important;
    }
    .theme-mario button {
        border-radius: 8px !important;
        font-weight: bold !important;
    }

    /* 鬼滅主題 - 鬼滅之刃風格 */
    .theme-demonslayer {
        --bg-color: #1A1A2E; /* 深藍黑背景 */
        --card-bg-color: #16213E;
        --text-color: #E8E8E8; /* 淡色文字 */
        --subtle-text-color: #B8B8B8;
        --border-color: #C41E3A; /* 深紅邊框 */
        --accent-color: #DC143C; /* 炭治郎紅 */
        --accent-hover-color: #FF6B6B;
        --secondary-blue: #4A90E2; /* 水之呼吸藍 */
        --secondary-pattern: #2C2C44; /* 市松紋樣 */
        --font-family: 'Noto Sans TC', 'Yu Gothic', sans-serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-pattern) 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-demonslayer .bg-white, .theme-demonslayer .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 8px !important;
        box-shadow: 0 0 20px rgba(220, 20, 60, 0.3) !important;
    }
    .theme-demonslayer .text-gray-900, .theme-demonslayer .text-gray-800,
    .theme-demonslayer .text-gray-700, .theme-demonslayer .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-demonslayer .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-demonslayer .bg-blue-600 {
        background: linear-gradient(45deg, var(--accent-color), var(--accent-hover-color)) !important;
        box-shadow: 0 0 15px rgba(220, 20, 60, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 輸入欄位、選單、文字區域 */
    .theme-demonslayer input,
    .theme-demonslayer select,
    .theme-demonslayer textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-demonslayer input::placeholder,
    .theme-demonslayer textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 關閉按鈕、返回列表按鈕等 */
    .theme-demonslayer .close-btn,
    .theme-demonslayer .bg-gray-200,
    .theme-demonslayer button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }
    .theme-demonslayer .close-btn:hover,
    .theme-demonslayer .bg-gray-200:hover,
    .theme-demonslayer button.bg-gray-200:hover {
        background: var(--secondary-pattern) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 表格標題 */
    .theme-demonslayer th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 側邊欄區塊 */
    .theme-demonslayer .sidebar-section.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 購物車資訊 */
    .theme-demonslayer .cart-info-sticky {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 選擇區域 */
    .theme-demonslayer selection.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 詳細視窗拖曳區 */
    .theme-demonslayer .detail-modal-drag-handle.from-sky-50 {
        background: linear-gradient(to right, var(--card-bg-color), var(--secondary-pattern)) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 可滾動區域背景 */
    .theme-demonslayer .overflow-y-auto.bg-gray-50,
    .theme-demonslayer .flex-1.overflow-y-auto.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 導航列 */
    .theme-demonslayer nav {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 管理視窗滾動區域 */
    .theme-demonslayer #management-modal-scroll-region.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-demonslayer .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--accent-color) !important;
        border-top: 2px solid var(--border-color) !important;
    }
    .theme-demonslayer .request-detail-total-row.bg-gray-50 td {
        color: var(--accent-color) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-demonslayer #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-demonslayer #floating-utilities .section-content p,
    .theme-demonslayer #floating-utilities .section-content span,
    .theme-demonslayer #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-demonslayer #floating-utilities .section-content .text-gray-500,
    .theme-demonslayer #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-demonslayer #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-demonslayer #attachment-modal .border-b,
    .theme-demonslayer #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-demonslayer #attachment-modal h3,
    .theme-demonslayer #attachment-modal h4,
    .theme-demonslayer #attachment-modal p,
    .theme-demonslayer #attachment-modal label,
    .theme-demonslayer #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-demonslayer #attachment-modal .text-gray-500,
    .theme-demonslayer #attachment-modal .text-gray-600,
    .theme-demonslayer #attachment-modal .text-gray-700,
    .theme-demonslayer #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-demonslayer #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-demonslayer #attachment-modal .close-btn {
        background: var(--accent-color) !important;
        color: #fff !important;
    }
    .theme-demonslayer #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-demonslayer #attachment-modal li .item-name,
    .theme-demonslayer #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* 咒術主題 - 咒術迴戰風格 */
    .theme-jujutsu {
        --bg-color: #0D1117; /* 深黑背景 */
        --card-bg-color: #161B22;
        --text-color: #E6E6FA; /* 淡紫白文字 */
        --subtle-text-color: #B8B8D0;
        --border-color: #6A5ACD; /* 紫色邊框 */
        --accent-color: #8A2BE2; /* 咒力紫 */
        --accent-hover-color: #9B59B6;
        --secondary-dark: #1C1C2E; /* 深紫黑 */
        --secondary-red: #DC143C; /* 咒靈紅 */
        --font-family: 'Noto Sans TC', 'Hiragino Sans', sans-serif;

        background: radial-gradient(circle at center, var(--secondary-dark) 0%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-jujutsu .bg-white, .theme-jujutsu .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 10px !important;
        box-shadow: 0 0 25px rgba(138, 43, 226, 0.4), inset 0 0 10px rgba(138, 43, 226, 0.1) !important;
    }
    .theme-jujutsu .text-gray-900, .theme-jujutsu .text-gray-800,
    .theme-jujutsu .text-gray-700, .theme-jujutsu .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-jujutsu .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-jujutsu .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--accent-hover-color)) !important;
        box-shadow: 0 0 20px rgba(138, 43, 226, 0.6) !important;
    }
    /* 深色底亮色字樣式 - 輸入欄位、選單、文字區域 */
    .theme-jujutsu input,
    .theme-jujutsu select,
    .theme-jujutsu textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-jujutsu input::placeholder,
    .theme-jujutsu textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 關閉按鈕、返回列表按鈕等 */
    .theme-jujutsu .close-btn,
    .theme-jujutsu .bg-gray-200,
    .theme-jujutsu button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }
    .theme-jujutsu .close-btn:hover,
    .theme-jujutsu .bg-gray-200:hover,
    .theme-jujutsu button.bg-gray-200:hover {
        background: var(--secondary-dark) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 表格標題 */
    .theme-jujutsu th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 側邊欄區塊 */
    .theme-jujutsu .sidebar-section.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 購物車資訊 */
    .theme-jujutsu .cart-info-sticky {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 選擇區域 */
    .theme-jujutsu selection.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 詳細視窗拖曳區 */
    .theme-jujutsu .detail-modal-drag-handle.from-sky-50 {
        background: linear-gradient(to right, var(--card-bg-color), var(--secondary-dark)) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 可滾動區域背景 */
    .theme-jujutsu .overflow-y-auto.bg-gray-50,
    .theme-jujutsu .flex-1.overflow-y-auto.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 導航列 */
    .theme-jujutsu nav {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 管理視窗滾動區域 */
    .theme-jujutsu #management-modal-scroll-region.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-jujutsu .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--accent-color) !important;
        border-top: 2px solid var(--border-color) !important;
        box-shadow: 0 0 15px rgba(138, 43, 226, 0.3) !important;
    }
    .theme-jujutsu .request-detail-total-row.bg-gray-50 td {
        color: var(--accent-color) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-jujutsu #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-jujutsu #floating-utilities .section-content p,
    .theme-jujutsu #floating-utilities .section-content span,
    .theme-jujutsu #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-jujutsu #floating-utilities .section-content .text-gray-500,
    .theme-jujutsu #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-jujutsu #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-jujutsu #attachment-modal .border-b,
    .theme-jujutsu #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-jujutsu #attachment-modal h3,
    .theme-jujutsu #attachment-modal h4,
    .theme-jujutsu #attachment-modal p,
    .theme-jujutsu #attachment-modal label,
    .theme-jujutsu #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-jujutsu #attachment-modal .text-gray-500,
    .theme-jujutsu #attachment-modal .text-gray-600,
    .theme-jujutsu #attachment-modal .text-gray-700,
    .theme-jujutsu #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-jujutsu #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-jujutsu #attachment-modal .close-btn {
        background: var(--accent-color) !important;
        color: #fff !important;
    }
    .theme-jujutsu #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-jujutsu #attachment-modal li .item-name,
    .theme-jujutsu #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* 海賊王主題 - ONE PIECE風格 */
    .theme-onepiece {
        --bg-color: #FFE5B4; /* 冒險海圖米色 */
        --card-bg-color: #FFFFFF;
        --text-color: #2C3E50; /* 深藍灰文字 */
        --subtle-text-color: #5D6D7E;
        --border-color: #E67E22; /* 橙色邊框 */
        --accent-color: #FF6B35; /* 魯夫橙紅 */
        --accent-hover-color: #E55527;
        --secondary-blue: #3498DB; /* 海洋藍 */
        --secondary-yellow: #F4D03F; /* 草帽黃 */
        --font-family: 'Noto Sans TC', 'Comic Sans MS', sans-serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, #FFF8DC 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-onepiece .bg-white, .theme-onepiece .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 12px !important;
        box-shadow: 0 6px 15px rgba(230, 126, 34, 0.25) !important;
    }
    .theme-onepiece .text-gray-900, .theme-onepiece .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-onepiece .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-onepiece .bg-blue-600 {
        background: linear-gradient(45deg, var(--accent-color), var(--secondary-blue)) !important;
        border-radius: 10px !important;
    }
    .theme-onepiece button {
        border-radius: 10px !important;
        font-weight: bold !important;
        transition: all 0.3s ease !important;
    }
    .theme-onepiece button:hover {
        transform: rotate(-2deg) scale(1.05) !important;
    }

    /* 七龍珠主題 - Dragon Ball風格 */
    .theme-dragonball {
        --bg-color: #FFA726; /* 橙色背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #1A237E; /* 深藍文字 */
        --subtle-text-color: #3949AB;
        --border-color: #FF6F00; /* 深橙邊框 */
        --accent-color: #FF9800; /* 龍珠橙 */
        --accent-hover-color: #FB8C00;
        --secondary-blue: #2196F3; /* 悟空藍 */
        --secondary-gold: #FFD700; /* 超級賽亞人金 */
        --font-family: 'Noto Sans TC', 'Impact', sans-serif;

        background: radial-gradient(circle at center, #FFB74D 0%, var(--bg-color) 70%) !important;
        color: var(--text-color) !important;
    }
    .theme-dragonball .bg-white, .theme-dragonball .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 15px !important;
        box-shadow: 0 8px 20px rgba(255, 152, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
    }
    .theme-dragonball .text-gray-900, .theme-dragonball .text-gray-800 { color: var(--text-color) !important; font-weight: 800 !important; }
    .theme-dragonball .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-dragonball .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-gold)) !important;
        border-radius: 12px !important;
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.6) !important;
    }
    .theme-dragonball .bg-blue-600:hover {
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.9) !important;
        transform: scale(1.08) !important;
    }

    /* 薩爾達主題 - 薩爾達傳說風格 */
    .theme-zelda {
        --bg-color: #2D5016; /* 森林綠背景 */
        --card-bg-color: #F5F5DC; /* 羊皮紙米色 */
        --text-color: #3E2723; /* 深棕文字 */
        --subtle-text-color: #5D4037;
        --border-color: #8BC34A; /* 綠色邊框 */
        --accent-color: #4CAF50; /* 林克綠 */
        --accent-hover-color: #388E3C;
        --secondary-gold: #FFD700; /* Triforce金 */
        --secondary-blue: #2196F3; /* 海利亞藍 */
        --font-family: 'Noto Sans TC', 'Times New Roman', serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, #3E5C2A 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-zelda .bg-white, .theme-zelda .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25), inset 0 0 20px rgba(255, 215, 0, 0.1) !important;
    }
    .theme-zelda .text-gray-900, .theme-zelda .text-gray-800 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-zelda .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-zelda .bg-blue-600 {
        background: linear-gradient(45deg, var(--accent-color), var(--secondary-gold)) !important;
        border-radius: 8px !important;
    }
    .theme-zelda button {
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }

    /* 寶可夢主題 - Pokemon風格 */
    .theme-pokemon {
        --bg-color: #FFCB05; /* 皮卡丘黃背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #2C3E50; /* 深灰文字 */
        --subtle-text-color: #34495E;
        --border-color: #E74C3C; /* 寶貝球紅 */
        --accent-color: #E74C3C; /* 紅色強調 */
        --accent-hover-color: #C0392B;
        --secondary-blue: #3498DB; /* 寶貝球藍 */
        --secondary-white: #ECF0F1; /* 白色 */
        --font-family: 'Noto Sans TC', 'Arial Rounded MT Bold', sans-serif;

        background: linear-gradient(180deg, var(--bg-color) 0%, #FFE082 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-pokemon .bg-white, .theme-pokemon .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 20px !important;
        box-shadow: 0 6px 15px rgba(231, 76, 60, 0.25) !important;
    }
    .theme-pokemon .text-gray-900, .theme-pokemon .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-pokemon .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-pokemon .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-blue) 100%) !important;
        border-radius: 15px !important;
    }
    .theme-pokemon button {
        border-radius: 15px !important;
        font-weight: bold !important;
        transition: all 0.3s ease !important;
    }
    .theme-pokemon button:hover {
        transform: scale(1.1) !important;
    }

    /* 漫威主題 - Marvel復仇者風格 */
    .theme-marvel {
        --bg-color: #0C0C0C; /* 深黑背景 */
        --card-bg-color: #1A1A1A;
        --text-color: #FFFFFF; /* 白色文字 */
        --subtle-text-color: #CCCCCC;
        --border-color: #E23636; /* 鋼鐵人紅 */
        --accent-color: #E23636; /* 復仇者紅 */
        --accent-hover-color: #C41E1A;
        --secondary-gold: #FFD700; /* 金色 */
        --secondary-blue: #0066CC; /* 美國隊長藍 */
        --font-family: 'Noto Sans TC', 'Helvetica Neue', sans-serif;

        background: radial-gradient(circle at top, #1A1A1A 0%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-marvel .bg-white, .theme-marvel .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 10px !important;
        box-shadow: 0 0 30px rgba(226, 54, 54, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.1) !important;
    }
    .theme-marvel .text-gray-900, .theme-marvel .text-gray-800,
    .theme-marvel .text-gray-700, .theme-marvel .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-marvel .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-marvel .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-gold)) !important;
        box-shadow: 0 0 25px rgba(226, 54, 54, 0.6) !important;
    }
    .theme-marvel .bg-blue-600:hover {
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.8) !important;
        transform: translateY(-3px) !important;
    }
    /* 深色底亮色字樣式 - 輸入欄位、選單、文字區域 */
    .theme-marvel input,
    .theme-marvel select,
    .theme-marvel textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-marvel input::placeholder,
    .theme-marvel textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 關閉按鈕、返回列表按鈕等 */
    .theme-marvel .close-btn,
    .theme-marvel .bg-gray-200,
    .theme-marvel button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }
    .theme-marvel .close-btn:hover,
    .theme-marvel .bg-gray-200:hover,
    .theme-marvel button.bg-gray-200:hover {
        background: #2A2A2A !important;
        color: var(--secondary-gold) !important;
    }
    /* 深色底亮色字樣式 - 表格標題 */
    .theme-marvel th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 側邊欄區塊 */
    .theme-marvel .sidebar-section.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 購物車資訊 */
    .theme-marvel .cart-info-sticky {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 選擇區域 */
    .theme-marvel selection.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 詳細視窗拖曳區 */
    .theme-marvel .detail-modal-drag-handle.from-sky-50 {
        background: linear-gradient(to right, var(--card-bg-color), #2A2A2A) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 可滾動區域背景 */
    .theme-marvel .overflow-y-auto.bg-gray-50,
    .theme-marvel .flex-1.overflow-y-auto.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 導航列 */
    .theme-marvel nav {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 管理視窗滾動區域 */
    .theme-marvel #management-modal-scroll-region.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-marvel .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--secondary-gold) !important;
        border-top: 2px solid var(--border-color) !important;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3) !important;
    }
    .theme-marvel .request-detail-total-row.bg-gray-50 td {
        color: var(--secondary-gold) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-marvel #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-marvel #floating-utilities .section-content p,
    .theme-marvel #floating-utilities .section-content span,
    .theme-marvel #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-marvel #floating-utilities .section-content .text-gray-500,
    .theme-marvel #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-marvel #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-marvel #attachment-modal .border-b,
    .theme-marvel #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-marvel #attachment-modal h3,
    .theme-marvel #attachment-modal h4,
    .theme-marvel #attachment-modal p,
    .theme-marvel #attachment-modal label,
    .theme-marvel #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-marvel #attachment-modal .text-gray-500,
    .theme-marvel #attachment-modal .text-gray-600,
    .theme-marvel #attachment-modal .text-gray-700,
    .theme-marvel #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-marvel #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-marvel #attachment-modal .close-btn {
        background: var(--secondary-gold) !important;
        color: var(--bg-color) !important;
    }
    .theme-marvel #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-marvel #attachment-modal li .item-name,
    .theme-marvel #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* 麥塊主題 - Minecraft風格 */
    .theme-minecraft {
        --bg-color: #1A1A1A; /* 深黑背景（夜晚） */
        --card-bg-color: #2C2416; /* 深木板棕 */
        --text-color: #E0E0E0; /* 淡灰白文字 */
        --subtle-text-color: #B8B8B8;
        --border-color: #3D2817; /* 深棕邊框 */
        --accent-color: #7CB342; /* 綠色強調（草地綠） */
        --accent-hover-color: #558B2F;
        --secondary-stone: #616161; /* 深石頭灰 */
        --secondary-dirt: #4E342E; /* 深泥土棕 */
        --font-family: 'Noto Sans TC', 'Courier New', monospace;

        background: linear-gradient(180deg, #0F0F0F 0%, var(--bg-color) 50%, #1C1410 100%) !important;
        color: var(--text-color) !important;
        image-rendering: pixelated !important;
    }
    .theme-minecraft .bg-white, .theme-minecraft .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 4px solid var(--border-color);
        border-radius: 0 !important;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5) !important;
    }
    .theme-minecraft .text-gray-900, .theme-minecraft .text-gray-800,
    .theme-minecraft .text-gray-700, .theme-minecraft .text-gray-600 {
        color: var(--text-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    .theme-minecraft .text-blue-600 { color: #A5D6A7 !important; font-weight: bold !important; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important; }
    .theme-minecraft .bg-blue-600 {
        background: var(--accent-color) !important;
        border-radius: 0 !important;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6) !important;
    }
    .theme-minecraft button {
        border-radius: 0 !important;
        font-weight: bold !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 輸入欄位、選單、文字區域 */
    .theme-minecraft input,
    .theme-minecraft select,
    .theme-minecraft textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 3px solid var(--border-color) !important;
        border-radius: 0 !important;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5) !important;
    }
    .theme-minecraft input::placeholder,
    .theme-minecraft textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 關閉按鈕、返回列表按鈕等 */
    .theme-minecraft .close-btn,
    .theme-minecraft .bg-gray-200,
    .theme-minecraft button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 3px solid var(--border-color) !important;
        border-radius: 0 !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6) !important;
    }
    .theme-minecraft .close-btn:hover,
    .theme-minecraft .bg-gray-200:hover,
    .theme-minecraft button.bg-gray-200:hover {
        background: var(--secondary-stone) !important;
        color: var(--accent-color) !important;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7) !important;
    }
    /* 深色底亮色字樣式 - 表格標題 */
    .theme-minecraft th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 3px solid var(--border-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 側邊欄區塊 */
    .theme-minecraft .sidebar-section.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 4px solid var(--border-color) !important;
        border-radius: 0 !important;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 購物車資訊 */
    .theme-minecraft .cart-info-sticky {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 選擇區域 */
    .theme-minecraft selection.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 詳細視窗拖曳區 */
    .theme-minecraft .detail-modal-drag-handle.from-sky-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 3px solid var(--border-color) !important;
        border-radius: 0 !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 可滾動區域背景 */
    .theme-minecraft .overflow-y-auto.bg-gray-50,
    .theme-minecraft .flex-1.overflow-y-auto.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 導航列 */
    .theme-minecraft nav {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 3px solid var(--border-color) !important;
        border-radius: 0 !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 管理視窗滾動區域 */
    .theme-minecraft #management-modal-scroll-region.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-minecraft .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--accent-color) !important;
        border-top: 3px solid var(--border-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    .theme-minecraft .request-detail-total-row.bg-gray-50 td {
        color: var(--accent-color) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-minecraft #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    .theme-minecraft #floating-utilities .section-content p,
    .theme-minecraft #floating-utilities .section-content span,
    .theme-minecraft #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-minecraft #floating-utilities .section-content .text-gray-500,
    .theme-minecraft #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-minecraft #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
    }
    .theme-minecraft #attachment-modal .border-b,
    .theme-minecraft #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-minecraft #attachment-modal h3,
    .theme-minecraft #attachment-modal h4,
    .theme-minecraft #attachment-modal p,
    .theme-minecraft #attachment-modal label,
    .theme-minecraft #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-minecraft #attachment-modal .text-gray-500,
    .theme-minecraft #attachment-modal .text-gray-600,
    .theme-minecraft #attachment-modal .text-gray-700,
    .theme-minecraft #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-minecraft #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-minecraft #attachment-modal .close-btn {
        background: var(--accent-color) !important;
        color: #fff !important;
    }
    .theme-minecraft #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-minecraft #attachment-modal li .item-name,
    .theme-minecraft #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* 柯南主題 - 名偵探柯南風格 */
    .theme-conan {
        --bg-color: #1A237E; /* 深藍背景 */
        --card-bg-color: #E8EAF6;
        --text-color: #1A237E; /* 深藍文字 */
        --subtle-text-color: #3949AB;
        --border-color: #3F51B5; /* 藍色邊框 */
        --accent-color: #D32F2F; /* 紅色領結 */
        --accent-hover-color: #C62828;
        --secondary-blue: #1976D2; /* 柯南藍 */
        --secondary-white: #FAFAFA; /* 白色 */
        --font-family: 'Noto Sans TC', 'Arial', sans-serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, #283593 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-conan .bg-white, .theme-conan .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(26, 35, 126, 0.3) !important;
    }
    .theme-conan .text-gray-900, .theme-conan .text-gray-800 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-conan .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-conan .bg-blue-600 {
        background: linear-gradient(45deg, var(--accent-color), var(--secondary-blue)) !important;
        border-radius: 8px !important;
    }

    /* 火影主題 - 火影忍者風格 */
    .theme-naruto {
        --bg-color: #FF8C00; /* 鳴人橙背景 */
        --card-bg-color: #FFF8DC;
        --text-color: #2C3E50; /* 深灰文字 */
        --subtle-text-color: #34495E;
        --border-color: #FF6B35; /* 橙色邊框 */
        --accent-color: #FF6B35; /* 忍者橙 */
        --accent-hover-color: #E55527;
        --secondary-blue: #3498DB; /* 查克拉藍 */
        --secondary-red: #E74C3C; /* 寫輪眼紅 */
        --font-family: 'Noto Sans TC', 'Ninja Naruto', sans-serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, #FFB84D 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-naruto .bg-white, .theme-naruto .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 10px !important;
        box-shadow: 0 6px 15px rgba(255, 107, 53, 0.25) !important;
    }
    .theme-naruto .text-gray-900, .theme-naruto .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-naruto .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-naruto .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-blue)) !important;
        border-radius: 10px !important;
    }
    .theme-naruto button {
        border-radius: 10px !important;
        font-weight: bold !important;
    }

    /* 獵人主題 - Hunter x Hunter風格 */
    .theme-hunter {
        --bg-color: #2E7D32; /* 森林綠背景 */
        --card-bg-color: #E8F5E9;
        --text-color: #1B5E20; /* 深綠文字 */
        --subtle-text-color: #2E7D32;
        --border-color: #4CAF50; /* 綠色邊框 */
        --accent-color: #4CAF50; /* 獵人綠 */
        --accent-hover-color: #388E3C;
        --secondary-dark: #1B5E20; /* 深綠 */
        --secondary-light: #C8E6C9; /* 淡綠 */
        --font-family: 'Noto Sans TC', 'Arial', sans-serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, #43A047 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-hunter .bg-white, .theme-hunter .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25) !important;
    }
    .theme-hunter .text-gray-900, .theme-hunter .text-gray-800 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-hunter .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-hunter .bg-blue-600 {
        background: linear-gradient(45deg, var(--accent-color), var(--accent-hover-color)) !important;
        border-radius: 10px !important;
    }

    /* EVA主題 - 新世紀福音戰士風格 */
    .theme-eva {
        --bg-color: #1A0A2E; /* 深紫黑背景 */
        --card-bg-color: #16213E;
        --text-color: #E0E0E0; /* 淡灰文字 */
        --subtle-text-color: #B0B0B0;
        --border-color: #9C27B0; /* 紫色邊框 */
        --accent-color: #9C27B0; /* EVA紫 */
        --accent-hover-color: #7B1FA2;
        --secondary-green: #00FF41; /* 控制台綠 */
        --secondary-orange: #FF6F00; /* 警告橙 */
        --font-family: 'Noto Sans TC', 'Courier New', monospace;

        background: linear-gradient(135deg, var(--bg-color) 0%, #2E1A47 50%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-eva .bg-white, .theme-eva .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 0 !important;
        box-shadow: 0 0 20px rgba(156, 39, 176, 0.4), inset 0 0 10px rgba(0, 255, 65, 0.1) !important;
    }
    .theme-eva .text-gray-900, .theme-eva .text-gray-800,
    .theme-eva .text-gray-700, .theme-eva .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-eva .text-blue-600 { color: var(--secondary-green) !important; font-weight: bold !important; }
    .theme-eva .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--accent-hover-color)) !important;
        box-shadow: 0 0 25px rgba(156, 39, 176, 0.6) !important;
    }
    .theme-eva button {
        border-radius: 0 !important;
        font-family: var(--font-family) !important;
    }
    /* 深色底亮色字樣式 - 輸入欄位、選單、文字區域 */
    .theme-eva input,
    .theme-eva select,
    .theme-eva textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 0 !important;
    }
    .theme-eva input::placeholder,
    .theme-eva textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 關閉按鈕、返回列表按鈕等 */
    .theme-eva .close-btn,
    .theme-eva .bg-gray-200,
    .theme-eva button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 10px rgba(156, 39, 176, 0.3) !important;
    }
    .theme-eva .close-btn:hover,
    .theme-eva .bg-gray-200:hover,
    .theme-eva button.bg-gray-200:hover {
        background: var(--bg-color) !important;
        color: var(--secondary-green) !important;
        border-color: var(--secondary-green) !important;
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.5) !important;
    }
    /* 深色底亮色字樣式 - 表格標題 */
    .theme-eva th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 側邊欄區塊 */
    .theme-eva .sidebar-section.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 10px rgba(156, 39, 176, 0.3) !important;
    }
    /* 深色底亮色字樣式 - 購物車資訊 */
    .theme-eva .cart-info-sticky {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 選擇區域 */
    .theme-eva selection.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 詳細視窗拖曳區 */
    .theme-eva .detail-modal-drag-handle.from-sky-50 {
        background: linear-gradient(to right, var(--card-bg-color), var(--bg-color)) !important;
        color: var(--text-color) !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 10px rgba(156, 39, 176, 0.3) !important;
    }
    /* 深色底亮色字樣式 - 可滾動區域背景 */
    .theme-eva .overflow-y-auto.bg-gray-50,
    .theme-eva .flex-1.overflow-y-auto.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 導航列 */
    .theme-eva nav {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 2px solid var(--border-color) !important;
        border-radius: 0 !important;
    }
    /* 深色底亮色字樣式 - 管理視窗滾動區域 */
    .theme-eva #management-modal-scroll-region.bg-gray-50 {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-eva .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--secondary-green) !important;
        border-top: 2px solid var(--border-color) !important;
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.3) !important;
    }
    .theme-eva .request-detail-total-row.bg-gray-50 td {
        color: var(--secondary-green) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-eva #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-eva #floating-utilities .section-content p,
    .theme-eva #floating-utilities .section-content span,
    .theme-eva #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-eva #floating-utilities .section-content .text-gray-500,
    .theme-eva #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-eva #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-eva #attachment-modal .border-b,
    .theme-eva #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-eva #attachment-modal h3,
    .theme-eva #attachment-modal h4,
    .theme-eva #attachment-modal p,
    .theme-eva #attachment-modal label,
    .theme-eva #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-eva #attachment-modal .text-gray-500,
    .theme-eva #attachment-modal .text-gray-600,
    .theme-eva #attachment-modal .text-gray-700,
    .theme-eva #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-eva #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-eva #attachment-modal .close-btn {
        background: var(--secondary-green) !important;
        color: var(--bg-color) !important;
    }
    .theme-eva #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-eva #attachment-modal li .item-name,
    .theme-eva #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* JoJo主題 - JoJo的奇妙冒險風格 */
    .theme-jojo {
        --bg-color: #FFD700; /* 金色背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #4A148C; /* 深紫文字 */
        --subtle-text-color: #6A1B9A;
        --border-color: #E91E63; /* 粉紅邊框 */
        --accent-color: #E91E63; /* JoJo粉 */
        --accent-hover-color: #C2185B;
        --secondary-purple: #9C27B0; /* 紫色 */
        --secondary-gold: #FFC107; /* 金色 */
        --font-family: 'Noto Sans TC', 'Impact', sans-serif;

        background: linear-gradient(135deg, var(--bg-color) 0%, #FFF176 25%, #E1BEE7 50%, #FFD700 75%, var(--bg-color) 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-jojo .bg-white, .theme-jojo .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 4px solid var(--border-color);
        border-radius: 0 !important;
        box-shadow: 8px 8px 0 rgba(233, 30, 99, 0.4), -8px -8px 0 rgba(156, 39, 176, 0.4) !important;
        transform: rotate(-0.5deg) !important;
    }
    .theme-jojo .text-gray-900, .theme-jojo .text-gray-800 {
        color: var(--text-color) !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
    }
    .theme-jojo .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-jojo .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-purple)) !important;
        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3) !important;
    }
    .theme-jojo .bg-blue-600:hover {
        transform: rotate(2deg) scale(1.05) !important;
        box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.4) !important;
    }
    .theme-jojo button {
        border-radius: 0 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
    }

    /* 迪士尼主題 - Disney魔法城堡風格 */
    .theme-disney {
        --bg-color: #E8F4F8; /* 淡藍背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #2C3E50; /* 深藍文字 */
        --subtle-text-color: #5D6D7E;
        --border-color: #5DADE2; /* 城堡藍邊框 */
        --accent-color: #FFD700; /* 魔法金色 */
        --accent-hover-color: #FFC700;
        --secondary-blue: #5DADE2; /* 城堡藍 */
        --secondary-purple: #9B59B6; /* 魔法紫 */
        --font-family: 'Noto Sans TC', 'Arial Rounded MT Bold', sans-serif;

        background: linear-gradient(135deg, #E8F4F8 0%, #D5E8F7 50%, #E1BEE7 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-disney .bg-white, .theme-disney .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 20px !important;
        box-shadow: 0 4px 20px rgba(93, 173, 226, 0.3), 0 0 30px rgba(255, 215, 0, 0.2) !important;
    }
    .theme-disney .text-gray-900, .theme-disney .text-gray-800 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-disney .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-disney .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-purple)) !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5) !important;
    }
    .theme-disney .bg-blue-600:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6), 0 0 40px rgba(155, 89, 182, 0.4) !important;
    }
    .theme-disney button {
        border-radius: 20px !important;
        font-weight: 600 !important;
    }

    /* 小叮噹主題 - Doraemon藍胖子風格 */
    .theme-doraemon {
        --bg-color: #5DADE2; /* 哆啦A夢藍背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #2C3E50; /* 深色文字 */
        --subtle-text-color: #34495E;
        --border-color: #E74C3C; /* 紅色鈴鐺邊框 */
        --accent-color: #E74C3C; /* 紅色強調 */
        --accent-hover-color: #C0392B;
        --secondary-yellow: #F4D03F; /* 黃色口袋 */
        --secondary-white: #ECF0F1; /* 白色 */
        --font-family: 'Noto Sans TC', 'Comic Sans MS', sans-serif;

        background: linear-gradient(180deg, #5DADE2 0%, #85C1E9 50%, #AED6F1 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-doraemon .bg-white, .theme-doraemon .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 25px !important;
        box-shadow: 0 6px 20px rgba(93, 173, 226, 0.4) !important;
    }
    .theme-doraemon .text-gray-900, .theme-doraemon .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-doraemon .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-doraemon .bg-blue-600 {
        background: var(--accent-color) !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4) !important;
    }
    .theme-doraemon .bg-blue-600:hover {
        transform: scale(1.08) !important;
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5) !important;
    }
    .theme-doraemon button {
        border-radius: 20px !important;
        font-weight: 700 !important;
    }

    /* 小新主題 - 蠟筆小新風格 */
    .theme-crayon {
        --bg-color: #FFE082; /* 明亮黃色背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #2C3E50; /* 深色文字 */
        --subtle-text-color: #34495E;
        --border-color: #E74C3C; /* 紅色邊框 */
        --accent-color: #E74C3C; /* 紅色強調 */
        --accent-hover-color: #C0392B;
        --secondary-orange: #F39C12; /* 橙色 */
        --secondary-green: #27AE60; /* 綠色 */
        --font-family: 'Noto Sans TC', 'Comic Sans MS', sans-serif;

        background: linear-gradient(135deg, #FFE082 0%, #FFECB3 50%, #FFD54F 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-crayon .bg-white, .theme-crayon .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 15px !important;
        box-shadow: 5px 5px 0 rgba(231, 76, 60, 0.3) !important;
    }
    .theme-crayon .text-gray-900, .theme-crayon .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-crayon .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-crayon .bg-blue-600 {
        background: var(--accent-color) !important;
        border-radius: 12px !important;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
    }
    .theme-crayon .bg-blue-600:hover {
        transform: rotate(-2deg) scale(1.05) !important;
        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25) !important;
    }
    .theme-crayon button {
        border-radius: 12px !important;
        font-weight: 700 !important;
    }

    /* 女神主題 - Persona 5風格 */
    .theme-persona {
        --bg-color: #0A0A0A; /* 深黑背景 */
        --card-bg-color: #1A1A1A;
        --text-color: #FFFFFF; /* 白色文字 */
        --subtle-text-color: #CCCCCC;
        --border-color: #E60012; /* 鮮紅邊框 */
        --accent-color: #E60012; /* Persona紅 */
        --accent-hover-color: #B80010;
        --secondary-black: #121212; /* 深黑 */
        --secondary-white: #F5F5F5; /* 白色 */
        --font-family: 'Noto Sans TC', 'Optima', sans-serif;

        background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #0A0A0A 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-persona .bg-white, .theme-persona .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 0 !important;
        box-shadow: 0 0 40px rgba(230, 0, 18, 0.5), inset 0 0 20px rgba(230, 0, 18, 0.1) !important;
    }
    .theme-persona .text-gray-900, .theme-persona .text-gray-800,
    .theme-persona .text-gray-700, .theme-persona .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-persona .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-persona .bg-blue-600 {
        background: var(--accent-color) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 30px rgba(230, 0, 18, 0.7) !important;
    }
    .theme-persona .bg-blue-600:hover {
        box-shadow: 0 0 50px rgba(230, 0, 18, 0.9) !important;
        transform: translateY(-3px) !important;
    }
    /* 深色底亮色字樣式 */
    .theme-persona input,
    .theme-persona select,
    .theme-persona textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-persona input::placeholder,
    .theme-persona textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    .theme-persona .close-btn,
    .theme-persona .bg-gray-200,
    .theme-persona button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }
    .theme-persona .close-btn:hover,
    .theme-persona .bg-gray-200:hover,
    .theme-persona button.bg-gray-200:hover {
        background: var(--secondary-black) !important;
        color: var(--accent-color) !important;
    }
    .theme-persona th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-persona .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--accent-color) !important;
        border-top: 3px solid var(--border-color) !important;
        box-shadow: 0 0 25px rgba(230, 0, 18, 0.4) !important;
    }
    .theme-persona .request-detail-total-row.bg-gray-50 td {
        color: var(--accent-color) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-persona #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-persona #floating-utilities .section-content p,
    .theme-persona #floating-utilities .section-content span,
    .theme-persona #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-persona #floating-utilities .section-content .text-gray-500,
    .theme-persona #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-persona #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-persona #attachment-modal .border-b,
    .theme-persona #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-persona #attachment-modal h3,
    .theme-persona #attachment-modal h4,
    .theme-persona #attachment-modal p,
    .theme-persona #attachment-modal label,
    .theme-persona #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-persona #attachment-modal .text-gray-500,
    .theme-persona #attachment-modal .text-gray-600,
    .theme-persona #attachment-modal .text-gray-700,
    .theme-persona #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-persona #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-persona #attachment-modal .close-btn {
        background: var(--accent-color) !important;
        color: #fff !important;
    }
    .theme-persona #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-persona #attachment-modal li .item-name,
    .theme-persona #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* 音速主題 - Sonic音速小子風格 */
    .theme-sonic {
        --bg-color: #0080FF; /* 音速藍背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #1A1A1A; /* 深色文字 */
        --subtle-text-color: #4A4A4A;
        --border-color: #FF0000; /* 紅色邊框 */
        --accent-color: #FF0000; /* 紅色強調 */
        --accent-hover-color: #CC0000;
        --secondary-gold: #FFD700; /* 金色戒指 */
        --secondary-blue: #0080FF; /* 音速藍 */
        --font-family: 'Noto Sans TC', 'Arial Black', sans-serif;

        background: linear-gradient(180deg, #0080FF 0%, #00A0FF 50%, #40C0FF 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-sonic .bg-white, .theme-sonic .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 30px !important;
        box-shadow: 0 8px 25px rgba(0, 128, 255, 0.4) !important;
    }
    .theme-sonic .text-gray-900, .theme-sonic .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-sonic .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-sonic .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-gold)) !important;
        border-radius: 25px !important;
        box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4) !important;
    }
    .theme-sonic .bg-blue-600:hover {
        transform: translateX(5px) scale(1.05) !important;
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6) !important;
    }
    .theme-sonic button {
        border-radius: 25px !important;
        font-weight: 700 !important;
    }

    /* 魔獸主題 - World of Warcraft史詩奇幻風格 */
    .theme-warcraft {
        --bg-color: #0D1117; /* 深藍黑背景 */
        --card-bg-color: #1C2128;
        --text-color: #F0E6D2; /* 金色文字 */
        --subtle-text-color: #C8AA6E;
        --border-color: #785A28; /* 金棕邊框 */
        --accent-color: #C89B3C; /* 史詩金色 */
        --accent-hover-color: #F0E6D2;
        --secondary-blue: #0AC8B9; /* 魔法藍 */
        --secondary-purple: #8B5CF6; /* 史詩紫 */
        --font-family: 'Noto Sans TC', 'Trajan Pro', serif;

        background: radial-gradient(ellipse at center, #1C2128 0%, #0D1117 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-warcraft .bg-white, .theme-warcraft .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 10px !important;
        box-shadow: 0 0 40px rgba(200, 155, 60, 0.3), inset 0 0 20px rgba(120, 90, 40, 0.2) !important;
    }
    .theme-warcraft .text-gray-900, .theme-warcraft .text-gray-800,
    .theme-warcraft .text-gray-700, .theme-warcraft .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-warcraft .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-warcraft .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-blue)) !important;
        box-shadow: 0 0 30px rgba(200, 155, 60, 0.5) !important;
    }
    .theme-warcraft .bg-blue-600:hover {
        box-shadow: 0 0 50px rgba(240, 230, 210, 0.7) !important;
        transform: translateY(-3px) !important;
    }
    /* 深色底亮色字樣式 */
    .theme-warcraft input,
    .theme-warcraft select,
    .theme-warcraft textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-warcraft input::placeholder,
    .theme-warcraft textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    .theme-warcraft .close-btn,
    .theme-warcraft .bg-gray-200,
    .theme-warcraft button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }
    .theme-warcraft .close-btn:hover,
    .theme-warcraft .bg-gray-200:hover,
    .theme-warcraft button.bg-gray-200:hover {
        background: #2D3748 !important;
        color: var(--accent-color) !important;
    }
    .theme-warcraft th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-warcraft .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--accent-color) !important;
        border-top: 2px solid var(--border-color) !important;
        box-shadow: 0 0 20px rgba(200, 155, 60, 0.4) !important;
    }
    .theme-warcraft .request-detail-total-row.bg-gray-50 td {
        color: var(--accent-color) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-warcraft #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-warcraft #floating-utilities .section-content p,
    .theme-warcraft #floating-utilities .section-content span,
    .theme-warcraft #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-warcraft #floating-utilities .section-content .text-gray-500,
    .theme-warcraft #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-warcraft #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-warcraft #attachment-modal .border-b,
    .theme-warcraft #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-warcraft #attachment-modal h3,
    .theme-warcraft #attachment-modal h4,
    .theme-warcraft #attachment-modal p,
    .theme-warcraft #attachment-modal label,
    .theme-warcraft #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-warcraft #attachment-modal .text-gray-500,
    .theme-warcraft #attachment-modal .text-gray-600,
    .theme-warcraft #attachment-modal .text-gray-700,
    .theme-warcraft #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-warcraft #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-warcraft #attachment-modal .close-btn {
        background: var(--accent-color) !important;
        color: #fff !important;
    }
    .theme-warcraft #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-warcraft #attachment-modal li .item-name,
    .theme-warcraft #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* 噴漆主題 - Splatoon繽紛風格 */
    .theme-splatoon {
        --bg-color: #F8F8F8; /* 淺灰背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #2C3E50; /* 深色文字 */
        --subtle-text-color: #5D6D7E;
        --border-color: #FF6B35; /* 螢光橙邊框 */
        --accent-color: #FF6B35; /* 螢光橙 */
        --accent-hover-color: #FF8C5A;
        --secondary-green: #00E676; /* 螢光綠 */
        --secondary-pink: #FF4081; /* 螢光粉 */
        --font-family: 'Noto Sans TC', 'Fredoka One', sans-serif;

        background: linear-gradient(135deg, #FFE5E5 0%, #E5FFE5 25%, #E5E5FF 50%, #FFE5FF 75%, #FFFFE5 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-splatoon .bg-white, .theme-splatoon .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 4px solid var(--border-color);
        border-radius: 30px !important;
        box-shadow: 0 6px 25px rgba(255, 107, 53, 0.3), inset 0 0 15px rgba(0, 230, 118, 0.1) !important;
    }
    .theme-splatoon .text-gray-900, .theme-splatoon .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-splatoon .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-splatoon .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-green), var(--secondary-pink)) !important;
        border-radius: 25px !important;
        box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5) !important;
    }
    .theme-splatoon .bg-blue-600:hover {
        transform: rotate(-3deg) scale(1.08) !important;
        box-shadow: 0 8px 30px rgba(0, 230, 118, 0.5) !important;
    }
    .theme-splatoon button {
        border-radius: 25px !important;
        font-weight: 700 !important;
    }

    /* 洛克人主題 - Mega Man風格 */
    .theme-megaman {
        --bg-color: #1E88E5; /* 洛克人藍背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #1A237E; /* 深藍文字 */
        --subtle-text-color: #283593;
        --border-color: #1565C0; /* 深藍邊框 */
        --accent-color: #FFEB3B; /* 黃色強調 */
        --accent-hover-color: #FDD835;
        --secondary-blue: #42A5F5; /* 亮藍 */
        --secondary-cyan: #00BCD4; /* 青色 */
        --font-family: 'Noto Sans TC', 'Press Start 2P', monospace;

        background: linear-gradient(180deg, #1E88E5 0%, #42A5F5 50%, #64B5F6 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-megaman .bg-white, .theme-megaman .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 8px !important;
        box-shadow: 4px 4px 0 rgba(21, 101, 192, 0.4) !important;
    }
    .theme-megaman .text-gray-900, .theme-megaman .text-gray-800 { color: var(--text-color) !important; font-weight: 700 !important; }
    .theme-megaman .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-megaman .bg-blue-600 {
        background: var(--accent-color) !important;
        border-radius: 6px !important;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3) !important;
    }
    .theme-megaman .bg-blue-600:hover {
        transform: translateY(-3px) !important;
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4) !important;
    }
    .theme-megaman button {
        border-radius: 6px !important;
        font-weight: 700 !important;
    }

    /* 小精靈主題 - Pac-Man復古街機風格 */
    .theme-pacman {
        --bg-color: #0A0A0A; /* 深黑背景 */
        --card-bg-color: #1A1A1A;
        --text-color: #FFFF00; /* 黃色文字 */
        --subtle-text-color: #FFD700;
        --border-color: #0000FF; /* 藍色邊框 */
        --accent-color: #FFFF00; /* 小精靈黃 */
        --accent-hover-color: #FFD700;
        --secondary-blue: #00FFFF; /* 鬼魂藍 */
        --secondary-pink: #FFB8DE; /* 粉紅鬼魂 */
        --font-family: 'Noto Sans TC', 'Press Start 2P', monospace;

        background: #0A0A0A !important;
        color: var(--text-color) !important;
    }
    .theme-pacman .bg-white, .theme-pacman .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 0 !important;
        box-shadow: 0 0 30px rgba(255, 255, 0, 0.5), inset 0 0 20px rgba(0, 0, 255, 0.2) !important;
    }
    .theme-pacman .text-gray-900, .theme-pacman .text-gray-800,
    .theme-pacman .text-gray-700, .theme-pacman .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-pacman .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-pacman .bg-blue-600 {
        background: var(--accent-color) !important;
        color: #0A0A0A !important;
        border-radius: 0 !important;
        box-shadow: 0 0 25px rgba(255, 255, 0, 0.7) !important;
    }
    .theme-pacman .bg-blue-600:hover {
        box-shadow: 0 0 40px rgba(255, 255, 0, 0.9), 0 0 60px rgba(0, 255, 255, 0.5) !important;
    }
    /* 深色底亮色字樣式 */
    .theme-pacman input,
    .theme-pacman select,
    .theme-pacman textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-pacman input::placeholder,
    .theme-pacman textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    .theme-pacman .close-btn,
    .theme-pacman .bg-gray-200,
    .theme-pacman button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }
    .theme-pacman .close-btn:hover,
    .theme-pacman .bg-gray-200:hover,
    .theme-pacman button.bg-gray-200:hover {
        background: #2A2A2A !important;
        color: var(--secondary-blue) !important;
    }
    .theme-pacman th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-pacman .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--accent-color) !important;
        border-top: 3px solid var(--border-color) !important;
        box-shadow: 0 0 20px rgba(255, 255, 0, 0.5) !important;
    }
    .theme-pacman .request-detail-total-row.bg-gray-50 td {
        color: var(--accent-color) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-pacman #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-pacman #floating-utilities .section-content p,
    .theme-pacman #floating-utilities .section-content span,
    .theme-pacman #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-pacman #floating-utilities .section-content .text-gray-500,
    .theme-pacman #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-pacman #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-pacman #attachment-modal .border-b,
    .theme-pacman #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-pacman #attachment-modal h3,
    .theme-pacman #attachment-modal h4,
    .theme-pacman #attachment-modal p,
    .theme-pacman #attachment-modal label,
    .theme-pacman #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-pacman #attachment-modal .text-gray-500,
    .theme-pacman #attachment-modal .text-gray-600,
    .theme-pacman #attachment-modal .text-gray-700,
    .theme-pacman #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-pacman #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-pacman #attachment-modal .close-btn {
        background: var(--accent-color) !important;
        color: var(--bg-color) !important;
    }
    .theme-pacman #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-pacman #attachment-modal li .item-name,
    .theme-pacman #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

    /* 我推主題 - 我推的孩子星空偶像風格 */
    .theme-oshino {
        --bg-color: #FFE5F5; /* 淡粉背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #4A148C; /* 深紫文字 */
        --subtle-text-color: #6A1B9A;
        --border-color: #E91E63; /* 粉紅邊框 */
        --accent-color: #FFD700; /* 星星金色 */
        --accent-hover-color: #FFC700;
        --secondary-pink: #FF69B4; /* 亮粉 */
        --secondary-purple: #9C27B0; /* 紫色 */
        --font-family: 'Noto Sans TC', 'Yu Gothic', sans-serif;

        background: linear-gradient(135deg, #FFE5F5 0%, #F3E5F5 50%, #E1BEE7 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-oshino .bg-white, .theme-oshino .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 25px !important;
        box-shadow: 0 4px 20px rgba(233, 30, 99, 0.3), 0 0 30px rgba(255, 215, 0, 0.2) !important;
    }
    .theme-oshino .text-gray-900, .theme-oshino .text-gray-800 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-oshino .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-oshino .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-pink)) !important;
        border-radius: 25px !important;
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5) !important;
    }
    .theme-oshino .bg-blue-600:hover {
        transform: scale(1.08) !important;
        box-shadow: 0 8px 30px rgba(255, 105, 180, 0.6), 0 0 40px rgba(255, 215, 0, 0.4) !important;
    }
    .theme-oshino button {
        border-radius: 25px !important;
        font-weight: 600 !important;
    }

    /* 小丸子主題 - 櫻桃小丸子溫馨風格 */
    .theme-maruko {
        --bg-color: #FFCCBC; /* 溫暖橙粉背景 */
        --card-bg-color: #FFFFFF;
        --text-color: #3E2723; /* 深棕文字 */
        --subtle-text-color: #5D4037;
        --border-color: #E53935; /* 紅色邊框 */
        --accent-color: #E53935; /* 小丸子紅 */
        --accent-hover-color: #C62828;
        --secondary-pink: #F8BBD0; /* 粉紅 */
        --secondary-brown: #8D6E63; /* 棕色 */
        --font-family: 'Noto Sans TC', 'Yu Gothic', sans-serif;

        background: linear-gradient(135deg, #FFCCBC 0%, #FFAB91 50%, #FF8A65 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-maruko .bg-white, .theme-maruko .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 2px solid var(--border-color);
        border-radius: 20px !important;
        box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3) !important;
    }
    .theme-maruko .text-gray-900, .theme-maruko .text-gray-800 { color: var(--text-color) !important; font-weight: 600 !important; }
    .theme-maruko .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-maruko .bg-blue-600 {
        background: var(--accent-color) !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4) !important;
    }
    .theme-maruko .bg-blue-600:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 6px 20px rgba(229, 57, 53, 0.5) !important;
    }
    .theme-maruko button {
        border-radius: 20px !important;
        font-weight: 600 !important;
    }

    /* 鋼彈主題 - 機動戰士鋼彈機械風格 */
    .theme-gundam {
        --bg-color: #1C2833; /* 金屬灰黑背景 */
        --card-bg-color: #2C3E50;
        --text-color: #ECF0F1; /* 淺灰文字 */
        --subtle-text-color: #BDC3C7;
        --border-color: #E74C3C; /* 紅色邊框 */
        --accent-color: #E74C3C; /* 鋼彈紅 */
        --accent-hover-color: #C0392B;
        --secondary-blue: #3498DB; /* 藍色 */
        --secondary-yellow: #F1C40F; /* 黃色 */
        --font-family: 'Noto Sans TC', 'Orbitron', sans-serif;

        background: linear-gradient(135deg, #1C2833 0%, #34495E 50%, #2C3E50 100%) !important;
        color: var(--text-color) !important;
    }
    .theme-gundam .bg-white, .theme-gundam .bg-gray-100 {
        background: var(--card-bg-color) !important;
        border: 3px solid var(--border-color);
        border-radius: 5px !important;
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.4), inset 0 0 15px rgba(52, 152, 219, 0.2) !important;
    }
    .theme-gundam .text-gray-900, .theme-gundam .text-gray-800,
    .theme-gundam .text-gray-700, .theme-gundam .text-gray-600 {
        color: var(--text-color) !important;
    }
    .theme-gundam .text-blue-600 { color: var(--accent-color) !important; font-weight: bold !important; }
    .theme-gundam .bg-blue-600 {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-blue), var(--secondary-yellow)) !important;
        border-radius: 5px !important;
        box-shadow: 0 0 25px rgba(231, 76, 60, 0.6) !important;
    }
    .theme-gundam .bg-blue-600:hover {
        box-shadow: 0 0 40px rgba(52, 152, 219, 0.8) !important;
        transform: translateY(-3px) !important;
    }
    /* 深色底亮色字樣式 */
    .theme-gundam input,
    .theme-gundam select,
    .theme-gundam textarea {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-gundam input::placeholder,
    .theme-gundam textarea::placeholder {
        color: var(--subtle-text-color) !important;
    }
    .theme-gundam .close-btn,
    .theme-gundam .bg-gray-200,
    .theme-gundam button.bg-gray-200 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }
    .theme-gundam .close-btn:hover,
    .theme-gundam .bg-gray-200:hover,
    .theme-gundam button.bg-gray-200:hover {
        background: #34495E !important;
        color: var(--secondary-yellow) !important;
    }
    .theme-gundam th.text-gray-500 {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    /* 深色底亮色字樣式 - 申請單詳情合計行 */
    .theme-gundam .request-detail-total-row.bg-gray-50 {
        background: var(--card-bg-color) !important;
        color: var(--secondary-yellow) !important;
        border-top: 3px solid var(--border-color) !important;
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.4) !important;
    }
    .theme-gundam .request-detail-total-row.bg-gray-50 td {
        color: var(--secondary-yellow) !important;
    }
    /* 深色底亮色字樣式 - 附件列表視窗 */
    .theme-gundam #floating-utilities .section-content {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-gundam #floating-utilities .section-content p,
    .theme-gundam #floating-utilities .section-content span,
    .theme-gundam #floating-utilities .section-content label {
        color: var(--text-color) !important;
    }
    .theme-gundam #floating-utilities .section-content .text-gray-500,
    .theme-gundam #floating-utilities .section-content .text-gray-600 {
        color: var(--subtle-text-color) !important;
    }
    /* 深色底亮色字樣式 - 附件管理視窗 */
    .theme-gundam #attachment-modal > div {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
    }
    .theme-gundam #attachment-modal .border-b,
    .theme-gundam #attachment-modal .border-t {
        border-color: var(--border-color) !important;
    }
    .theme-gundam #attachment-modal h3,
    .theme-gundam #attachment-modal h4,
    .theme-gundam #attachment-modal p,
    .theme-gundam #attachment-modal label,
    .theme-gundam #attachment-modal span {
        color: var(--text-color) !important;
    }
    .theme-gundam #attachment-modal .text-gray-500,
    .theme-gundam #attachment-modal .text-gray-600,
    .theme-gundam #attachment-modal .text-gray-700,
    .theme-gundam #attachment-modal .text-gray-800 {
        color: var(--text-color) !important;
    }
    .theme-gundam #attachment-modal .bg-gray-50 {
        background: var(--bg-color) !important;
    }
    .theme-gundam #attachment-modal .close-btn {
        background: var(--secondary-yellow) !important;
        color: var(--bg-color) !important;
    }
    .theme-gundam #attachment-modal li.bg-gray-50 {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }
    .theme-gundam #attachment-modal li .item-name,
    .theme-gundam #attachment-modal li .item-meta {
        color: var(--text-color) !important;
    }

/* ============================= */
/* RWD 響應式設計 - 平板與手機適配 */
/* ============================= */

/* 平板裝置 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 主容器調整 */
    body {
        padding: 12px !important;
    }

    /* 頂部導覽列 */
    #app-header {
        margin-bottom: 12px !important;
    }

    #app-header .flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Dashboard 表格在平板上的調整 */
    #dashboard-view table {
        font-size: 0.8rem;
    }

    #dashboard-view th,
    #dashboard-view td {
        padding: 8px 6px !important;
    }

    /* 隱藏次要欄位 */
    #dashboard-view th:nth-child(n+10),
    #dashboard-view td:nth-child(n+10) {
        display: none;
    }

    /* 申請單/購物車雙欄改為單欄 */
    #newRequest-view .layout-two-column,
    #cart-view .layout-two-column {
        flex-direction: column !important;
    }

    #newRequest-view .layout-two-column > .layout-pane,
    #cart-view .layout-two-column > .layout-pane {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 商品列表網格調整 */
    .product-list.grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    /* 購物車項目調整 */
    .cart-items ul.grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 按鈕群組 */
    .header-total-actions {
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }

    /* 分類導覽可滾動 */
    .product-categories {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Floating toolbar 位置調整 */
    .floating-toolbar {
        right: 12px !important;
        bottom: 12px !important;
    }

    /* 模態框寬度調整 */
    .modal-container > div,
    [id$="-modal"] > div {
        max-width: 90vw !important;
        margin: 20px auto;
    }
}

/* 手機裝置 (小於 768px) */
@media (max-width: 767px) {
    /* 主容器調整 */
    body {
        padding: 8px !important;
        font-size: 14px;
    }

    /* 頂部導覽列 */
    #app-header {
        margin-bottom: 8px !important;
        padding: 8px !important;
    }

    #app-header .text-2xl {
        font-size: 1.25rem !important;
    }

    #app-header .flex {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* 將導覽按鈕變成圖示模式 */
    #app-header button span:not(.sr-only),
    #app-header a span:not(.sr-only) {
        display: none;
    }

    #app-header button svg,
    #app-header a svg {
        margin: 0 !important;
    }

    /* 登入頁面 */
    #login-view {
        padding: 16px !important;
    }

    #login-view form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
    }

    /* Dashboard */
    #dashboard-view {
        padding: 0 !important;
    }

    /* Dashboard 表格橫向滾動 */
    #dashboard-view .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #dashboard-view table {
        font-size: 0.75rem;
        min-width: 800px;
    }

    #dashboard-view th,
    #dashboard-view td {
        padding: 6px 4px !important;
        white-space: nowrap;
    }

    /* 篩選器堆疊 */
    #dashboard-view .flex.flex-wrap {
        flex-direction: column;
        align-items: stretch !important;
    }

    #dashboard-view .flex.flex-wrap > * {
        width: 100% !important;
        margin-bottom: 8px;
    }

    /* 申請單頁面 */
    #newRequest-view .bg-white.shadow-sm.mb-4 {
        padding: 12px !important;
        position: relative !important;
    }

    #newRequest-view h1.text-2xl {
        font-size: 1.25rem !important;
    }

    /* 申請單雙欄改為單欄 */
    #newRequest-view .layout-two-column {
        flex-direction: column !important;
        gap: 12px !important;
    }

    #newRequest-view .layout-two-column > .layout-pane {
        width: 100% !important;
        max-width: 100% !important;
    }

    #newRequest-view .layout-two-column > .layout-pane.sidebar-pane {
        position: relative !important;
        top: auto !important;
        order: -1; /* 側邊欄移到上方 */
    }

    /* 商品列表網格 - 兩欄 */
    .product-list.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 商品卡片調整 */
    .product-list .bg-white {
        padding: 8px !important;
    }

    .product-list img {
        height: 80px !important;
    }

    .product-list .text-lg {
        font-size: 0.875rem !important;
    }

    /* 分類導覽 */
    .product-categories {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px !important;
        gap: 6px !important;
    }

    .product-category-btn {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
        flex-shrink: 0;
    }

    /* 購物車頁面 */
    #cart-view {
        padding: 8px !important;
    }

    #cart-view h1.text-2xl {
        font-size: 1.25rem !important;
    }

    /* 購物車雙欄改為單欄 */
    #cart-view .flex.flex-col.lg\\:flex-row {
        flex-direction: column !important;
    }

    #cart-view .lg\\:w-2\\/3,
    #cart-view .lg\\:w-1\\/3 {
        width: 100% !important;
    }

    /* 購物車項目列表 - 單欄 */
    .cart-items ul.grid {
        grid-template-columns: 1fr !important;
    }

    /* 購物車項目內部調整 */
    .cart-items li .flex.items-start {
        flex-direction: column;
    }

    .cart-items li .w-1\\/3,
    .cart-items li .w-1\\/2 {
        width: 100% !important;
    }

    /* 側邊欄調整 */
    #new-request-sidebar {
        height: auto !important;
        max-height: none !important;
    }

    #new-request-sidebar .sidebar-section {
        padding: 8px !important;
    }

    /* 按鈕群組 */
    .header-total-actions {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .header-total-actions button {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    /* 詳情頁面 */
    #detailView-view {
        padding: 8px !important;
    }

    #detailView-view .grid {
        grid-template-columns: 1fr !important;
    }

    /* 表單頁面調整 */
    #productForm-view,
    #userForm-view,
    #vendorForm-view,
    #headerForm-view,
    #classroomForm-view,
    #invoiceForm-view,
    #departmentForm-view,
    #announcementForm-view {
        padding: 12px !important;
    }

    /* 表單網格改為單欄 */
    [class*="Form-view"] .grid.grid-cols-2,
    [class*="Form-view"] .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* 管理列表頁面 */
    #productManagement-view,
    #userManagement-view,
    #vendorManagement-view,
    #headerManagement-view,
    #classroomManagement-view,
    #invoiceManagement-view,
    #departmentManagement-view,
    #announcementManagement-view,
    #printManagement-view {
        padding: 8px !important;
    }

    /* 管理列表表格 */
    [class*="Management-view"] table {
        font-size: 0.75rem;
    }

    [class*="Management-view"] th,
    [class*="Management-view"] td {
        padding: 6px 4px !important;
    }

    /* Floating toolbar */
    .floating-toolbar {
        right: 8px !important;
        bottom: 8px !important;
        max-width: calc(100vw - 16px);
    }

    .floating-toolbar .toolbar-content {
        max-width: calc(100vw - 80px);
        overflow-x: auto;
    }

    /* 浮動工具堆疊 */
    .floating-tool-stack {
        right: 8px !important;
        bottom: 60px !important;
        max-width: calc(100vw - 16px);
    }

    /* 模態框全螢幕 */
    .modal-container > div,
    [id$="-modal"] > div {
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .modal-container,
    [id$="-modal"] {
        padding: 0 !important;
    }

    /* 模態框內容可滾動 */
    .modal-container > div > div,
    [id$="-modal"] > div > div {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    /* 通知容器 */
    #notification-container {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        top: auto !important;
    }

    #notification-container > div {
        max-width: 100% !important;
    }
}

/* 超小螢幕裝置 (小於 480px) */
@media (max-width: 479px) {
    body {
        padding: 4px !important;
        font-size: 13px;
    }

    /* 商品列表單欄 */
    .product-list.grid {
        grid-template-columns: 1fr !important;
    }

    /* 表頭標題縮小 */
    h1.text-2xl,
    .text-2xl {
        font-size: 1.125rem !important;
    }

    h2.text-xl,
    .text-xl {
        font-size: 1rem !important;
    }

    /* 按鈕更小 */
    button {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    /* 輸入框調整 */
    input,
    select,
    textarea {
        font-size: 16px !important; /* 防止 iOS 縮放 */
        padding: 8px !important;
    }

    /* 表格進一步縮小 */
    table {
        font-size: 0.7rem;
    }

    th, td {
        padding: 4px 2px !important;
    }

    /* 分類標籤更緊湊 */
    .product-category-btn {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
    }
}

/* 橫向模式優化 (手機橫放) */
@media (max-height: 500px) and (orientation: landscape) {
    /* 減少垂直間距 */
    #app-header {
        padding: 4px 8px !important;
        margin-bottom: 4px !important;
    }

    /* 模態框高度限制 */
    .modal-container > div,
    [id$="-modal"] > div {
        max-height: 100vh !important;
    }

    /* 側邊欄高度限制 */
    #new-request-sidebar {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
}

/* 觸控裝置優化 */
@media (hover: none) and (pointer: coarse) {
    /* 增加觸控區域 */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }

    /* 移除 hover 效果以避免觸控延遲 */
    button:hover,
    a:hover {
        transition: none !important;
    }

    /* 增加列表項目的點擊區域 */
    table tr {
        min-height: 48px;
    }

    table td {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* 滾動條樣式優化 */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 3px;
    }

    /* 分類按鈕觸控優化 */
    .product-category-btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 列印媒體隱藏不必要元素 */
@media print {
    #floating-toolbar,
    #floating-management-stack,
    #floating-attachment-stack,
    #notification-container,
    .floating-toolbar,
    .floating-tool-stack {
        display: none !important;
    }

    body {
        padding: 0 !important;
        background: white !important;
    }

    #app-container {
        overflow: visible !important;
    }
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-normal: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    button {
        border: 2px solid currentColor !important;
    }

    input,
    select,
    textarea {
        border: 2px solid #000000 !important;
    }
}

/* 減少動態效果模式 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cart-item-animate-add,
    .cart-item-animate-quantity,
    .cart-item-animate-remove,
    .cart-flight-ghost {
        animation: none !important;
    }
}

/* ========================================
   手機版專用樣式
   ======================================== */

/* 手機版視圖容器 */
.mobile-view {
    padding: 0;
    background: #f5f5f5;
    min-height: 100vh;
}

/* 手機版頂部標題列 */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.mobile-back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-back-btn:hover {
    background: rgba(255,255,255,0.3);
}

.mobile-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.mobile-badge {
    background: rgba(255,255,255,0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* 手機版購物車按鈕 */
.mobile-cart-btn {
    position: relative;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-cart-btn:hover {
    background: rgba(255,255,255,0.3);
}

.mobile-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 手機版空狀態 */
.mobile-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.mobile-empty-state svg {
    margin-bottom: 16px;
}

/* 手機版簽核容器 */
.mobile-approval-container {
    min-height: 100vh;
    background: #f5f5f5;
}

/* 手機版簽核列表 */
.mobile-approval-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 手機版簽核卡片 */
.mobile-approval-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mobile-approval-card:active {
    transform: scale(0.98);
}

.mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.mobile-request-id {
    font-weight: 600;
    color: #4f46e5;
    font-size: 14px;
}

.mobile-request-date {
    font-size: 12px;
    color: #64748b;
}

.mobile-card-body {
    padding: 16px;
}

.mobile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.mobile-info-row:last-child {
    border-bottom: none;
}

.mobile-label {
    font-size: 13px;
    color: #64748b;
}

.mobile-value {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.mobile-header-tag {
    background: #e0e7ff;
    color: #4f46e5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.mobile-amount {
    color: #059669;
    font-weight: 600;
}

.mobile-card-footer {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* 手機版按鈕 */
.mobile-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-btn-secondary {
    background: #f1f5f9;
    color: #475569;
}

.mobile-btn-secondary:hover {
    background: #e2e8f0;
}

.mobile-btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.mobile-btn-success:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.mobile-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.mobile-btn-danger:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* 手機版訂購容器 */
.mobile-order-container {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 80px;
}

/* 手機版搜尋列 */
.mobile-search-bar {
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.mobile-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-search-icon {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    color: #9ca3af;
}

.mobile-search-input {
    width: 100%;
    padding: 12px 40px 12px 44px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    transition: border-color 0.2s;
}

.mobile-search-input:focus {
    outline: none;
    border-color: #667eea;
}

.mobile-search-clear {
    position: absolute;
    right: 12px;
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 手機版分類標籤 */
.mobile-category-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-category-tabs::-webkit-scrollbar {
    display: none;
}

.mobile-category-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-category-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* 手機版商品列表 */
.mobile-product-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 手機版商品卡片 */
.mobile-product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.mobile-product-card.in-cart {
    border: 2px solid #667eea;
    background: #f5f3ff;
}

.mobile-product-image {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f5f9;
}

.mobile-product-info {
    flex: 1;
    min-width: 0;
}

.mobile-product-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-product-spec {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-product-price {
    font-size: 14px;
    font-weight: 600;
    color: #059669;
    margin-top: 4px;
}

.mobile-product-actions {
    flex-shrink: 0;
}

/* 手機版加入購物車按鈕 */
.mobile-add-btn {
    min-width: 70px;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.mobile-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.mobile-add-btn:active {
    transform: translateY(0);
}

/* 手機版數量控制 */
.mobile-quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
}

.mobile-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: white;
    color: #667eea;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mobile-qty-btn:hover {
    background: #667eea;
    color: white;
}

.mobile-qty-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
    color: #1e293b;
}

/* 手機版購物車摘要 */
.mobile-cart-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: white;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}

.mobile-cart-info {
    display: flex;
    flex-direction: column;
}

.mobile-cart-count {
    font-size: 12px;
    color: #64748b;
}

.mobile-cart-total {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.mobile-checkout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-checkout-btn:hover {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

/* 手機版詳情模態框 */
.mobile-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mobile-detail-content {
    width: 100%;
    max-height: 90vh;
    background: white;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.mobile-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.mobile-detail-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.mobile-detail-close {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-detail-body {
    max-height: calc(90vh - 140px);
    overflow-y: auto;
    padding: 20px;
}

.mobile-detail-section {
    margin-bottom: 20px;
}

.mobile-detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-detail-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* 手機版品項列表 */
.mobile-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-item-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
}

.mobile-item-image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: #e2e8f0;
}

.mobile-item-info {
    flex: 1;
}

.mobile-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.mobile-item-detail {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.mobile-item-amount {
    font-size: 14px;
    font-weight: 600;
    color: #059669;
    margin-top: 4px;
}

/* 響應式調整 */
@media (min-width: 768px) {
    .mobile-view {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }

    .mobile-detail-content {
        max-width: 480px;
        border-radius: 24px;
        margin: auto;
    }
}



/* ========================================
   手機版介面樣式 (從 SPSV30.html 同步)
   ======================================== */

/* 手機版共用樣式 */
.mobile-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mobile-view .mobile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.mobile-view .mobile-header h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.mobile-view .mobile-header .close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.mobile-view .mobile-header .close-btn:hover {
    background: rgba(255,255,255,0.3);
}
.mobile-view .mobile-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}
.mobile-view .mobile-tabs {
    display: flex;
    background: white;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
    overflow-x: auto;
}
.mobile-view .mobile-tab {
    flex: 1;
    min-width: 80px;
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.mobile-view .mobile-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: #f8f9ff;
}
.mobile-view .mobile-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}
.mobile-view .mobile-card-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mobile-view .mobile-card-body {
    padding: 12px 16px;
}
.mobile-view .mobile-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.mobile-view .mobile-badge.pending { background: #fef3c7; color: #92400e; }
.mobile-view .mobile-badge.approved { background: #d1fae5; color: #065f46; }
.mobile-view .mobile-badge.rejected { background: #fee2e2; color: #991b1b; }
.mobile-view .mobile-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mobile-view .mobile-btn.primary { background: #667eea; color: white; }
.mobile-view .mobile-btn.primary:hover { background: #5a67d8; }
.mobile-view .mobile-btn.success { background: #10b981; color: white; }
.mobile-view .mobile-btn.success:hover { background: #059669; }
.mobile-view .mobile-btn.danger { background: #ef4444; color: white; }
.mobile-view .mobile-btn.danger:hover { background: #dc2626; }
.mobile-view .mobile-btn.secondary { background: #e5e7eb; color: #374151; }
.mobile-view .mobile-btn.secondary:hover { background: #d1d5db; }
.mobile-view .mobile-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mobile-view .mobile-item-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    align-items: flex-start;
}
.mobile-view .mobile-item-row:last-child { border-bottom: none; }
.mobile-view .mobile-item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.mobile-view .mobile-item-info {
    flex: 1;
    min-width: 0;
}
.mobile-view .mobile-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-view .mobile-item-detail {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}
.mobile-view .mobile-item-price {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    text-align: right;
    flex-shrink: 0;
}
.mobile-view .mobile-search {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: white;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}
.mobile-view .mobile-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.mobile-view .mobile-search input:focus { border-color: #667eea; }
.mobile-view .mobile-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.mobile-view .mobile-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.mobile-view .mobile-action-bar {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border-top: 1px solid #e5e5e5;
    flex-shrink: 0;
}
.mobile-view .mobile-action-bar .mobile-btn { flex: 1; }
/* 手機訂購 - 商品卡片 */
.mobile-view .mobile-product-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    padding: 12px;
    gap: 12px;
}
.mobile-view .mobile-product-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.mobile-view .mobile-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mobile-view .mobile-product-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin-bottom: 4px;
}
.mobile-view .mobile-product-spec {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}
.mobile-view .mobile-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #667eea;
}
.mobile-view .mobile-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.mobile-view .mobile-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}
.mobile-view .mobile-qty-btn {
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-view .mobile-qty-btn:active { background: #e5e5e5; }
.mobile-view .mobile-qty-input {
    width: 40px;
    height: 32px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.mobile-view .mobile-add-btn {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.mobile-view .mobile-add-btn:active { background: #5a67d8; }
/* 手機購物車浮動按鈕 */
.mobile-view .mobile-cart-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
}
.mobile-view .mobile-cart-fab svg {
    width: 24px;
    height: 24px;
    fill: white;
}
.mobile-view .mobile-cart-fab .cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
/* 統計資訊條 */
.mobile-view .mobile-stats-bar {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    background: white;
    border-bottom: 1px solid #e5e5e5;
    overflow-x: auto;
    flex-shrink: 0;
}
.mobile-view .mobile-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.mobile-view .mobile-stat-label {
    font-size: 12px;
    color: #888;
}
.mobile-view .mobile-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}
.mobile-view .mobile-stat-value.pending { color: #f59e0b; }
.mobile-view .mobile-stat-value.success { color: #10b981; }

/* 手機功能選擇畫面 */
.mobile-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 8px;
}

@media (min-width: 640px) {
    .mobile-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mobile-menu-card {
    position: relative;
    background: white;
    border: none;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mobile-menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.mobile-menu-card:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.mobile-menu-icon {
    font-size: 48px;
    line-height: 1;
}

.mobile-menu-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.mobile-menu-desc {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.mobile-menu-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

/* ========================================
   深色主題 - 附件列表視窗樣式
   適用於透過 renderModal 渲染的附件列表
   ======================================== */

/* 鬼滅主題 - 附件列表視窗 */
.theme-demonslayer #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-demonslayer #modal-content li .text-gray-700,
.theme-demonslayer #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* 咒術主題 - 附件列表視窗 */
.theme-jujutsu #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-jujutsu #modal-content li .text-gray-700,
.theme-jujutsu #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* 漫威主題 - 附件列表視窗 */
.theme-marvel #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-marvel #modal-content li .text-gray-700,
.theme-marvel #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* 麥塊主題 - 附件列表視窗 */
.theme-minecraft #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-minecraft #modal-content li .text-gray-700,
.theme-minecraft #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* EVA主題 - 附件列表視窗 */
.theme-eva #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-eva #modal-content li .text-gray-700,
.theme-eva #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* 女神主題 (Persona) - 附件列表視窗 */
.theme-persona #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-persona #modal-content li .text-gray-700,
.theme-persona #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* 魔獸主題 - 附件列表視窗 */
.theme-warcraft #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-warcraft #modal-content li .text-gray-700,
.theme-warcraft #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* 小精靈主題 - 附件列表視窗 */
.theme-pacman #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-pacman #modal-content li .text-gray-700,
.theme-pacman #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}

/* 鋼彈主題 - 附件列表視窗 */
.theme-gundam #modal-content li.bg-gray-50 {
    background: var(--card-bg-color) !important;
    border-color: var(--border-color) !important;
}
.theme-gundam #modal-content li .text-gray-700,
.theme-gundam #modal-content li .text-gray-500 {
    color: var(--text-color) !important;
}