/* ============================================
   空度AI 主题文件
   包含所有颜色变量和暗夜模式样式
   ============================================ */

/* === CSS 变量 === */
:root {
    --pri: #26A4DB;
    --anim-fast: 0.15s;
    --anim-normal: 0.3s;
    --anim-slow: 0.5s;
    --anim-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-color-glow: rgba(38, 164, 219, 0.4);
    --pri-h: #1e8ec0;
    --pri-l: #eaf6fb;
    --bg: #f5f5f5;
    --surface: #fff;
    --srf-h: #f9fafb;
    --border: #e5e7eb;
    --txt: #1d1d1f;
    --txt2: #9ca3af;
    --txt3: #9ca3af;
    --danger: #ef4444;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 4px 16px rgba(0,0,0,.08);
    --slider-track: #9ca3af;
}

/* === 暗夜模式 CSS 变量 === */
html.dark {
    --bg: #0f0f0f;
    --anim-color-glow: rgba(38, 164, 219, 0.5);
    --surface: #1c1c1e;
    --srf-h: #262626;
    --border: #3a3a3c;
    --txt: #f5f5f7;
    --txt2: #98989d;
    --txt3: #9ca3af;
    --slider-track: #bbb;
    --shadow: 0 4px 16px rgba(0,0,0,.4);
    --pri-l: rgba(38,164,219,.15);
}

/* === 暗夜模式全局 === */
html.dark body { background-color: var(--bg) !important; color: var(--txt); }
html.dark .bg-white { background-color: #1c1c1e !important; }
html.dark .bg-gray-100 { background-color: var(--srf-h) !important; }
html.dark .bg-gray-200 { background-color: #374151 !important; }
html.dark .text-gray-500 { color: #98989d !important; }
html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { color: #f5f5f7 !important; }
html.dark .border-b { border-color: #2a2a2a !important; }
html.dark input, html.dark textarea, html.dark select { background-color: #1c1c1e !important; color: #f5f5f7 !important; border-color: #3a3a3c !important; }

/* === 暗夜模式 UI 组件 === */
html.dark #promptInput { background: transparent !important; border-color: transparent !important; color: #f5f5f7 !important; }
html.dark #promptInput:focus { border-color: transparent !important; box-shadow: none !important; }
html.dark #bottomModelBtn { background: rgba(59,130,246,.25) !important; }
html.dark #bottomSizeBtn, html.dark #bottomRatioBtn { background: #3a3a3c !important; color: #f5f5f7 !important; }
html.dark #sendBtn { background: #26A4DB !important; }
html.dark #customContextMenu { background: #1c1c1e; border-color: #3a3a3c; color: #f5f5f7; }
html.dark #customContextMenu .hover\:bg-gray-100:hover { background-color: #2c2c2e !important; }
html.dark #customContextMenu .text-red-500 { color: #ff453a !important; }
html.dark .back-btn { background: #3a3a3c !important; color: #f5f5f7 !important; }
html.dark .back-btn:hover { background: #4a4a4c !important; }
html.dark .dropdown-menu { background: #1c1c1e; border-color: var(--border); }

/* === 暗夜模式 Canvas === */
html.dark .canvas-world { background-color: #1a1a1a; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 48px), repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 48px) !important; }
html.dark .canvas-item-label-top { background: rgba(28,28,30,0.9); color: #f5f5f7; }
html.dark .canvas-item-label-pixel { background: rgba(28,28,30,0.8); color: #98989d; }
html.dark .canvas-item-label-time { background: rgba(28,28,30,0.8); color: #98989d; }

/* === 暗夜模式 模态框 === */
html.dark .modal-content { background: #1c1c1e; color: #f5f5f7; }
html.dark .modal-title { color: #f5f5f7; }
html.dark .modal-input { background: #2c2c2e; border-color: #3a3a3c; color: #f5f5f7; }
html.dark .modal-btn-cancel { background: #2c2c2e; color: #f5f5f7; }
html.dark .msg-modal-content { background: #1c1c1e; color: #f5f5f7; }
html.dark .msg-modal-text { color: #f5f5f7; }

/* === 暗夜模式 滑块 === */
html.dark input[type=range] { background: var(--slider-track) !important; }
html.dark input[type=range]::-webkit-slider-thumb { background: #26A4DB; border: 2px solid #1c1c1e; box-shadow: 0 0 4px rgba(59,130,246,.4); }
html.dark input[type=range]::-moz-range-thumb { background: #26A4DB; border: 2px solid #1c1c1e; }

/* === 滑块基础样式（全局） === */
input[type=range] { -webkit-appearance: none !important; appearance: none !important; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pri); cursor: pointer; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--pri); cursor: pointer; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* 普通滑块轨道 */
input[type=range]:not(#cbCyanRed):not(#cbMagentaGreen):not(#cbYellowBlue):not(#colorTemp) { background: var(--slider-track) !important; height:12px; border-radius:6px; }
input[type=range]:not(#cbCyanRed):not(#cbMagentaGreen):not(#cbYellowBlue):not(#colorTemp)::-webkit-slider-runnable-track { background: var(--slider-track) !important; height:12px; border-radius:6px; }
input[type=range]:not(#cbCyanRed):not(#cbMagentaGreen):not(#cbYellowBlue):not(#colorTemp)::-moz-range-track { background: var(--slider-track) !important; height:12px; border-radius:6px; border:none; }

/* 渐变滑块轨道 — 直接写在伪元素上 */
#cbCyanRed { background: transparent !important; }
#cbCyanRed { background: linear-gradient(to right,#00e5ff,#999,#ff5252) !important; height:12px; border-radius:6px; }
#cbCyanRed::-moz-range-track { background: transparent !important; }

#cbMagentaGreen { background: transparent !important; }
#cbMagentaGreen { background: linear-gradient(to right,#ff4081,#999,#69f0ae) !important; height:12px; border-radius:6px; }
#cbMagentaGreen::-moz-range-track { background: transparent !important; }

#cbYellowBlue { background: transparent !important; }
#cbYellowBlue { background: linear-gradient(to right,#ffea00,#999,#26A4DB) !important; height:12px; border-radius:6px; }
#cbYellowBlue::-moz-range-track { background: transparent !important; }

#colorTemp { background: transparent !important; }
#colorTemp { background: linear-gradient(to right,#ff9800,#fff 50%,#26A4DB) !important; height:12px; border-radius:6px; }

#cbCyanRed::-webkit-slider-runnable-track,
#cbMagentaGreen::-webkit-slider-runnable-track,
#cbYellowBlue::-webkit-slider-runnable-track,
#colorTemp::-webkit-slider-runnable-track { background: transparent !important; }#colorTemp::-moz-range-track { background: transparent !important; }
        #cbCyanRed::-webkit-slider-thumb,
        #cbMagentaGreen::-webkit-slider-thumb,
        #cbYellowBlue::-webkit-slider-thumb,
        #colorTemp::-webkit-slider-thumb { margin-top: -3px; }

/* === 滑块基础样式（全局） === */
input[type=range] { -webkit-appearance: none !important; appearance: none !important; background: var(--slider-track) !important; height:12px; border-radius:6px; }
input[type=range]::-webkit-slider-runnable-track { height:12px; border-radius:6px; background: var(--slider-track) !important; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pri); cursor: pointer; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
input[type=range]::-moz-range-track { height:12px; border-radius:6px; background: var(--slider-track) !important; border: none; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--pri); cursor: pointer; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* === Tailwind Blue Override - #26A4DB === */
.bg-blue-50, .hover\:bg-blue-50:hover { background-color: #eaf6fb !important; }
.bg-blue-100 { background-color: #d5edf7 !important; }
.bg-blue-200 { background-color: #a0ddf2 !important; }
.bg-blue-300 { background-color: #7dc9eb !important; }
.bg-blue-400 { background-color: #52b8e4 !important; }
.bg-blue-500 { background-color: #26A4DB !important; }
.bg-blue-600 { background-color: #1e8ec0 !important; }
.bg-blue-700 { background-color: #1878a6 !important; }
.bg-blue-800 { background-color: #12628c !important; }
.bg-blue-900 { background-color: #0c4c72 !important; }
.text-blue-500 { color: #26A4DB !important; }
.text-blue-600 { color: #1e8ec0 !important; }
.text-blue-700 { color: #1878a6 !important; }
.hover\:text-blue-700:hover { color: #1878a6 !important; }
.border-blue-500 { border-color: #26A4DB !important; }
html.dark .dark\:hover\:bg-blue-900:hover { background-color: #0c4c72 !important; }
html.dark .dark\:bg-blue-900 { background-color: #0c4c72 !important; }
html.dark .dark\:bg-blue-800 { background-color: #12628c !important; }
html.dark .dark\:text-blue-400 { color: #52b8e4 !important; }
/* === End Override === */


/* === 动画增强 === */
.btn-hover-lift { transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease; }
.btn-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn-active-scale { transition: transform 0.1s ease; }
.btn-active-scale:active { transform: scale(0.97); }
.card-hover-lift { transition: transform var(--anim-normal) var(--anim-ease-out), box-shadow var(--anim-normal) var(--anim-ease-out); }
.card-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
html.dark .card-hover-lift:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.input-focus-glow { transition: box-shadow var(--anim-fast) ease; }
.input-focus-glow:focus { box-shadow: 0 0 0 3px rgba(38,164,219,0.2); }
html.dark .input-focus-glow:focus { box-shadow: 0 0 0 3px rgba(38,164,219,0.3); }

/* Toast 通知 */
.toast-enter { animation: toastIn 0.35s var(--anim-spring) forwards; }
.toast-exit { animation: toastOut 0.25s ease forwards; }
@keyframes toastIn { from { opacity:0; transform:translateY(20px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(-10px) scale(0.95); } }

/* 下拉菜单弹性增强 */
.dropdown-menu { animation: dropdownPop 0.2s var(--anim-spring); transform-origin: bottom left; }
@keyframes dropdownPop { from { opacity:0; transform:scale(0.92) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* 交错延迟 */
.stagger-1{transition-delay:0s}.stagger-2{transition-delay:.06s}.stagger-3{transition-delay:.12s}.stagger-4{transition-delay:.18s}
.stagger-5{transition-delay:.24s}.stagger-6{transition-delay:.30s}.stagger-7{transition-delay:.36s}.stagger-8{transition-delay:.42s}

/* 无障碍 */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}