/*
 * 应用主题系统
 * 定义所有可切换主题的 CSS 变量
 * 通过 body[data-theme] 属性切换
 * 新增主题只需在此文件添加 data-theme 块 + 在 theme-toggle.js 注册
 */

/* ================================================================
   紫蓝主题（默认）
   对应 xycjstyle-app.html 的蓝紫色赛博朋克风格
   ================================================================ */
:root {
    /* ---- 基础色板 ---- */
    --theme-accent: #00d4ff;
    --theme-accent-glow: #00f0ff;
    --theme-accent-purple: #b44aff;
    --theme-bg-dark: #0a0e17;
    --theme-bg-card: #0d1520;
    --theme-bg-soft: #1a2a3a;
    --theme-border: #1a2a3a;
    --theme-border-light: rgba(0, 212, 255, 0.15);
    --theme-text-main: #e0e7ef;
    --theme-text-muted: #6a8fa8;
    --theme-text-faint: #94a3b8;
    --theme-success: #00ff88;
    --theme-warning: #ff8800;
    --theme-error: #ff4444;
    --theme-pink: #ff4a8d;
    --theme-yellow: #ffd700;
    --theme-shadow: rgba(0, 212, 255, 0.15);
    --theme-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- 渐变 ---- */
    --theme-gm: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-purple), var(--theme-pink));
    --theme-gf: linear-gradient(135deg, var(--theme-error), var(--theme-warning), var(--theme-yellow));

    /* ---- 绿蓝主题特有变量（紫蓝下使用兼容值） ---- */
    --neon-green: #00ff88;
    --neon-cyan: var(--theme-accent);
    --neon-blue: #0088ff;
    --dark-bg: var(--theme-bg-dark);
    --card-bg: var(--theme-bg-card);
    --card-border: var(--theme-border-light);
    --glow-green: 0 0 20px rgba(0, 255, 136, 0.3);
    --glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3);
    --gm-green-blue: var(--theme-gm);

    /* ---- 主页主题色（兼容 home.html 的 --theme-* 变量） ---- */
    --theme-primary: var(--theme-accent-purple);
    --theme-secondary: var(--theme-accent);
}

/* ================================================================
   绿蓝主题
   对应 kmstyle-jiami.html 的绿黄色赛博朋克风格（原 theme-green-blue）
   ================================================================ */
body[data-theme="green-blue"] {
    --theme-accent: #00e5ff;
    --theme-accent-glow: #00ffff;
    --theme-accent-purple: #00ff88;
    --theme-bg-dark: #060a0e;
    --theme-bg-card: rgba(8, 18, 28, 0.88);
    --theme-bg-soft: #0a1420;
    --theme-border: rgba(0, 229, 255, 0.12);
    --theme-border-light: rgba(0, 229, 255, 0.15);
    --theme-text-main: #c8d8e8;
    --theme-text-muted: #7a9aaa;
    --theme-text-faint: #5a7a8a;
    --theme-success: #00ff88;
    --theme-warning: #ff8800;
    --theme-error: #ff4444;
    --theme-pink: #ff4a8d;
    --theme-yellow: #ffd700;
    --theme-shadow: rgba(0, 229, 255, 0.15);
    --theme-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- 渐变 ---- */
    --theme-gm: linear-gradient(135deg, #00ff88, #00e5ff, #0088ff);
    --theme-gf: linear-gradient(135deg, var(--theme-error), var(--theme-warning), var(--theme-yellow));

    /* ---- 绿蓝主题特有变量 ---- */
    --neon-green: #00ff88;
    --neon-cyan: #00e5ff;
    --neon-blue: #0088ff;
    --dark-bg: #060a0e;
    --card-bg: rgba(8, 18, 28, 0.88);
    --card-border: rgba(0, 229, 255, 0.12);
    --glow-green: 0 0 20px rgba(0, 255, 136, 0.3);
    --glow-cyan: 0 0 20px rgba(0, 229, 255, 0.3);
    --gm-green-blue: linear-gradient(135deg, #00ff88, #00e5ff, #0088ff);

    /* ---- 主页主题色 ---- */
    --theme-primary: var(--theme-accent-purple);
    --theme-secondary: var(--theme-accent);
}

/* ==================== 绿蓝主题：组件级覆盖 ==================== */

body[data-theme="green-blue"] .server-status {
    background: rgba(6, 10, 14, 0.92);
    border: 1px solid rgba(0, 229, 255, 0.15);
}

body[data-theme="green-blue"] .status-light.connected {
    background: var(--neon-green, #00ff88);
    box-shadow: 0 0 15px var(--neon-green, #00ff88);
    animation: pulse-green 2s infinite;
}

body[data-theme="green-blue"] .status-light.disconnected {
    background: #ff4444;
    box-shadow: 0 0 10px #ff4444;
}

body[data-theme="green-blue"] .status-text {
    color: #c8d8e8;
}

body[data-theme="green-blue"] .panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(12px);
}

body[data-theme="green-blue"] .panel-title {
    color: var(--neon-cyan, #00e5ff);
}

body[data-theme="green-blue"] .panel-title::before {
    background: var(--gm-green-blue);
}

body[data-theme="green-blue"] .upload-zone {
    border: 2px dashed rgba(0, 229, 255, 0.3);
    background: rgba(0, 229, 255, 0.03);
}

body[data-theme="green-blue"] .upload-zone:hover {
    border-color: var(--neon-green, #00ff88);
    background: rgba(0, 255, 136, 0.05);
    box-shadow: var(--glow-green, 0 0 20px rgba(0, 255, 136, 0.3));
}

body[data-theme="green-blue"] .upload-zone.dragover,
body[data-theme="green-blue"] .upload-zone.drag-over {
    border-color: var(--neon-green, #00ff88);
    background: rgba(0, 255, 136, 0.08);
    box-shadow: var(--glow-green, 0 0 20px rgba(0, 255, 136, 0.3));
}

body[data-theme="green-blue"] .upload-text {
    color: #a0b8c8;
}

body[data-theme="green-blue"] .upload-hint {
    color: #5a7a8a;
}

body[data-theme="green-blue"] .preview-image {
    border: 1px solid rgba(0, 229, 255, 0.2);
}

body[data-theme="green-blue"] .model-hint,
body[data-theme="green-blue"] .hint-box {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.12);
    color: var(--neon-green, #00ff88);
}

/* 滑块 */
body[data-theme="green-blue"] .slider-value {
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 0.9rem;
    color: var(--neon-cyan, #00e5ff);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

body[data-theme="green-blue"] input[type="range"] {
    background: linear-gradient(90deg,
        rgba(0, 255, 136, 0.2) 0%,
        rgba(0, 229, 255, 0.2) 50%,
        rgba(0, 136, 255, 0.2) 100%);
}

body[data-theme="green-blue"] input[type="range"]::-webkit-slider-thumb {
    background: var(--gm-green-blue);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

body[data-theme="green-blue"] input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
}

body[data-theme="green-blue"] input[type="range"]::-moz-range-thumb {
    background: var(--gm-green-blue);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

body[data-theme="green-blue"] .slider-labels {
    color: #5a7a8a;
}

/* 状态栏 */
body[data-theme="green-blue"] .status-bar {
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.08);
}

body[data-theme="green-blue"] .status-message {
    color: #a0b8c8;
}

body[data-theme="green-blue"] .status-indicator {
    background: var(--neon-cyan, #00e5ff);
    animation: pulse-green 1.5s infinite;
}

body[data-theme="green-blue"] .status-indicator.success {
    background: var(--neon-green, #00ff88);
}

body[data-theme="green-blue"] .status-indicator.error {
    background: #ff4444;
}

body[data-theme="green-blue"] .progress-container {
    background: rgba(0, 229, 255, 0.08);
}

body[data-theme="green-blue"] .progress-bar {
    background: var(--gm-green-blue);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

body[data-theme="green-blue"] .progress-text {
    color: var(--neon-cyan, #00e5ff);
    font-family: 'Courier New', monospace;
}

/* 输出区域 */
body[data-theme="green-blue"] .output-image {
    box-shadow: 0 8px 32px rgba(0, 229, 255, 0.15);
}

body[data-theme="green-blue"] .output-image:hover {
    box-shadow: 0 12px 48px rgba(0, 229, 255, 0.25);
}

body[data-theme="green-blue"] .image-preview-modal {
    background: rgba(0, 0, 0, 0.92);
}

body[data-theme="green-blue"] .image-preview-modal img {
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.2);
}

body[data-theme="green-blue"] .image-preview-close:hover {
    color: var(--neon-green, #00ff88);
}

/* 模型路径 */
body[data-theme="green-blue"] .model-path-title h3 {
    color: var(--neon-cyan, #00e5ff);
}

body[data-theme="green-blue"] .model-path-pre {
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.08);
    padding: 1rem;
    border-radius: 10px;
    color: #a0b8c8;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    overflow-x: auto;
    margin: 0;
}

/* Hero区域 */
body[data-theme="green-blue"] .hero-badge {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: var(--neon-green, #00ff88);
}

body[data-theme="green-blue"] .hero-title .gt {
    background: var(--gm-green-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="green-blue"] .hero-desc {
    color: #7a9aaa;
}

/* 表单选择框 */
body[data-theme="green-blue"] .form-select,
body[data-theme="green-blue"] select.form-select {
    background: rgba(0, 229, 255, 0.06) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    color: #c8d8e8 !important;
    padding-right: 36px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    cursor: pointer;
}

body[data-theme="green-blue"] .form-select:focus {
    border-color: var(--neon-cyan, #00e5ff) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2) !important;
}

body[data-theme="green-blue"] .form-select option {
    background: #0a1420 !important;
    color: #c8d8e8 !important;
}

/* 旧版卡片布局兼容（SDXL等） */
body[data-theme="green-blue"] .node-card {
    background: var(--card-bg);
    border-color: var(--card-border);
}

body[data-theme="green-blue"] .section-label,
body[data-theme="green-blue"] .section-label::before {
    color: var(--neon-green, #00ff88) !important;
    background: var(--neon-green, #00ff88) !important;
}

body[data-theme="green-blue"] .submit-btn {
    background: var(--gm-green-blue);
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

body[data-theme="green-blue"] .submit-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.4);
}

body[data-theme="green-blue"] .glow {
    background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.06), transparent 60%);
}

body[data-theme="green-blue"] .hero {
    background: var(--card-bg);
    border-color: var(--card-border);
}

body[data-theme="green-blue"] .hero .badge {
    background: rgba(0, 255, 136, 0.08);
    border-color: rgba(0, 255, 136, 0.25);
    color: var(--neon-green, #00ff88);
}

body[data-theme="green-blue"] .progress-fill {
    background: var(--gm-green-blue);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

/* 分割线 */
body[data-theme="green-blue"] .resizer {
    background: linear-gradient(180deg,
        rgba(0, 255, 136, 0.3) 0%,
        rgba(0, 229, 255, 0.3) 50%,
        rgba(0, 136, 255, 0.3) 100%);
}

body[data-theme="green-blue"] .resizer:hover {
    background: linear-gradient(180deg,
        rgba(0, 255, 136, 0.6) 0%,
        rgba(0, 229, 255, 0.6) 50%,
        rgba(0, 136, 255, 0.6) 100%);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

body[data-theme="green-blue"] .resizer::before {
    content: '\22EE';
    color: rgba(0, 229, 255, 0.6);
}

/* ================================================================
   预留：后续新增主题在此添加
   示例：
   body[data-theme="neon-pink"] {
       --theme-accent: #ff2d95;
       --theme-accent-purple: #ff6b6b;
       ...
   }
   ================================================================ */