@import url("Faetu.theme.qagent.css");

/* 默认主题变量（当未设置 theme 属性时使用）
   ⚠️ 注意：--qmtink-* 系列必须在此默认作用域中定义，
   否则未设置 theme 属性的页面会取到未定义变量，导致卡片背景透明。 */
:root {
    --qmtink-primary: #1E9FFF;
    /* 落在主色填充上的对比文字色（深色主题的主色偏亮，需用深色文字保证可读） */
    --qmtink-primary-text: #ffffff;
    /* 主色的浅底：选中项/高亮块底色，各主题重映射（浅色主题里灰底与白底过于接近，靠它拉开对比） */
    --qmtink-primary-soft: #E8F1FF;
    /* 侧栏父级分组行的条带底色：比侧栏底色再深一档，与子项面板（主表面）拉开层次 */
    --qmtink-bg-group: #EDEFF3;
    /* 桌面图标文字阴影：浅色壁纸主题需改成浅色阴影 */
    --desktop-icon-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --qmtink-primary-hover: #1890ff;
    --qmtink-success: #22c55e;
    --qmtink-warning: #f59e0b;
    --qmtink-error: #ef4444;
    --qmtink-info: #3b82f6;

    --qmtink-bg-primary: #ffffff;
    --qmtink-bg-secondary: #f8fafc;
    --qmtink-bg-tertiary: #f1f5f9;

    --qmtink-text-primary: #1e293b;
    --qmtink-text-secondary: #64748b;
    --qmtink-text-muted: #94a3b8;

    --qmtink-border: #e2e8f0;
    --qmtink-border-light: #f1f5f9;

    /* 行 / 列表项悬停底色：浅色主题用「深色叠加」，深色主题必须换成「浅色叠加」，否则看不见 */
    --qmtink-hover-bg: rgba(0, 0, 0, 0.03);
    --qmtink-hover-bg-strong: rgba(0, 0, 0, 0.06);
    /* 徽章 / 标签等小色块底色（同上，深色主题需反转） */
    --qmtink-subtle-bg: rgba(0, 0, 0, 0.06);

    --desktop-confirm-overlay: rgba(0, 0, 0, 0.3);
    --desktop-confirm-bg: rgba(255, 255, 255, 0.95);
    --desktop-confirm-text: #374151;
    --desktop-confirm-btn-border: rgba(0, 0, 0, 0.2);
    --desktop-confirm-btn-primary-bg: #3b82f6;
    --desktop-confirm-btn-primary-text: #ffffff;
    --desktop-toast-bg: rgba(255, 255, 255, 0.95);
    --desktop-toast-text: #4b5563;
}

:root[theme="dark"] {
    --qmtink-primary: #40a9ff;
    --qmtink-primary-hover: #69c0ff;
    --qmtink-primary-soft: #1E2A45;
    --qmtink-bg-group: #232B3A;
    --qmtink-success: #34d399;
    --qmtink-warning: #fbbf24;
    --qmtink-error: #f87171;
    --qmtink-info: #60a5fa;

    /* 深色主题的三层表面必须刻意拉开，否则「卡片 / 表头 / 页面底」会糊成一片：
       primary（卡片、工具栏、表格主体）最亮 → secondary（斑马纹、次级面）居中 → tertiary（页面底、侧栏、表头）最深。
       原先 tertiary 与 primary 同为 #1e293b，是"对比不清晰"的根因之一。 */
    --qmtink-bg-primary: #1e293b;
    --qmtink-bg-secondary: #131c2e;
    --qmtink-bg-tertiary: #0a1120;

    --qmtink-text-primary: #f8fafc;
    --qmtink-text-secondary: #cbd5e1;
    /* 原 #64748b 对 #1e293b 只有 3.07:1（低于 WCAG AA 要求的 4.5:1），改为 slate-400 后为 5.70:1 */
    --qmtink-text-muted: #94a3b8;

    --qmtink-border: #3d4d66;
    /* 原 #1e293b 与卡片同色，表格行分隔线完全不可见；改为比卡片亮的描边 */
    --qmtink-border-light: #2e3d55;

    /* 深色底上必须用浅色叠加，否则悬停 / 徽章底色不可见 */
    --qmtink-hover-bg: rgba(255, 255, 255, 0.05);
    --qmtink-hover-bg-strong: rgba(255, 255, 255, 0.09);
    --qmtink-subtle-bg: rgba(255, 255, 255, 0.10);

    --desktop-taskbar-bg: rgba(0, 0, 0, 0.6);
    --desktop-taskbar-text: #ffffff;
    --desktop-startmenu-bg: rgba(0, 0, 0, 0.7);
    --desktop-startmenu-text: #ffffff;
    --desktop-dock-bg: rgba(0, 0, 0, 0.6);
    --desktop-context-bg: rgba(25, 25, 45, 0.95);
    --desktop-context-text: #ffffff;
    --desktop-context-hover: rgba(255, 255, 255, 0.08);
    --desktop-context-border: rgba(255, 255, 255, 0.1);
    --desktop-window-header-bg: #2d2d3f;
    --desktop-window-header-text: #e0e0e0;
    /* 深色主题壁纸沿用深板岩，图标仍用白色文字 + 深色阴影 */
    --desktop-icon-text: #ffffff;
    --desktop-icon-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --desktop-theme-panel-bg: rgba(25, 25, 45, 0.95);
    --desktop-theme-panel-text: #ffffff;
    --desktop-theme-panel-border: rgba(255, 255, 255, 0.12);
    --desktop-theme-option-bg: rgba(255, 255, 255, 0.04);
    --desktop-theme-option-border: rgba(255, 255, 255, 0.06);
    --desktop-theme-option-hover-bg: rgba(255, 255, 255, 0.08);
    --desktop-theme-option-hover-border: rgba(255, 255, 255, 0.15);
    --desktop-toast-bg: rgba(25, 25, 45, 0.95);
    --desktop-toast-text: #ffffff;
    --desktop-close-btn-bg: rgba(255, 255, 255, 0.1);
    --desktop-close-btn-color: rgba(255, 255, 255, 0.7);
    --desktop-close-btn-hover-bg: rgba(255, 255, 255, 0.2);
    --desktop-close-btn-hover-color: #ffffff;
    --desktop-avatar-bg: rgba(255, 255, 255, 0.2);
    --desktop-dock-item-bg: rgba(255, 255, 255, 0.08);
    --desktop-dock-item-hover-bg: rgba(255, 255, 255, 0.15);
    --desktop-taskbar-app-bg: rgba(255, 255, 255, 0.05);
    --desktop-taskbar-app-hover-bg: rgba(255, 255, 255, 0.15);
    --desktop-widget-category-text: rgba(255, 255, 255, 0.7);
    --desktop-widget-item-bg: rgba(255, 255, 255, 0.05);
    --desktop-widget-item-border: rgba(255, 255, 255, 0.1);
    --desktop-widget-item-hover-bg: rgba(255, 255, 255, 0.1);
    --desktop-taskbar-icon-color: #ffffff;
    --desktop-widget-border: rgba(255, 255, 255, 0.1);
    --desktop-widget-title-text: rgba(255, 255, 255, 0.9);
    --desktop-widget-secondary-text: rgba(255, 255, 255, 0.7);
    --desktop-widget-muted-text: rgba(255, 255, 255, 0.5);
    --desktop-widget-input-bg: rgba(255, 255, 255, 0.1);
    --desktop-widget-input-border: rgba(255, 255, 255, 0.2);
    --desktop-widget-input-text: #ffffff;
    --desktop-widget-scrollbar-track: rgba(255, 255, 255, 0.1);
    --desktop-widget-scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --desktop-widget-scrollbar-hover: rgba(255, 255, 255, 0.5);
    --desktop-widget-separator: rgba(255, 255, 255, 0.05);
    --desktop-dock-icon-color: #ffffff;
    --desktop-dock-icon-name-color: #ffffff;
    --desktop-dock-border: rgba(255, 255, 255, 0.1);
    --desktop-taskbar-hover-bg: rgba(255, 255, 255, 0.1);
    --desktop-system-tray-bg: rgba(255, 255, 255, 0.1);
    --desktop-show-desktop-bg: rgba(255, 255, 255, 0.2);
    --desktop-show-desktop-hover-bg: rgba(255, 255, 255, 0.3);
    --desktop-icon-container-border: rgba(255, 255, 255, 0.2);
    --desktop-icon-container-hover-border: rgba(255, 255, 255, 0.3);
    --desktop-icon-container-hover-shadow: rgba(255, 255, 255, 0.1);
    --desktop-widget-library-header-border: rgba(255, 255, 255, 0.1);
    --desktop-theme-header-border: rgba(255, 255, 255, 0.1);
    --desktop-theme-preview-border: rgba(255, 255, 255, 0.2);
    --desktop-theme-preview-icon: rgba(255, 255, 255, 0.6);
    --desktop-widget-icon-bg: #69c0ff;
    --desktop-widget-icon-color: #ffffff;
    --desktop-im-preview-bg: rgba(30, 30, 40, 0.95);
    --desktop-im-preview-border: rgba(255, 255, 255, 0.12);
    --desktop-im-preview-text: rgba(255, 255, 255, 0.9);
    --desktop-im-preview-text-secondary: rgba(255, 255, 255, 0.45);
    --desktop-im-preview-hover: rgba(255, 255, 255, 0.08);
    --desktop-confirm-overlay: rgba(0, 0, 0, 0.5);
    --desktop-confirm-bg: rgba(0, 0, 0, 0.7);
    --desktop-confirm-text: #ffffff;
    --desktop-confirm-btn-border: rgba(255, 255, 255, 0.3);
    --desktop-confirm-btn-primary-bg: #498ff2;
    --desktop-confirm-btn-primary-text: #ffffff;
    --desktop-im-bg: rgba(30, 30, 40, 0.95);
    --desktop-im-bg-secondary: rgba(40, 40, 55, 0.95);
    --desktop-im-bg-tertiary: rgba(20, 20, 30, 0.85);
    --desktop-im-text: rgba(255, 255, 255, 0.9);
    --desktop-im-text-secondary: rgba(255, 255, 255, 0.55);
    --desktop-im-text-muted: rgba(255, 255, 255, 0.35);
    --desktop-im-border: rgba(255, 255, 255, 0.1);
    --desktop-im-hover: rgba(255, 255, 255, 0.08);
    --desktop-im-input-bg: rgba(255, 255, 255, 0.06);
    --desktop-im-input-border: rgba(255, 255, 255, 0.12);
    --desktop-im-input-text: rgba(255, 255, 255, 0.85);
    --desktop-im-title-icon: rgba(255, 255, 255, 0.6);
    --desktop-im-title-icon-hover: rgba(255, 255, 255, 0.95);
    --desktop-im-tab-active-color: #40a9ff;
    --desktop-im-menu-bg: rgba(40, 40, 55, 0.98);
    --desktop-im-menu-hover: rgba(255, 255, 255, 0.08);
}

:root[theme="light"] {
    --qmtink-primary: #3b82f6;
    --qmtink-primary-hover: #2563eb;
    --qmtink-primary-soft: #E4EDFF;
    --qmtink-bg-group: #E9EAEE;
    --qmtink-success: #22c55e;
    --qmtink-warning: #f59e0b;
    --qmtink-error: #ef4444;
    --qmtink-info: #06b6d4;
    
    --qmtink-bg-primary: #ffffff;
    --qmtink-bg-secondary: #fafafa;
    --qmtink-bg-tertiary: #f5f5f5;
    
    --qmtink-text-primary: #1f2937;
    --qmtink-text-secondary: #6b7280;
    --qmtink-text-muted: #9ca3af;
    
    --qmtink-border: #e5e7eb;
    --qmtink-border-light: #f3f4f6;

    --desktop-taskbar-bg: rgba(255, 255, 255, 0.88);
    --desktop-taskbar-text: #4b5563;
    --desktop-startmenu-bg: rgba(255, 255, 255, 0.92);
    --desktop-startmenu-text: #4b5563;
    --desktop-dock-bg: rgba(255, 255, 255, 0.78);
    --desktop-context-bg: rgba(255, 255, 255, 0.95);
    --desktop-context-text: #4b5563;
    --desktop-context-hover: rgba(0, 0, 0, 0.05);
    --desktop-context-border: rgba(0, 0, 0, 0.08);
    --desktop-window-header-bg: #e5e7eb;
    --desktop-window-header-text: #374151;
    /* 浅色主题壁纸为黑灰渐变，图标用浅色文字 + 深色阴影才看得清 */
    --desktop-icon-text: #F2F4F7;
    --desktop-icon-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --desktop-theme-panel-bg: rgba(255, 255, 255, 0.95);
    --desktop-theme-panel-text: #4b5563;
    --desktop-theme-panel-border: rgba(0, 0, 0, 0.06);
    --desktop-theme-option-bg: rgba(0, 0, 0, 0.02);
    --desktop-theme-option-border: rgba(0, 0, 0, 0.06);
    --desktop-theme-option-hover-bg: rgba(0, 0, 0, 0.05);
    --desktop-theme-option-hover-border: rgba(0, 0, 0, 0.1);
    --desktop-toast-bg: rgba(255, 255, 255, 0.95);
    --desktop-toast-text: #4b5563;
    --desktop-close-btn-bg: rgba(0, 0, 0, 0.08);
    --desktop-close-btn-color: #374151;
    --desktop-close-btn-hover-bg: rgba(0, 0, 0, 0.15);
    --desktop-close-btn-hover-color: #1f2937;
    --desktop-avatar-bg: rgba(0, 0, 0, 0.1);
    --desktop-dock-item-bg: rgba(0, 0, 0, 0.1);
    --desktop-dock-item-hover-bg: rgba(0, 0, 0, 0.18);
    --desktop-taskbar-app-bg: rgba(0, 0, 0, 0.06);
    --desktop-taskbar-app-hover-bg: rgba(0, 0, 0, 0.12);
    --desktop-widget-category-text: #6b7280;
    --desktop-widget-item-bg: rgba(0, 0, 0, 0.03);
    --desktop-widget-item-border: rgba(0, 0, 0, 0.06);
    --desktop-widget-item-hover-bg: rgba(0, 0, 0, 0.06);
    --desktop-taskbar-icon-color: #ffffff;
    --desktop-widget-border: rgba(0, 0, 0, 0.08);
    --desktop-widget-title-text: #374151;
    --desktop-widget-secondary-text: #6b7280;
    --desktop-widget-muted-text: #9ca3af;
    --desktop-widget-input-bg: rgba(0, 0, 0, 0.06);
    --desktop-widget-input-border: rgba(0, 0, 0, 0.12);
    --desktop-widget-input-text: #374151;
    --desktop-widget-scrollbar-track: rgba(0, 0, 0, 0.06);
    --desktop-widget-scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --desktop-widget-scrollbar-hover: rgba(0, 0, 0, 0.35);
    --desktop-widget-separator: rgba(0, 0, 0, 0.04);
    --desktop-dock-icon-color: #374151;
    --desktop-dock-icon-name-color: #374151;
    --desktop-dock-border: rgba(0, 0, 0, 0.08);
    --desktop-taskbar-hover-bg: rgba(0, 0, 0, 0.06);
    --desktop-system-tray-bg: rgba(0, 0, 0, 0.06);
    --desktop-show-desktop-bg: rgba(0, 0, 0, 0.15);
    --desktop-show-desktop-hover-bg: rgba(0, 0, 0, 0.25);
    --desktop-icon-container-border: rgba(0, 0, 0, 0.1);
    --desktop-icon-container-hover-border: rgba(0, 0, 0, 0.2);
    --desktop-icon-container-hover-shadow: rgba(0, 0, 0, 0.08);
    --desktop-widget-library-header-border: rgba(0, 0, 0, 0.08);
    --desktop-theme-header-border: rgba(0, 0, 0, 0.06);
    --desktop-theme-preview-border: rgba(0, 0, 0, 0.1);
    --desktop-theme-preview-icon: rgba(0, 0, 0, 0.25);
    --desktop-widget-icon-bg: rgba(0, 0, 0, 0.75);
    --desktop-widget-icon-color: #ffffff;
    --desktop-im-preview-bg: rgba(255, 255, 255, 0.95);
    --desktop-im-preview-border: rgba(0, 0, 0, 0.08);
    --desktop-im-preview-text: #374151;
    --desktop-im-preview-text-secondary: #9ca3af;
    --desktop-im-preview-hover: rgba(0, 0, 0, 0.05);
    --desktop-confirm-overlay: rgba(0, 0, 0, 0.3);
    --desktop-confirm-bg: rgba(255, 255, 255, 0.95);
    --desktop-confirm-text: #374151;
    --desktop-confirm-btn-border: rgba(0, 0, 0, 0.2);
    --desktop-confirm-btn-primary-bg: #3b82f6;
    --desktop-confirm-btn-primary-text: #ffffff;
    --desktop-im-bg: rgba(255, 255, 255, 0.96);
    --desktop-im-bg-secondary: rgba(245, 245, 248, 0.96);
    --desktop-im-bg-tertiary: rgba(255, 255, 255, 0.9);
    --desktop-im-text: #1f2937;
    --desktop-im-text-secondary: #6b7280;
    --desktop-im-text-muted: #9ca3af;
    --desktop-im-border: rgba(0, 0, 0, 0.08);
    --desktop-im-hover: rgba(0, 0, 0, 0.05);
    --desktop-im-input-bg: rgba(0, 0, 0, 0.04);
    --desktop-im-input-border: rgba(0, 0, 0, 0.1);
    --desktop-im-input-text: #374151;
    --desktop-im-title-icon: rgba(0, 0, 0, 0.45);
    --desktop-im-title-icon-hover: rgba(0, 0, 0, 0.8);
    --desktop-im-tab-active-color: #3b82f6;
    --desktop-im-menu-bg: rgba(255, 255, 255, 0.98);
    --desktop-im-menu-hover: rgba(0, 0, 0, 0.06);
}

:root[theme="default"] {
    --qmtink-primary: #1E9FFF;
    --qmtink-primary-hover: #1890ff;
    --qmtink-success: #22c55e;
    --qmtink-warning: #f59e0b;
    --qmtink-error: #ef4444;
    --qmtink-info: #3b82f6;
    
    --qmtink-bg-primary: #ffffff;
    --qmtink-bg-secondary: #f8fafc;
    --qmtink-bg-tertiary: #f1f5f9;
    
    --qmtink-text-primary: #1e293b;
    --qmtink-text-secondary: #64748b;
    --qmtink-text-muted: #94a3b8;
    
    --qmtink-border: #e2e8f0;
    --qmtink-border-light: #f1f5f9;

    --desktop-taskbar-bg: rgba(30, 30, 60, 0.6);
    --desktop-taskbar-text: #ffffff;
    --desktop-startmenu-bg: rgba(30, 30, 60, 0.7);
    --desktop-startmenu-text: #ffffff;
    --desktop-dock-bg: rgba(30, 30, 60, 0.6);
    --desktop-context-bg: rgba(35, 35, 55, 0.95);
    --desktop-context-text: #ffffff;
    --desktop-context-hover: rgba(255, 255, 255, 0.08);
    --desktop-context-border: rgba(255, 255, 255, 0.1);
    --desktop-window-header-bg: #3b82f6;
    --desktop-window-header-text: #ffffff;
    --desktop-icon-text: #ffffff;
    --desktop-theme-panel-bg: rgba(35, 35, 55, 0.95);
    --desktop-theme-panel-text: #ffffff;
    --desktop-theme-panel-border: rgba(255, 255, 255, 0.12);
    --desktop-theme-option-bg: rgba(255, 255, 255, 0.04);
    --desktop-theme-option-border: rgba(255, 255, 255, 0.06);
    --desktop-theme-option-hover-bg: rgba(255, 255, 255, 0.08);
    --desktop-theme-option-hover-border: rgba(255, 255, 255, 0.15);
    --desktop-toast-bg: rgba(35, 35, 55, 0.95);
    --desktop-toast-text: #ffffff;
    --desktop-close-btn-bg: rgba(255, 255, 255, 0.1);
    --desktop-close-btn-color: rgba(255, 255, 255, 0.7);
    --desktop-close-btn-hover-bg: rgba(255, 255, 255, 0.2);
    --desktop-close-btn-hover-color: #ffffff;
    --desktop-avatar-bg: rgba(255, 255, 255, 0.2);
    --desktop-dock-item-bg: rgba(255, 255, 255, 0.08);
    --desktop-dock-item-hover-bg: rgba(255, 255, 255, 0.15);
    --desktop-taskbar-app-bg: rgba(255, 255, 255, 0.05);
    --desktop-taskbar-app-hover-bg: rgba(255, 255, 255, 0.15);
    --desktop-widget-category-text: rgba(255, 255, 255, 0.7);
    --desktop-widget-item-bg: rgba(255, 255, 255, 0.05);
    --desktop-widget-item-border: rgba(255, 255, 255, 0.1);
    --desktop-widget-item-hover-bg: rgba(255, 255, 255, 0.1);
    --desktop-taskbar-icon-color: #ffffff;
    --desktop-widget-border: rgba(255, 255, 255, 0.1);
    --desktop-widget-title-text: rgba(255, 255, 255, 0.9);
    --desktop-widget-secondary-text: rgba(255, 255, 255, 0.7);
    --desktop-widget-muted-text: rgba(255, 255, 255, 0.5);
    --desktop-widget-input-bg: rgba(255, 255, 255, 0.1);
    --desktop-widget-input-border: rgba(255, 255, 255, 0.2);
    --desktop-widget-input-text: #ffffff;
    --desktop-widget-scrollbar-track: rgba(255, 255, 255, 0.1);
    --desktop-widget-scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --desktop-widget-scrollbar-hover: rgba(255, 255, 255, 0.5);
    --desktop-widget-separator: rgba(255, 255, 255, 0.05);
    --desktop-dock-icon-color: #ffffff;
    --desktop-dock-icon-name-color: #ffffff;
    --desktop-dock-border: rgba(255, 255, 255, 0.1);
    --desktop-taskbar-hover-bg: rgba(255, 255, 255, 0.1);
    --desktop-system-tray-bg: rgba(255, 255, 255, 0.1);
    --desktop-show-desktop-bg: rgba(255, 255, 255, 0.2);
    --desktop-show-desktop-hover-bg: rgba(255, 255, 255, 0.3);
    --desktop-icon-container-border: rgba(255, 255, 255, 0.2);
    --desktop-icon-container-hover-border: rgba(255, 255, 255, 0.3);
    --desktop-icon-container-hover-shadow: rgba(255, 255, 255, 0.1);
    --desktop-widget-library-header-border: rgba(255, 255, 255, 0.1);
    --desktop-theme-header-border: rgba(255, 255, 255, 0.1);
    --desktop-theme-preview-border: rgba(255, 255, 255, 0.2);
    --desktop-theme-preview-icon: rgba(255, 255, 255, 0.6);
    --desktop-widget-icon-bg: #1890ff;
    --desktop-widget-icon-color: #ffffff;
    --desktop-im-preview-bg: rgba(30, 30, 40, 0.95);
    --desktop-im-preview-border: rgba(255, 255, 255, 0.12);
    --desktop-im-preview-text: rgba(255, 255, 255, 0.9);
    --desktop-im-preview-text-secondary: rgba(255, 255, 255, 0.45);
    --desktop-im-preview-hover: rgba(255, 255, 255, 0.08);
    --desktop-confirm-overlay: rgba(0, 0, 0, 0.5);
    --desktop-confirm-bg: rgba(0, 0, 0, 0.7);
    --desktop-confirm-text: #ffffff;
    --desktop-confirm-btn-border: rgba(255, 255, 255, 0.3);
    --desktop-confirm-btn-primary-bg: #498ff2;
    --desktop-confirm-btn-primary-text: #ffffff;
}

.qmtink-theme-dark {
    --qmtink-primary: #40a9ff;
    --qmtink-primary-hover: #69c0ff;
    --qmtink-primary-soft: #1E2A45;
    --qmtink-bg-group: #232B3A;
    --qmtink-success: #34d399;
    --qmtink-warning: #fbbf24;
    --qmtink-error: #f87171;
    --qmtink-info: #60a5fa;

    --qmtink-bg-primary: #1e293b;
    --qmtink-bg-secondary: #131c2e;
    --qmtink-bg-tertiary: #0a1120;

    --qmtink-text-primary: #f8fafc;
    --qmtink-text-secondary: #cbd5e1;
    --qmtink-text-muted: #94a3b8;

    --qmtink-border: #3d4d66;
    --qmtink-border-light: #2e3d55;

    --qmtink-hover-bg: rgba(255, 255, 255, 0.05);
    --qmtink-hover-bg-strong: rgba(255, 255, 255, 0.09);
    --qmtink-subtle-bg: rgba(255, 255, 255, 0.10);
}

.qmtink-theme-light {
    --qmtink-primary: #3b82f6;
    --qmtink-primary-hover: #2563eb;
    --qmtink-primary-soft: #E4EDFF;
    --qmtink-bg-group: #E9EAEE;
    --qmtink-success: #22c55e;
    --qmtink-warning: #f59e0b;
    --qmtink-error: #ef4444;
    --qmtink-info: #06b6d4;
    
    --qmtink-bg-primary: #ffffff;
    --qmtink-bg-secondary: #fafafa;
    --qmtink-bg-tertiary: #f5f5f5;
    
    --qmtink-text-primary: #1f2937;
    --qmtink-text-secondary: #6b7280;
    --qmtink-text-muted: #9ca3af;
    
    --qmtink-border: #e5e7eb;
    --qmtink-border-light: #f3f4f6;
}

.qmtink-theme-default {
    --qmtink-primary: #1E9FFF;
    --qmtink-primary-hover: #1890ff;
    --qmtink-success: #22c55e;
    --qmtink-warning: #f59e0b;
    --qmtink-error: #ef4444;
    --qmtink-info: #3b82f6;
    
    --qmtink-bg-primary: #ffffff;
    --qmtink-bg-secondary: #f8fafc;
    --qmtink-bg-tertiary: #f1f5f9;
    
    --qmtink-text-primary: #1e293b;
    --qmtink-text-secondary: #64748b;
    --qmtink-text-muted: #94a3b8;
    
    --qmtink-border: #e2e8f0;
    --qmtink-border-light: #f1f5f9;
}

.qmtink-theme-switcher {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    background-color: var(--qmtink-bg-tertiary);
    border-radius: var(--qmtink-radius-md);
}

.qmtink-theme-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--qmtink-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.qmtink-theme-btn:hover {
    background-color: var(--qmtink-border);
}

.qmtink-theme-btn.active {
    background-color: var(--qmtink-primary);
    color: #ffffff;
}

.qmtink-theme-dark .qmtink-theme-btn {
    background-color: transparent;
    color: var(--qmtink-text-secondary);
}

.qmtink-theme-dark .qmtink-theme-btn:hover {
    background-color: var(--qmtink-border);
}

.qmtink-theme-dark .qmtink-theme-btn.active {
    background-color: var(--qmtink-primary);
    color: #ffffff;
}

.qmtink-theme-light .qmtink-theme-btn {
    background-color: transparent;
    color: var(--qmtink-text-secondary);
}

.qmtink-theme-light .qmtink-theme-btn:hover {
    background-color: var(--qmtink-border);
}

.qmtink-theme-light .qmtink-theme-btn.active {
    background-color: var(--qmtink-primary);
    color: #ffffff;
}

@keyframes qmtink-theme-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.qmtink-theme-transition {
    animation: qmtink-theme-fade 0.3s ease;
}