/*
 * 绿蓝皮肤 —— ADR-026：自 app-themes.css 拆出
 * 注：下方组件级覆盖是历史写法（非令牌赋值），批 3 将逐步收敛为令牌引用
 */

:root[data-theme="green-blue"] {
    /* ADR-026：React 壳导航/页签的青色基色（purple-blue 皮肤用默认的紫色 180, 74, 255） */
    --nav-tint: 0, 229, 255;

    --theme-accent: #00e5ff;
    --theme-accent-glow: #00ffff;
    --theme-accent-purple: #00ff88;
    /* ADR-026：强调色 RGB 三元组，供 rgba(var(--…-rgb), α) 形式的边框/发光引用 */
    --theme-accent-rgb: 0, 229, 255;
    --theme-accent-purple-rgb: 0, 255, 136;
    --theme-bg-dark: #060a0e;
    --theme-bg-card: rgba(8, 18, 28, 0.88);
    --theme-bg-soft: #0a1420;
    /* ADR-026：底色 RGB 三元组，供半透明遮罩/页头等 rgba() 引用 */
    --theme-bg-dark-rgb: 6, 10, 14;
    --theme-bg-card-rgb: 8, 18, 28;
    --theme-bg-soft-rgb: 10, 20, 32;
    --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;
    /* ADR-026：语义色 RGB 三元组，供 rgba() 底色/描边引用 */
    --theme-success-rgb: 0, 255, 136;
    --theme-warning-rgb: 255, 136, 0;
    --theme-error-rgb: 255, 68, 68;
    --theme-pink-rgb: 255, 74, 141;
    --theme-yellow-rgb: 255, 215, 0;
    --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));

    /* ---- 绿蓝主题特有变量 ---- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 滑块 */
:root[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(--theme-accent, #00e5ff);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

:root[data-theme="green-blue"] input[type="range"]::-webkit-slider-runnable-track,
:root[data-theme="green-blue"] input[type="range"]::-moz-range-track {
    background: rgba(0, 229, 255, 0.22);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 模型路径（ADR-026 批 3：结构声明已下沉到 cyberpunk-unified.css，此处只保留视觉覆盖） */
:root[data-theme="green-blue"] .model-path-title h3 {
    color: var(--theme-accent, #00e5ff);
}

:root[data-theme="green-blue"] .model-path-pre {
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.08);
    color: #a0b8c8;
}

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

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

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

/* 表单选择框 */
:root[data-theme="green-blue"] .form-select,
:root[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;
}

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

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

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

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

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

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

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

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

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

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

/* 分割线 */
:root[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%);
}

:root[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);
}

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