/* css/style.css - 图灵·PIC MAGIC Liquid Glass Design System */

/* Liquid Glass 设计系统变量 */
:root {
    /* SF字体系统 */
    --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif;
  
    /* Light Mode Palette (Softer coffee tone) */
    --bg-color-light: #f5f1ec; /* 更柔和的米咖底色 */
    --bg-image-light: 
        radial-gradient(ellipse at top left, rgba(141, 110, 99, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at top right, rgba(121, 85, 72, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at bottom center, rgba(161, 136, 127, 0.06) 0%, transparent 60%),
        linear-gradient(135deg, rgba(246, 242, 237, 0.95) 0%, rgba(238, 232, 226, 0.70) 50%, rgba(244, 239, 234, 0.95) 100%),
        linear-gradient(0deg, #f5f1ec 0%, #ece6df 100%);
    --text-color-light: #2b2a28; /* 深咖文字 */
    --text-color-secondary-light: #766e66; /* 略更柔的次级咖色 */
    --accent-color-light: #007aff;
    --glass-bg-light: rgba(255, 255, 255, 0.65);
    --glass-border-light: rgba(193, 173, 158, 0.35); /* 更轻的米咖边框 */
    --glass-fade-light: rgba(247, 244, 240, 0.85);
    --shadow-color-light: rgba(0, 0, 0, 0.08);

    /* Dark Mode Palette */
    --bg-color-dark: #0a0a0a; /* 更深的纯黑背景 */
    --bg-image-dark: 
        radial-gradient(ellipse at top left, rgba(255, 193, 7, 0.03) 0%, transparent 70%),
        radial-gradient(ellipse at bottom right, rgba(255, 152, 0, 0.02) 0%, transparent 70%),
        radial-gradient(ellipse at center, rgba(255, 235, 59, 0.01) 0%, transparent 70%),
        linear-gradient(145deg, rgba(15, 15, 15, 0.9) 0%, rgba(10, 10, 10, 0.8) 50%, rgba(5, 5, 5, 0.95) 100%),
        linear-gradient(0deg, #000000 0%, #0a0a0a 100%); /* 几乎纯黑的渐变 */
    --text-color-dark: #f8f4e6;
    --text-color-secondary-dark: #d4c4a8;
    --accent-color-dark: #0a84ff;
    --glass-bg-dark: rgba(18, 18, 18, 0.85); /* 更深的玻璃背景 */
    --glass-border-dark: rgba(141, 110, 99, 0.35); /* 深色模式咖色边框 */
    --glass-fade-dark: rgba(10, 10, 10, 0.95); /* 更深的渐变 */
    --shadow-color-dark: rgba(0, 0, 0, 0.3);

    /* Universal Variables */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem; 
    --radius-full: 9999px;
    --shadow-sm: 0 2px 4px var(--shadow-color);
    --shadow-md: 0 4px 12px var(--shadow-color);
    --shadow-lg: 0 8px 24px var(--shadow-color);
    --transition-fluid: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Result Container Variables - Light Mode */
    --container-bg: rgba(255, 255, 255, 0.5);
    --card-bg: white;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --transition-quick: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* 间距系统 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* 兼容旧版本的变量映射 */
    --spacing-small: var(--spacing-sm);
    --spacing-medium: var(--spacing-md);
    --spacing-large: var(--spacing-lg);
    --spacing-xlarge: var(--spacing-xl);

    /* 滚动条样式变量 */
    --scrollbar-width: 0.6rem;
    --scrollbar-radius: 999px;
    --scrollbar-track: rgba(255, 255, 255, 0.18);
    --scrollbar-track-border: rgba(193, 173, 158, 0.5);
    --scrollbar-track-background: linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08));
    --scrollbar-thumb-color: rgba(135, 88, 66, 0.95); /* Firefox滚动条颜色 */
    --scrollbar-thumb: linear-gradient(180deg, rgba(135, 88, 66, 0.98), rgba(87, 47, 33, 0.98));
    --scrollbar-thumb-border: rgba(255, 255, 255, 0.55);
    --scrollbar-thumb-hover: linear-gradient(180deg, rgba(168, 111, 85, 0.98), rgba(109, 58, 39, 0.98));
    --scrollbar-thumb-active: linear-gradient(180deg, rgba(255, 181, 108, 0.98), rgba(199, 96, 42, 0.98));
    --scrollbar-glow: rgba(255, 255, 255, 0.45);
}

/* 默认为浅色模式 */
body {
    --bg-color: var(--bg-color-light);
    --bg-image: var(--bg-image-light);
    --text-color: var(--text-color-light);
    --text-color-secondary: var(--text-color-secondary-light);
    --accent-color: var(--accent-color-light);
    --glass-bg: var(--glass-bg-light);
    --glass-border: var(--glass-border-light);
    --glass-fade: var(--glass-fade-light);
    --shadow-color: var(--shadow-color-light);

    /* 兼容旧版本的变量映射 */
    --primary-text-color: var(--text-color);
    --secondary-text-color: var(--text-color-secondary);
    --placeholder-text-color: var(--text-color-secondary);
    --border-color: var(--glass-border);
    --card-background-color: var(--glass-bg);
    --page-background-color: var(--bg-color);
    --button-primary-bg: var(--glass-bg);
    --button-primary-hover-bg: color-mix(in srgb, var(--glass-bg) 80%, var(--accent-color));
    --card-shadow: var(--shadow-md);
    --font-family-base: var(--font-family-system);
    
    /* 生成按钮颜色 */
    --button-generate-bg: var(--glass-bg);
    --button-generate-hover-bg: color-mix(in srgb, var(--glass-bg) 80%, var(--accent-color));
    --button-generate-text: var(--text-color-secondary);
    --button-generate-active-bg: var(--accent-color);
    --button-generate-active-hover-bg: color-mix(in srgb, var(--accent-color) 80%, #000);
    --button-generate-active-text: #fff;

    /* 其他兼容变量 */
    --active-link-color: var(--text-color);
    --indicator-color: var(--glass-border);
    --select-border-color: var(--glass-border);
    --select-background-color: var(--glass-bg);
    --select-hover-border-color: var(--accent-color);
}

/* 深色模式 */
body.dark-mode {
    --bg-color: var(--bg-color-dark);
    --bg-image: var(--bg-image-dark);
    --text-color: var(--text-color-dark);
    --text-color-secondary: var(--text-color-secondary-dark);
    --accent-color: var(--accent-color-dark);
    --glass-bg: var(--glass-bg-dark);
    --glass-border: var(--glass-border-dark);
    --glass-fade: var(--glass-fade-dark);
    --shadow-color: var(--shadow-color-dark);

    /* 更新兼容变量 */
    --primary-text-color: var(--text-color);
    --secondary-text-color: var(--text-color-secondary);
    --placeholder-text-color: var(--text-color-secondary);
    --border-color: var(--glass-border);
    --card-background-color: var(--glass-bg);
    --page-background-color: var(--bg-color);
    --button-primary-bg: var(--glass-bg);
    --button-primary-hover-bg: color-mix(in srgb, var(--glass-bg) 80%, var(--accent-color));
    
    /* 结果框深色模式变量 - 咖啡主题背景 */
    --container-bg: rgba(25, 18, 6, 0.8);
    --card-bg: rgba(35, 25, 8, 0.95);
    --border-color: rgba(141, 110, 99, 0.35);
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* 深色模式滚动条 */
    --scrollbar-track: rgba(18, 18, 18, 0.55);
    --scrollbar-track-border: rgba(141, 110, 99, 0.55);
    --scrollbar-track-background: linear-gradient(145deg, rgba(45, 30, 24, 0.85), rgba(12, 8, 6, 0.85));
    --scrollbar-thumb-color: rgba(100, 62, 46, 0.95);
    --scrollbar-thumb: linear-gradient(180deg, rgba(80, 49, 36, 0.98), rgba(41, 24, 18, 0.98));
    --scrollbar-thumb-border: rgba(255, 185, 123, 0.35);
    --scrollbar-thumb-hover: linear-gradient(180deg, rgba(132, 78, 55, 0.98), rgba(76, 40, 26, 0.98));
    --scrollbar-thumb-active: linear-gradient(180deg, rgba(255, 145, 48, 0.95), rgba(215, 93, 24, 0.95));
    --scrollbar-glow: rgba(10, 132, 255, 0.4);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* 基准字号 */
    overflow-x: hidden; /* 避免水平滚动 */
    overflow-y: auto; /* 保留垂直滚动条 */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track);
}

body {
    font-family: var(--font-family-system);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background var(--transition-quick);
    position: relative;
    overflow-x: hidden;
}

/* 自定义滚动条 - WebKit 浏览器 */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
    background: transparent;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--scrollbar-track-background);
    border: 1px solid var(--scrollbar-track-border);
    border-radius: var(--scrollbar-radius);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar-radius);
    border: 1px solid var(--scrollbar-thumb-border);
    background-image: var(--scrollbar-thumb);
    background-clip: padding-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 0 10px var(--scrollbar-glow);
    transition: background-image var(--transition-quick), box-shadow var(--transition-quick);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background-image: var(--scrollbar-thumb-hover);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 0 8px var(--scrollbar-glow);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
    background-image: var(--scrollbar-thumb-active);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: transparent;
}

/* 添加石膏墙颗粒纹理 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    z-index: -1;
    background-image: 
        /* 大颗粒 - 石膏颗粒感 */
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.08) 0.8px, transparent 0),
        radial-gradient(circle at 3px 2px, rgba(255, 255, 255, 0.4) 1.2px, transparent 0),
        /* 中等颗粒 - 增加层次 */
        radial-gradient(circle at 0.5px 1.5px, rgba(0, 0, 0, 0.04) 0.6px, transparent 0),
        radial-gradient(circle at 2px 0.5px, rgba(255, 255, 255, 0.3) 0.8px, transparent 0),
        /* 细微颗粒 - 填充细节 */
        radial-gradient(circle at 0.3px 0.3px, rgba(0, 0, 0, 0.02) 0.3px, transparent 0),
        /* 微妙的纹理条纹 */
        repeating-linear-gradient(23deg, transparent, transparent 3px, rgba(0, 0, 0, 0.01) 3px, rgba(0, 0, 0, 0.01) 6px),
        repeating-linear-gradient(67deg, transparent, transparent 4px, rgba(255, 255, 255, 0.02) 4px, rgba(255, 255, 255, 0.02) 8px);
    background-size: 12px 12px, 18px 18px, 8px 8px, 14px 14px, 4px 4px, 24px 24px, 32px 32px;
    background-position: 0 0, 6px 9px, 3px 3px, 7px 2px, 1px 1px, 0 0, 16px 16px;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* 深色模式下的纹理调整 */
body.dark-mode::before {
    background-image: 
        /* 深色模式的颗粒效果 - 更微妙 */
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 0.8px, transparent 0),
        radial-gradient(circle at 3px 2px, rgba(0, 0, 0, 0.3) 1.2px, transparent 0),
        radial-gradient(circle at 0.5px 1.5px, rgba(255, 255, 255, 0.02) 0.6px, transparent 0),
        radial-gradient(circle at 2px 0.5px, rgba(0, 0, 0, 0.2) 0.8px, transparent 0),
        radial-gradient(circle at 0.3px 0.3px, rgba(255, 255, 255, 0.01) 0.3px, transparent 0),
        repeating-linear-gradient(23deg, transparent, transparent 4px, rgba(255, 255, 255, 0.005) 4px, rgba(255, 255, 255, 0.005) 8px),
        repeating-linear-gradient(67deg, transparent, transparent 5px, rgba(0, 0, 0, 0.01) 5px, rgba(0, 0, 0, 0.01) 10px);
    background-size: 12px 12px, 18px 18px, 8px 8px, 14px 14px, 4px 4px, 28px 28px, 36px 36px;
    background-position: 0 0, 6px 9px, 3px 3px, 7px 2px, 1px 1px, 0 0, 18px 18px;
    opacity: 0.3;
    mix-blend-mode: soft-light;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background-color: transparent;
    padding: var(--spacing-small) var(--spacing-medium);
    border-radius: var(--radius-2xl);
}

textarea {
    font-family: inherit;
    border: none;
    resize: none; /* 禁止用户调整大小 */
    background-color: transparent;
}

/* 全局textarea滚动条样式 */
textarea::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    opacity: 0;
    transition: opacity var(--transition-quick);
}

textarea::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

textarea::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background var(--transition-quick);
}

textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 深色模式下的全局textarea滚动条样式 */
body.dark-mode textarea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 当textarea有内容或获得焦点时显示滚动条 */
textarea:not(:placeholder-shown)::-webkit-scrollbar,
textarea:focus::-webkit-scrollbar {
    opacity: 1;
}

a {
    text-decoration: none;
    color: var(--secondary-text-color);
}

/* 下线通知样式 */
.shutdown-notice {
    background: var(--shutdown-notice-bg);
    color: var(--shutdown-notice-text);
    padding: 0;
    position: relative;
    box-shadow: var(--shutdown-notice-shadow);
    z-index: 1000;
    animation: slideDown 0.5s ease-out;
}

.shutdown-notice__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    padding: var(--spacing-medium) var(--spacing-large);
    position: relative;
}

.shutdown-notice__icon {
    background: var(--shutdown-notice-icon-bg);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.shutdown-notice__icon svg {
    color: var(--shutdown-notice-text);
}

.shutdown-notice__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shutdown-notice__title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.shutdown-notice__message {
    font-size: 0.9rem;
    opacity: 0.95;
    line-height: 1.4;
}

/* 新增：段落间距样式 */
.shutdown-notice__message p {
    margin: 0 0 8px 0; /* 段落底部间距 */
}

.shutdown-notice__message p:last-child {
    margin-bottom: 0; /* 最后一个段落无底部间距 */
}

.shutdown-notice__message strong {
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 新增：日期彩色样式 */
.shutdown-notice__date {
    color: #FFD700; /* 金黄色 */
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 新增：链接样式 */
.shutdown-notice__link {
    color: #87CEEB; /* 天蓝色 */
    text-decoration: underline;
    font-weight: 500;
    transition: all 0.3s ease;
}

.shutdown-notice__link:hover {
    color: #00BFFF;
    text-decoration: none;
}

.shutdown-notice__close {
    background: transparent;
    border: none;
    color: var(--shutdown-notice-text);
    padding: var(--spacing-small);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.shutdown-notice__close:hover {
    background: var(--shutdown-notice-close-hover);
    transform: scale(1.1);
}

.shutdown-notice__close svg {
    transition: transform 0.2s ease;
}

.shutdown-notice__close:hover svg {
    transform: rotate(90deg);
}

/* 下线通知动画 */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 下线通知隐藏动画 */
.shutdown-notice.hiding {
    animation: slideUp 0.3s ease-in forwards;
}

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

/* 响应式设计 */
@media (max-width: 768px) {
    .shutdown-notice__container {
        padding: var(--spacing-small) var(--spacing-medium);
        gap: var(--spacing-small);
    }
    
    .shutdown-notice__icon {
        width: 32px;
        height: 32px;
    }
    
    .shutdown-notice__icon svg {
        width: 16px;
        height: 16px;
    }
    
    .shutdown-notice__title {
        font-size: 0.9rem;
    }
    
    .shutdown-notice__message {
        font-size: 0.8rem;
    }
    
    .shutdown-notice__close {
        width: 28px;
        height: 28px;
    }
    
    .shutdown-notice__close svg {
        width: 14px;
        height: 14px;
    }
}

/* 头部样式 */
.header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-medium) var(--spacing-large);
    /* background-color: var(--card-background-color); */ /* 移除背景色 */
    /* border-bottom: 1px solid var(--border-color); */ /* 移除下边框 */
}

.header__logo {
    /* font-weight: bold; */ /* 图片不需要这个 */
    /* font-size: 1.4rem; */ /* 图片不需要这个 */
    /* 移除占位符样式 */
    /* padding: var(--spacing-small); */
    /* border: 1px dashed var(--placeholder-text-color); */
    /* color: var(--placeholder-text-color); */
    display: flex; /* 让图片垂直居中 (如果需要的话) */
    align-items: center;
}

/* 为 Logo 图片添加样式 */
.header__logo img {
    height: 100px; /* 将 Logo 高度增加到 100px */
    width: auto; /* 保持宽高比 */
    display: block; /* 确保图片是块级元素 */
    margin-right: var(--spacing-medium); /* 添加右边距，与用户区隔开 */
    transition: transform 0.3s ease; /* 新增：平滑过渡效果 */
}

/* 新增：Logo 图片悬停效果 */
.header__logo img:hover {
    transform: scale(1.05); /* 轻微放大 */
}

.header__nav {
    display: flex;
    gap: var(--spacing-large); /* 导航项之间的间距 */
}

.header__nav-link {
    font-size: 1rem;
    padding: var(--spacing-small) 0;
}

.header__nav-link:hover,
.header__nav-link--active {
    color: var(--active-link-color);
    font-weight: bold;
}

.header__user {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
}

/* 移除旧按钮和积分的样式 (或者注释掉) */
/*
.header__user-button {
    background-color: var(--button-primary-bg);
    padding: 6px var(--spacing-medium);
    border-radius: var(--radius-2xl);
    font-size: 0.9rem;
    color: var(--primary-text-color);
}

.header__user-button:hover {
    background-color: var(--button-primary-hover-bg);
}

.header__user-credit {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    background-color: var(--button-primary-bg);
    padding: 4px var(--spacing-small);
    border-radius: var(--radius-2xl);
}

.header__user-credit--add {
    color: #28a745; 
}
*/

/* 设置弹窗两列布局 */
.modal__section--two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.modal__section-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* 确保两列的内容结构一致 */
.modal__section--two-column .modal__section-item {
    min-height: 64px; /* 固定最小高度 */
}

.modal__section--two-column .modal__description--compact {
    margin-top: auto; /* 推到底部对齐 */
}

.modal__section-item .modal__section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 改为顶对齐 */
    min-height: 32px; /* 确保两边header高度一致 */
}

/* 确保切换开关和按钮都在顶部对齐 */
.modal__section-title-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: 0;
}

.modal__section-title-toggle .modal__section-title {
    margin: 0;
    line-height: 1.2;
}

.modal__description--compact {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
}

/* 响应式：小屏幕时恢复单列 */
@media (max-width: 480px) {
    .modal__section--two-column {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* 新的主题切换按钮样式 - Liquid Glass */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fluid);
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-md);
}

.theme-icon {
    width: 16px;
    height: 16px;
    color: var(--text-color);
    position: absolute;
    transition: all var(--transition-fluid);
}

.theme-icon--light {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-icon--dark {
    opacity: 0;
    transform: scale(0.8) rotate(180deg);
}

/* 深色模式下的图标状态 */
body.dark-mode .theme-icon--light {
    opacity: 0;
    transform: scale(0.8) rotate(-180deg);
}

body.dark-mode .theme-icon--dark {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* 新增设置按钮样式 */
.header__user-settings-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--secondary-text-color); /* 图标颜色 */
    display: flex; /* 让 SVG 居中 */
    align-items: center;
    justify-content: center;
}

.header__user-settings-btn:hover {
    color: var(--primary-text-color); /* 鼠标悬停时变深色 */
}

.header__user-settings-btn svg {
    /* 控制SVG图标大小 */
    width: 20px;
    height: 20px;
}

/* 新增：线路检测按钮样式（与设置按钮一致） */
.header__route-check-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__route-check-btn:hover {
    color: var(--primary-text-color);
}

.header__route-check-btn svg {
    width: 20px;
    height: 20px;
}

/* 新增手册按钮样式 */
.header__user-manual-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--secondary-text-color); /* 图标颜色 */
    display: flex; /* 让 SVG 居中 */
    align-items: center;
    justify-content: center;
}

.header__user-manual-btn:hover {
    color: var(--primary-text-color); /* 鼠标悬停时变深色 */
}

/* 新增：下拉导航栏样式 */
.header__nav-dropdown {
    position: relative;
    display: inline-block;
}

.header__nav-dropdown-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.header__nav-dropdown-btn:hover {
    color: var(--primary-text-color);
}

.header__nav-dropdown-arrow {
    transition: transform 0.2s ease;
}

.header__nav-dropdown.active .header__nav-dropdown-arrow {
    transform: rotate(180deg);
}

.header__nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    min-width: 280px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all var(--transition-fluid);
}

.header__nav-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.header__nav-dropdown-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--glass-bg) 50%, transparent);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.header__nav-dropdown-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-text-color);
}

.header__nav-dropdown-content {
    padding: var(--spacing-small) 0;
}

.header__nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    padding: var(--spacing-medium);
    color: var(--secondary-text-color);
    text-decoration: none;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.header__nav-dropdown-item:hover {
    background-color: var(--button-primary-bg);
    color: var(--primary-text-color);
}

.header__nav-dropdown-item:last-child {
    border-bottom: none;
}

.header__nav-dropdown-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__nav-dropdown-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header__nav-dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
}

.header__nav-dropdown-item-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text-color);
    position: relative;
    display: inline-block;
}

.header__nav-dropdown-item-desc {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

/* HOT角标样式 */
.header__nav-dropdown-item-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
    color: white;
    font-size: 8px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 8px;
    min-width: auto;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(255, 71, 87, 0.3);
    z-index: 1;
}

/* NEW角标样式 - 绿色 */
.header__nav-dropdown-item-badge--new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.header__nav-dropdown-item-badge--vip {
    background: linear-gradient(135deg, #ff9500 0%, #ff7b00 100%);
    box-shadow: 0 1px 3px rgba(255, 149, 0, 0.3);
}

/* 注释掉不再使用的头像样式 */
/*
.header__user-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--placeholder-text-color); 
    border-radius: 50%; 
    border: 1px dashed var(--secondary-text-color);
}
*/

/* 内测提示条样式 */
.beta-notice {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    background: linear-gradient(135deg, rgba(245, 237, 220, 0.95) 0%, rgba(255, 248, 235, 0.95) 100%); /* 柔和米色系，不刺眼 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 237, 220, 0.3); /* 边框颜色也调整为米色系 */
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 使用更柔和的阴影 */
    animation: slideDown 0.4s ease-out forwards;
}

.beta-notice__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    position: relative;
    white-space: nowrap;
}

.beta-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #d4a574; /* 使用柔和的咖啡色 */
    flex-shrink: 0;
}

.beta-notice__text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #5d4e37; /* 使用深棕色文字配合米色背景 */
    line-height: 1.3;
}

.beta-notice__message {
    white-space: nowrap;
}

.beta-notice__divider {
    color: rgba(93, 78, 55, 0.6); /* 分隔符也使用棕色系 */
    font-weight: 300;
}

.beta-notice__link {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #5d4e37; /* 按钮文字也使用棕色 */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.beta-notice__link:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

.beta-notice__link svg {
    transition: transform 0.2s ease;
}

.beta-notice__link:hover svg {
    transform: translate(1px, -1px);
}



/* 深色模式适配 */
body.dark-mode .beta-notice {
    background: linear-gradient(135deg, rgba(28, 28, 30, 0.95) 0%, rgba(18, 18, 20, 0.95) 100%); /* 更深的纯黑色调 */
    border-bottom-color: rgba(50, 50, 52, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* 增强阴影深度 */
}

body.dark-mode .beta-notice__icon {
    color: #fbbf24; /* 使用更亮的金黄色，在纯黑背景上更显眼 */
}

body.dark-mode .beta-notice__text {
    color: #f3f4f6; /* 略微柔和的白色，减少对比度过强 */
}

body.dark-mode .beta-notice__divider {
    color: rgba(156, 163, 175, 0.6); /* 使用灰色分隔符 */
}

body.dark-mode .beta-notice__link {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.08); /* 更透明的背景 */
    border-color: rgba(255, 255, 255, 0.15); /* 更淡的边框 */
}

body.dark-mode .beta-notice__link:hover {
    background: rgba(255, 255, 255, 0.12); /* 悬停时略微亮一点 */
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* 更深的阴影 */
}



/* 提示条动画 */
@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}



/* 响应式设计 */
@media (max-width: 768px) {
    .beta-notice__content {
        padding: 6px 12px;
        gap: 6px;
    }
    
    .beta-notice__text {
        font-size: 12px;
        gap: 4px;
    }
    
    .beta-notice__message {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .beta-notice__content {
        padding: 5px 10px;
        gap: 4px;
    }
    
    .beta-notice__text {
        font-size: 11px;
        gap: 3px;
    }
    
    .beta-notice__divider {
        display: none;
    }
}

/* 主体内容样式 */
.main-content {
    flex-grow: 1; /* 让主体内容占据剩余空间 */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 顶部对齐 */
    /* padding: var(--spacing-xlarge) var(--spacing-large); */ /* 原来的内边距 */
    padding: calc(var(--spacing-xlarge) * 2.5) var(--spacing-large); /* 增加上内边距 */
}

/* 生成卡片样式 - Liquid Glass */
.generation-card {
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(120%);
    -webkit-backdrop-filter: blur(25px) saturate(120%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--glass-border);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    transition: all var(--transition-fluid);
    position: relative;
    transform-origin: top center; /* 保持顶部位置固定，避免高度增加时被上推 */
}

/* 服务状态装饰线样式 */
.service-status-border {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    pointer-events: none;
    z-index: 1;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.status-border-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--status-color, #10b981), transparent);
    transition: all var(--transition-fluid);
    opacity: 0.4;
}

.status-border-line--top {
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--status-color, #10b981), transparent);
}

.status-border-line--right {
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--status-color, #10b981), transparent);
}

.status-border-line--bottom {
    bottom: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--status-color, #10b981), transparent);
}

.status-border-line--left {
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--status-color, #10b981), transparent);
}

/* 服务状态颜色变量 */
.generation-card {
    --status-color: #10b981; /* 默认绿色 - 良好状态 */
}

/* 良好状态 - 绿色 */
.generation-card.status-good {
    --status-color: #10b981;
}

.generation-card.status-good .status-border-line {
    opacity: 0.6;
    box-shadow: 0 0 4px var(--status-color);
}

/* 警告状态 - 黄色 */
.generation-card.status-warning {
    --status-color: #f59e0b;
}

.generation-card.status-warning .status-border-line {
    opacity: 0.7;
    box-shadow: 0 0 3px var(--status-color);
}

/* 错误状态 - 红色 */
.generation-card.status-error {
    --status-color: #ef4444;
}

.generation-card.status-error .status-border-line {
    opacity: 0.8;
    box-shadow: 0 0 6px var(--status-color);
    animation: status-error-pulse 2s ease-in-out infinite;
}

/* 错误状态的脉冲动画 */
@keyframes status-error-pulse {
    0%, 100% {
        opacity: 0.8;
        box-shadow: 0 0 6px var(--status-color);
    }
    50% {
        opacity: 0.5;
        box-shadow: 0 0 10px var(--status-color);
    }
}

/* 深色模式适配 */
body.dark-mode .status-border-line {
    opacity: 0.5;
}

body.dark-mode .generation-card.status-error .status-border-line {
    opacity: 0.9;
}

/* 悬停效果 - 保持一致的呼吸效果 */
.generation-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

/* 输入框焦点时保持放大状态 - 防止呼吸效果消失 */
.generation-card:has(.generation-card__prompt-input:focus) {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

/* 输入框有内容时也保持放大状态 */
.generation-card:has(.generation-card__prompt-input:not(:placeholder-shown)) {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

/* 输入区域 */
.generation-card__input-area {
    display: flex;
    gap: var(--spacing-medium);
    align-items: flex-start; /* 顶部对齐 */
    padding-bottom: var(--spacing-large);
    /* border-bottom: 1px solid var(--border-color); */ /* 移除分割线，简约化设计 */
    position: relative;
}

/* 可选：添加极淡的渐变分割效果 */
.generation-card__input-area::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.06) 20%, 
        rgba(0, 0, 0, 0.12) 50%, 
        rgba(0, 0, 0, 0.06) 80%, 
        transparent 100%
    );
    opacity: 0.6;
}

/* 深色模式下的渐变分割效果 */
body.dark-mode .generation-card__input-area::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 20%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 80%, 
        transparent 100%
    );
    opacity: 0.5;
}

.generation-card__prompt-input {
    flex-grow: 1;
    min-height: 90px; /* 最小高度90px，与单行图片高度一致 */
    max-height: 300px; /* 最大高度约10行文本 */
    height: auto; /* 允许自适应高度 */
    width: 100%;
    font-size: 1.1rem;
    color: var(--text-color);
    background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-md);
    transition: border-color var(--transition-fluid), box-shadow var(--transition-fluid);
    resize: none; /* 禁用手动调整大小 */
    overflow-y: auto; /* 超过最大高度时显示滚动条 */
}

.generation-card__prompt-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.generation-card__prompt-input::placeholder {
    color: rgba(108, 117, 125, 0.7); /* 浅色模式下使用更柔和的灰色 */
}

/* 深色模式下的placeholder优化 */
body.dark-mode .generation-card__prompt-input::placeholder {
    color: rgba(142, 142, 147, 0.6); /* 深色模式下使用更柔和的浅灰色 */
}

/* 新增：禁用状态下的橙色placeholder样式 */
.generation-card__prompt-input.prompt-input--disabled::placeholder {
    color: #ff8c42; /* 橙色placeholder */
}

/* 新增：为文本输入框添加 focus 样式 */
.generation-card__prompt-input:focus {
    outline: none; /* 移除默认的蓝色轮廓 */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* 添加一个柔和的蓝色阴影作为替代，颜色可以根据设计调整 */
    border-color: rgba(0, 123, 255, 0.5); /* 也可以轻微改变边框颜色 */
}

/* 新增：文本输入框禁用时的样式 */
.generation-card__prompt-input.prompt-input--disabled {
    background-color: var(--color-background-secondary); /* 使用次要背景色 */
    border-color: var(--color-border-light); /* 使用浅边框色 */
    color: var(--color-text-secondary); /* 文本颜色变浅 */
    cursor: not-allowed; /* 显示禁用光标 */
}

/* 新增：文本输入框自定义滚动条样式 */
.generation-card__prompt-input::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
    height: 6px; /* 水平滚动条高度 */
}

.generation-card__prompt-input::-webkit-scrollbar-track {
    background: transparent; /* 轨道背景透明 */
    border-radius: 3px;
}

.generation-card__prompt-input::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* 浅色模式下的滚动条颜色 */
    border-radius: 3px;
    transition: background var(--transition-quick);
}

.generation-card__prompt-input::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3); /* 悬停时稍微加深 */
}

/* 深色模式下的滚动条样式 */
body.dark-mode .generation-card__prompt-input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); /* 深色模式下的滚动条颜色 */
}

body.dark-mode .generation-card__prompt-input::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3); /* 深色模式悬停时稍微加深 */
}

/* 滚动条隐藏状态 - 默认隐藏，滚动时显示 */
.generation-card__prompt-input::-webkit-scrollbar {
    opacity: 0;
    transition: opacity var(--transition-quick);
}

/* 当文本输入框有内容且可滚动时显示滚动条 */
.generation-card__prompt-input:not(:placeholder-shown)::-webkit-scrollbar {
    opacity: 1;
}

/* 当文本输入框获得焦点时显示滚动条 */
.generation-card__prompt-input:focus::-webkit-scrollbar {
    opacity: 1;
}

/* 新增：文本输入区域容器样式 */
.generation-card__text-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    min-height: 90px; /* 最小高度与单行图片一致 */
}

/* 移除容器样式，使用独立定位 */

/* 新增：提示词优化按钮样式 - 右下角 */
.optimize-prompt-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 26px;
    height: 26px;
    z-index: 10;
}

.optimize-prompt-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #6366f1;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
}

.optimize-prompt-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.optimize-prompt-btn.loading {
    opacity: 0.8;
    cursor: not-allowed;
    animation: pulse 1.5s ease-in-out infinite;
    background: rgba(99, 102, 241, 0.3) !important;
    border-color: #6366f1 !important;
    transform: none !important;
}

/* 新增：清空按钮样式调整 - 右上角 */
.clear-text-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 26px;
    height: 26px;
    z-index: 10;
}

.clear-text-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

.clear-text-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

.generation-card__image-upload {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    column-gap: var(--spacing-small); /* 列间距 */
    row-gap: calc(var(--spacing-small) + 20px); /* 行间距：基础间距 + 底部标记空间 */
    align-items: flex-start;
    align-content: start; /* 内容顶部对齐 */
    flex-shrink: 0; /* 防止被压缩 */
    /* 最大宽度：3列 * 90px + 2个间隔 */
    max-width: calc(90px * 3 + var(--spacing-small) * 2);
    overflow: visible; /* 改为visible以显示底部标记 */
    padding-bottom: 8px; /* 为底部标记腾出空间 */
}

/* 图片预览容器使用 contents 让子元素直接参与父 flex 布局 */
.generation-card__image-previews {
    display: contents;
}

/* 保持预览图和按钮大小 */
.image-preview-item,
.generation-card__add-image-btn {
    width: 90px; /* 从80px增加到90px，与文本框高度保持一致 */
    height: 90px; /* 从80px增加到90px，与文本框高度保持一致 */
    flex-shrink: 0; /* 防止被压缩 */
}

/* 上传图片占位符 */
.generation-card__uploaded-image {
    position: relative;
    width: 90px; /* 从80px增加到90px，与文本框高度保持一致 */
    height: 90px; /* 从80px增加到90px，与文本框高度保持一致 */
    border: 1px dashed var(--placeholder-text-color);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* 改为visible以显示底部标记 */
    flex-direction: column; /* 改为垂直布局，为底部标记腾出空间 */
}

.generation-card__uploaded-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    /* 临时用背景色代替图片 */
    width: 100%;
    height: 100%;
    background-color: #e9ecef;
}

.generation-card__remove-image-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    padding: 0;
    cursor: pointer;
}

/* 新增：图片编号标记样式 */
.generation-card__image-number {
    position: relative; /* 改为相对定位 */
    margin-top: 4px; /* 与图片框保持一定距离 */
    color: var(--text-color); /* 使用主题文字颜色 */
    font-size: 10px;
    font-weight: normal; /* 正常字重 */
    padding: 3px 6px; /* 调整内边距为左右留空间 */
    border-radius: var(--radius-2xl); /* 四个圆角 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 居中对齐 */
    gap: 6px; /* 序号和图标之间的间距 */
    white-space: nowrap;
    pointer-events: none; /* 不影响鼠标事件 */
    z-index: 10;
    width: fit-content; /* 宽度适应内容 */
    margin-left: auto; /* 居中对齐 */
    margin-right: auto; /* 居中对齐 */
}

/* 图片序号文字 */
.image-number-text {
    flex-shrink: 0; /* 防止压缩 */
}

/* 图片比例指示器 */
.image-aspect-indicator {
    flex-shrink: 0; /* 防止压缩 */
    display: flex;
    align-items: center;
    opacity: 0.8;
}

.image-aspect-indicator svg {
    width: 12px;
    height: 12px;
    stroke: none;
}

/* 默认颜色，但允许内联样式覆盖 */
.image-aspect-indicator svg rect {
    fill: var(--text-color); /* 使用主题文字颜色 */
}

/* 正方形图片的比例指示器使用蓝色高亮 */
.image-aspect-indicator.is-square svg {
    fill: #4A90E2 !important; /* 使用蓝色强调正方形 */
    opacity: 1; /* 提高不透明度以更醒目 */
}

/* 深色模式下的正方形图标颜色调整 */
body.dark-mode .image-aspect-indicator.is-square svg {
    fill: #5CA3F5 !important; /* 深色模式下使用稍亮的蓝色 */
}

/* 调整添加按钮样式 */
.generation-card__add-image-btn {
    width: 90px; /* 调整为90px，与文本框高度保持一致 */
    height: 90px; /* 调整为90px，与文本框高度保持一致 */
    border: 1px dashed var(--placeholder-text-color);
    border-radius: var(--radius-2xl); /* 恢复圆角矩形 */
    background-color: transparent;
    /* font-size: 2rem; */ /* <-- 移除为 + 设置的大字体 */
    color: var(--placeholder-text-color); /* <-- SVG 默认继承这个颜色 */
    display: flex; /* 使用 flex 居中 SVG */
    align-items: center;
    justify-content: center;
    padding: 0; /* 移除可能存在的内边距 */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* 添加 border-color 过渡 */
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 恢复默认状态的图标 */
.generation-card__add-image-btn .add-image-btn__default svg {
    width: 32px; /* 控制图标大小 */
    height: 32px;
}

.generation-card__add-image-btn:hover {
    background-color: rgba(0, 0, 0, 0.04); /* 浅色模式下的微妙深色半透明背景 */
    color: var(--text-color); /* 使用主文本颜色，提高对比度 */
    border-color: var(--accent-color); /* 使用强调色作为边框 */
}

/* 深色模式下图片上传框悬停效果优化 */
body.dark-mode .generation-card__add-image-btn:hover {
    background-color: rgba(255, 255, 255, 0.08); /* 深色模式下的微妙白色半透明背景 */
    color: var(--text-color); /* 使用主文本颜色，提高对比度 */
    border-color: var(--accent-color); /* 使用强调色作为边框 */
}

/* 添加图片按钮的默认和分割状态 */
.add-image-btn__default {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.add-image-btn__split {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden; /* 使用visibility代替pointer-events */
    transition: opacity 0.2s ease, visibility 0s 0.2s; /* 延迟隐藏visibility */
    border-radius: var(--radius-2xl);
    overflow: hidden;
    z-index: 1; /* 确保在默认按钮之上 */
}

/* hover时立即显示分割按钮 */
.generation-card__add-image-btn:hover .add-image-btn__split {
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s; /* 立即显示visibility */
}

/* 悬浮时切换显示 - 优化过渡效果 */
.generation-card__add-image-btn:hover .add-image-btn__default {
    opacity: 0;
    transition-delay: 0s; /* 立即隐藏 */
}

.generation-card__add-image-btn:hover .add-image-btn__split {
    opacity: 1;
    transition-delay: 0.05s; /* 轻微延迟显示，避免误触 */
}

/* 按钮获得焦点时的样式 - 只在键盘导航时显示 */
.generation-card__add-image-btn:focus {
    outline: none;
}

/* 只有通过键盘导航（Tab键）时才显示焦点框 */
.generation-card__add-image-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* 鼠标点击时不显示焦点框 */
.generation-card__add-image-btn:focus:not(:focus-visible) {
    outline: none;
}

/* 分割的两部分 */
/* 新增：上排和下排容器样式 */
.add-image-btn__top-row {
    flex: 1;
    display: flex;
    width: 100%;
}

.add-image-btn__bottom-row {
    flex: 1;
    display: flex;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 深色模式下的分隔线 */
body.dark-mode .add-image-btn__bottom-row {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.add-image-btn__upload,
.add-image-btn__color,
.add-image-btn__generate {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

.add-image-btn__upload {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .add-image-btn__upload {
    border-right-color: rgba(255, 255, 255, 0.1);
}

.add-image-btn__upload:hover,
.add-image-btn__color:hover,
.add-image-btn__generate:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-color);
}

/* 深色模式下的悬浮效果 */
body.dark-mode .add-image-btn__upload:hover,
body.dark-mode .add-image-btn__color:hover,
body.dark-mode .add-image-btn__generate:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* 隐藏图标，只显示文本 */
.add-image-btn__upload svg,
.add-image-btn__color svg,
.add-image-btn__generate svg {
    display: none;
}

.add-image-btn__upload span,
.add-image-btn__color span,
.add-image-btn__generate span {
    font-size: 12px;
    font-weight: 500;
}

/* 为三个分割按钮设置不同的文本颜色 */
.add-image-btn__upload span {
    color: #4CAF50; /* 绿色 - 上传 */
}

.add-image-btn__color span {
    color: #FF9800; /* 橙色 - 颜色 */
}

.add-image-btn__generate span {
    color: #2196F3; /* 蓝色 - 参考图 */
}

/* 深色模式下的颜色调整 */
body.dark-mode .add-image-btn__upload span {
    color: #66BB6A; /* 深色模式下的绿色 */
}

body.dark-mode .add-image-btn__color span {
    color: #FFB74D; /* 深色模式下的橙色 */
}

body.dark-mode .add-image-btn__generate span {
    color: #64B5F6; /* 深色模式下的蓝色 */
}

/* 粘贴图片时的视觉反馈 */
.generation-card__image-upload.paste-highlight {
    animation: pasteHighlight 0.3s ease;
}

@keyframes pasteHighlight {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(76, 175, 80, 0.1);
        transform: scale(1.02);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* 控制区域 - 使用 flex 布局实现灵活排列 */
.generation-card__controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* AI工具按钮 - 左对齐 */
.generation-card__controls > .generation-card__style-toggle-btn {
    order: 1;
    flex-shrink: 0;
    margin-right: auto;
}

/* 单图/双图 + 比例选择器组合 - 居中 */
.generation-card__controls > .generation-controls-group {
    order: 2;
    flex-shrink: 0;
}

/* 高清图片选项 - 与单双图靠在一起，中间无间距 */
.generation-card__controls > .image-controls-group {
    order: 3;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
}

/* 生成图片按钮 - 右对齐 */
.generation-card__controls > .generation-card__generate-btn {
    order: 4;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 0;
}

/* 图片控制组 - 与单双图并排显示，隐藏其他元素只显示高清图片 */
.image-controls-group {
    display: flex;
    align-items: center;
    gap: 0;
    width: auto;
}

/* 隐藏尺寸比例选项和透明背景选项 */
.image-controls-group > .aspect-ratio-options,
.image-controls-group > .png-output-option {
    display: none;
}

/* 只显示高清图片选项，与单双图靠在一起 */
.image-controls-group > .hd-image-option {
    display: none !important;
    margin-left: 0px !important;
}

/* 隐藏高清图片选项后，隐藏整个图片控制组 */
.image-controls-group {
    display: none !important;
}

.generation-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    background-color: var(--card-background-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    height: 36px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.generation-mode-toggle__btn {
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    padding: 0 14px;
    height: 32px;
    border-radius: calc(var(--radius-2xl) - 6px);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.generation-mode-toggle__btn:hover {
    background-color: rgba(148, 163, 184, 0.16);
    color: var(--primary-text-color);
}

.generation-mode-toggle__btn:focus-visible {
    outline: 2px solid var(--button-primary-bg);
    outline-offset: 2px;
}

.generation-mode-toggle__btn--active {
    background-color: #ff8c42;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.35);
}

.generation-mode-toggle__btn--active:hover {
    background-color: #ff7a2e;
}

.generation-mode-toggle__btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.generation-mode-toggle__btn + .generation-mode-toggle__btn {
    margin-left: 0;
}

body.dark-mode .generation-mode-toggle {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.45);
}

body.dark-mode .generation-mode-toggle__btn {
    color: rgba(226, 232, 240, 0.75);
}

body.dark-mode .generation-mode-toggle__btn:hover {
    background-color: rgba(148, 163, 184, 0.22);
    color: #e2e8f0;
}

body.dark-mode .generation-mode-toggle__btn--active {
    background-color: #ff8c42;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(255, 140, 66, 0.45);
}

/* 单双图 + 比例选择器组合容器 */
.generation-controls-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* PRO模型图片比例选择器样式 - 弹窗版 (暖色调) */
.pro-aspect-ratio-wrapper {
    position: relative;
    display: inline-flex;
}

.pro-aspect-ratio-wrapper.hidden {
    display: none !important;
}

/* 触发按钮 */
.pro-aspect-ratio-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 36px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    background-color: var(--card-background-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--primary-text-color);
    font-size: 0.85rem;
    font-weight: 500;
}

.pro-aspect-ratio-trigger:hover {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.pro-aspect-ratio-trigger__icon {
    width: 18px;
    height: 18px;
    color: #f59e0b;
}

.pro-aspect-ratio-trigger__text {
    min-width: 28px;
    text-align: center;
}

.pro-aspect-ratio-trigger__arrow {
    width: 12px;
    height: 12px;
    color: var(--secondary-text-color);
    transition: transform 0.2s ease;
}

.pro-aspect-ratio-trigger[aria-expanded="true"] .pro-aspect-ratio-trigger__arrow {
    transform: rotate(180deg);
}

/* 弹出面板 */
.pro-aspect-ratio-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 12px;
    transition: all 0.2s ease;
    min-width: 320px;
}

/* 深色模式下的不透明背景 */
.dark-mode .pro-aspect-ratio-panel {
    background: #1e1e1e;
}

.pro-aspect-ratio-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* 网格布局 - 5列2行 */
.pro-aspect-ratio-panel__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

/* 比例选项 */
.pro-aspect-ratio-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pro-aspect-ratio-option:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.pro-aspect-ratio-option--active {
    background: rgba(255, 140, 66, 0.15);
    border-color: #ff8c42;
}

.pro-aspect-ratio-option__icon {
    width: 36px;
    height: 36px;
    fill: var(--secondary-text-color);
    transition: fill 0.15s ease;
}

.pro-aspect-ratio-option:hover .pro-aspect-ratio-option__icon,
.pro-aspect-ratio-option--active .pro-aspect-ratio-option__icon {
    fill: #ff8c42;
}

.pro-aspect-ratio-option__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-text-color);
}

/* 暗色模式 */
body.dark-mode .pro-aspect-ratio-trigger {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.45);
}

body.dark-mode .pro-aspect-ratio-trigger:hover {
    border-color: #fbbf24;
    box-shadow: 0 2px 12px rgba(251, 191, 36, 0.3);
}

body.dark-mode .pro-aspect-ratio-panel {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .pro-aspect-ratio-option {
    background: rgba(148, 163, 184, 0.1);
}

body.dark-mode .pro-aspect-ratio-option:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
}

body.dark-mode .pro-aspect-ratio-option--active {
    background: rgba(255, 140, 66, 0.2);
    border-color: #ff8c42;
}

/* 新增：PNG 输出勾选框样式 - 使用toggle开关 */
.png-output-option {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 与比例按钮保持一致的高度和样式 */
    height: 36px;
    padding: 4px 12px; /* 修改：添加上下padding以与比例选择器的内边距保持一致 */
    border-radius: var(--radius-2xl);
    background-color: #f8fafc; /* 使用更中性的浅灰色背景，与toggle控件协调 */
    border: 1px solid var(--border-color); /* 添加边框保持一致 */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-sizing: border-box; /* 确保 padding 和 border 包含在高度内 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 增强阴影层次感 */
}

/* 移除透明背景选项的悬浮效果 */
/* .png-output-option:hover {
    background-color: var(--button-primary-hover-bg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
} */

/* Toggle开关样式 */
.toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: .5em;
    padding: .125em;
    background-image: linear-gradient(to bottom, #e5e7eb, #f3f4f6); /* 浅色模式：使用更中性的灰色渐变，减少蓝色调 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    /* 调整大小以适配现有设计 */
    font-size: 0.8em;
    border: 1px solid rgba(0, 0, 0, 0.08); /* 增加边框提升层次感 */
}

.toggle-checkbox {
    appearance: none;
    position: absolute;
    z-index: 1;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    /* fix em sizing */
    font: inherit;
    opacity: 0;
    cursor: pointer;
    /* 防止点击时重置父容器状态 */
    pointer-events: auto;
}

.toggle-container {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: .375em;
    width: 3em;
    height: 1.5em;
    background-color: #f1f5f9; /* 浅色模式：使用更中性的灰色背景，减少蓝色调 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 -1px 1px rgba(255, 255, 255, 0.8); /* 增强内阴影效果 */
    transition: background-color .4s linear;
    border: 1px solid rgba(0, 0, 0, 0.1); /* 添加边框增强轮廓 */
}

.toggle-checkbox:checked + .toggle-container {
    background: linear-gradient(135deg, #3730a3 0%, #4338ca 100%); /* 浅色模式：使用更深的蓝紫色渐变，增强对比 */
    border: 1px solid #312e81; /* 更深的蓝紫色边框 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 0 0 2px rgba(55, 48, 163, 0.3); /* 增强光晕效果 */
}

.toggle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: .0625em;
    border-radius: .3125em;
    width: 1.375em;
    height: 1.375em;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); /* 浅色模式：使用白色渐变背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); /* 增强外阴影效果 */
    border: 1px solid rgba(0, 0, 0, 0.08); /* 添加边框增强轮廓 */
    transition: left .4s, box-shadow .2s ease;
}

.toggle-checkbox:checked + .toggle-container > .toggle-button {
    left: 1.5625em;
}

.toggle-button-circles-container {
    display: grid;
    grid-template-columns: repeat(3, min-content);
    gap: .125em;
    position: absolute;
    margin: 0 auto;
}

.toggle-button-circle {
    border-radius: 50%;
    width: .125em;
    height: .125em;
    background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);
}

.png-checkbox-text {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color-secondary); /* 使用主题颜色变量确保一致性 */
    user-select: none;
}

/* 高清图片勾选框样式 */
.hd-image-option {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 4px 12px;
    border-radius: var(--radius-2xl);
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-left: 8px;
}

.hd-checkbox-text {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color-secondary);
    user-select: none;
}

/* 深色模式下高清图片选项容器优化 */
body.dark-mode .hd-image-option {
    background-color: rgba(31, 31, 31, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 深色模式下透明背景控件的优化 */
body.dark-mode .toggle-wrapper {
    background-image: linear-gradient(to bottom, #2d1f0a, #1a1205); /* 深色模式：使用香蕉黄主题渐变 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1); /* 减弱阴影效果 */
    border: 1px solid rgba(255, 193, 7, 0.2); /* 香蕉黄边框 */
}

body.dark-mode .toggle-container {
    background-color: #352510; /* 深色模式：使用香蕉黄主题背景 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 1px rgba(255, 193, 7, 0.1); /* 香蕉黄内阴影 */
    border: 1px solid rgba(255, 193, 7, 0.15); /* 香蕉黄边框 */
}

body.dark-mode .toggle-checkbox:checked + .toggle-container {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%); /* 深色模式：使用更深的蓝色渐变，增强对比 */
    border: 1px solid #075985; /* 更深的蓝色边框 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(3, 105, 161, 0.4); /* 增强光晕效果 */
}

body.dark-mode .toggle-button {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); /* 深色模式：保持浅色按钮渐变 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15); /* 深色模式下增强阴影 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 添加浅色边框 */
}

body.dark-mode .toggle-button-circle {
    background-image: radial-gradient(circle at 50% 0, #d0d0d0, #a0a0a0); /* 调整圆点颜色适应深色模式 */
}

/* 深色模式下PNG输出选项容器优化 */
body.dark-mode .png-output-option {
    background-color: rgba(31, 31, 31, 0.8); /* 使用更深的灰色背景，与toggle协调，减少蓝色调 */
    border-color: rgba(255, 255, 255, 0.1); /* 使用更淡的边框 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 减弱阴影效果 */
}

/* 深色模式下的提示词优化按钮样式 */
body.dark-mode .optimize-prompt-btn {
    background: rgba(45, 31, 10, 0.9);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: var(--text-color-dark);
}

body.dark-mode .optimize-prompt-btn:hover {
    background: rgba(45, 31, 10, 0.95);
    border-color: #0a84ff;
    box-shadow: 0 4px 8px rgba(10, 132, 255, 0.2);
}

body.dark-mode .optimize-prompt-btn.loading {
    background: rgba(10, 132, 255, 0.3) !important;
    border-color: #0a84ff !important;
}

/* 深色模式下的清空按钮样式 */
body.dark-mode .clear-text-btn {
    background: rgba(45, 31, 10, 0.9);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ff6b6b;
}

body.dark-mode .clear-text-btn:hover {
    background: rgba(45, 31, 10, 0.95);
    border-color: #ff6b6b;
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.2);
}

.generation-card__style-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-small); /* 图标和文字间距 */
    /* --- 恢复修改开始 --- */
    /* padding: var(--spacing-medium) var(--spacing-large); */ /* 统一内边距 */
    padding: 0 12px; /* 修改：移除垂直 padding，让 height 控制高度 */
    /* border-radius: var(--border-radius-large); */ /* 统一圆角 */
    border-radius: var(--radius-2xl); /* 恢复中等圆角 */
    /* font-size: 1rem; */ /* 统一字体大小 */
    font-size: 0.9rem; /* 恢复较小的字体 */
    /* font-weight: bold; */ /* 统一加粗 */
    font-weight: normal; /* 恢复普通字重 */
    /* background-color: var(--button-generate-bg); */ /* 统一背景色 */
    background-color: var(--card-background-color); /* 恢复卡片背景色 */
    /* color: var(--button-generate-text); */ /* 统一文字颜色 */
    color: var(--secondary-text-color); /* 恢复次要文字颜色 */
    /* border: none; */ /* 移除边框 */
    border: 1px solid var(--border-color); /* 恢复边框 */
    /* box-shadow: none; */ /* 移除阴影 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 增强阴影层次感 */
    /* --- 恢复修改结束 --- */
    /* --- 新增：强制高度 --- */
    height: 36px;
    line-height: 34px; /* 配合 height 和 border (36-2*border) */
    /* --- 新增结束 --- */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; /* 恢复之前的过渡效果 */
}

.generation-card__style-toggle-btn svg {
    /* color: var(--secondary-text-color); */ /* 移除单独设置的颜色，将继承父元素 */
    /* transition: color 0.2s ease; */ /* 移除单独的颜色过渡 */
    width: 16px; /* 保持图标大小 */
    height: 16px;
    /* 确保图标颜色与文字颜色一致 */
    fill: currentColor; /* 尝试使用 fill，如果 SVG 路径是用 fill 定义的 */
    stroke: currentColor; /* 尝试使用 stroke，如果 SVG 路径是用 stroke 定义的 */
}

/* AI工具按钮选中状态样式 */
.generation-card__style-toggle-btn--active {
    background-color: rgba(100, 116, 139, 0.15); /* 浅蓝灰色半透明背景 */
    color: var(--text-color); /* 使用主题文字颜色 */
    border-color: rgba(100, 116, 139, 0.4); /* 蓝灰色边框 */
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.2); /* 清新的蓝灰色阴影 */
}

.generation-card__style-toggle-btn--active svg {
    fill: var(--text-color) !important; /* 使用主题文字颜色 */
    stroke: var(--text-color) !important; /* 使用主题文字颜色 */
    color: var(--text-color) !important; /* 使用主题文字颜色 */
}

/* 强制覆盖SVG内部path元素的fill属性 */
.generation-card__style-toggle-btn--active svg path {
    fill: var(--text-color) !important; /* 使用主题文字颜色 */
}

.generation-card__style-toggle-btn:hover {
    /* background-color: var(--button-generate-hover-bg); */ /* 统一悬停背景色 */
    background-color: var(--button-primary-bg); /* 恢复悬停背景色 */
    /* border-color: var(--secondary-text-color); */ /* 移除边框颜色变化 */
    border-color: var(--select-hover-border-color); /* 恢复悬停边框颜色 */
    /* color: var(--primary-text-color); */ /* 移除文字颜色变化 */
    color: var(--primary-text-color); /* 恢复悬停文字颜色 */
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12); */ /* 移除阴影变化 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* 增强悬停阴影 */
    /* 图标颜色会随父元素 color 变化，无需单独设置 */
}

/* 选中状态下的悬停效果 */
.generation-card__style-toggle-btn--active:hover {
    background-color: rgba(100, 116, 139, 0.25); /* 加深的蓝灰色悬停 */
    border-color: rgba(100, 116, 139, 0.6);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3); /* 增强的清新阴影 */
    color: var(--text-color) !important; /* 确保悬停时文字保持主题色 */
}

/* 选中状态下悬停时的SVG图标样式 */
.generation-card__style-toggle-btn--active:hover svg {
    fill: var(--text-color) !important;
    stroke: var(--text-color) !important;
    color: var(--text-color) !important;
}

/* 选中状态下悬停时的SVG path元素样式 */
.generation-card__style-toggle-btn--active:hover svg path {
    fill: var(--text-color) !important;
}

/* .generation-card__style-toggle-btn:hover svg {
     color: var(--primary-text-color);
} */

/* --- 生成图片按钮样式 - Liquid Glass --- */
.generation-card__generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--glass-bg);
    /* 移除 backdrop-filter 以避免 Windows 中的文本模糊问题 */
    /* backdrop-filter: blur(10px) saturate(150%); */
    color: var(--text-color-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    cursor: default;
    transition: all var(--transition-quick);
    box-shadow: var(--shadow-sm);
    height: 48px;
    box-sizing: border-box;
    /* 添加 Windows 兼容性设置 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.generation-card__generate-btn:hover {
    /* 添加悬浮缩放效果 */
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: var(--shadow-md);
    /* 使用更安全的悬停效果 */
    background: color-mix(in srgb, var(--glass-bg) 90%, var(--accent-color));
}

/* --- Generate 按钮激活状态 - Liquid Glass --- */
.generation-card__generate-btn--active {
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
    border-color: var(--accent-color);
}

/* --- 激活状态的悬停效果 - Liquid Glass --- */
.generation-card__generate-btn--active:hover {
    /* 添加悬浮缩放效果 */
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: var(--shadow-md);
    /* 使用更安全的悬停效果 */
    background: color-mix(in srgb, var(--accent-color) 90%, #000);
}

/* --- 新增：禁用状态样式 --- */
.generation-card__generate-btn:disabled {
    background-color: #f5f5f5 !important; /* 灰色背景 */
    color: #999 !important; /* 灰色文字 */
    cursor: not-allowed !important; /* 禁用光标 */
    opacity: 0.6; /* 降低透明度 */
}

.generation-card__generate-btn:disabled:hover {
    background-color: #f5f5f5 !important; /* 悬停时保持灰色 */
    color: #999 !important; /* 悬停时保持灰色文字 */
    transform: none !important; /* 禁用任何变换效果 */
}
/* --- 禁用状态样式结束 --- */

/* 风格预览区域 */
.generation-card__style-gallery {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 一排显示7个工具 */
    gap: var(--spacing-medium);
    max-height: 400px; /* 限制最大高度 */
    overflow-y: auto; /* 纵向滚动 */
    padding-bottom: var(--spacing-medium);
}

/* --- 隐藏AI工具预览区域滚动条 --- */
.generation-card__style-gallery {
    scrollbar-width: none; /* Firefox隐藏滚动条 */
    -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
}

.generation-card__style-gallery::-webkit-scrollbar {
    display: none; /* Webkit浏览器隐藏滚动条 */
    width: 0; /* 确保滚动条宽度为0 */
    background: transparent; /* 背景透明 */
}

/* 针对Windows系统的额外隐藏滚动条样式 */
.generation-card__style-gallery::-webkit-scrollbar-track {
    display: none;
}

.generation-card__style-gallery::-webkit-scrollbar-thumb {
    display: none;
}

.generation-card__style-gallery::-webkit-scrollbar-corner {
    display: none;
}
/* --- 新增样式结束 --- */

.style-item {
    text-align: center;
    flex-shrink: 0; /* 防止项目被压缩 */
    width: 100%; /* 自适应网格列宽 */
    min-width: 0; /* 允许收缩 */
}

.style-item__image-placeholder {
    width: 100%;
    /* height: 100px; */ /* 移除固定高度 */
    aspect-ratio: 1 / 1; /* 新增：设置宽高比为 1:1 */
    background-color: #f0f0f0; /* 浅灰色背景 */
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--placeholder-text-color);
    font-size: 0.9rem;
    transition: background-color 0.2s ease; /* 添加过渡效果 */
}

/* 新增：为实际图片添加样式 */
.style-item__image {
    width: 100%;
    /* height: 100%; */ /* 移除固定高度 */
    aspect-ratio: 1 / 1; /* 新增：设置宽高比为 1:1 */
    object-fit: cover; /* 新增：确保图片覆盖容器，可能会裁剪 */
    border-radius: var(--radius-2xl);
    display: block; /* 确保图片是块级元素 */
}

.style-item__caption {
    font-size: 0.8rem; /* 稍微减小字体以适应7列布局 */
    color: var(--secondary-text-color);
    margin-top: 4px; /* 增加一点上边距 */
}

/* 新增：选中风格项的样式 */
.style-item--selected {
    background-color: rgba(0, 123, 255, 0.05); /* 淡蓝色背景 */
    border-radius: var(--radius-2xl); /* 应用圆角 */
    /* 可以根据需要添加其他样式，例如轻微放大效果 */
    /* transform: scale(1.02); */
}

.style-item--selected .style-item__image {
    border: 2px solid #007bff; /* 为图片添加蓝色边框 */
    /* 可能需要调整内边距或外边距来适应边框，这里暂时不加 */
    /* padding: 2px; */
}

.style-item--selected .style-item__caption {
    color: #007bff; /* 标题文字也变蓝 */
    font-weight: bold; /* 标题加粗 */
}

/* 风格选择指示条 */
.generation-card__style-indicator {
    height: 4px;
    width: 40px; /* 指示条宽度 */
    background-color: var(--indicator-color);
    border-radius: 2px;
    margin: 0 auto; /* 居中 */
    /* 初始位置需要根据实际选中的项通过 JS 或默认选中项来确定 */
    /* 这里暂时只给样式 */
    display: none; /* 隐藏该元素 */
}

/* 可以添加媒体查询以适应不同屏幕尺寸 */
/* 大屏幕确保7列布局 */
@media (min-width: 1200px) {
    .generation-card__style-gallery {
        grid-template-columns: repeat(7, 1fr); /* 大屏幕保持7列 */
    }
}

/* 中等屏幕尺寸 (平板) */
@media (max-width: 1024px) and (min-width: 769px) {
    .generation-card__style-gallery {
        grid-template-columns: repeat(5, 1fr); /* 平板显示5列 */
        max-height: 350px;
    }
}

@media (max-width: 768px) {
    .header__nav {
        display: none; /* 在小屏幕上隐藏导航 */
    }
    
    /* 移动端主体内容增加间距 */
    .main-content {
        padding: calc(var(--spacing-xlarge) * 1.5) var(--spacing-medium); /* 减少顶部间距，增加左右间距 */
    }
    
    /* 移动端生成卡片增加内边距 */
    .generation-card {
        padding: calc(var(--spacing-large) * 1.2); /* 增加卡片内边距 */
        gap: calc(var(--spacing-large) * 1.2); /* 增加元素间距 */
    }
    
    /* 移动端输入区域优化 */
    .generation-card__input-area {
        flex-direction: column;
        align-items: stretch;
        gap: calc(var(--spacing-medium) * 1.5); /* 增加输入区域内部间距 */
        padding-bottom: calc(var(--spacing-large) * 1.2); /* 增加底部间距 */
    }
    
    /* 移动端文本输入框优化 */
    .generation-card__prompt-input {
        min-height: 110px; /* 调整为110px，确保显示3行文本 */
        font-size: 1rem; /* 稍微调整字体大小 */
        padding: calc(var(--spacing-small) * 1.5); /* 增加内边距 */
    }
    
    /* 移动端控制区域优化 - 保持并排显示 */
    .generation-card__controls {
        flex-wrap: wrap;
        gap: calc(var(--spacing-small) * 0.8);
        position: relative; /* 为绝对定位提供基准 */
    }

    /* AI工具按钮在移动端占全宽 */
    .generation-card__controls > .generation-card__style-toggle-btn {
        width: 100%;
        text-align: center; /* 文本居中对齐 */
        justify-content: center; /* 内容居中对齐 */
        order: 1;
    }

    /* 单双图切换组 - 靠在一起并在中间 */
    .generation-card__controls > .generation-mode-toggle {
        order: 2;
        flex-shrink: 0;
        margin: 0 auto 0 auto;
    }

    /* 高清图片选项 - 与单双图靠在一起 */
    .generation-card__controls > .image-controls-group {
        order: 3;
        flex-shrink: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* 生成按钮占第三行全宽 */
    .generation-card__controls > .generation-card__generate-btn {
        order: 4;
        width: 100%;
    }
    
    .generation-mode-toggle {
        width: auto;
        justify-content: space-between;
        height: 36px;
        gap: 4px;
        padding: 2px;
    }

    .generation-mode-toggle__btn {
        flex: 1;
        height: 100%;
        font-size: 0.85rem;
        padding: 0 12px;
    }
    
    /* 移动端AI工具按钮优化 */
    .generation-card__style-toggle-btn {
        height: 44px; /* 增加移动端按钮高度，符合触控标准 */
        font-size: 1rem; /* 增加字体大小 */
        padding: 0 calc(var(--spacing-medium) * 1.5); /* 增加内边距 */
    }
    
    /* 移动端图片控制组样式 - 重新定义，只包含尺寸选择器 */
    .image-controls-group {
        display: flex;
        flex-direction: row;
        gap: 0; /* 内部由aspect-ratio-options控制间距 */
        align-items: center;
        justify-content: center; /* 尺寸选择器居中 */
    }
    
    /* 透明背景选项在移动端占47%宽度，留出间距 */
    .image-controls-group > .png-output-option {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        width: 47%; /* 占47%宽度，留出间距 */
        display: flex; /* 确保内部元素正常排列 */
        flex-direction: row; /* 强制水平排列 */
        align-items: center; /* 垂直居中对齐 */
        justify-content: center; /* 内容居中对齐 */
        white-space: nowrap; /* 防止文字换行 */
    }
    
    /* 移动端比例选择按钮优化 */
    .aspect-ratio-options {
        justify-content: center; /* 让比例按钮在组内居中 */
        width: auto; /* 改为自适应宽度 */
        flex: 1; /* 占据可用空间 */
        height: 44px; /* 增加按钮组高度 */
        padding: 6px; /* 增加容器内边距 */
    }
    
    .aspect-ratio-option {
        padding: 0 calc(var(--spacing-medium) * 1.2); /* 增加按钮内边距 */
        font-size: 1rem; /* 增加字体大小 */
    }
    
    .aspect-ratio-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
    
    /* 移动端透明背景选项优化 */
    .png-output-option {
        width: auto; /* 让透明背景选项保持自然宽度 */
        justify-content: center; /* 让内容居中 */
        height: 44px; /* 增加高度 */
        padding: 6px 16px; /* 增加内边距 */
        flex: 0 0 auto; /* 不伸缩，保持固定宽度 */
    }

    .png-checkbox-text {
        font-size: 1rem; /* 增加字体大小 */
    }

    .png-output-option .toggle-wrapper {
        font-size: 0.9em; /* 稍微增大toggle开关 */
    }

    /* 移动端高清图片选项优化 */
    .hd-image-option {
        width: auto;
        justify-content: center;
        height: 44px;
        padding: 6px 16px;
        flex: 0 0 auto;
        margin-left: 8px;
    }

    .hd-checkbox-text {
        font-size: 1rem;
    }

    .hd-image-option .toggle-wrapper {
        font-size: 0.9em;
    }
    
    /* 移动端生成按钮优化 */
    .generation-card__generate-btn {
        height: 48px; /* 增加生成按钮高度 */
        font-size: 1.1rem; /* 增加字体大小 */
        font-weight: 600; /* 增加字重 */
        padding: 0 calc(var(--spacing-large) * 1.5); /* 增加内边距 */
        /* 移动端悬浮缩放效果 */
        transition: all var(--transition-quick);
    }
    
    /* 移动端生成按钮悬停效果 */
    .generation-card__generate-btn:hover {
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.1);
        box-shadow: var(--shadow-md);
    }
    
    /* 移动端激活状态悬停效果 */
    .generation-card__generate-btn--active:hover {
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.1);
        box-shadow: var(--shadow-md);
    }
    
    /* 移动端图片上传区域优化 */
    .generation-card__image-upload {
        margin-top: 0; /* 移除顶部边距，已由gap控制 */
        column-gap: calc(var(--spacing-small) * 1.5); /* 列间距 */
        row-gap: calc(var(--spacing-small) * 1.5 + 20px); /* 行间距：基础间距 + 底部标记空间 */
        width: 100%; /* 移动端占满宽度 */
        max-width: none; /* 移除最大宽度限制 */
    }

    .image-preview-item,
    .generation-card__add-image-btn {
        /* 移动端：3列布局，计算每个元素宽度 */
        width: calc((100% - var(--spacing-small) * 2) / 3);
        aspect-ratio: 1 / 1; /* 保持正方形比例 */
        height: auto; /* 高度自适应 */
        overflow: visible; /* 改回visible以显示底部标记 */
        box-sizing: border-box; /* 确保包含边框和内边距 */
    }
    
    /* 移动端图片编号标记优化 */
    .generation-card__image-number {
        font-size: 11px; /* 增加字体大小 */
        padding: 4px 0; /* 增加内边距 */
        margin-top: 2px; /* 减少与图片的距离 */
        color: var(--text-color); /* 确保使用主题文字颜色 */
    }
    
    /* 移动端图片删除和编辑按钮优化 */
    .remove-image-btn {
        width: 24px; /* 增加按钮大小 */
        height: 24px;
        top: 4px; /* 调整位置 */
        right: 4px;
    }
    
    .edit-image-btn-preview {
        top: 6px; /* 左上角位置 */
        left: 6px;
    }
    
    .remove-image-btn svg {
        width: 14px; /* 增加图标大小 */
        height: 14px;
    }
    
    /* 移动端添加图片按钮优化 */
    .generation-card__add-image-btn {
        border: 2px dashed var(--placeholder-text-color); /* 增加边框粗细 */
    }
    
    .generation-card__add-image-btn svg {
        width: 36px; /* 增加图标大小 */
        height: 36px;
    }
    
    /* 移动端分割样式调整 */
    .add-image-btn__upload svg,
    .add-image-btn__color svg {
        width: 18px;
        height: 18px;
    }
    
    .add-image-btn__upload span,
    .add-image-btn__color span {
        font-size: 10px;
    }
    
    /* 移动端遮罩层固定尺寸 */
    .image-preview-overlay {
        width: 90px; /* 使用固定宽度，与图片预览项一致 */
        height: 90px; /* 使用固定高度，与图片预览项一致 */
    }
    
    /* 移动端状态信息优化 */
    .usage-info {
        top: -24px; /* 增加与卡片的距离 */
    }
    
    .update-status {
        top: -24px; /* 增加与卡片的距离 */
    }
    
    /* 移动端隐藏累计请求文本信息 */
    .cost-counter-wrapper {
        display: none !important; /* 在移动端完全隐藏累计请求信息 */
    }
    
    /* 移动端隐藏天才猴子参考手册和历史记录按钮 */
    .manual-button,
    .history-button {
        display: none !important; /* 在移动端隐藏悬浮按钮 */
    }
    
    #usageCounter,
    .update-status__text,
    .cost-counter {
        font-size: 0.8rem; /* 稍微增加移动端状态信息字体 */
    }
    
    .header__user-button,
    .header__user-credit {
        display: none; /* 小屏幕可能隐藏部分信息 */
    }
    
    .header__logo img {
        height: 80px; /* 移动端稍微缩小logo */
    }
    
    /* AI工具网格移动端样式 */
    .generation-card__style-gallery {
        grid-template-columns: repeat(3, 1fr); /* 移动端显示3列 */
        max-height: 300px; /* 移动端减少高度 */
        gap: calc(var(--spacing-small) * 1.5); /* 增加网格间距 */
        padding-bottom: calc(var(--spacing-medium) * 1.5); /* 增加底部间距 */
        scrollbar-width: none; /* Firefox隐藏滚动条 */
        -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
    }
    
    .generation-card__style-gallery::-webkit-scrollbar {
        display: none; /* Webkit浏览器隐藏滚动条 */
        width: 0; /* 确保滚动条宽度为0 */
        background: transparent; /* 背景透明 */
    }
    
    /* 针对Windows系统的额外隐藏滚动条样式 */
    .generation-card__style-gallery::-webkit-scrollbar-track {
        display: none;
    }
    
    .generation-card__style-gallery::-webkit-scrollbar-thumb {
        display: none;
    }
    
    .generation-card__style-gallery::-webkit-scrollbar-corner {
        display: none;
    }
    
    /* 移动端AI工具标题字体调整 */
    .style-item__caption {
        font-size: 0.8rem; /* 稍微增加字体大小 */
    }
    
    
    /* 移动端禁用Witt松鼠图标的黄色气泡弹窗 */
    .usage-info__witt-link::after,
    .usage-info__witt-link::before {
        display: none !important; /* 隐藏气泡和箭头 */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .usage-info__witt-link:hover::after,
    .usage-info__witt-link:hover::before,
    .usage-info__witt-link.witt-active::after,
    .usage-info__witt-link.witt-active::before {
        display: none !important; /* 强制隐藏悬停和激活状态的气泡 */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }
}

/* 针对更小屏幕设备的额外优化（如iPhone SE等） */
@media (max-width: 480px) {
    /* 更小屏幕的主体内容 */
    .main-content {
        padding: var(--spacing-large) var(--spacing-small); /* 进一步减少间距 */
    }
    
    /* 更小屏幕的生成卡片 */
    .generation-card {
        padding: var(--spacing-large); /* 适度减少内边距 */
        margin: 0 var(--spacing-small); /* 增加侧边距 */
    }
    
    /* 更小屏幕的输入框 */
    .generation-card__prompt-input {
        min-height: 100px; /* 调整为100px，确保显示3行文本 */
        font-size: 16px; /* 防止iOS Safari自动缩放 */
    }
    
    /* 更小屏幕的按钮高度调整 */
    .generation-card__style-toggle-btn {
        height: 40px; /* 略微减少高度 */
        font-size: 0.9rem;
    }
    
    .aspect-ratio-options {
        height: 40px; /* 略微减少高度 */
        flex: 1; /* 占据可用空间 */
    }
    
    .png-output-option {
        height: 40px; /* 略微减少高度 */
        flex: 0 0 auto; /* 不伸缩，保持固定宽度 */
    }
    
    /* 更小屏幕的控制区域 - 保持并排布局 */
    .generation-card__controls {
        position: relative;
        gap: calc(var(--spacing-small) * 0.6);
    }

    .generation-card__controls > .generation-card__style-toggle-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        order: 1;
    }

    .generation-card__controls > .generation-mode-toggle {
        order: 2;
        flex-shrink: 0;
        margin: 0 auto 0 auto;
    }

    .generation-card__controls > .image-controls-group {
        order: 3;
        flex-shrink: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .generation-card__controls > .generation-card__generate-btn {
        order: 4;
        width: 100%;
    }

    .generation-mode-toggle {
        width: auto;
        height: 36px;
        padding: 2px;
        gap: 4px;
    }

    .generation-mode-toggle__btn {
        flex: 1;
        height: 100%;
        font-size: 0.75rem;
        padding: 0 8px;
    }
    
    /* 更小屏幕隐藏透明背景选项 */
    .image-controls-group > .png-output-option {
        display: none;
    }
    
    /* 确保更小屏幕的尺寸选择器居中 */
    .image-controls-group {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-medium);
    }
    
    .generation-card__generate-btn {
        height: 44px; /* 保持足够的触控区域 */
        font-size: 1rem;
        /* 更小屏幕悬浮缩放效果 */
        transition: all var(--transition-quick);
    }
    
    /* 更小屏幕生成按钮悬停效果 */
    .generation-card__generate-btn:hover {
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.1);
        box-shadow: var(--shadow-md);
    }
    
    /* 更小屏幕激活状态悬停效果 */
    .generation-card__generate-btn--active:hover {
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.1);
        box-shadow: var(--shadow-md);
    }
    
    /* 更小屏幕的图片预览 */
    .image-preview-item,
    .generation-card__add-image-btn {
        width: 100px; /* 调整为100px，与文本框高度保持一致 */
        height: 100px; /* 调整为100px，与文本框高度保持一致 */
        overflow: visible; /* 改回visible以显示底部标记 */
        box-sizing: border-box; /* 确保包含边框和内边距 */
    }
    
    .image-preview-item img {
        width: 100%; /* 使用100%宽度以完全填充容器 */
        height: 100%; /* 使用100%高度以完全填充容器 */
    }
    
    .generation-card__image-number {
        font-size: 9px; /* 更小的字体 */
        padding: 2px 4px; /* 更小的内边距 */
        margin-top: 1px; /* 减少与图片的距离 */
        color: var(--text-color); /* 确保使用主题文字颜色 */
    }
    
    .generation-card__add-image-btn svg {
        width: 32px; /* 适中的图标大小 */
        height: 32px;
    }
    
    /* 更小屏幕遮罩层固定尺寸 */
    .image-preview-overlay {
        width: 100px; /* 使用固定宽度，与图片预览项一致 */
        height: 100px; /* 使用固定高度，与图片预览项一致 */
    }
    
    /* 更小屏幕的状态信息 */
    #usageCounter,
    .update-status__text,
    .cost-counter {
        font-size: 0.75rem; /* 适度缩小字体 */
    }
    
    /* 更小屏幕也隐藏累计请求信息和悬浮按钮 */
    .cost-counter-wrapper,
    .manual-button,
    .history-button {
        display: none !important; /* 确保在更小屏幕也隐藏 */
    }
    
    /* 更小屏幕的Logo */
    .header__logo img {
        height: 70px; /* 进一步缩小logo */
    }
    
    /* 更小屏幕的AI工具网格 */
    .generation-card__style-gallery {
        gap: var(--spacing-small); /* 减少间距以节省空间 */
        max-height: 250px; /* 减少高度 */
        scrollbar-width: none; /* Firefox隐藏滚动条 */
        -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
    }
    
    .generation-card__style-gallery::-webkit-scrollbar {
        display: none; /* Webkit浏览器隐藏滚动条 */
        width: 0; /* 确保滚动条宽度为0 */
        background: transparent; /* 背景透明 */
    }
    
    /* 针对Windows系统的额外隐藏滚动条样式 */
    .generation-card__style-gallery::-webkit-scrollbar-track {
        display: none;
    }
    
    .generation-card__style-gallery::-webkit-scrollbar-thumb {
        display: none;
    }
    
    .generation-card__style-gallery::-webkit-scrollbar-corner {
        display: none;
    }
    
    .style-item__caption {
        font-size: 0.75rem; /* 减小字体 */
    }
    
    
    /* 更小屏幕也禁用Witt松鼠图标的黄色气泡弹窗 */
    .usage-info__witt-link::after,
    .usage-info__witt-link::before {
        display: none !important; /* 隐藏气泡和箭头 */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .usage-info__witt-link:hover::after,
    .usage-info__witt-link:hover::before,
    .usage-info__witt-link.witt-active::after,
    .usage-info__witt-link.witt-active::before {
        display: none !important; /* 强制隐藏悬停和激活状态的气泡 */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }
}

/* API Key 弹窗样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位，覆盖整个页面 */
    z-index: 10000; /* 提高优先级，高于验证码弹窗（9999） */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 如果内容过多则允许滚动 */
    background-color: rgba(0, 0, 0, 0.4); /* 减少背景不透明度，更轻盈 */
    backdrop-filter: blur(8px); /* 添加背景模糊效果 */
    -webkit-backdrop-filter: blur(8px); /* Safari 兼容 */
    /* 使用 Flexbox 居中弹窗内容 (在 modal--visible 中设置 display: flex) */
    align-items: center;
    justify-content: center;
    opacity: 0; /* 初始透明 */
    pointer-events: none; /* 隐藏时阻止鼠标事件 */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 增强过渡效果，使用更流畅的贝塞尔曲线 */
}

/* 控制显示/隐藏的类 */
.modal--visible {
    display: flex; /* <--- 确保这一行存在且没有被注释 */
    opacity: 1; /* 完全不透明 */
    pointer-events: auto; /* 显示时允许鼠标事件 */
}

/* 新增：弹窗关闭动画类 */
.modal--closing {
    opacity: 0;
    pointer-events: none;
}

.modal__content {
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    margin: auto;
    padding: var(--spacing-lg);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
    width: 90%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transform: scale(1);
    transition: all var(--transition-fluid);
}

/* 新增：弹窗内容关闭时的动画 */
.modal--closing .modal__content {
    transform: scale(0.9);
    opacity: 0;
}

.modal__title {
    margin: 0; /* 移除下边距，避免数字被挤下去 */
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-color); /* 使用主题颜色变量 */
    letter-spacing: -0.025em; /* 稍微紧缩字符间距 */
}

.modal__description {
    margin: 8px 0 0 0;
    color: var(--text-color-secondary); /* 使用主题次要文字颜色 */
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 新增：强调文本样式 */
.modal__description strong {
    color: var(--text-color); /* 使用主题主要文字颜色 */
    font-weight: 600;
}

/* 新增：带移除按钮的状态容器 */
.modal__status-with-remove {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.modal__status-with-remove .modal__description {
    margin: 0;
    flex: 1;
}

.modal__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgb(239, 68, 68);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.modal__remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
    opacity: 1;
}

.modal__remove-btn.hidden {
    display: none;
}


.modal__input {
    width: 100%;
    padding: 0 16px;
    height: 42px; /* 与激活按钮高度统一 */
    border: 2px solid #e2e8f0; /* 更清新的边框颜色 */
    border-radius: 6px; /* 与激活按钮圆角统一 */
    font-size: 1rem;
    background-color: #f8fafc; /* 轻微的背景色 */
    transition: all 0.2s ease;
    box-sizing: border-box; /* 确保包含边框的总高度为42px */
}

.modal__input:focus {
    outline: none;
    border-color: #3b82f6; /* 清新的蓝色焦点边框 */
    background-color: #ffffff; /* 聚焦时背景变白 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* 柔和的焦点阴影 */
}

.modal__input::placeholder {
    color: #94a3b8; /* 更淡的占位符颜色 */
}

/* Modal输入框滚动条样式 */
.modal__input::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    opacity: 0;
    transition: opacity var(--transition-quick);
}

.modal__input::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.modal__input::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background var(--transition-quick);
}

.modal__input::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 深色模式下的Modal输入框滚动条样式 */
body.dark-mode .modal__input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .modal__input::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 当Modal输入框有内容或获得焦点时显示滚动条 */
.modal__input:not(:placeholder-shown)::-webkit-scrollbar,
.modal__input:focus::-webkit-scrollbar {
    opacity: 1;
}

.modal__actions {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center;
    margin-top: 16px;
}

.modal__actions-left {
    display: flex;
    gap: 12px;
}

.modal__actions-right {
    display: flex;
    gap: 12px;
}

.modal__button {
    padding: 12px 24px;
    border-radius: 10px; /* 圆润的按钮 */
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;
    transition: all 0.2s ease;
    border: none;
}

.modal__button--save {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); /* 清新的蓝色渐变 */
    color: white;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

.modal__button--save:hover {
    transform: translateY(-1px); /* 轻微上浮效果 */
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.modal__button--close {
    background: var(--glass-bg);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    color: var(--text-color-secondary);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

.modal__button--close:hover {
    background: color-mix(in srgb, var(--glass-bg) 80%, var(--accent-color));
    color: var(--text-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.modal__button--reset {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* 橙色渐变 */
    color: white;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.modal__button--reset:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* 专门的确认按钮样式 */
.modal__button--confirm {
    background: linear-gradient(135deg, var(--accent-color) 0%, #1d4ed8 100%);
    color: white;
    border: 1px solid var(--accent-color);
    font-weight: 600;
    padding: 12px 32px;
    min-width: 120px;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.modal__button--confirm:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

/* API 密钥弹窗响应式优化 */
@media (max-width: 768px) {
    .modal__info-section {
        padding: 18px;
        margin: 16px 0;
        font-size: 0.95rem;
    }
    
    .modal__info-section--api-key p {
        margin: 0 0 14px 0;
    }
    
    .modal__key-description {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 16px;
    }
    
    .contact-info {
        font-size: 0.9rem;
        padding: 5px 14px;
    }
    
    .department-manager {
        font-size: 0.9rem;
        padding: 3px 10px;
    }
    
    .modal__button--confirm {
        padding: 10px 24px;
        min-width: 100px;
        font-size: 0.9rem;
    }
}

/* --- 图片上传预览样式 --- */

/* 图片预览样式已移至上方 .generation-card__image-upload 旁边 */

.image-preview-item {
    position: relative; /* 用于定位移除按钮 */
    width: 90px; /* 调整为90px，与文本框高度保持一致 */
    height: 90px; /* 调整为90px，与文本框高度保持一致 */
    border-radius: var(--radius-2xl);
    overflow: visible; /* 改回visible以显示底部标记 */
    border: 1px solid var(--border-color); /* 添加边框 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直布局 */
    align-items: center; /* 水平居中 */
    box-sizing: border-box; /* 确保包含边框和内边距 */
}

.image-preview-item img {
    width: 100%; /* 使用100%宽度以完全填充容器 */
    height: 100%; /* 使用100%高度以完全填充容器 */
    object-fit: cover; /* 保持图片比例并填充 */
    cursor: pointer; /* <-- 确保这里有手型光标 */
    border-radius: var(--radius-2xl); /* 添加圆角以匹配容器 */
    flex-shrink: 0; /* 防止被压缩 */
    display: block; /* 确保图片是块级元素 */
}

/* --- 新增：拖拽排序相关样式 --- */
.image-preview-item.draggable-image-item {
    transition: all 0.2s ease;
    cursor: grab !important;
}

.image-preview-item.draggable-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-preview-item.draggable-image-item.dragging {
    opacity: 0.4 !important;
    transform: scale(0.95) !important;
    z-index: 1000 !important;
    cursor: grabbing !important;
    filter: blur(1px);
}

.image-preview-item.draggable-image-item.drag-over {
    /* 目标位置的明显聚焦框效果 */
    border: 4px solid #007bff !important;
    background: linear-gradient(135deg,
        rgba(0, 123, 255, 0.15) 0%,
        rgba(0, 123, 255, 0.25) 100%) !important;
    transform: scale(1.08) !important;
    box-shadow:
        0 0 0 3px rgba(0, 123, 255, 0.4),
        0 0 30px rgba(0, 123, 255, 0.6),
        inset 0 0 20px rgba(0, 123, 255, 0.2) !important;
    outline: 3px solid rgba(255, 255, 255, 0.9) !important;
    outline-offset: -8px;
    border-radius: 8px !important;
    animation: drop-target-pulse 0.6s ease-in-out infinite !important;
    z-index: 999 !important;
}

/* 目标位置脉动动画 */
@keyframes drop-target-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(0, 123, 255, 0.4),
            0 0 30px rgba(0, 123, 255, 0.6),
            inset 0 0 20px rgba(0, 123, 255, 0.2);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(0, 123, 255, 0.6),
            0 0 40px rgba(0, 123, 255, 0.8),
            inset 0 0 30px rgba(0, 123, 255, 0.3);
    }
}

/* 拖拽手柄样式已移除，用户可以直接拖拽图片 */

/* 移动端触摸拖拽优化 */
@media (max-width: 768px) {
    .draggable-image-item {
        touch-action: none; /* 禁用默认触摸行为 */
    }
    
    /* 拖拽手柄样式已移除 */
    
    .image-preview-item.draggable-image-item.dragging {
        opacity: 0.5 !important;
        transform: scale(0.9) !important;
        z-index: 1000 !important;
        filter: blur(1px);
    }

    /* 移动端目标位置聚焦框 */
    .image-preview-item.draggable-image-item.drag-over {
        border: 4px solid #007bff !important;
        background: linear-gradient(135deg,
            rgba(0, 123, 255, 0.2) 0%,
            rgba(0, 123, 255, 0.3) 100%) !important;
        transform: scale(1.1) !important;
        box-shadow:
            0 0 0 4px rgba(0, 123, 255, 0.5),
            0 0 40px rgba(0, 123, 255, 0.7),
            inset 0 0 25px rgba(0, 123, 255, 0.3) !important;
        outline: 3px solid rgba(255, 255, 255, 0.9) !important;
        outline-offset: -8px;
        border-radius: 8px !important;
        animation: drop-target-pulse 0.6s ease-in-out infinite !important;
        z-index: 999 !important;
    }
}

/* 为图片预览容器中的透明背景图片特别优化 */
.image-preview-item .transparent-bg-checker {
    border-radius: var(--radius-2xl); /* 确保棋格背景也有圆角 */
    width: 100%; /* 确保完全填充容器 */
    height: 100%; /* 确保完全填充容器 */
    object-fit: cover; /* 保持比例并填充 */
}

/* --- 新增：图片预览悬停遮罩 --- */
.image-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px; /* 使用固定宽度，与图片预览项一致 */
    height: 90px; /* 使用固定高度，与图片预览项一致 */
    background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 默认完全透明 */
    transition: opacity 0.2s ease; /* 平滑过渡效果 */
    pointer-events: none; /* 让遮罩不影响下方图片的点击事件 */
    border-radius: var(--radius-2xl); /* 保持和父容器一样的圆角 */
    box-sizing: border-box; /* 确保包含边框和内边距 */
}

.image-preview-overlay svg {
    color: white; /* 图标颜色 */
    width: 24px; /* 图标大小 */
    height: 24px;
}

/* 当鼠标悬停在预览项上时，显示遮罩 */
.image-preview-item:hover .image-preview-overlay {
    opacity: 1;
}
/* --- 新增结束 --- */

/* --- 图片预览操作按钮样式 --- */
.image-preview-overlay-btn {
    position: absolute;
    background-color: rgba(128, 128, 128, 0.65);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.2;
    padding: 2px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    transition: all 0.2s ease;
    z-index: 10;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.image-preview-overlay-btn:hover {
    background-color: rgba(128, 128, 128, 0.85);
    transform: translateY(-1px);
    opacity: 1;
}

.edit-image-btn-preview {
    top: 6px;
    left: 6px;
}

.edit-image-btn-preview--annotated {
    background-color: rgba(0, 122, 255, 0.85) !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

.edit-image-btn-preview--annotated:hover {
    background-color: rgba(0, 122, 255, 1) !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.5);
}
/* --- 样式结束 --- */

.remove-image-btn {
    position: absolute; /* 绝对定位到右上角 */
    top: 4px;
    right: 4px; /* 增加内边距确保不超出边界 */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    color: white;
    border: none;
    border-radius: 50%; /* 圆形按钮 */
    width: 18px; /* 稍微减小尺寸确保适配 */
    height: 18px;
    cursor: pointer;
    padding: 0; /* 移除默认 padding */
    display: flex; /* <--- 新增 */
    align-items: center; /* <--- 新增：垂直居中 */
    justify-content: center; /* <--- 新增：水平居中 */
    opacity: 0.8; /* 默认透明度 */
    transition: opacity 0.2s ease;
    z-index: 10; /* <-- 新增：确保移除按钮在遮罩层之上 */
}

/* 新增：为移除按钮内的 SVG 图标设置样式 */
.remove-image-btn svg {
    stroke: white; /* 设置图标线条颜色为白色 */
    display: block; /* 确保 SVG 正常显示 */
    width: 10px; /* 稍微减小图标尺寸 */
    height: 10px;
}

.image-preview-item:hover .remove-image-btn {
    opacity: 1; /* 悬停时完全显示 */
}

/* 添加按钮禁用时的样式 */
.generation-card__add-image-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- 拖拽上传视觉反馈 (旧样式，将被移除或注释) --- */
/*
.generation-card__input-area.drag-over {
    border-bottom-style: dashed; 
    border-bottom-color: var(--secondary-text-color); 
}
*/

/* --- 新增：整个卡片拖拽悬停样式 --- */
.generation-card.drag-over {
    background-color: rgba(0, 123, 255, 0.03); /* 更淡的蓝色背景 */
    /* 使用 box-shadow 模拟边框和"悬浮"感，比直接改 border 效果更好 */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3), var(--card-shadow); /* 叠加蓝色外框阴影和原有的卡片阴影 */
}

/* --- 加载状态遮罩样式 --- */
/* 隐藏类 */
.hidden {
    display: none !important; /* 使用 !important 确保覆盖其他 display 属性 */
}

/* 加载遮罩层 */
.loading-overlay {
    position: fixed; /* 固定定位，覆盖整个视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    display: none; /* 默认隐藏 */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 确保在最上层 */
    backdrop-filter: blur(5px); /* 添加毛玻璃效果 */
    -webkit-backdrop-filter: blur(5px); /* Safari 兼容 */
}

.loading-overlay:not(.hidden) {
    display: flex; /* 只有在没有hidden类时才显示 */
}

/* 加载内容容器 */
.loading-overlay__content {
    text-align: center;
    color: var(--color-text-primary, #333); /* 恢复默认颜色 */
    /* 确保容器能容纳长文本，同时保持居中对齐 */
    width: 95%; /* 增加宽度以容纳长文本 */
    max-width: 800px; /* 大幅增加最大宽度，确保长文本有足够空间 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 确保所有子元素居中对齐 */
    /* --- 移除：不再添加背景板 --- */
    /* background-color: rgba(255, 255, 255, 0.95); */
    /* padding: var(--spacing-large); */
    /* border-radius: var(--border-radius-medium); */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    /* --- 移除结束 --- */
}

/* 加载动画 (简单旋转) */
/* 新的loader样式 */
.loader {
    width: 50px;
    height: 50px;
    background: #007bff;
    display: block;
    margin: 0 auto 20px;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader::before {
    content: '';
    box-sizing: border-box;
    left: 0;
    top: 0;
    transform: rotate(45deg);
    position: absolute;
    width: 50px;
    height: 50px;
    background: #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.15);
}

.loader::after {
    content: '';
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #007bff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.15);
}

/* 旋转动画关键帧 */
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 加载提示语 */
.loading-overlay__tip {
    font-size: 1rem; /* 字体大小 */
    font-weight: 500; /* 稍粗字体 */
    margin: 0; /* 移除auto，因为父容器已经设置了align-items: center */
    white-space: nowrap; /* 防止换行 */
    text-align: center; /* 确保文本内容居中 */
    width: 100%; /* 占满父容器宽度，确保居中对齐 */
    /* color: #222; */ /* <-- 恢复默认颜色 */
}

/* --- 响应式调整 (可选) --- */
@media (max-width: 768px) {
    .loader {
        width: 40px;
        height: 40px;
    }
    .loader::before {
        width: 40px;
        height: 40px;
    }
    .loader::after {
        width: 30px;
        height: 30px;
    }
    .loading-overlay__tip {
        font-size: 0.9rem;
        white-space: nowrap; /* 确保移动端也不换行 */
        text-align: center; /* 移动端也保持居中 */
        width: 100%; /* 移动端也占满宽度 */
    }
}

/* --- 新增：进度条样式 --- */
/* 进度条容器 */
.loading-overlay__progress-bar-container {
    width: 60%; /* 进度条宽度适中，与文本保持平衡 */
    max-width: 400px; /* 增加最大宽度，与长文本视觉平衡 */
    height: 8px; /* 进度条高度 */
    /* background-color: var(--color-border-light, #e0e0e0); */ /* 进度条背景色 */
    background-color: #c0c0c0; /* <-- 调整：使用更深的灰色作为背景 */
    border-radius: 4px; /* 圆角 */
    margin: 15px 0; /* 上下间距，不使用auto以确保在flex容器中正确居中 */
    overflow: hidden; /* 隐藏内部条超出的部分 */
}

/* 内部进度条 */
.loading-overlay__progress-bar {
    width: 0%; /* 初始宽度为 0 */
    height: 100%;
    background-color: var(--color-primary, #007bff); /* 进度条颜色，使用主题色 */
    border-radius: 4px; /* 保持圆角 */
    /* 动画将在 JS 控制显示时通过添加类来触发 */
    /* 或者可以直接在这里应用动画，每次显示时元素会重新渲染 */
    animation: fake-progress 180s ease-out forwards; /* 修改：持续时间保持 180s */
    animation-delay: 0.1s; /* 稍微延迟一点开始，让用户先看到动画 */
}

/* 进度条动画关键帧 - 优化为更真实的加载体验 */
@keyframes fake-progress {
    0% { width: 0%; }
    20% { width: 25%; } /* 前20%时间快速到25% */
    60% { width: 75%; } /* 中间40%时间稳定增长到75% */
    85% { width: 92%; } /* 接下来25%时间慢慢到92% */
    100% { width: 100%; } /* 最后15%时间完成剩余8% */
}

/* 响应式调整 (可选) */
@media (max-width: 768px) {
    .loading-overlay__content {
        width: 98%; /* 移动端使用更大的宽度 */
        max-width: 95vw; /* 确保不超出屏幕 */
    }
    
    .loading-overlay__progress-bar-container {
        width: 80%; /* 移动端进度条稍宽一些 */
        max-width: 320px;
    }
}

/* --- 新增：预计时间提示样式 --- */
.loading-overlay__eta {
    font-size: 0.85rem; /* 比提示语稍小 */
    color: var(--secondary-text-color, #666); /* 使用次要文本颜色或默认灰色 */
    margin-top: 5px; /* 与上方提示语稍微拉开距离 */
    font-weight: normal; /* 普通字重 */
    /* color: #555; */ /* <-- 恢复默认颜色 */
}

/* 响应式调整 (可选) */
@media (max-width: 768px) {
    .loading-overlay__eta {
        font-size: 0.8rem;
    }
}

/* 新增：尺寸比例选择框样式 */
.generation-card__select-wrapper {
    position: relative; /* 保持相对定位，为箭头定位 */
    /* 可以根据需要调整宽度，或者让它自适应 */
    /* width: 150px; */ /* 移除固定宽度 */
    /* --- 恢复修改开始 --- */
    /* border-radius: var(--border-radius-large); */ /* 为 wrapper 添加圆角，select 将继承 */
    border-radius: var(--radius-2xl); /* 恢复中等圆角 */
    /* background-color: var(--button-generate-bg); */ /* 统一背景色 */
    background-color: var(--select-background-color); /* 恢复独立背景色 */
    /* display: flex; */ /* 使用 flex 来对齐内部 select 和箭头 */
    /* align-items: center; */ /* 垂直居中 */
    /* transition: background-color 0.2s ease; */ /* 添加背景过渡 */
    border: 1px solid var(--select-border-color); /* 恢复 wrapper 边框 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 恢复轻微阴影 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 恢复 wrapper 过渡 */
    /* --- 恢复修改结束 --- */
}

/* 移除 wrapper 的悬停效果，移到 select 本身 */
/*
.generation-card__select-wrapper:hover {
    border-color: var(--select-hover-border-color);
}
*/

/* 尺寸比例下拉选择框样式 */
.generation-card__aspect-ratio-select {
    appearance: none; /* 移除浏览器默认样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* background-color: var(--select-background-color); */ /* 移除独立背景色，将继承 wrapper */
    background-color: transparent; /* 设置为透明以显示 wrapper 的背景 */
    /* border: 1px solid var(--select-border-color); */ /* 移除独立边框 */
    border: none; /* 移除边框 */
    /* border-radius: var(--border-radius-medium); */ /* 移除独立圆角 */
    border-radius: 0; /* select 本身不需要圆角 */
    /* padding: 8px 28px 8px 12px; */ /* 调整内边距：上 右 下 左 (给箭头留空间) */
    /* --- 恢复修改开始 --- */
    /* padding: var(--spacing-medium) var(--spacing-large); */ /* 统一内边距 */
    padding: 0 28px 0 12px; /* 修改：移除垂直 padding */
    height: 100%; /* 让 select 填满 wrapper 高度 */
    line-height: 34px; /* 配合 wrapper 的 height 和 border */
    /* padding-right: 40px; */ /* 确保给右侧箭头留出足够空间 */
    /* font-size: 1rem; */ /* 统一字体大小 */
    font-size: 0.9rem; /* 恢复较小字体 */
    /* font-weight: bold; */ /* 统一加粗 */
    font-weight: normal; /* 恢复普通字重 */
    /* color: var(--button-generate-text); */ /* 统一文字颜色 */
    color: var(--secondary-text-color); /* 恢复次要文字颜色 */
    /* --- 恢复修改结束 --- */
    cursor: pointer;
    outline: none;
    /* flex-grow: 1; */ /* 让 select 占据 wrapper 内的主要空间 (移除) */
}

.generation-card__select-wrapper:hover {
    /* background-color: var(--button-generate-hover-bg); */ /* Wrapper 悬停时改变背景 */
    border-color: var(--select-hover-border-color); /* 恢复 wrapper 悬停边框颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 恢复 wrapper 悬停阴影 */
}

/* .generation-card__aspect-ratio-select:hover { */
    /* border-color: var(--select-hover-border-color); */ /* 移除悬停边框变色 */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); */ /* 移除悬停阴影加深 */
/* } */

/* .generation-card__aspect-ratio-select:focus {
    border-color: var(--button-primary-hover-bg);
    box-shadow: 0 0 0 3px rgba(144, 148, 165, 0.2);
} */

/* 移除 IE 的默认箭头 */
.generation-card__aspect-ratio-select::-ms-expand {
    display: none;
}

/* 下拉箭头图标样式 */
.generation-card__select-arrow {
    position: absolute;
    /* right: var(--spacing-large); */ /* 调整箭头位置与右侧内边距一致 */
    right: 10px; /* 恢复箭头位置 */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* 让箭头不影响点击 */
    /* color: var(--button-generate-text); */ /* 箭头颜色与文字一致 */
    color: var(--secondary-text-color); /* 恢复箭头颜色 */
    width: 12px; /* 可以调整箭头大小 */
    height: 12px;
    transition: color 0.2s ease; /* 添加颜色过渡 */
}

/* 当 wrapper 悬停时，箭头颜色也改变（可选，如果希望更明显） */
/* .generation-card__select-wrapper:hover .generation-card__select-arrow {
    color: var(--primary-text-color);
} */

/* 调整控制区域内元素的间距 */
.generation-card__controls {
    gap: var(--spacing-medium); /* 统一元素间距 */
}

/* --- 结果区域样式 --- */
.generation-card__result-area {
    /* 保持原有样式 */
    margin-top: var(--spacing-large);
    padding: var(--spacing-medium);
    border: 1px dashed var(--color-border-light);
    border-radius: var(--radius-2xl);
    min-height: 100px; /* 保持最小高度 */
    background-color: var(--color-background-secondary);
    text-align: center; /* 内容居中 */
    overflow: auto; /* 如果内容过多，允许滚动 */
}

/* 新增：默认隐藏结果区域的类 */
.result-area--hidden {
    display: none;
}

.generation-card__result-area img {
    max-width: 100%; /* 确保图片不会超出容器 */
    height: auto; /* 保持图片比例 */
    border-radius: var(--radius-2xl); /* 轻微圆角 */
    display: block; /* 修正图片下方可能出现的空隙 */
    margin: 0 auto; /* 图片水平居中 */
}

/* --- 新增：结果图片容器和下载按钮样式 --- */
.result-image-container {
    position: relative; /* 用于绝对定位内部的按钮和遮罩 */
    display: inline-block; /* 使容器包裹图片大小 */
    vertical-align: top; /* 对齐方式，如果需要 */
    /* 新增：添加 overflow hidden 以确保伪元素在容器边界内 */
    overflow: hidden;
    /* 新增：为容器添加圆角，以便伪元素也继承 */
    border-radius: var(--radius-2xl); /* 和图片圆角一致 */
}

/* 新增：悬浮遮罩伪元素 */
.result-image-container::before {
    content: ''; /* 伪元素必须有 content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
    pointer-events: none; /* 遮罩不干扰鼠标事件 */
    z-index: 5; /* 层级低于按钮 */
}

/* 修改：下载按钮样式 */
.download-image-btn {
    position: absolute;
    /* 修改：水平排列三个按钮 - 下载在右侧 */
    top: 50%;
    left: calc(50% + 52px); /* 在中心右侧，给亚马逊按钮留出中间位置 */
    transform: translate(-50%, -50%); /* 使用 transform 精确居中 */
    background-color: rgba(0, 0, 0, 0.65); /* 半透明黑色背景 */
    color: white;
    border: none;
    border-radius: 50%; /* 圆形按钮 */
    width: 40px;       /* 稍微增大按钮尺寸 */
    height: 40px;      /* 稍微增大按钮尺寸 */
    display: flex;     /* 使用 Flexbox 居中图标 */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;        /* 默认隐藏 */
    transition: opacity 0.3s ease, background-color 0.3s ease; /* 平滑过渡效果 */
    z-index: 10;       /* 确保在图片和遮罩上方 */
    padding: 0; /* 确保没有额外的内边距影响图标居中 */
}

/* 复制按钮样式 */
.copy-image-btn {
    position: absolute;
    /* 水平排列三个按钮 - 复制在左侧 */
    top: 50%;
    left: calc(50% - 52px); /* 在中心左侧，给亚马逊按钮留出中间位置 */
    transform: translate(-50%, -50%); /* 使用 transform 精确居中 */
    background-color: rgba(0, 0, 0, 0.65); /* 半透明黑色背景 */
    color: white;
    border: none;
    border-radius: 50%; /* 圆形按钮 */
    width: 40px;       /* 与下载按钮相同尺寸 */
    height: 40px;      /* 与下载按钮相同尺寸 */
    display: flex;     /* 使用 Flexbox 居中图标 */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;        /* 默认隐藏 */
    transition: opacity 0.3s ease, background-color 0.3s ease; /* 平滑过渡效果 */
    z-index: 10;       /* 确保在图片和遮罩上方 */
    padding: 0; /* 确保没有额外的内边距影响图标居中 */
}

/* 容器悬停时显示按钮和遮罩 */
.result-image-container:hover .download-image-btn,
.result-image-container:hover .copy-image-btn, /* 新增：悬停时显示复制按钮 */
.result-image-container:hover::before, /* 同时显示遮罩 */
.result-image-container:hover .download-image-tooltip, /* <--- 新增：悬停时显示提示文字 */
.result-image-container:hover .download-image-reminder,
.result-image-container:hover .amazon-export-btn {
    opacity: 1;
}

/* 下载按钮悬停效果 */
.download-image-btn:hover {
    background-color: rgba(0, 0, 0, 0.85); /* 悬停时加深背景色 */
}

/* 复制按钮悬停效果 */
.copy-image-btn:hover {
    background-color: rgba(0, 0, 0, 0.85); /* 悬停时加深背景色 */
}

/* 下载按钮内 SVG 图标样式 */
.download-image-btn svg {
    width: 20px; /* 调整图标大小以适应新按钮尺寸 */
    height: 20px;
    stroke: white; /* 图标颜色 */
}

/* 复制按钮内 SVG 图标样式 */
.copy-image-btn svg {
    width: 20px; /* 调整图标大小以适应新按钮尺寸 */
    height: 20px;
    stroke: white; /* 图标颜色 */
}

.amazon-export-btn {
    position: absolute;
    /* 水平排列三个按钮 - 亚马逊在中间 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(0, 0, 0, 0.65);
    color: #ff9900;
    border: none;
    border-radius: 999px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
    z-index: 11;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    padding: 0;
}

.amazon-export-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: translate(-50%, -50%) scale(1.05);
}

.amazon-export-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* --- 新增：下载按钮下方的提示文字样式 --- */
.download-image-tooltip {
    position: absolute;
    top: calc(50% + 25px); /* 新增：定位到按钮下方 (按钮高度40px/2 + 5px间距) */
    left: 50%;
    transform: translate(-50%, 0); /* 修改：仅水平居中，垂直位置由top控制 */
    color: white;
    font-size: 0.8rem; /* 较小的字体 */
    background-color: rgba(0, 0, 0, 0.65); /* 和按钮一样的背景 */
    padding: 4px 8px; /* 添加内边距 */
    border-radius: var(--radius-2xl); /* 添加圆角 */
    white-space: nowrap; /* 防止文字换行 */
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease; /* 平滑过渡 */
    z-index: 10; /* 确保在遮罩上方 */
    pointer-events: none; /* 提示文字不拦截鼠标事件 */
}
/* --- 新增结束 --- */

.download-image-reminder {
    position: absolute;
    top: calc(50% + 35px); /* 在水平排列的按钮组下方显示 */
    left: 50%;
    transform: translate(-50%, 0);
    color: #ffeaa7;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    background-color: rgba(0, 0, 0, 0.55);
    padding: 4px 10px;
    border-radius: var(--radius-2xl);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

.amazon-export-modal.modal--visible {
    display: flex;
}

.amazon-export-modal .modal__content {
    max-width: 520px;
    width: 100%;
    padding: 24px;
    border-radius: 18px;
    background: rgba(14,14,14,0.94);
    color: #fefefe;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.amazon-export-modal__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-right: 50px;
}

.amazon-export-modal__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-right: 4px;
    white-space: nowrap;
}

.amazon-export-modal__title svg {
    width: 36px;
    height: 36px;
    fill: #ff9900;
    flex-shrink: 0;
}

.amazon-export-preview-wrapper {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 360px; /* 固定容器高度,缩小以适应一屏 */
    margin: 0 auto 16px;
    background: rgba(255,255,255,0.04);
    border-radius: 16px;
    padding: 16px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.amazon-export-preview-wrapper canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 12px;
    cursor: grab;
    background: rgba(0,0,0,0.65);
}

.amazon-export-preview-wrapper canvas:active {
    cursor: grabbing;
}

.amazon-export-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.amazon-export-size-buttons {
    display: flex;
    gap: 4px;
    background: rgba(255, 153, 0, 0.08);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255, 153, 0, 0.2);
}

.amazon-size-btn {
    background: transparent;
    color: rgba(255, 153, 0, 0.7);
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.amazon-size-btn:hover {
    background: rgba(255, 153, 0, 0.15);
    color: #ff9900;
}

.amazon-size-btn--active {
    background: linear-gradient(135deg, #ff9900, #ff7700);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.3);
}

.amazon-size-btn--active:hover {
    background: linear-gradient(135deg, #ffac33, #ff8800);
    color: #fff;
}

.amazon-export-slider-group {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.amazon-export-slider-group label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.amazon-export-slider-group input[type="range"] {
    width: 100%;
    accent-color: #ff9900;
}

.amazon-export-actions {
    display: flex;
    gap: 10px;
}

.amazon-export-button {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.25s ease, border 0.25s ease;
}

.amazon-export-button:hover {
    background: rgba(255,255,255,0.16);
}

.amazon-export-button--primary {
    background: linear-gradient(135deg, #ff9900, #ff5500);
    border: none;
    box-shadow: 0 8px 20px rgba(255,153,0,0.35);
}

.amazon-export-button--primary:hover {
    background: linear-gradient(135deg, #ffac33, #ff6f1a);
}

.amazon-export-tip {
    margin-top: 18px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.78);
    text-align: center;
}

.amazon-export-status {
    margin-top: 12px;
    text-align: center;
    font-size: 0.8rem;
    min-height: 1.4em;
    color: rgba(255,255,255,0.82);
}

.amazon-export-status--error {
    color: #ff6b6b;
}

.amazon-export-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
}

.amazon-export-loading .loader {
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid #ff9900;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 0.8s linear infinite;
}

.amazon-export-loading span {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

/* 浅色模式下的亚马逊导出样式 */
body:not(.dark-mode) .amazon-export-modal .modal__content {
    background: var(--glass-bg);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px var(--shadow-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body:not(.dark-mode) .amazon-export-preview-wrapper {
    background: rgba(0,0,0,0.03);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

body:not(.dark-mode) .amazon-export-preview-wrapper canvas {
    background: rgba(255,255,255,0.9);
}

body:not(.dark-mode) .amazon-export-size-buttons {
    background: rgba(255, 153, 0, 0.06);
    border-color: rgba(255, 153, 0, 0.15);
}

body:not(.dark-mode) .amazon-size-btn {
    color: rgba(255, 119, 0, 0.7);
}

body:not(.dark-mode) .amazon-size-btn:hover {
    background: rgba(255, 153, 0, 0.12);
    color: #ff7700;
}

body:not(.dark-mode) .amazon-size-btn--active {
    background: linear-gradient(135deg, #ff9900, #ff7700);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.25);
}

body:not(.dark-mode) .amazon-size-btn--active:hover {
    background: linear-gradient(135deg, #ffac33, #ff8800);
}

body:not(.dark-mode) .amazon-export-slider-group label {
    color: var(--text-color-secondary);
}

body:not(.dark-mode) .amazon-export-button {
    background: var(--glass-bg);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
}

body:not(.dark-mode) .amazon-export-button:hover {
    background: rgba(255,255,255,0.8);
}

/* 浅色模式下保持主导出按钮的橙色 */
body:not(.dark-mode) .amazon-export-button--primary {
    background: linear-gradient(135deg, #ff9900, #ff5500) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(255,153,0,0.35);
}

body:not(.dark-mode) .amazon-export-button--primary:hover {
    background: linear-gradient(135deg, #ffac33, #ff6f1a) !important;
}

body:not(.dark-mode) .amazon-export-tip {
    color: var(--text-color-secondary);
}

body:not(.dark-mode) .amazon-export-loading .loader {
    border: 3px solid rgba(0,0,0,0.1);
    border-top: 3px solid #ff9900;
}

body:not(.dark-mode) .amazon-export-loading span {
    color: var(--text-color-secondary);
}

body:not(.dark-mode) .amazon-export-modal__title svg {
    fill: #ff9900; /* 保持亚马逊橙色在所有模式下一致 */
}

/* 亚马逊导出模态框响应式样式 */
@media (max-width: 768px) {
    .amazon-export-modal__header {
        flex-wrap: wrap;
        padding-right: 40px;
        gap: 8px;
    }

    .amazon-export-modal__title {
        font-size: 1rem;
        gap: 8px;
    }

    .amazon-export-modal__title svg {
        width: 30px;
        height: 30px;
    }

    .amazon-export-size-buttons {
        order: 3;
        width: 100%;
        margin-top: 4px;
        justify-content: stretch;
    }

    .amazon-size-btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .amazon-export-modal__header {
        padding-right: 35px;
        gap: 6px;
    }

    .amazon-export-modal__title {
        font-size: 0.95rem;
        gap: 6px;
        margin-right: 2px;
    }

    .amazon-export-modal__title svg {
        width: 26px;
        height: 26px;
    }

    .amazon-export-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .amazon-export-slider-group,
    .amazon-export-actions {
        width: 100%;
    }

    .amazon-export-actions {
        justify-content: stretch;
    }

    .amazon-export-button {
        flex: 1;
    }
}



/* 页脚样式 */
.footer {
  padding: 20px 0; /* 上下内边距 */
  margin-top: var(--spacing-large); /* 使用变量控制间距 */
  text-align: center;
  position: relative;
}

.footer__copyright {
  font-size: 0.8em; /* 较小的字号 */
  color: rgba(148, 163, 184, 0.6); /* 浅色模式：更轻盈的浅灰色 */
  margin: 0; /* 去除段落默认的外边距 */
  transition: color var(--transition-quick); /* 平滑颜色过渡 */
}

/* 深色模式下的版权文本优化 */
body.dark-mode .footer__copyright {
  color: rgba(148, 163, 184, 0.5); /* 深色模式：更淡的浅灰色 */
}

.footer__copyright-text {
  cursor: pointer;
}

/* 隐藏StatusMonitor的左下角指示器按钮 */
#status-monitor .status-indicator {
  display: none !important;
}

/* 页脚状态按钮样式 - 文本按钮 */
.footer__status-btn {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 8px;
  transition: all 0.3s ease;
  background: transparent;
  color: #10b981; /* 默认绿色 */
  text-decoration: none;
  outline: none;
  user-select: none;
}

.footer__status-btn:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.footer__status-btn:active {
  transform: scale(0.98);
}

.footer__status-btn.good {
  color: #10b981;
}

.footer__status-btn.warning {
  color: #f59e0b;
}

.footer__status-btn.error {
  color: #ef4444;
}

/* 保留旧的 status-dot 样式以兼容其他地方的使用 */
.footer__status-dot {
  display: none;
}

/* 重新定位StatusMonitor的详情弹窗到版权文字上方 */
#status-monitor .status-details {
  position: fixed !important;
  bottom: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  margin-bottom: 0 !important;
}


/* 图片放大预览弹窗样式 */
.image-preview-modal {
    display: none;
    background-color: rgba(0, 0, 0, 0.3); /* 降低背景透明度 */
    backdrop-filter: blur(20px); /* 添加高斯模糊效果 */
    -webkit-backdrop-filter: blur(20px); /* Safari 兼容 */
    z-index: 99999; /* 极高的层级，确保任何弹窗都盖不住它 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 防止滚动 */
}

.image-preview-modal.modal--visible {
    display: block;
}

.image-preview-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw; /* 最大宽度为视口宽度的 90% */
    max-height: 90vh; /* 最大高度为视口高度的 90% */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    /* 更新：让容器可以接收鼠标事件 */
    pointer-events: auto;
    /* 新增：透视效果，使缩放变换更自然 */
    perspective: 1000px;
}

/* 注释：.image-preview-modal__image 样式已移至后面统一定义（5478行附近），避免重复 */

.image-preview-modal__close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    z-index: 1002;
    pointer-events: auto;
    transition: color 0.2s ease, transform 0.2s ease;
}

.image-preview-modal__close-btn:hover {
    color: #ddd;
    transform: scale(1.1); /* 悬停时稍微放大 */
}

/* 新增：缩放控制面板样式 */
.image-preview-controls {
    position: absolute;
    bottom: 30px; /* 距离底部 30px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 30px;
    padding: 8px 16px;
    z-index: 1002;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 缩放按钮样式 */
.zoom-control-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.zoom-control-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.zoom-control-btn:active {
    transform: scale(0.95);
}

/* 缩放级别显示 */
.zoom-level {
    color: white;
    font-size: 14px;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
}

/* 新增：图片预览操作按钮样式 */
.image-preview-actions {
    position: absolute;
    top: 20px;
    left: 25px;
    display: flex;
    gap: 10px;
    z-index: 1002;
    pointer-events: auto;
}

.image-preview-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.image-preview-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.image-preview-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.image-preview-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.image-preview-action-btn span {
    white-space: nowrap;
}

/* 移动设备适配 */
@media (max-width: 768px) {
    .image-preview-controls {
        bottom: 15px;
        padding: 6px 12px;
        gap: 10px;
    }
    
    .zoom-control-btn {
        width: 32px;
        height: 32px;
    }
    
    .zoom-level {
        font-size: 12px;
        min-width: 40px;
    }
    
    .image-preview-actions {
        top: 15px;
        left: 15px;
        gap: 8px;
    }
    
    .image-preview-action-btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .image-preview-action-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* 鼠标指针样式 */
.image-preview-modal__image.draggable {
    cursor: grab;
}

.image-preview-modal__image.dragging {
    cursor: grabbing;
}

/* 结果图片悬停效果增强 */
.result-image-container img {
    transition: filter 0.2s ease;
    cursor: zoom-in; /* 默认显示放大指针 */
}

.result-image-container:hover img {
    filter: brightness(1.05); /* 悬停时轻微提亮 */
}

/* 全屏模式下的样式调整 */
.image-preview-modal:fullscreen {
    background-color: rgba(0, 0, 0, 1); /* 全黑背景 */
    padding: 0;
}

.image-preview-modal:fullscreen .image-preview-modal__content {
    max-width: 95vw;
    max-height: 95vh;
}

.image-preview-modal:fullscreen .image-preview-actions {
    top: 30px;
    left: 30px;
}

/* Safari 和 Chrome */
.image-preview-modal:-webkit-full-screen {
    background-color: rgba(0, 0, 0, 1);
    padding: 0;
}

.image-preview-modal:-webkit-full-screen .image-preview-modal__content {
    max-width: 95vw;
    max-height: 95vh;
}

.image-preview-modal:-webkit-full-screen .image-preview-actions {
    top: 30px;
    left: 30px;
}

/* Firefox */
.image-preview-modal:-moz-full-screen {
    background-color: rgba(0, 0, 0, 1);
    padding: 0;
}

.image-preview-modal:-moz-full-screen .image-preview-modal__content {
    max-width: 95vw;
    max-height: 95vh;
}

.image-preview-modal:-moz-full-screen .image-preview-actions {
    top: 30px;
    left: 30px;
}

/* IE11 */
.image-preview-modal:-ms-fullscreen {
    background-color: rgba(0, 0, 0, 1);
    padding: 0;
}

.image-preview-modal:-ms-fullscreen .image-preview-modal__content {
    max-width: 95vw;
    max-height: 95vh;
}

.image-preview-modal:-ms-fullscreen .image-preview-actions {
    top: 30px;
    left: 30px;
}

/* 移动设备适配 */
@media (max-width: 768px) {
    .image-preview-controls {
        bottom: 15px;
        padding: 6px 12px;
        gap: 10px;
    }
    
    .zoom-control-btn {
        width: 32px;
        height: 32px;
    }
    
    .zoom-level {
        font-size: 12px;
        min-width: 40px;
    }
    
    .image-preview-modal__close-btn {
        top: 15px;
        right: 15px;
        font-size: 30px;
    }
}
/* --- 修改结束 --- */

/* 新增：文本输入区域容器样式 */
.generation-card__text-input-wrapper {
    position: relative; /* 作为清空按钮绝对定位的基准 */
    flex-grow: 1; /* 占据剩余空间 */
}

/* 清空按钮样式 - 统一定位和尺寸（与优化按钮保持一致） */
.clear-text-btn {
    position: absolute; /* 绝对定位 */
    top: 8px; /* 距离顶部距离 - 统一为8px */
    right: 8px; /* 距离右侧距离 - 统一为8px */
    padding: 5px; /* 按钮内边距 - 与优化按钮保持一致 */
    background-color: rgba(0, 0, 0, 0.1); /* 浅灰色背景 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 添加边框与优化按钮一致 */
    border-radius: 5px; /* 方形圆角 - 与优化按钮一致 */
    cursor: pointer;
    line-height: 0; /* 防止 SVG 底部有空隙 */
    opacity: 0.7; /* 默认轻微透明 */
    transition: opacity 0.2s ease, background-color 0.2s ease; /* 平滑过渡 */
    width: 26px; /* 固定宽度 - 与优化按钮一致 */
    height: 26px; /* 固定高度 - 与优化按钮一致 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.clear-text-btn svg {
    display: block; /* 确保 SVG 是块级元素 */
    color: #666; /* 图标颜色 */
}

.clear-text-btn:hover {
    opacity: 1; /* 悬停时不透明 */
    background-color: rgba(0, 0, 0, 0.15); /* 悬停时背景稍深 */
}

/* 通过 JS 控制显示/隐藏 */
.clear-text-btn.hidden {
    display: none;
}

/* 新增：更新状态提示样式 */
.update-status {
    /* display: flex; */ /* 不再需要 flex 布局 */
    /* align-items: center; */
    /* gap: 6px; */ /* 圆点和文字间距 */
    /* margin-bottom: 8px; */ /* 移除与下方输入框的间距 */
    /* padding-left: 2px; */ /* 移除左内边距 */
    position: absolute; /* 绝对定位 */
    top: -18px; /* <--- 调整：增加与卡片的垂直距离 */
    right: var(--spacing-large); /* 与卡片右侧内边距对齐 */
    display: flex; /* 内部元素仍需 flex 排列 */
    align-items: center;
    gap: 6px;
}

.update-status__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color, #007aff); /* 主题蓝色 */
    border-radius: 50%;
    flex-shrink: 0; /* 防止圆点被压缩 */
    transition: background-color var(--transition-quick); /* 平滑颜色过渡 */
}

/* 深色模式下的更新状态圆点 */
body.dark-mode .update-status__dot {
    background-color: var(--accent-color-dark, #0a84ff); /* 深色模式主题蓝色 */
}

.update-status__text {
    font-size: 0.75rem; /* 12px */
    /* color: var(--secondary-text-color); */
    color: #999; /* <--- 调整：使用更浅的灰色 */
    line-height: 1; /* 确保文本行高不会过大 */
}

/* 确保 text-input-wrapper 保持相对定位 */
.generation-card__text-input-wrapper {
    position: relative;
    flex-grow: 1;
}

/* --- 新增：AI 工具信息按钮和提示框样式 --- */
.style-item {
    position: relative; /* 为了绝对定位按钮和提示框 */
    /* ... 其他样式 ... */
}

.style-item__info-btn {
    position: absolute;
    top: 6px; /* 微调垂直位置 */
    right: 6px; /* 微调水平位置 */
    width: 20px; /* 固定宽度 */
    height: 20px; /* 固定高度 */
    padding: 0; /* 移除内边距 */
    border-radius: 50%; /* 圆形按钮 */
    background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
    color: white; /* 图标颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
    z-index: 10; /* 确保在图片之上 */
    opacity: 0; /* 默认隐藏 */
    pointer-events: none; /* 默认不可点击 */
}

.style-item:hover .style-item__info-btn {
    opacity: 1; /* 悬停时显示 */
    pointer-events: auto; /* 悬停时可点击 */
}

.style-item__info-btn:hover {
    background-color: rgba(0, 0, 0, 0.6); /* 悬停时背景加深 */
}

.style-item__info-btn svg {
    width: 12px; /* 调整图标大小 */
    height: 12px;
}

.style-item__tooltip {
    position: absolute;
    /* 定位相关的 top/left/bottom/right 现在主要由 JS 控制 */
    /* bottom: calc(100% + 5px); */
    /* right: 0; */
    display: inline-block; /* 改为 inline-block 试试 */
    vertical-align: top; /* 添加对齐方式 */
    background-color: rgba(0, 0, 0, 0.8); /* 深色半透明背景 */
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-2xl);
    font-size: 0.85rem;
    line-height: 1.4; /* 新增：设置合适的行高 */
    white-space: normal; /* 允许换行 */
    max-width: 250px; /* 限制最大宽度 */
    opacity: 0; /* 默认隐藏 */
    visibility: hidden; /* 默认隐藏 */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001; /* 确保足够高，因为是添加到 body 的 */
    pointer-events: none; /* 不阻挡下方元素 */
    box-sizing: border-box; /* 新增：确保 padding 包含在尺寸内 */
    text-align: left; /* 新增：确保文本左对齐 */
}

.style-item__tooltip.visible {
    opacity: 1;
    visibility: visible;
    /* --- 移除调试样式 --- */
    /* display: block !important; */
    /* background-color: red !important; */
    /* border: 2px solid yellow !important; */
    /* z-index: 9999 !important; */
    /* --- 调试样式结束 --- */
}
/* --- 新增样式结束 --- */

/* --- 新增：尺寸比例选项按钮组样式 --- */
.aspect-ratio-options {
    display: inline-flex; /* 使用 inline-flex 使容器宽度自适应内容 */
    align-items: center;
    gap: 6px; /* 按钮之间的间距 */
    background-color: var(--button-primary-bg); /* 使用浅灰色背景 */
    border-radius: var(--radius-2xl); /* 统一圆角 */
    padding: 4px; /* 容器内边距，给按钮留出空间 */
    height: 36px; /* 与 AI 工具按钮高度一致 */
    box-sizing: border-box; /* 确保 padding 和 border 包含在高度内 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 增强阴影层次感 */
    border: 1px solid var(--border-color); /* 添加边框 */
    transition: box-shadow 0.2s ease; /* 阴影过渡效果 */
}

.aspect-ratio-options:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* 悬停时增强阴影 */
}

.aspect-ratio-option {
    display: flex;
    align-items: center;
    gap: 5px; /* 图标和文字间距 */
    padding: 0 10px; /* 按钮左右内边距 */
    height: 100%; /* 填满父容器高度 */
    border-radius: var(--radius-2xl); /* 按钮圆角 */
    border: none;
    background-color: transparent; /* 默认透明背景 */
    color: var(--secondary-text-color); /* 默认文字颜色 */
    font-size: 0.9rem; /* 字体大小 */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease; /* 平滑过渡 */
}

.aspect-ratio-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* 按钮悬停效果 */
.aspect-ratio-option:not(.aspect-ratio-option--selected):hover {
    background-color: rgba(0, 0, 0, 0.05); /* 轻微灰色背景 */
    color: var(--primary-text-color);
}

/* 选中状态的按钮 - Liquid Glass */
.aspect-ratio-option--selected {
    background-color: rgba(100, 116, 139, 0.15); /* 浅蓝灰色半透明背景 */
    color: var(--text-color); /* 使用主题文字颜色 */
    border-color: rgba(100, 116, 139, 0.4); /* 蓝灰色边框 */
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.2); /* 清新的蓝灰色阴影 */
    cursor: default; /* 选中项不可再次点击 */
    transform: scale(1.05); /* 轻微放大 */
}

.aspect-ratio-option--selected .aspect-ratio-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* 智能推荐高亮闪烁效果 - Liquid Glass */
@keyframes recommendationPulse {
    0% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
        transform: scale(1.05);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 50%, transparent);
        transform: scale(1.08);
    }
    100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
        transform: scale(1.05);
    }
}

/* 推荐闪烁状态 */
.aspect-ratio-option--recommended {
    animation: recommendationPulse 1.2s ease-in-out;
    animation-iteration-count: 1;
}

/* 推荐闪烁时的特殊样式，确保在选中状态基础上添加效果 */
.aspect-ratio-option--selected.aspect-ratio-option--recommended {
    animation: recommendationPulse 1.2s ease-in-out;
    animation-iteration-count: 1;
}

/* 辅助阅读器使用的隐藏标签 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* --- 新增样式结束 --- */

/* 新增：每日额度提示样式 */
.usage-info {
    position: absolute; /* 绝对定位 */
    top: -18px; /* 与 update-status 保持一致的垂直位置 */
    left: var(--spacing-large); /* 与卡片左侧内边距对齐 */
    display: flex; /* 使用 Flexbox 排列文本和按钮 */
    align-items: center; /* 垂直居中 */
    gap: 6px; /* 文本和按钮之间的间距 */
}

/* 修改：Witt图标样式（不再是链接） */
.usage-info__witt-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative; /* 为气泡定位做准备 */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画 */
    z-index: 10; /* 确保在其他元素之上 */
    cursor: default; /* 改为默认光标，表示不可点击 */
}

/* 新增：优化时维特图标的放大效果 */
.usage-info__witt-link.witt-active {
    transform: scale(2.0); /* 放大2.0倍，更加醒目 */
    filter: drop-shadow(0 6px 16px rgba(255, 140, 66, 0.5)); /* 增强橙色阴影 */
}

.usage-info__witt-link:hover {
    transform: scale(2.5); /* 悬浮时放大2.5倍 */
    filter: drop-shadow(0 8px 16px rgba(255, 140, 66, 0.4)); /* 改为橙色阴影 */
}

/* 新增：当处于优化状态时，悬停效果稍微调整，避免过度放大 */
.usage-info__witt-link.witt-active:hover {
    transform: scale(2.3); /* 优化时悬停放大到2.3倍，介于优化状态和普通悬停之间 */
    filter: drop-shadow(0 8px 20px rgba(255, 140, 66, 0.6)); /* 更强的橙色阴影 */
}

.usage-info__witt-icon {
    width: 16px; /* mini大小 */
    height: 16px;
    object-fit: contain;
    border-radius: 4px; /* 稍微增加圆角 */
    transition: all 0.3s ease;
}

/* 可爱的气泡提示文本 - 默认悬浮时的小尺寸 */
.usage-info__witt-link::after {
    content: attr(data-tooltip); /* 从 data-tooltip 属性获取文本 */
    position: absolute;
    top: -28px; /* 调整位置，更接近图标 */
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: linear-gradient(135deg, #ff8c42 0%, #ffa726 50%, #ffb74d 100%); /* 果粒橙渐变 */
    color: #3e2723; /* 深棕色字体，类似松鼠的深色部分 */
    padding: 3px 6px; /* 减少内边距 */
    border-radius: 8px; /* 减少圆角 */
    font-size: 8px; /* 减少字体大小 */
    font-weight: 600; /* 保持字重 */
    white-space: nowrap;
    box-shadow: 
        0 2px 12px rgba(255, 140, 66, 0.3), /* 减少阴影 */
        0 0 0 1px rgba(255, 255, 255, 0.8); /* 减少白色边框 */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); /* 浅色文字阴影增加对比度 */
}

/* 气泡三角箭头 - 默认悬浮时的小尺寸 */
.usage-info__witt-link::before {
    content: "";
    position: absolute;
    top: -16px; /* 调整位置，适应更小的气泡 */
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 0;
    height: 0;
    border-left: 3px solid transparent; /* 减少箭头尺寸 */
    border-right: 3px solid transparent;
    border-top: 4px solid #ff8c42; /* 橙色箭头，更小尺寸 */
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 999; /* 降低层级，确保在文字下方 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); /* 给箭头也加个小阴影 */
}

.usage-info__witt-link:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

.usage-info__witt-link:hover::before {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* 新增：通过JavaScript控制显示气泡的状态 - 优化时的适中尺寸样式 */
.usage-info__witt-link.witt-active::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    /* 优化时的适中尺寸样式覆盖 */
    top: -38px; /* 调整位置给适中气泡留空间 */
    padding: 6px 10px; /* 减少内边距 */
    border-radius: 12px; /* 减少圆角 */
    font-size: 10px; /* 减少字体大小 */
    font-weight: 700; /* 保持粗字重 */
    box-shadow: 
        0 4px 20px rgba(255, 140, 66, 0.4), /* 减少橙色阴影 */
        0 0 0 2px rgba(255, 255, 255, 0.9), /* 减少白色边框 */
        0 2px 6px rgba(0, 0, 0, 0.12); /* 减少立体阴影 */
}

.usage-info__witt-link.witt-active::before {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    /* 优化时的箭头样式覆盖 */
    top: -26px; /* 调整箭头位置适应较小气泡 */
    border-left: 5px solid transparent; /* 减少箭头尺寸 */
    border-right: 5px solid transparent;
    border-top: 6px solid #ff8c42; /* 减少橙色箭头大小 */
}

#usageCounter { /* 仅针对文本部分 */
    font-size: 0.75rem; /* 12px */
    color: #999; /* 浅灰色 */
    line-height: 1; /* 确保文本行高不会过大 */
}

.usage-info-btn {
    padding: 0; /* 移除内边距 */
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    cursor: pointer;
    display: flex; /* 让 SVG 居中 */
    align-items: center;
    justify-content: center;
    color: #aaa; /* 图标颜色，比文本稍浅 */
    transition: color 0.2s ease;
}

.usage-info-btn:hover {
    color: #777; /* 悬停时图标颜色加深 */
}

.usage-info-btn svg {
    display: block; /* 确保 SVG 正常显示 */
}

/* 新增：充电按钮特殊样式 */
#chargeBtn {
    position: relative;
    transition: all 0.3s ease;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 充电按钮默认状态 - 可用时的样式 */
#chargeBtn.charge-available {
    color: #10b981; /* 绿色 */
}

#chargeBtn.charge-available:hover {
    color: #059669; /* 深绿色 */
    transform: none;
}

/* 充电按钮已使用状态 - 灰色不可用 */
#chargeBtn.charge-used {
    color: #bbb;
    cursor: not-allowed;
    opacity: 0.6;
}

#chargeBtn.charge-used:hover {
    color: #bbb;
    transform: none;
}

/* 新增：弹窗内联系人高亮样式 - Liquid Glass */
.contact-highlight {
    background: rgba(139, 92, 246, 0.15); /* 紫色半透明背景 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--accent-color); /* 使用主题色 */
    padding: 3px 8px; /* 增加内边距 */
    border-radius: var(--radius-2xl); /* 圆角 */
    font-weight: 600; /* 加粗 */
    border: 1px solid rgba(139, 92, 246, 0.2); /* 添加边框 */
    display: inline-block;
    transition: all var(--transition-quick);
}

.contact-highlight:hover {
    background: rgba(139, 92, 246, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.style-item__info-btn {
    position: absolute;
    top: 6px; /* 微调垂直位置 */
    right: 6px; /* 微调水平位置 */
    width: 20px; /* 固定宽度 */
    height: 20px; /* 固定高度 */
    padding: 0; /* 移除内边距 */
    border-radius: 50%; /* 圆形按钮 */
    background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
    color: white; /* 图标颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
    z-index: 10; /* 确保在图片之上 */
    opacity: 0; /* 默认隐藏 */
    pointer-events: none; /* 默认不可点击 */
}

.style-item:hover .style-item__info-btn {
    opacity: 1; /* 悬停时显示 */
    pointer-events: auto; /* 悬停时可点击 */
}

.style-item__info-btn:hover {
    background-color: rgba(0, 0, 0, 0.6); /* 悬停时背景加深 */
}

.style-item__info-btn svg {
    width: 12px; /* 调整图标大小 */
    height: 12px;
}

.style-item__tooltip {
    position: absolute;
    /* 定位相关的 top/left/bottom/right 现在主要由 JS 控制 */
    /* bottom: calc(100% + 5px); */
    /* right: 0; */
    display: inline-block; /* 改为 inline-block 试试 */
    vertical-align: top; /* 添加对齐方式 */
    background-color: rgba(0, 0, 0, 0.8); /* 深色半透明背景 */
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-2xl);
    font-size: 0.85rem;
    line-height: 1.4; /* 新增：设置合适的行高 */
    white-space: normal; /* 允许换行 */
    max-width: 250px; /* 限制最大宽度 */
    opacity: 0; /* 默认隐藏 */
    visibility: hidden; /* 默认隐藏 */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001; /* 确保足够高，因为是添加到 body 的 */
    pointer-events: none; /* 不阻挡下方元素 */
    box-sizing: border-box; /* 新增：确保 padding 包含在尺寸内 */
    text-align: left; /* 新增：确保文本左对齐 */
}

.style-item__tooltip.visible {
    opacity: 1;
    visibility: visible;
    /* --- 移除调试样式 --- */
    /* display: block !important; */
    /* background-color: red !important; */
    /* border: 2px solid yellow !important; */
    /* z-index: 9999 !important; */
    /* --- 调试样式结束 --- */
}
/* --- 新增样式结束 --- */

/* --- 新增：AI工具选项容器样式 --- */
.model-options-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: var(--spacing-medium); /* 选项组之间的间距 */

    position: absolute; /* 绝对定位 */
    top: var(--spacing-small); /* 调整 top 值 */
    left: var(--spacing-small); /* 与文本输入框左内边距对齐 */
    right: var(--spacing-small); /* 与文本输入框右内边距对齐 */
    bottom: auto; /* 自动高度 */
    padding: var(--spacing-medium); /* 增加内部留白 */
    background-color: var(--card-background-color); /* 白色背景，覆盖下方内容 */
    border-radius: var(--radius-2xl); /* 轻微圆角 */
    z-index: 10; /* 提高z-index确保在文本框内容之上，避免层叠问题 */
    box-sizing: border-box; /* padding 和 border 不会增加额外尺寸 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 添加边框 */
    overflow: visible; /* 显示所有内容 */
    min-height: 50px; /* 设置最小高度 */
    max-height: none; /* 不限制最大高度 */
}

/* 通用AI工具选项容器的特殊布局 - 参考欧美脸模样式 */
#aiToolOptionsContainer {
    display: flex;
    flex-direction: row; /* 改为水平排列，与欧美脸模保持一致 */
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-medium);
    padding: var(--spacing-medium);
    min-height: 50px;
}

#aiToolOptionsContainer .model-option-item {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#aiToolOptionsContainer .model-option-item--full {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#aiToolOptionsContainer label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text-color);
    white-space: nowrap;
    min-width: fit-content;
    flex-shrink: 0;
}

body.dark-mode #aiToolOptionsContainer label {
    color: var(--primary-text-color);
}

/* 平铺场景选项容器的特殊布局 - 与欧美脸模样式保持一致 */
#flatLayOptionsContainer {
    display: flex;
    flex-direction: row; /* 水平排列 */
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-medium);
    padding: var(--spacing-medium);
    min-height: 50px;
}

#flatLayOptionsContainer .model-option-item {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0; /* 允许收缩 */
}

#flatLayOptionsContainer label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text-color);
    white-space: nowrap;
    min-width: fit-content;
    flex-shrink: 0;
}

body.dark-mode #flatLayOptionsContainer label {
    color: var(--primary-text-color);
}

/* 新增：单个模特选项组（标签+选择框）的样式 */
.model-option-item {
    flex: 1; /* 每个选项组占据可用空间的一份 */
    display: flex;
    flex-direction: row; /* 组内标签和选择框水平排列 */
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 标签和选择框之间的间距 */
}

/* 新增：占满整行的选项组（用于产品描述输入框） */
.model-option-item--full {
    flex: 1 1 100%; /* 占满整行 */
    flex-direction: column; /* 垂直排列 */
    align-items: stretch; /* 拉伸子元素 */
    gap: 4px;
}

/* 新增：文本输入框样式 - 与select保持一致 */
.model-option-input {
    flex: 1; /* 占据剩余空间 */
    min-width: 0; /* 允许收缩 */
    padding: var(--spacing-small) var(--spacing-medium);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    background-color: var(--card-background-color);
    font-size: 0.9rem;
    color: var(--primary-text-color);
    cursor: text;
    transition: all 0.2s ease;
    box-sizing: border-box;
    appearance: none;
}

.model-option-input:hover {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.model-option-input:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.model-option-input::placeholder {
    color: #999;
    font-size: 0.85rem;
}

/* 深色模式下的输入框样式 */
body.dark-mode .model-option-input {
    background-color: var(--card-background-color);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--primary-text-color);
}

body.dark-mode .model-option-input:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .model-option-input:focus {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

body.dark-mode .model-option-input::placeholder {
    color: #666;
}

.model-options-container label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text-color);
    white-space: nowrap; /* 防止标签换行 */
    min-width: fit-content; /* 确保标签不会被压缩 */
    flex-shrink: 0; /* 防止标签被压缩 */
}

.model-options-container select {
    flex: 1; /* 选择框占据剩余空间 */
    min-width: 0; /* 允许选择框收缩 */
    padding: var(--spacing-small) var(--spacing-medium);
    border: 1px solid rgba(0, 0, 0, 0.2); /* 更明显的边框颜色 */
    border-radius: var(--radius-lg);
    background-color: var(--card-background-color); /* 白色背景 */
    font-size: 0.9rem;
    color: var(--primary-text-color);
    cursor: pointer;
    transition: all 0.2s ease; /* 添加过渡效果 */
    appearance: none; /* 移除默认样式 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.model-options-container select:hover {
    border-color: rgba(0, 0, 0, 0.4); /* 悬停时更明显的边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.model-options-container select:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.5); /* 聚焦时更明显的边框 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* 蓝色聚焦阴影 */
    transform: translateY(-1px); /* 轻微上移效果 */
}

/* 深色模式支持 */
body.dark-mode .model-options-container {
    background-color: var(--card-background-color);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .model-options-container select {
    background-color: var(--card-background-color);
    border-color: rgba(255, 255, 255, 0.3); /* 深色模式下更明显的边框 */
    color: var(--primary-text-color);
}

body.dark-mode .model-options-container select:hover {
    border-color: rgba(255, 255, 255, 0.5); /* 深色模式悬停时更明显的边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .model-options-container select:focus {
    border-color: rgba(255, 255, 255, 0.6); /* 深色模式聚焦时更明显的边框 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

body.dark-mode .model-options-container label {
    color: var(--primary-text-color);
}

/* 深色模式下AI工具禁用状态的橙色placeholder样式 */
body.dark-mode .generation-card__prompt-input.prompt-input--disabled::placeholder {
    color: #ff8c42; /* 橙色placeholder，与浅色模式保持一致 */
}

/* 移动端响应式支持 */
@media (max-width: 768px) {
    .model-options-container {
        flex-direction: row; /* 移动端水平排列 */
        gap: var(--spacing-small);
        padding: var(--spacing-small);
        bottom: var(--spacing-small); /* 移动端也限制底部边界 */
        min-height: 60px; /* 移动端最小高度 */
        max-height: 80px; /* 移动端最大高度 */
    }
    
    .model-option-item {
        flex: 1; /* 每个选项组占据可用空间的一半 */
        display: flex;
        flex-direction: column; /* 组内标签和选择框垂直排列 */
        align-items: flex-start; /* 左对齐 */
        gap: 4px; /* 减小间距 */
    }
    
    .model-options-container select {
        font-size: 0.9rem; /* 移动端字体稍小 */
        padding: var(--spacing-small);
        width: 100%; /* 移动端选择框占满宽度 */
        flex: none; /* 移除弹性布局 */
    }
    
    .model-options-container label {
        font-size: 0.9rem;
        margin-bottom: 2px;
        white-space: nowrap; /* 防止标签换行 */
    }
}

/* 新增：超小屏幕设备的特殊处理 */
@media (max-width: 480px) {
    .model-options-container {
        flex-direction: row; /* 保持水平排列 */
        gap: 6px; /* 减小间距 */
        padding: 8px; /* 减小内边距 */
        min-height: 70px; /* 调整最小高度 */
        max-height: 90px; /* 调整最大高度 */
    }
    
    .model-option-item {
        flex: 1; /* 每个选项组占据可用空间的一半 */
        flex-direction: column; /* 组内垂直排列 */
        align-items: flex-start;
        gap: 4px; /* 减小标签和选择框的间距 */
    }
    
    .model-options-container select {
        font-size: 12px; /* 进一步减小字体 */
        padding: 6px 8px; /* 调整内边距 */
        width: 100%;
        min-height: 32px; /* 确保选择框有足够的高度 */
    }
    
    .model-options-container label {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 2px;
        color: var(--primary-text-color);
        white-space: nowrap; /* 防止标签换行 */
    }
}

/* 确保 hidden 类能生效 */
.hidden {
    display: none !important;
}

/* --- 新增：错误通知区域和错误卡片样式 --- */
#errorNotification {
    /* position: fixed; */ /* 如果需要固定在屏幕某个位置 */
    /* bottom: 20px; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* width: auto; */ /* 自适应内容宽度 */
    /* z-index: 1002; */ /* 确保在其他弹窗之上，如果需要 */
    margin-top: var(--spacing-large); /* 与生成卡片保持一些间距 */
    padding: 0 var(--spacing-large); /* 左右留白，让卡片不会贴边 */
    display: flex; /* 用于居中内部的错误卡片 */
    justify-content: center; /* 水平居中错误卡片 */
}

.error-card {
    background-color: #fff1f0; /* 淡红色背景 */
    border: 1px solid #ffccc7; /* 红色系边框 */
    border-radius: var(--radius-2xl);
    padding: var(--spacing-medium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
    width: 100%; /* 卡片宽度 */
    max-width: 450px; /* 最大宽度，避免过宽 */
    position: relative; /* 为了关闭按钮的绝对定位 */
    text-align: left; /* 内容左对齐 */
}

.error-card__title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #c53021; /* 深红色，更易读 */
    margin: 0 0 var(--spacing-small) 0; /* 移除顶部外边距，调整底部外边距 */
}

.error-card__message {
    font-size: 0.9rem;
    color: var(--primary-text-color); /* 使用标准文本颜色 */
    line-height: 1.5;
    margin-bottom: var(--spacing-small); /* 与可能的后续内容或关闭按钮保持间距 */
}

.error-card__close-btn {
    position: absolute;
    top: 12px; /* 调整以适应内边距 */
    right: 12px; /* 调整以适应内边距 */
    background: none;
    border: none;
    font-size: 1.6rem; /* 稍大一点的关闭图标 */
    color: #888; /* 灰色关闭按钮 */
    cursor: pointer;
    padding: 0; /* 移除默认内边距 */
    line-height: 1; /* 确保图标垂直居中 */
}

.error-card__close-btn:hover {
    color: #555; /* 悬停时颜色加深 */
}
/* --- 新增样式结束 --- */

/* 新增：调整"次数说明"弹窗内"确认"按钮的样式 */
#usageInfoModal #secretInputContainer #submitSecretKeyBtn {
    margin-top: var(--spacing-medium); /* 设置按钮与上方输入框的间距 */
}

/* --- 优化预览图片拖拽相关样式 --- */
.image-preview-modal__image {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    margin: auto;
    transform-origin: center;
    transition: none; /* 移除过渡，确保拖拽响应即时 */
    pointer-events: auto;
    /* 禁止用户选择图片，避免拖拽时出现选择效果 */
    user-select: none;
    -webkit-user-drag: none;
    /* 添加阴影以区分背景 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* 优化：强制高质量图片渲染（避免首次降质） */
    image-rendering: -webkit-optimize-contrast; /* Safari - 高质量渲染 */
    image-rendering: high-quality; /* 旧版浏览器 */
    -ms-interpolation-mode: bicubic; /* IE - 双三次插值 */
    /* 避免首次渲染降质 - 不使用全局 will-change */
}

/* 当缩放大于100%时应用的样式 */
.image-preview-modal__image.draggable {
    cursor: grab !important;
    /* 只在可拖拽时启用硬件加速 */
    will-change: transform;
}

/* 拖拽状态样式 */
.image-preview-modal__image.dragging {
    cursor: grabbing !important;
    /* 移除任何过渡效果，确保响应迅速 */
    transition: none !important;
    /* 拖拽时启用完整硬件加速 */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 为图片容器添加硬件加速 */
.image-preview-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    pointer-events: auto;
    perspective: 1000px;
    /* 优化：移除全局 will-change，避免首次渲染降质 */
    /* will-change: transform; */
    /* -webkit-backface-visibility: hidden; */
    /* backface-visibility: hidden; */
}

/* --- 图片预览加载指示器样式 --- */
.image-preview-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1001;
    pointer-events: none;
}

.image-preview-loader.hidden {
    display: none;
}

.image-preview-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.image-preview-loader__text {
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- 新增：金额计数器样式 --- */
.cost-counter {
    display: flex;
    align-items: center;
    gap: 8px; /* 元素之间的间距 */
    font-size: 0.75rem; /* 12px，与使用次数和更新状态保持一致 */
    color: #999; /* 浅灰色，与其他状态信息保持一致 */
    line-height: 1;
}

.cost-counter__item {
    display: flex;
    align-items: center;
    gap: 4px; /* 标签和数值之间的小间距 */
}

.cost-counter__label {
    color: #999; /* 标签颜色 */
}

.cost-counter__value {
    color: #666; /* 数值颜色稍深一些 */
    font-weight: 500; /* 稍微加粗数值 */
}

.cost-counter__value--amount {
    color: #ff8c42; /* 金额使用橙色，与说明文字保持一致 */
}

.cost-counter__separator {
    color: #ccc; /* 分隔符颜色更浅 */
    margin: 0 2px; /* 分隔符左右留小间距 */
}

/* 深色模式下累计请求数字优化 */
body.dark-mode .cost-counter {
    color: var(--text-color-secondary); /* 使用主题次要文字颜色 */
}

body.dark-mode .cost-counter__label {
    color: var(--text-color-secondary); /* 使用主题次要文字颜色 */
}

body.dark-mode .cost-counter__value {
    color: var(--text-color); /* 使用主题主要文字颜色，更亮 */
    font-weight: 500;
}

body.dark-mode .cost-counter__value--amount {
    color: #ffb366; /* 深色模式下使用更亮的橙色 */
}

body.dark-mode .cost-counter__separator {
    color: var(--text-color-secondary); /* 使用主题次要文字颜色 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .cost-counter {
        font-size: 0.7rem; /* 移动端稍微缩小字体 */
        gap: 6px;
    }
    
    .cost-counter__item {
        gap: 3px;
    }
}
/* --- 金额计数器样式结束 --- */

/* --- 新增：金额计数器容器定位样式 --- */
.cost-counter-wrapper {
    position: absolute; /* 绝对定位 */
    top: -18px; /* 与使用次数和更新状态保持一致的垂直位置 */
    left: 50%; /* 水平居中定位 */
    transform: translateX(-50%); /* 精确居中 */
    display: flex;
    justify-content: center;
}

/* 恢复通知按钮样式已移除 */

/* 弹窗中的日期和链接样式 */
.modal__description .shutdown-notice__date {
    color: #FF6B35; /* 橙红色，在白色背景下更明显 */
    font-weight: 700;
    background: linear-gradient(45deg, #FF6B35, #FF8C42);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal__description .shutdown-notice__link {
    color: #2196F3; /* 蓝色 */
    text-decoration: underline;
    font-weight: 500;
    transition: all 0.3s ease;
}

.modal__description .shutdown-notice__link:hover {
    color: #1976D2;
    text-decoration: none;
}

/* 新增：弹窗段落间距样式 */
.modal__description p {
    margin: 0 0 12px 0; /* 弹窗中段落间距稍大一些 */
}

.modal__description p:last-child {
    margin-bottom: 0; /* 最后一个段落无底部间距 */
}

/* 庆祝爆炸效果样式 */
.celebration-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

.celebration-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.celebration-particle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

/* 不同颜色的碎纸片 */
.celebration-particle.color-1::before { background: #ff6b6b; }
.celebration-particle.color-2::before { background: #4ecdc4; }
.celebration-particle.color-3::before { background: #45b7d1; }
.celebration-particle.color-4::before { background: #96ceb4; }
.celebration-particle.color-5::before { background: #ffeaa7; }
.celebration-particle.color-6::before { background: #dda0dd; }
.celebration-particle.color-7::before { background: #98d8c8; }
.celebration-particle.color-8::before { background: #fd79a8; }

/* 爆炸动画 */
@keyframes explode {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    80% {
        opacity: 0.8; /* 在80%时仍保持一定透明度 */
    }
    100% {
        transform: translate(var(--dx), var(--dy)) rotate(720deg) scale(0.2);
        opacity: 0;
    }
}

.celebration-particle.exploding {
    animation: explode 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; /* 使用更流畅的缓动函数，稍微延长动画时间 */
}

/* 闪光效果 */
.flash-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 60%); /* 增强闪光效果 */
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    animation: flash 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 使用相同的缓动函数 */
}

@keyframes flash {
    0% { opacity: 0; }
    60% { opacity: 1; } /* 调整峰值时间点 */
    100% { opacity: 0; }
}

/* 新增：弹窗信息区域样式 - Liquid Glass */
.modal__info-section {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    padding: 24px;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 4px solid var(--accent-color);
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    font-size: 1rem;
}

/* API 密钥弹窗专用样式 */
.modal__info-section--api-key {
    text-align: left;
}

.modal__info-section--api-key p {
    margin: 0 0 16px 0;
    color: var(--text-color);
    font-weight: 400;
}

.modal__info-section--api-key p:last-child {
    margin-bottom: 0;
}

/* 密钥说明文本优化 */
.modal__key-description {
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.modal__key-description strong {
    font-weight: 600;
    color: var(--text-color);
}

/* 联系人信息样式 - Liquid Glass */
.contact-info {
    display: inline-block;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.025em;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
    transition: all var(--transition-fluid);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-info:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4);
    filter: brightness(1.1);
}

/* 新增：部门主管彩色样式 - Liquid Glass */
.department-manager {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-2xl);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.025em;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    transition: all var(--transition-fluid);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.department-manager:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
    filter: brightness(1.1);
}

/* 新增：联系人普通样式（低调） - Liquid Glass */
.contact-person {
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(59, 130, 246, 0.4);
    transition: all var(--transition-quick);
    padding: 2px 6px;
    border-radius: var(--radius-2xl);
    background: rgba(59, 130, 246, 0.1);
    display: inline-block;
}

.contact-person:hover {
    color: #1d4ed8;
    text-decoration-color: rgba(29, 78, 216, 0.6);
    background: rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* 新增：API Key 弹窗错误信息样式 */
.modal__error-message {
    color: #dc2626;
    font-size: 0.9rem;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    max-height: 100px;
    overflow: hidden;
}

.modal__error-message.hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.modal__error-message::before {
    content: '⚠';
    color: #dc2626;
    font-weight: bold;
    font-size: 1rem;
}

/* HEIC 转换提示样式 - Siri 风格 */
.heic-converting {
    position: relative;
    background: #f8f9fa;
    border: 2px dashed #e9ecef;
    border-radius: 8px;
}

.heic-converting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    z-index: 10;
}

.rainbow-loader {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(
        #ff6b6b 0deg,
        #ff8e53 60deg,
        #ff9f43 120deg,
        #ffeaa7 180deg,
        #a8e6cf 240deg,
        #74b9ff 300deg,
        #fd79a8 360deg
    );
    animation: rainbow-spin 1.2s linear infinite;
    position: relative;
}

.rainbow-loader::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: white;
    border-radius: 50%;
}

@keyframes rainbow-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 新增：设置弹窗分节样式 */
.modal__section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.modal__section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.modal__section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal__section-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

/* 新增：输入框组合样式 */
.modal__input-group {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 0;
}

.modal__input-group .modal__input {
    flex: 1;
    margin-bottom: 0;
    height: 42px; /* 确保与激活按钮高度统一 */
}

/* 新增：使用状态组样式 */
.modal__usage-status-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal__button--activate {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    padding: 0 16px;
    height: 42px; /* 与输入框高度统一 */
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* 确保总高度为42px */
}

.modal__button--activate:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.modal__button--activate:active {
    transform: translateY(0);
}

/* 新增：小激活按钮样式 */
.modal__button--activate-small {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 2px 6px !important;
    height: 24px !important;
    min-height: 24px !important;
    line-height: 1.2;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.modal__button--activate-small:hover {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
    transform: none;
    box-shadow: none;
}

.modal__button--activate-small:active {
    transform: none;
    background: #cbd5e1;
}

/* 新增：激活按钮高亮状态（当输入框有内容时） */
.modal__button--activate-small.highlight {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

.modal__button--activate-small.highlight:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

/* 下载后缀变量按钮样式 */
.suffix-var-btn {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.suffix-var-btn:hover {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

.suffix-var-btn:active {
    background: #cbd5e1;
}

/* 下载后缀设置区域禁用状态 */
.download-suffix-settings.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 新增：成功消息样式 */
.modal__success-message {
    color: #059669;
    font-size: 0.9rem;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    max-height: 100px;
    overflow: hidden;
}

.modal__success-message.hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.modal__success-message::before {
    content: '✓';
    color: #059669;
    font-weight: bold;
    font-size: 1rem;
}

/* 新增：使用状态显示样式 */
.modal__usage-status {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    text-align: center;
}

.modal__usage-status span {
    font-weight: 600;
    color: var(--primary-text-color);
}

.modal__usage-status--inline {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    text-align: right;
}

/* 新增：帮助文本和链接样式 */
.modal__help-text {
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 20px; /* 与标题高度对齐 */
}

.modal__help-link {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modal__help-link:hover {
    color: #1d4ed8;
    text-decoration-color: #1d4ed8;
}

/* 自动保存帮助图标 */
.modal__help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-quick), color var(--transition-quick), border-color var(--transition-quick), box-shadow var(--transition-quick);
}

.modal__help-icon span {
    line-height: 1;
}

.modal__help-icon:hover,
.modal__help-icon:focus-visible {
    color: #fff;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    text-decoration: none;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* 新增：紧凑弹窗样式 */
.modal__content--compact {
    max-width: 420px;
    padding: 20px;
}

.modal__compact-info {
    margin: 16px 0;
}

.modal__contact-info {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    padding: 16px 20px;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid var(--accent-color);
    margin-top: 16px;
    color: var(--text-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* API帮助弹窗 - 宽屏横向布局 */
.modal__content--api-wide {
    max-width: 900px;
    width: 90vw;
    max-height: 500px;
    padding: 24px;
    overflow: hidden;
}

/* 顶部标题区 */
.api-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.api-modal__header svg {
    color: var(--accent-color);
}

.api-modal__header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

/* 主体三列布局 */
.api-modal__body {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

/* 通用section样式 */
.api-modal__section {
    display: flex;
    flex-direction: column;
}

.api-modal__section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

/* 左侧联系人区域 */
.api-modal__contact {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(99, 102, 241, 0.04) 100%);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--radius-xl);
    padding: 16px;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.contact-info svg {
    color: var(--accent-color);
    opacity: 0.8;
}

.contact-role {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.contact-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.api-modal__notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: #991b1b;
    font-weight: 500;
}

.api-modal__notice svg {
    flex-shrink: 0;
    color: #dc2626;
}

/* 中间部门列表 */
.api-modal__departments {
    flex: 1;
}

.departments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dept-city {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: 10px;
    transition: all 0.2s ease;
}

.dept-city:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: rgba(59, 130, 246, 0.03);
}

.city-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 8px;
}

.city-name svg {
    color: var(--accent-color);
    opacity: 0.8;
}

.dept-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.dept-tags span {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    font-size: 10px;
    color: #2563eb;
    font-weight: 500;
    white-space: nowrap;
}

/* 右侧统计区域 */
.api-modal__stats {
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--radius-xl);
    padding: 16px;
}

.stats-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.stat-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-color);
    font-weight: 500;
    width: 35px;
}

.stat-progress {
    flex: 1;
    height: 18px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.stat-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
    border-radius: var(--radius-md);
    transition: width 0.6s ease;
    position: relative;
}

.stat-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.stat-value {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 30px;
    text-align: right;
}

.stats-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

/* 底部操作区 */
.api-modal__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.api-modal__footer p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.api-modal__footer strong {
    color: var(--text-color);
}

/* 深色模式适配 - 优化对比度 */
body.dark-mode .api-modal__header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .api-modal__contact {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.25);
}

body.dark-mode .contact-role {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .contact-name {
    color: #ffffff;
}

body.dark-mode .api-modal__notice {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.12) 0%, rgba(249, 115, 22, 0.12) 100%);
    border-color: rgba(251, 146, 60, 0.25);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .api-modal__notice svg {
    color: #fb923c;
}

body.dark-mode .dept-city {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .dept-city:hover {
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .city-name {
    color: #ffffff;
}

body.dark-mode .city-name svg {
    color: #60a5fa;
}

body.dark-mode .dept-tags span {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
    font-weight: 600;
}

body.dark-mode .api-modal__stats {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .stat-progress {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .stat-fill {
    background: linear-gradient(90deg, #60a5fa 0%, #818cf8 100%);
}

body.dark-mode .stat-value {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .api-modal__footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .api-modal__footer p {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .api-modal__footer strong {
    color: #ffffff;
}

/* 主按钮样式 */
.modal__button--primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #6366f1 100%);
    color: white;
    border: none;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal__button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* 版本更新弹窗样式 - Liquid Glass */
.modal__version-info {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    padding: 16px 20px;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.version-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.version-info-row:last-child {
    margin-bottom: 0;
}

.version-label {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    font-weight: 500;
}

.version-value {
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 弹窗显示动画 */
.modal--show {
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 透明背景棋格样式 */
.transparent-bg-checker {
    background-image: 
        linear-gradient(45deg, #e5e5e5 25%, transparent 25%), 
        linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e5e5e5 75%), 
        linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
    background-size: 12px 12px; /* 减小棋格大小，更适合小尺寸预览 */
    background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
    background-color: #f8f8f8; /* 添加浅色背景基底 */
}

/* --- 自定义提示词弹窗样式 --- */
/* 自定义提示词按钮样式 */
.header__user-prompts-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-2xl);
    transition: all 0.2s ease;
    color: var(--secondary-text-color);
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__user-prompts-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--primary-text-color);
}

/* 确保自定义提示词弹窗有足够高的z-index */
#customPromptsModal {
    z-index: 1001 !important;
}

/* 提示词弹窗内容样式 */
.modal__content--prompts {
    max-width: 400px;
    width: 90vw;
    padding: 0;
    background: #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
}

/* 标签页样式 */
.prompts-tabs {
    display: flex;
    background: #d0d0d0;
    border-radius: 12px 12px 0 0;
}

.prompts-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px 12px 0 0;
}

.prompts-tab--active {
    background: #e8e8e8;
    color: #333;
}

.prompts-tab:hover:not(.prompts-tab--active) {
    background: rgba(255, 255, 255, 0.3);
}

/* 星标样式 */
.prompts-tab-star {
    margin-right: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    display: inline-block;
}

.prompts-tab-star:hover {
    transform: scale(1.2);
}

/* 内容区域 */
.prompts-content {
    display: none;
    padding: 20px;
}

.prompts-content--active {
    display: block;
}

/* 输入框容器 */
.prompts-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 输入框包装器 */
.prompts-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.prompts-input-wrapper:has(.prompts-input:not(:placeholder-shown)) {
    background: #fff;
}

.prompts-input-wrapper:has(.prompts-input:focus) {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.prompts-input-wrapper:has(.prompts-input:not(:placeholder-shown)):hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 输入框样式 */
.prompts-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.prompts-input::placeholder {
    color: #999;
}

.prompts-input:focus {
    outline: none;
}

.prompts-input:not(:placeholder-shown) {
    cursor: pointer;
}

/* 提示词输入框滚动条样式 */
.prompts-input::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    opacity: 0;
    transition: opacity var(--transition-quick);
}

.prompts-input::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.prompts-input::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background var(--transition-quick);
}

.prompts-input::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 深色模式下的提示词输入框滚动条样式 */
body.dark-mode .prompts-input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .prompts-input::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 当提示词输入框有内容或获得焦点时显示滚动条 */
.prompts-input:not(:placeholder-shown)::-webkit-scrollbar,
.prompts-input:focus::-webkit-scrollbar {
    opacity: 1;
}

/* 操作按钮区域 */
.prompts-actions {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 4px;
}

/* 三点菜单按钮 */
.prompts-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 1; /* 改为常亮显示 */
    padding: 8px;
    gap: 2px;
}

.prompts-menu-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.prompts-menu-btn span {
    width: 4px;
    height: 4px;
    background: #999;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.prompts-menu-btn:hover span {
    background: #666;
}

/* 滑出菜单 */
.prompts-menu {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.prompts-menu.show {
    transform: translateY(-50%) translateX(-8px);
    opacity: 1;
    visibility: visible;
}

/* 编辑和删除按钮 */
.prompts-edit-btn,
.prompts-delete-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    position: relative;
}

.prompts-edit-btn {
    background: #e3f2fd;
}

.prompts-edit-btn:hover {
    background: #bbdefb;
    transform: scale(1.1);
}

.prompts-delete-btn {
    background: #ffebee;
}

.prompts-delete-btn:hover {
    background: #ffcdd2;
    transform: scale(1.1);
}


/* 按钮样式 */
.modal__actions {
    padding: 0 20px 20px 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal__button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal__button--save {
    background: #007AFF;
    color: white;
}

.modal__button--save:hover {
    background: #0056CC;
}

.modal__button--close {
    background: #f0f0f0;
    color: #666;
}

.modal__button--close:hover {
    background: #e0e0e0;
}

/* 标题开关样式 */
.modal__section-title-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 4px 0;
    margin: 0;
    transition: all 0.2s ease;
}

.modal__section-title-toggle:hover {
    background-color: rgba(59, 130, 246, 0.05);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 0 -8px;
}

.modal__title-checkbox {
    appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.modal__toggle-status {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    transition: all 0.2s ease;
    background-color: #10b981;
    color: white;
    margin-left: auto;
}

.modal__toggle-status::before {
    content: '开启';
}

.modal__title-checkbox:checked ~ .modal__toggle-status {
    background-color: #ef4444;
    color: white;
}

.modal__title-checkbox:checked ~ .modal__toggle-status::before {
    content: '关闭';
}

/* 任务模式特殊样式 - 移除伪元素内容 */
.modal__toggle-status--task-mode::before {
    content: none !important;
}

.modal__title-checkbox:checked ~ .modal__toggle-status--task-mode::before {
    content: none !important;
}

/* Enter 键生成模式特殊样式 - 移除伪元素内容 */
.modal__toggle-status--enter-mode::before {
    content: none !important;
}

.modal__title-checkbox:checked ~ .modal__toggle-status--enter-mode::before {
    content: none !important;
}

/* 下载后缀模式特殊样式 - 移除伪元素内容 */
.modal__toggle-status--suffix-mode::before {
    content: none !important;
}

.modal__title-checkbox:checked ~ .modal__toggle-status--suffix-mode::before {
    content: none !important;
}

/* 保留原有复选框样式以备其他地方使用 */
.modal__checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 8px 0;
    padding: 4px 0;
}

.modal__checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal__checkbox:hover {
    border-color: #6c75ff;
}

.modal__checkbox:checked {
    background-color: #6c75ff;
    border-color: #6c75ff;
}

.modal__checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.modal__checkbox-text {
    font-size: 14px;
    color: #333;
    user-select: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modal__content--prompts {
        width: 95vw;
        max-width: 350px;
    }
    
    .prompts-input {
        padding: 10px 14px;
        font-size: 13px;
    }
}
/* --- 自定义提示词弹窗样式结束 --- */

/* --- 快速选择提示词样式 - Liquid Glass --- */
.quick-select-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
    z-index: 10000;
    width: 420px;
    max-height: 400px;
    animation: quickSelectFadeIn var(--transition-fluid);
    overflow: hidden; /* 防止子元素溢出造成样式问题 */
}

/* 移除可能导致底部蓝色条的伪元素 */
.quick-select-container::before,
.quick-select-container::after {
    display: none !important;
}

@keyframes quickSelectFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.quick-select-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--glass-border);
}


.quick-select-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 260px;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
}

/* 移除可能导致蓝色条的伪元素 */
.quick-select-list::before,
.quick-select-list::after {
    display: none !important;
}

/* 快速选择列表滚动条样式 - Liquid Glass */
.quick-select-list::-webkit-scrollbar {
    width: 6px;
}

.quick-select-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
}

.quick-select-list::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-quick);
}

.quick-select-list::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.6);
    transform: scaleX(1.2);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.quick-select-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    transition: all 0.2s ease; /* 使用更稳定的过渡效果 */
    border: 1px solid var(--glass-border);
    position: relative; /* 防止层级问题 */
}

.quick-select-item:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--glass-border) !important; /* 边框完全不变 */
}

/* 防止快速选择项受到其他样式影响 */
.quick-select-item:focus,
.quick-select-item:active {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--glass-border) !important; /* 边框完全不变 */
    outline: none !important;
}

/* 确保所有快速选择项的基础样式不被覆盖 */
.quick-select-container .quick-select-item {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-2xl) !important;
    box-sizing: border-box !important;
}

/* 防止快速选择弹窗内的任何元素产生意外的样式 */
.quick-select-container * {
    box-sizing: border-box;
}

/* 移除可能导致闪烁的任何伪元素 */
.quick-select-container *::before,
.quick-select-container *::after {
    display: none !important;
}

.quick-select-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent-color) 0%, #1d4ed8 100%);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 30%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.quick-select-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

/* 快速选择弹窗响应式设计 */
@media (max-width: 768px) {
    .quick-select-container {
        width: 90vw;
        max-width: 380px;
        padding: var(--spacing-md);
    }
    
    .quick-select-list {
        min-height: 240px;
        max-height: 280px;
    }
    
    .quick-select-title {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .quick-select-item {
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: var(--spacing-xs);
    }
    
    .quick-select-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .quick-select-text {
        font-size: 13px;
        max-width: 260px;
    }
}
/* --- 快速选择提示词样式结束 --- */

/* --- 天才猴子参考手册按钮样式开始 --- */
.manual-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* width: 56px; */
    /* height: 56px; */
    /* border-radius: 50%; */
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
}

.manual-button:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); */
}

.manual-button:active {
    transform: translateY(0);
}

/* 天才猴子参考手册按钮角标样式 */
.manual-button__badge {
    position: absolute;
    top: -12px;
    right: -5px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid white;
    min-width: auto;
    white-space: nowrap;
}


/* --- 历史记录按钮样式 --- */
.history-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
}

.history-button:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); */
}

.history-button:active {
    transform: translateY(0);
}

/* 历史记录按钮角标样式 */
.history-button__badge {
    position: absolute;
    top: -12px;
    right: -5px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid white;
    min-width: auto;
    white-space: nowrap;
}

/* 深色模式下的历史记录角标 */
body.dark-mode .history-button__badge {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    border-color: rgba(255, 255, 255, 0.9);
}

/* 历史记录弹窗样式 */
.modal__content--history {
    width: 90vw;
    max-width: 900px;
    max-height: 85vh;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000; /* 确保历史记录内容容器不会被其他元素压低 */
}

.modal__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 三等分布局：左侧内容、中间搜索、右侧按钮 */
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    flex-shrink: 0;
    gap: var(--spacing-md);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
}

.modal__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: start; /* 左对齐 */
    flex-wrap: wrap; /* 允许换行 */
}

.modal__header-center {
    display: flex;
    justify-content: center;
    justify-self: center; /* 确保搜索框在网格中居中 */
    max-width: 300px;
    width: 100%;
}

.history-search-container {
    position: relative;
    width: 100%;
    max-width: 250px;
}

.history-search-input {
    width: 100%;
    padding: 10px 36px 10px 16px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    font-size: 14px;
    background: var(--glass-bg);
    transition: all var(--transition-fluid);
    box-sizing: border-box;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    color: var(--text-color);
}

.history-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
    transform: translateY(-2px);
}

.history-search-input::placeholder {
    color: rgba(108, 117, 125, 0.7); /* 浅色模式下使用更柔和的灰色 */
}

/* 深色模式下历史搜索框placeholder优化 */
body.dark-mode .history-search-input::placeholder {
    color: rgba(142, 142, 147, 0.6); /* 深色模式下使用更柔和的浅灰色 */
}

/* 历史记录搜索框滚动条样式 */
.history-search-input::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    opacity: 0;
    transition: opacity var(--transition-quick);
}

.history-search-input::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.history-search-input::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background var(--transition-quick);
}

.history-search-input::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 深色模式下的历史记录搜索框滚动条样式 */
body.dark-mode .history-search-input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .history-search-input::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 当历史记录搜索框有内容或获得焦点时显示滚动条 */
.history-search-input:not(:placeholder-shown)::-webkit-scrollbar,
.history-search-input:focus::-webkit-scrollbar {
    opacity: 1;
}

.history-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    opacity: 0;
    transition: all 0.2s ease;
    border-radius: 50%;
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
}

.history-search-clear:hover {
    background: none;
    color: #374151;
}

.history-search-container:hover .history-search-clear,
.history-search-input:focus + .history-search-clear {
    opacity: 1;
}

.history-search-clear.visible {
    opacity: 1 !important;
}

.history-record-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 16px;
    min-width: 36px;
    height: 22px;
    margin-left: 10px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* 移除重复的样式定义，已在上面定义过了 */

/* 搜索高亮样式 */
.search-highlight {
    background: #fff3cd;
    color: #856404;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

.history-storage-info {
    color: #64748b;
    font-size: 0.9rem; /* 稍微增大字体 */
    font-weight: 400; /* 减轻字重 */
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-storage-info .history-count {
    white-space: nowrap;
}

.history-storage-info .storage-usage {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    cursor: help;
}

.history-storage-info .storage-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #3b82f6;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.history-storage-info.storage-warning .storage-bar {
    background-color: #f59e0b; /* 橙色进度条 */
}

.history-storage-info.storage-full .storage-bar {
    background-color: #ef4444; /* 红色进度条 */
}

.history-storage-info.storage-warning {
    color: #d97706; /* 橙色文字 */
}

.history-storage-info.storage-full {
    color: #dc2626; /* 红色文字 */
}

.modal__header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-self: end; /* 右对齐 */
}

/* 历史记录弹窗关闭按钮样式 - Liquid Glass */
.modal__close-btn {
    background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: all var(--transition-fluid);
    padding: 0;
    line-height: 1;
    font-family: Arial, sans-serif;
    text-align: center;
    transform: translateY(-1px); /* 微调垂直位置 */
    box-shadow: var(--shadow-sm);
}

.modal__close-btn:hover {
    background: color-mix(in srgb, var(--glass-bg) 80%, var(--accent-color));
    color: var(--text-color);
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.modal__button--secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    color: var(--text-color-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fluid);
    box-shadow: var(--shadow-sm);
}

.modal__button--secondary:hover {
    background: color-mix(in srgb, var(--glass-bg) 80%, var(--accent-color));
    color: var(--text-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.history-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    max-height: 320px; /* 限制为大约4条记录的高度 */
    position: relative;
}

/* 滚动渐变提示效果 - 移到历史记录弹窗容器上 */
.modal__content--history::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, var(--glass-bg-fade, rgba(255, 255, 255, 0.9)));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1; /* 确保在内容之上但在其他元素之下 */
}

.modal__content--history.has-scroll::after {
    opacity: 1;
}

/* 深色模式下的渐变遮挡条 */
body.dark-mode .modal__content--history::after {
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.9));
}

/* 历史记录滚动条样式 - Liquid Glass */
.history-content::-webkit-scrollbar {
    width: 6px;
}

.history-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
}

.history-content::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4);
    border-radius: var(--radius-full);
    transition: all var(--transition-quick);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.history-content::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.6);
    transform: scaleX(1.2);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-2xl);
    padding: 16px;
    transition: all var(--transition-fluid);
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px) scale(1.01);
}

.history-item__preview {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 8px;
}

.history-item__input-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.history-item__input-thumb:hover {
    transform: scale(1.1);
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.history-item__arrow {
    color: #999;
    font-size: 12px;
    margin: 0 4px;
}

.history-item__result-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.history-item__result-thumb:hover {
    transform: scale(1.1);
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.history-item__result-thumb + .history-item__result-thumb {
    margin-left: 0;
}

.history-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item__prompt-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.history-item__prompt {
    flex: 1;
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.6;
    word-break: break-word;
    font-weight: 500;
}

.history-item__copy-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.history-item__copy-btn:hover {
    background: var(--accent-color);
    color: white;
    opacity: 1;
}

.history-item__copy-btn:active {
    transform: scale(0.95);
}

.history-item__copy-btn svg {
    width: 14px;
    height: 14px;
}

/* 深色模式下的复制按钮 */
body.dark-mode .history-item__copy-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

body.dark-mode .history-item__copy-btn:hover {
    background: var(--accent-color);
    color: white;
}

.history-item__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--text-color-secondary);
    flex-wrap: wrap;
}

.history-item__time {
    color: var(--text-color-secondary);
}

.history-item__tool {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-color-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-2xl);
    font-size: 10px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.history-item__ratio {
    background: rgba(59, 130, 246, 0.3);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: var(--radius-2xl);
    font-size: 10px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.history-item__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}

.history-item__action-btn {
    padding: 6px;
    background: none;
    border: none;
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--text-color-secondary);
    transition: all var(--transition-quick);
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-item__action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.history-item__action-btn svg {
    width: 14px;
    height: 14px;
}

.history-item__more-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-color-secondary);
    border-radius: var(--radius-2xl);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-quick);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.history-item__more-count:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--text-color);
    border-color: var(--accent-color);
}

/* 颜色选择器弹窗样式 - 简约设计 */
.modal__content--color-picker {
    width: 420px;
    max-width: 90vw;
    background-color: #0f0f0f; /* 更深的黑色 */ /* 香蕉黄主题深色背景 */
    border-radius: 12px; /* 保持一致的圆角 */
    padding: 0; /* 移除默认内边距 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); /* 与剪裁弹窗一致的阴影 */
    border: none; /* 移除边框 */
    overflow: hidden; /* 确保内容不溢出 */
}

/* 颜色选择器弹窗标题栏 */
.modal__content--color-picker .modal__header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal__content--color-picker .modal__title {
    color: white;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.modal__content--color-picker .modal__close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__content--color-picker .modal__close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.color-picker-container {
    padding: 15px 20px; /* 减少上下内边距，降低整体高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* 进一步减少间距 */
}

.color-wheel-wrapper {
    position: relative;
    width: 240px; /* 减小色轮尺寸以降低整体高度 */
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
    border: 2px solid rgba(255, 255, 255, 0.1); /* 添加微妙边框 */
}

#colorWheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: crosshair;
}

.color-wheel-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 3px solid white; /* 增加边框厚度 */
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4); /* 增强阴影 */
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: none;
}

.brightness-control {
    width: 100%;
}

.brightness-label {
    display: block;
    font-size: 12px; /* 稍微缩小字体 */
    color: rgba(255, 255, 255, 0.7); /* 改为白色半透明 */
    margin-bottom: 12px; /* 增加间距 */
    font-weight: 500;
    text-align: center; /* 居中对齐 */
}

.brightness-slider-wrapper {
    width: 100%;
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05); /* 添加背景 */
    border-radius: 8px; /* 与剪裁工具保持一致 */
    padding: 0 15px; /* 添加内边距 */
}

.brightness-slider {
    width: 100%;
    height: 6px; /* 稍微减少高度 */
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #000000, #808080, #ffffff);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.brightness-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; /* 稍微减小 */
    height: 18px;
    background: #007bff; /* 改为蓝色，与剪裁工具一致 */
    border: none; /* 移除边框 */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4); /* 蓝色阴影 */
    transition: all 0.2s ease;
}

.brightness-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.6);
}

.brightness-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #007bff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
    transition: all 0.2s ease;
}

.brightness-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.6);
}

.color-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05); /* 添加背景 */
    border-radius: 8px; /* 保持一致的圆角 */
    padding: 15px; /* 添加内边距 */
}

.color-preview {
    width: 50px; /* 稍微增大 */
    height: 50px;
    border-radius: 8px; /* 改为方形圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background-color: #000000;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2); /* 添加边框 */
}

.color-inputs {
    flex: 1;
    display: flex;
    gap: 10px;
}

.color-hex-input {
    flex: 1;
    padding: 10px 14px; /* 调整内边距 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 改为半透明边框 */
    border-radius: 8px; /* 保持一致的圆角 */
    font-size: 14px;
    font-family: 'Courier New', monospace; /* 使用等宽字体 */
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    color: white; /* 白色文字 */
    transition: all 0.2s ease;
}

.color-hex-input:focus {
    border-color: #007bff; /* 蓝色焦点边框 */
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3); /* 蓝色焦点阴影 */
    background-color: rgba(255, 255, 255, 0.15); /* 稍微提亮背景 */
}

.color-hex-input::placeholder {
    color: rgba(255, 255, 255, 0.5); /* 半透明占位符 */
}

.eyedropper-btn {
    width: 44px; /* 稍微减小 */
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.7);
}

.eyedropper-btn svg {
    width: 24px !important; /* 强制设置SVG图标大小 */
    height: 24px !important;
    flex-shrink: 0; /* 防止图标被压缩 */
}

.eyedropper-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: #007bff;
    transform: translateY(-1px); /* 添加悬浮效果 */
}

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

/* 深色模式保持一致 */
body.dark-mode .modal__content--color-picker {
    background-color: #1a1a1a; /* 更深的灰黑色 */ /* 稍微调亮一点 */
}

body.dark-mode .color-preview {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .color-hex-input {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .color-hex-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .eyedropper-btn {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .eyedropper-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .eyedropper-btn svg {
    width: 24px !important; /* 深色模式下也确保图标大小 */
    height: 24px !important;
}

body.dark-mode .brightness-slider {
    background: linear-gradient(to right, #000000, #808080, #ffffff);
}

body.dark-mode .brightness-label {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .brightness-slider-wrapper {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .color-controls {
    background-color: rgba(255, 255, 255, 0.03);
}

/* 颜色选择器弹窗底部按钮样式 */
.modal__content--color-picker .modal__actions {
    padding: 15px 20px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal__content--color-picker .modal__button {
    padding: 9px 20px !important; /* 使用!important确保覆盖基础样式 */
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    min-width: 80px !important;
    min-height: unset !important; /* 明确移除基础样式中的min-height */
    height: 40px !important; /* 强制设置固定高度 */
    box-sizing: border-box !important;
    vertical-align: top;
}

.modal__content--color-picker .modal__button--secondary {
    background-color: rgba(108, 117, 125, 0.8) !important;
    color: white !important;
    border-color: rgba(108, 117, 125, 0.6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.modal__content--color-picker .modal__button--secondary:hover {
    background-color: rgba(108, 117, 125, 1);
    border-color: rgba(108, 117, 125, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.modal__content--color-picker .modal__button--primary {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important;
}

.modal__content--color-picker .modal__button--primary:hover {
    background-color: #0056b3;
    border-color: #0056b3; /* 悬停时边框颜色跟随背景 */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* 悬停时阴影更深 */
}

/* 深色模式下的按钮优化 */
body.dark-mode .modal__content--color-picker .modal__header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal__content--color-picker .modal__actions {
    border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal__content--color-picker .modal__title {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .modal__content--color-picker .modal__close-btn {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .modal__content--color-picker .modal__close-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* 深色模式下的按钮样式保持一致 */
body.dark-mode .modal__content--color-picker .modal__button--secondary {
    background-color: rgba(108, 117, 125, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(108, 117, 125, 0.4); /* 直接设置边框颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .modal__content--color-picker .modal__button--secondary:hover {
    background-color: rgba(108, 117, 125, 0.8);
    color: white;
    border-color: rgba(108, 117, 125, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

body.dark-mode .modal__content--color-picker .modal__button--primary {
    background-color: #007bff;
    color: white;
    border-color: #007bff; /* 深色模式下边框颜色一致 */
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

body.dark-mode .modal__content--color-picker .modal__button--primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4); /* 悬停时阴影更深 */
}

/* 颜色选择器移动端响应式设计 */
@media (max-width: 768px) {
    .modal__content--color-picker {
        width: 95vw;
        max-width: 380px;
        margin: 20px;
    }
    
    .color-picker-container {
        padding: 12px 15px; /* 移动端进一步减少内边距 */
        gap: 12px; /* 移动端减少间距 */
    }
    
    .color-wheel-wrapper {
        width: 200px; /* 移动端进一步减小色轮 */
        height: 200px;
    }
    
    .modal__content--color-picker .modal__header {
        padding: 12px 15px;
    }
    
    .modal__content--color-picker .modal__title {
        font-size: 15px;
    }
    
    .modal__content--color-picker .modal__close-btn {
        width: 24px;
        height: 24px;
        font-size: 18px;
    }
    
    .brightness-label {
        font-size: 11px;
        margin-bottom: 10px;
    }
    
    .brightness-slider-wrapper {
        height: 28px;
        padding: 0 12px;
    }
    
    .brightness-slider {
        height: 5px;
    }
    
    .brightness-slider::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
    
    .brightness-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }
    
    .color-controls {
        padding: 12px;
        gap: 12px;
    }
    
    .color-preview {
        width: 42px;
        height: 42px;
    }
    
    .color-hex-input {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .eyedropper-btn {
        width: 38px;
        height: 38px;
    }
    
    .eyedropper-btn svg {
        width: 20px !important; /* 移动端稍小但仍然清晰的图标 */
        height: 20px !important;
    }
    
    .modal__content--color-picker .modal__actions {
        padding: 12px 15px;
        gap: 8px;
    }
    
    .modal__content--color-picker .modal__button {
        padding: 7px 16px !important; /* 移动端强制覆盖 */
        font-size: 13px !important;
        line-height: 1.2 !important;
        min-height: unset !important; /* 移动端也移除min-height */
        height: 36px !important; /* 移动端强制固定高度 */
    }
}

@media (max-width: 480px) {
    .modal__content--color-picker {
        width: 95vw;
        margin: 10px;
    }
    
    .color-wheel-wrapper {
        width: 180px; /* 小屏幕设备进一步减小 */
        height: 180px;
    }
    
    .color-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .color-inputs {
        gap: 8px;
    }
    
    .modal__content--color-picker .modal__actions {
        flex-direction: column-reverse;
    }
    
    .modal__content--color-picker .modal__button {
        width: 100%;
        justify-content: center;
    }
}

/* 占位符样式（新格式历史记录） */
.history-item__thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #9ca3af;
}

.history-item__thumb-placeholder:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #6b7280;
    transform: scale(1.05);
}

.history-item__thumb-placeholder--result {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #60a5fa;
}

.history-item__thumb-placeholder--result:hover {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #3b82f6;
}

.history-item__thumb-placeholder svg {
    width: 24px;
    height: 24px;
}

/* === 恢复结果的样式区分 === */
.new-generation-group--restored {
    border-style: dotted;
}

.generation-timer--restored {
    border-color: #22c55e;
    color: #16a34a;
}

body.dark-mode .generation-timer--restored {
    background: rgba(0, 0, 0, 0.6);
}

.generation-prompt-display--restored {
    opacity: 0.95;
}

/* 恢复记录的移除按钮 */
.record-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--glass-bg) 85%, #fff);
    border: 1px solid var(--glass-border);
    color: var(--secondary-text-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-quick), box-shadow var(--transition-quick);
}
.record-remove-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* 顶部条内的简约移除按钮 */
.timer-remove-btn {
    position: absolute;
    right: 8px; /* 略向内，避免贴边 */
    top: 50%;
    transform: translateY(-50%); /* 使用位移实现垂直正中 */
    margin-top: 0;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent; /* 去除灰色背景，直接显示 */
    color: #ef4444; /* 红色叉，统一强调色 */
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0.9;
    z-index: 20;
    border-radius: 50%;
    font-size: 14px; /* 与时间文字一致 */
    line-height: 14px; /* 与高度相同，消除字形偏移 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.timer-remove-btn:hover { color: #dc2626; }
.timer-remove-btn:hover { opacity: 1; }

/* 若仍有旧SVG图标残留 */
.timer-remove-btn svg { stroke: currentColor; }

/* 移除不需要的旧样式 */
.history-item__header,
.history-item__content,
.history-item__input-images,
.history-item__input-title,
.history-item__input-gallery,
.history-item__results,
.history-item__results-title,
.history-item__results-gallery {
    display: none;
}

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.history-empty__icon {
    color: var(--text-color-secondary);
    margin-bottom: 16px;
    opacity: 0.5;
}

.history-empty__text {
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 8px;
}

.history-empty__subtext {
    font-size: 14px;
    color: var(--text-color-secondary);
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .history-button {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    
    .modal__content--history {
        width: 95vw;
        max-height: 85vh;
    }
    
    .modal__header {
        display: flex; /* 移动端改回flex布局 */
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px;
    }
    
    .modal__header-left {
        gap: 6px; /* 移动端减少间距 */
        justify-self: auto; /* 重置网格定位 */
    }
    
    .modal__header-center {
        max-width: none;
        order: 2;
        justify-self: auto; /* 重置网格定位 */
        width: 100%; /* 移动端搜索框占满宽度 */
    }
    
    .modal__header-actions {
        order: 3;
        align-self: flex-end;
        justify-self: auto; /* 重置网格定位 */
    }
    
    .history-storage-info {
        font-size: 0.75rem; /* 移动端减小字体 */
        gap: 8px; /* 减小间距 */
    }
    
    .history-storage-info .storage-usage {
        width: 50px; /* 移动端缩小进度条 */
        height: 5px;
    }
    
    .history-search-input {
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    .modal__close-btn,
    .modal__button--secondary {
        width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: 14px;
    }
    
    .modal__close-btn {
        transform: translateY(-1px); /* 移动端也应用垂直微调 */
    }
    
    .history-content {
        padding: 16px 20px;
        max-height: 280px; /* 移动端稍微减少高度，约3.5条记录 */
    }
    
    .history-item__content {
        flex-direction: column;
        gap: 12px;
    }
    
    .history-item__input-images {
        max-width: none;
    }
    
    .history-item__results-gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}
/* --- 历史记录样式结束 --- */

.ai-tool-label {
    color: #888;
    font-style: italic;
    background: #f3f3f3;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 13px;
    margin-left: 2px;
}

/* 手册弹窗样式 */
.modal__content--manual {
    max-width: 1200px;
    width: 98%;
    max-height: 90vh;
    height: 700px;
    padding: 0;
    overflow: hidden;
}

.modal__content--manual .modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
}

.modal__title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal__content--manual .modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    text-align: left;
}

.modal__browser-btn {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #6366f1;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
}

.modal__browser-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

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

.modal__browser-btn svg {
    width: 16px;
    height: 16px;
}

.modal__close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__close-btn:hover {
    background-color: #f1f5f9;
    color: #1e293b;
}

.manual-content {
    height: calc(100% - 80px);
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    position: relative;
}

.manual-content iframe {
    border: none;
    border-radius: 0 0 16px 16px;
    width: 100%;
    height: 100%;
}

/* 移除了白色遮挡层 */

/* 移动端适配 */
@media (max-width: 768px) {
    .modal__content--manual {
        width: 98%;
        height: 90vh;
        max-height: 90vh;
    }
    
    .modal__content--manual .modal__header {
        padding: 16px 20px;
    }
    
    .modal__content--manual .modal__title {
        font-size: 1.1rem;
    }
    
    .manual-content {
        height: calc(100% - 68px);
    }
}

/* 服务器繁忙弹窗样式 */
.modal__content--compact {
    width: 400px;
    max-width: 90vw;
    padding: 0;
}

.modal__title--warning {
    display: flex;
    align-items: center;
    color: #f59e0b;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.server-busy-message {
    font-size: 1rem;
    color: #374151;
    margin: 0 0 16px 0;
    line-height: 1.5;
    text-align: center;
}

.server-busy-details {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.server-busy-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 1rem;
}

.countdown-label {
    color: #6b7280;
    margin-right: 8px;
}

.countdown-time {
    font-weight: 600;
    color: #f59e0b;
    font-size: 1.1rem;
}

.server-busy-tip {
    display: flex;
    align-items: flex-start;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.server-busy-tip svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .modal__content--compact {
        width: 350px;
    }
    
    .server-busy-message {
        font-size: 0.95rem;
    }
    
    .countdown-time {
        font-size: 1rem;
    }
}





/* ========================= 网络稳定性监控弹窗样式 ========================= */
.network-block-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    animation: fadeIn 0.3s ease-out;
}

.network-block-modal.fade-out {
    animation: fadeOut 0.3s ease-out;
}

.network-block-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 24px;
    padding: 40px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

/* 暗黑模式样式 */
.dark-mode .network-block-content {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    color: #f5f5f7;
}

/* 震动效果 */
.network-block-content.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

.network-block-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.network-block-icon svg {
    color: #ef4444;
    filter: drop-shadow(0 4px 6px rgba(239, 68, 68, 0.3));
}

.network-block-title {
    font-size: 28px;
    font-weight: 700;
    color: #1d1d1f;
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.dark-mode .network-block-title {
    color: #f5f5f7;
}

.network-block-message {
    font-size: 16px;
    line-height: 1.6;
    color: #6e6e73;
    text-align: center;
    margin-bottom: 32px;
}

.dark-mode .network-block-message {
    color: #8e8e93;
}

/* 倒计时区域 */
.network-block-countdown {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

.dark-mode .network-block-countdown {
    background: linear-gradient(135deg, #3d3714 0%, #4a4118 100%);
    border-color: #ffc107;
}

.countdown-label {
    font-size: 14px;
    color: #856404;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.dark-mode .countdown-label {
    color: #ffc107;
}

.countdown-timer {
    font-size: 48px;
    font-weight: 700;
    color: #ff6b6b;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

/* 帮助信息 */
.network-block-help {
    background: var(--bg-color);
    border-radius: 12px;
    padding: 20px;
}

.dark-mode .network-block-help {
    background: rgba(255, 255, 255, 0.05);
}

.network-block-help p {
    font-size: 14px;
    color: #6e6e73;
    margin-bottom: 12px;
}

.dark-mode .network-block-help p {
    color: #8e8e93;
}

.network-block-help .contact-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-weight: 600;
    color: #1d1d1f;
}

.dark-mode .network-block-help .contact-info {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f5f5f7;
}

.network-block-help .contact-info svg {
    color: #007aff;
    flex-shrink: 0;
}


/* 动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 响应式设计 */
@media (max-width: 640px) {
    .network-block-content {
        padding: 24px;
        margin: 16px;
        max-width: calc(100% - 32px);
    }
    
    .network-block-title {
        font-size: 24px;
    }
    
    .network-block-message {
        font-size: 14px;
    }
    
    .countdown-timer {
        font-size: 36px;
    }
    
    .network-block-tips li {
        font-size: 13px;
    }
}

/* 美化的文本悬浮提示框样式 - 浅色模式 */
.prompt-tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 252, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(209, 213, 219, 0.3);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 10000;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    min-width: 280px;
    max-width: 420px;
}

.prompt-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.prompt-tooltip__content {
    font-size: 14px;
    line-height: 1.6;
    color: #1d1d1f;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(248, 249, 250, 0.5);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    word-break: break-word;
    font-family: var(--font-family-system);
}

.prompt-tooltip__content::-webkit-scrollbar {
    width: 6px;
}

.prompt-tooltip__content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.prompt-tooltip__content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.prompt-tooltip__content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.prompt-tooltip__actions {
    display: flex;
    gap: 10px;
}

.prompt-tooltip__btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family-system);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.prompt-tooltip__btn--copy {
    background: #007aff;
    color: white;
}

.prompt-tooltip__btn--copy:hover {
    background: #0051d5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

.prompt-tooltip__btn--fill {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.prompt-tooltip__btn--fill:hover {
    background: color-mix(in srgb, var(--bg-color) 80%, var(--accent-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.prompt-tooltip__btn:active {
    transform: translateY(0);
}

.prompt-tooltip__btn-icon {
    width: 14px;
    height: 14px;
}

/* 改进原有的提示词显示样式 - 浅色模式 */
.generation-prompt-display {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative;
    color: rgba(0, 0, 0, 0.35) !important;
}

.generation-prompt-display:hover {
    color: rgba(0, 0, 0, 0.7) !important;
    /* 浅色模式也移除背景，或使用极淡的背景 */
    background: transparent;
    border-radius: 6px;
}

/* 深色模式下的提示词显示 */
body.dark-mode .generation-prompt-display {
    color: rgba(255, 255, 255, 0.45) !important;
}

body.dark-mode .generation-prompt-display:hover {
    color: rgba(255, 255, 255, 0.7) !important;
    /* 移除背景色，保持透明 */
    background: transparent;
}

/* 成功提示动画 */
@keyframes tooltipSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.prompt-tooltip__btn.success {
    animation: tooltipSuccess 0.3s ease;
}

/* 深色模式支持 - 使用body.dark-mode类 */
body.dark-mode .prompt-tooltip {
    background: linear-gradient(135deg, rgba(45, 31, 10, 0.98) 0%, rgba(35, 25, 8, 0.95) 100%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 2px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 193, 7, 0.1);
}

body.dark-mode .prompt-tooltip__content {
    color: #f8f4e6;
    background: rgba(45, 31, 10, 0.5);
}

body.dark-mode .prompt-tooltip__content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .prompt-tooltip__content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .prompt-tooltip__content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

body.dark-mode .prompt-tooltip__btn--copy {
    background: #0a84ff;
    color: white;
}

body.dark-mode .prompt-tooltip__btn--copy:hover {
    background: #0071e3;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

body.dark-mode .prompt-tooltip__btn--fill {
    background: rgba(45, 31, 10, 0.8);
    color: #f8f4e6;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

body.dark-mode .prompt-tooltip__btn--fill:hover {
    background: rgba(55, 38, 13, 0.9);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.1);
}

/* === 禁用图层样式 === */
.disabled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.7) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    transition: all 0.3s ease;
}

/* 添加微妙的纹理效果 */
.disabled-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 20px 20px, 30px 30px;
    border-radius: inherit;
    opacity: 0.6;
}

/* 禁用文本样式 */
.disabled-overlay::after {
    content: '功能优化中·暂时禁用';
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    opacity: 0.8;
    z-index: 1;
    position: relative;
    animation: pulse 2s ease-in-out infinite;
}

/* 悬停效果 */
.disabled-overlay:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0.8) 100%);
}

.disabled-overlay:hover::after {
    opacity: 1;
    transform: scale(1.05);
    color: rgba(0, 0, 0, 0.8);
}

/* 脉动动画 */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.02); opacity: 1; }
}

/* 深色主题下的禁用图层 */
body.dark-mode .disabled-overlay {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.6) 0%, 
        rgba(0, 0, 0, 0.4) 50%, 
        rgba(0, 0, 0, 0.6) 100%);
}

body.dark-mode .disabled-overlay::before {
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

body.dark-mode .disabled-overlay:hover {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.5) 50%, 
        rgba(0, 0, 0, 0.7) 100%);
}

/* 深色主题下的禁用文本样式 */
body.dark-mode .disabled-overlay::after {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .disabled-overlay:hover::after {
    color: rgba(255, 255, 255, 0.9);
}

/* 为需要禁用的控件添加相对定位 */
.aspect-ratio-options,
.png-output-option,
.jimeng-size-group {
    position: relative;
}

/* 专门为比例推荐区域设计的禁用样式 */
.modal__section-item.disabled {
    position: relative;
    pointer-events: none;
}

.modal__section-item.disabled .disabled-overlay::after {
    content: '暂时禁用';
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

body.dark-mode .modal__section-item.disabled .disabled-overlay::after {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.8);
}

/* ================================
   Apple Design 线路检测弹窗
   ================================ */
.modal__content--route-apple {
    max-width: 400px;
    padding: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.route-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
}

/* 当前线路显示区域 */
.current-route-info {
    padding: 16px 24px;
    background: rgba(0, 122, 255, 0.05);
    border-bottom: 1px solid rgba(0, 122, 255, 0.1);
}

.current-route-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1d1d1f;
}

.current-route-icon {
    font-size: 16px;
}

.current-route-name {
    font-weight: 600;
    color: #007aff;
    background: rgba(0, 122, 255, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
}

.close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #f5f5f7;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #86868b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: #e8e8ed;
    color: #1d1d1f;
}

.route-list {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.route-list:empty::before {
    content: '点击"检测线路"开始测试';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    color: #86868b;
    font-size: 15px;
}

.route-item {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.route-item:last-child {
    border-bottom: none;
}

.route-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.route-item.selected {
    background: #007AFF;
    color: white;
}

.route-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.route-item__name {
    font-size: 16px;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.route-item.selected .route-item__name {
    color: white;
}

.route-item__status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.route-status-badge {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.route-status-badge.testing {
    background: #007AFF;
    color: white;
}

.route-status-badge.success {
    background: #34C759;
    color: white;
}

.route-status-badge.error {
    background: #FF3B30;
    color: white;
}

.route-status-badge--pending {
    background: #F2F2F7;
    color: #86868b;
    border: 1px solid #D1D1D6;
}

.route-latency {
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.route-item.selected .route-latency {
    color: rgba(255, 255, 255, 0.8);
}

.route-actions {
    display: flex;
    padding: 20px 24px;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #f5f5f7;
}

.btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: -0.01em;
}

.btn--primary {
    background: #007AFF;
    color: white;
}

.btn--primary:hover:not(:disabled) {
    background: #0056CC;
}

.btn--primary:disabled {
    background: #D1D1D6;
    color: #86868b;
    cursor: not-allowed;
}

.btn--default {
    background: white;
    color: #007AFF;
    border: 1px solid #D1D1D6;
}

.btn--default:hover:not(:disabled) {
    background: #f5f5f7;
}

.btn--default:disabled {
    background: #f5f5f7;
    color: #86868b;
    border-color: #E5E5EA;
    cursor: not-allowed;
}

/* 深色模式适配 */
body.dark-mode .modal__content--route-apple {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .route-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .route-header h3 {
    color: #f5f5f7;
}

/* 暗色模式下的当前线路显示 */
body.dark-mode .current-route-info {
    background: rgba(0, 122, 255, 0.1);
    border-bottom-color: rgba(0, 122, 255, 0.2);
}

body.dark-mode .current-route-label {
    color: #f5f5f7;
}

body.dark-mode .current-route-name {
    color: #0a84ff;
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .close-btn {
    background: #2c2c2e;
    color: #86868b;
}

body.dark-mode .close-btn:hover {
    background: #3a3a3c;
    color: #f5f5f7;
}

body.dark-mode .route-item {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

body.dark-mode .route-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .route-item__name {
    color: #f5f5f7;
}

body.dark-mode .route-latency {
    color: #86868b;
}

body.dark-mode .route-actions {
    background: #1c1c1e;
    border-top-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .btn--default {
    background: #2c2c2e;
    color: #007AFF;
    border-color: #3a3a3c;
}

body.dark-mode .btn--default:hover:not(:disabled) {
    background: #3a3a3c;
}

body.dark-mode .btn--default:disabled {
    background: #2c2c2e;
    color: #86868b;
    border-color: #3a3a3c;
}

body.dark-mode .route-status-badge--pending {
    background: #2c2c2e;
    color: #86868b;
    border-color: #3a3a3c;
}

/* ================================
   社交媒体风格按钮组件样式
   ================================ */
.social-links,
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-links {
    margin-left: auto;
    margin-right: 0.2rem;
    gap: 5px;
}

.social-btn {
    cursor: pointer;
    height: 40px;
    width: 40px;
    font-family: 'Titillium Web', sans-serif;
    color: #333;
    border-radius: 8px;
    box-shadow: 0px 6px 8px rgba(0,0,0,0.08);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(193, 173, 158, 0.25);
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-btn svg {
    height: 19px;
    width: 19px;
    flex-shrink: 0;
    display: block;
}

.social-btn span {
    width: 0px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    margin-left: 0px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    flex-shrink: 0;
}

.social-btn:hover {
    width: 96px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-btn:hover span {
    width: 48px;
    margin-left: 4px;
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

/* 为不同按钮设置不同的图标颜色和悬停效果 */
#homeBtn svg {
    fill: #ff7f50;
}

#homeBtn:hover {
    background-color: #ff7f50;
    color: white;
}

#homeBtn:hover svg {
    fill: white;
}

#settingsBtn svg {
    fill: #019b98;
}

#settingsBtn:hover {
    background-color: #019b98;
    color: white;
}

#settingsBtn:hover svg {
    fill: white;
}

#routeCheckBtn svg {
    fill: #ffcc00;
}

#routeCheckBtn:hover {
    background-color: #ffd700;
    color: #333;
}

#routeCheckBtn:hover svg {
    fill: #333;
}

/* 暗色模式适配 */
body.dark-mode .social-btn {
    background: rgba(44, 44, 46, 0.75);
    color: #ffffff;
    box-shadow: 0px 6px 8px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(84, 84, 88, 0.35);
}

body.dark-mode .social-btn:hover {
    background: rgba(44, 44, 46, 0.85);
    box-shadow: 0px 4px 12px rgba(0,0,0,0.35);
}

@keyframes active {
    to {
        transform: rotate(360deg);
    }
}

/* 小型控件的禁用样式变体 */
.disabled-overlay--small::after {
    content: '功能优化中';
    font-size: 10px;
}

/* ================================
   右上角按钮组布局
   ================================ */
.header__top-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 0.2rem;
}

/* 右上角网络状态按钮 */
.header__network-status-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #10b981; /* 默认绿色 */
    transition: all 0.3s ease;
    outline: none;
    user-select: none;
    white-space: nowrap;
}

.header__network-status-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    transform: scale(1.02);
}

.header__network-status-btn:active {
    transform: scale(0.98);
}

.header__network-status-btn.good {
    color: #10b981;
}

.header__network-status-btn.warning {
    color: #f59e0b;
}

.header__network-status-btn.error {
    color: #ef4444;
}

/* 右上角设置按钮 */
.header__settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(193, 173, 158, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 6px 8px rgba(0,0,0,0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0;
    outline: none;
}

.header__settings-btn:hover {
    background-color: #019b98;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
}

.header__settings-btn svg {
    width: 24px;
    height: 24px;
    fill: #019b98;
    transition: fill 0.3s ease;
}

.header__settings-btn:hover svg {
    fill: white;
}

/* 暗色模式 */
body.dark-mode .header__network-status-btn:hover {
    background: rgba(16, 185, 129, 0.15);
}

body.dark-mode .header__settings-btn {
    background: rgba(44, 44, 46, 0.75);
    border: 1px solid rgba(84, 84, 88, 0.35);
    box-shadow: 0px 6px 8px rgba(0,0,0,0.25);
}

body.dark-mode .header__settings-btn:hover {
    background-color: #019b98;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.35);
}

body.dark-mode .header__settings-btn svg {
    fill: #019b98;
}

/* ========================================
   图片预览弹窗 - Apple Design 风格
   ======================================== */

/* 弹窗背景 */
.image-preview-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-preview-modal.modal--visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 主容器 - 左右布局 */
.image-preview-modal__container {
    position: relative;
    display: flex;
    width: 92vw;
    height: 90vh;
    max-width: 1600px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 关闭按钮 - macOS 风格 */
.image-preview-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.image-preview-modal__close svg {
    stroke: rgba(0, 0, 0, 0.5);
    transition: stroke 0.2s ease;
}

.image-preview-modal__close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.image-preview-modal__close:hover svg {
    stroke: rgba(0, 0, 0, 0.8);
}

.image-preview-modal__close:active {
    transform: scale(0.95);
}

/* 左侧：图片区域 */
.image-preview-modal__image-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f5f5f7;
    position: relative;
    overflow: hidden;
}

/* 预览多图左右切换按钮 */
.image-preview-modal__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.image-preview-modal__nav-btn--prev {
    left: 12px;
}

.image-preview-modal__nav-btn--next {
    right: 12px;
}

.image-preview-modal__counter {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    z-index: 20;
    pointer-events: none;
    backdrop-filter: blur(6px);
}

.image-preview-modal__nav-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.06);
}

.image-preview-modal__nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

body.dark-mode .image-preview-modal__nav-btn {
    background: rgba(30, 30, 30, 0.9);
    color: #f9fafb;
}

@media (max-width: 768px) {
    .image-preview-modal__nav-btn {
        width: 36px;
        height: 36px;
    }
    .image-preview-modal__nav-btn--prev {
        left: 8px;
    }
    .image-preview-modal__nav-btn--next {
        right: 8px;
    }
}

.image-preview-modal__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.05s ease-out;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
}

.image-preview-modal__image.draggable {
    cursor: grab;
    will-change: transform;
}

.image-preview-modal__image.dragging {
    cursor: grabbing;
    will-change: transform;
}

/* 右侧：操作侧边栏 */
.image-preview-modal__sidebar {
    width: 280px;
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 24px 20px;
    gap: 24px;
    /* Firefox滚动条样式 */
    scrollbar-width: thin !important;
    scrollbar-color: #cccccc #f5f5f5 !important;
}

/* Webkit浏览器(Chrome, Safari, Edge)滚动条样式 */
.image-preview-modal__sidebar::-webkit-scrollbar {
    width: 12px !important;
    display: block !important;
}

.image-preview-modal__sidebar::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    margin: 4px 0;
    border-radius: 6px;
}

.image-preview-modal__sidebar::-webkit-scrollbar-thumb {
    background: #cccccc !important;
    border-radius: 6px;
    border: 2px solid #f5f5f5;
    transition: background 0.3s ease;
}

/* 悬停时显示滚动条 */
.image-preview-modal__sidebar:hover::-webkit-scrollbar-thumb {
    background: #999999 !important;
}

/* 滚动条thumb悬停效果 */
.image-preview-modal__sidebar::-webkit-scrollbar-thumb:hover {
    background: #777777 !important;
}

/* 滚动条thumb激活效果(拖动时) */
.image-preview-modal__sidebar::-webkit-scrollbar-thumb:active {
    background: #555555 !important;
}

/* 滚动中状态 - 需要JS配合 */
.image-preview-modal__sidebar.scrolling::-webkit-scrollbar-thumb {
    background: #888888 !important;
}

/* Firefox滚动时显示 */
.image-preview-modal__sidebar.scrolling {
    scrollbar-color: #888888 #f5f5f5 !important;
}

/* 侧边栏分组 */
.image-preview-sidebar__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.image-preview-sidebar__title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0 4px;
}

.image-preview-sidebar__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 侧边栏按钮 - Apple 风格 */
.image-preview-sidebar__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

.image-preview-sidebar__btn svg {
    flex-shrink: 0;
    stroke: rgba(0, 0, 0, 0.6);
    transition: stroke 0.2s ease;
}

.image-preview-sidebar__btn span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-preview-sidebar__btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.image-preview-sidebar__btn:hover svg {
    stroke: rgba(0, 0, 0, 0.9);
}

.image-preview-sidebar__btn:active {
    transform: translateY(0) scale(0.98);
}

/* 加载指示器 */
.image-preview-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 5;
}

.image-preview-loader.hidden {
    display: none;
}

.image-preview-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.image-preview-loader__text {
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    font-weight: 500;
    text-shadow: none;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .image-preview-modal__container {
        width: 96vw;
        height: 94vh;
    }

    .image-preview-modal__sidebar {
        width: 240px;
        padding: 20px 16px;
    }
}

@media (max-width: 768px) {
    .image-preview-modal__container {
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .image-preview-modal__image-wrapper {
        flex: 1;
        padding: 20px;
    }

    .image-preview-modal__sidebar {
        width: 100%;
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding: 16px;
        gap: 16px;
    }

    .image-preview-modal__close {
        top: 16px;
        right: 16px;
    }
}

/* 暗色模式支持 */
body.dark-mode .image-preview-modal__container {
    background: rgba(30, 30, 30, 0.98);
}

body.dark-mode .image-preview-modal__image-wrapper {
    background: #1c1c1e;
}

body.dark-mode .image-preview-modal__sidebar {
    background: #2c2c2e;
    border-left-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .image-preview-sidebar__title {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .image-preview-sidebar__btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .image-preview-sidebar__btn svg {
    stroke: rgba(255, 255, 255, 0.6);
}

body.dark-mode .image-preview-sidebar__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .image-preview-sidebar__btn:hover svg {
    stroke: rgba(255, 255, 255, 0.9);
}

body.dark-mode .image-preview-modal__close {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .image-preview-modal__close svg {
    stroke: rgba(255, 255, 255, 0.6);
}

body.dark-mode .image-preview-modal__close:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .image-preview-modal__close:hover svg {
    stroke: rgba(255, 255, 255, 0.9);
}

body.dark-mode .image-preview-loader__spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .image-preview-loader__text {
    color: rgba(255, 255, 255, 0.7);
}

/* ========== 竖排文本样式 ========== */
.header__vertical-text {
    position: absolute;
    top: 60px;
    right: 5px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color-secondary);
    cursor: pointer;
    padding: 8px 6px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fluid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    letter-spacing: 2px;
    user-select: none;
    width: auto;
    min-width: 28px;
    white-space: nowrap;
}

.header__vertical-text:hover {
    background: var(--glass-fade);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateX(-2px);
    box-shadow: var(--shadow-md);
}

.header__vertical-text:active {
    transform: translateX(0);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .header__vertical-text {
        font-size: 0.75rem;
        padding: 6px 3px;
        letter-spacing: 1px;
    }
}

/* ========== 二维码模态框样式 ========== */
.qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.qrcode-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.qrcode-modal__content {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qrcode-modal__close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-color-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.qrcode-modal__close:hover {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.05);
    transform: rotate(90deg);
}

.qrcode-modal__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.qrcode-modal__desc {
    font-size: 0.875rem;
    color: var(--text-color-secondary);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.qrcode-modal__qr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qrcode-modal__qr-container img,
.qrcode-modal__qr-container canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.qrcode-modal__url {
    font-size: 0.75rem;
    color: var(--text-color-secondary);
    text-align: center;
    word-break: break-all;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--radius-md);
    font-family: monospace;
}

/* 深色模式适配 */
body.dark-mode .qrcode-modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .qrcode-modal__url {
    background: rgba(255, 255, 255, 0.05);
}

/* 警告区域样式 */
.qrcode-modal__warning {
    text-align: center;
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
}

.qrcode-modal__warning code {
    display: block;
    background: rgba(0, 0, 0, 0.1);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    color: var(--text-color);
    margin: var(--spacing-sm) 0;
}

.qrcode-modal__ip-input {
    margin-bottom: var(--spacing-lg);
}

.qrcode-modal__ip-input input {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-color);
    transition: all 0.3s ease;
    outline: none;
}

.qrcode-modal__ip-input input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.qrcode-modal__ip-input button {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.qrcode-modal__ip-input button:hover {
    background: color-mix(in srgb, var(--accent-color) 80%, #000);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.qrcode-modal__ip-input button:active {
    transform: translateY(0);
}

/* 深色模式适配 */
body.dark-mode .qrcode-modal__warning code {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .qrcode-modal__ip-input input {
    background: rgba(255, 255, 255, 0.05);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .qrcode-modal__content {
        width: 85%;
        padding: var(--spacing-xl);
        max-height: 90vh;
        overflow-y: auto;
    }

    .qrcode-modal__title {
        font-size: 1.25rem;
    }

    .qrcode-modal__qr-container {
        padding: var(--spacing-md);
    }

    .qrcode-modal__warning {
        font-size: 0.875rem;
    }

    .qrcode-modal__warning code {
        font-size: 0.7rem;
    }
}

/* ========================================
   模型选择器样式 - 文件夹标签风格
   ======================================== */
.model-selector {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
    transition: opacity 0.3s ease;
}

.model-tab {
    /* 模型标签支持按“额度组”自定义强调色 */
    --model-tab-accent-rgb: 0, 122, 255;       /* 默认：蓝色（额度1） */
    --model-tab-accent-rgb-dark: 10, 132, 255; /* 深色模式：蓝色（额度1） */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 42px;
    padding: 0 16px;
    background: var(--glass-bg, rgba(255, 255, 255, 0.7));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color, #333);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 3px solid transparent;
}

.model-tab::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgb(var(--model-tab-accent-rgb)) 0%, rgba(var(--model-tab-accent-rgb), 0.7) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.model-tab[data-quota-group="quota-2"] {
    /* 额度2：紫色系（PRO 高清 / PRO 超清 / DREAM） */
    --model-tab-accent-rgb: 124, 58, 237;
    --model-tab-accent-rgb-dark: 167, 139, 250;
}

.model-tab:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(var(--model-tab-accent-rgb), 0.15);
    border-color: rgba(var(--model-tab-accent-rgb), 0.25);
}

.model-tab:hover::before {
    opacity: 0.3;
}

.model-tab--active {
    background: linear-gradient(135deg, rgba(var(--model-tab-accent-rgb), 0.08) 0%, rgba(var(--model-tab-accent-rgb), 0.05) 100%);
    border-color: rgba(var(--model-tab-accent-rgb), 0.35);
    border-left-color: rgb(var(--model-tab-accent-rgb));
    color: rgb(var(--model-tab-accent-rgb));
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(var(--model-tab-accent-rgb), 0.15);
}

.model-tab--active::before {
    opacity: 1;
}

.model-tab__label {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* 热门角标 - 右上角三角形徽章 */
.model-tab__hot-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: 0 var(--radius-md) 0 0;
}

.model-tab__hot-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 深色模式适配 */
.dark-mode .model-tab {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .model-tab::before {
    background: linear-gradient(180deg, rgb(var(--model-tab-accent-rgb-dark)) 0%, rgba(var(--model-tab-accent-rgb-dark), 0.7) 100%);
}

.dark-mode .model-tab:hover {
    box-shadow: 0 4px 16px rgba(var(--model-tab-accent-rgb-dark), 0.2);
    border-color: rgba(var(--model-tab-accent-rgb-dark), 0.3);
}

.dark-mode .model-tab--active {
    background: linear-gradient(135deg, rgba(var(--model-tab-accent-rgb-dark), 0.15) 0%, rgba(var(--model-tab-accent-rgb-dark), 0.08) 100%);
    border-color: rgba(var(--model-tab-accent-rgb-dark), 0.4);
    border-left-color: rgb(var(--model-tab-accent-rgb-dark));
    color: rgb(var(--model-tab-accent-rgb-dark));
}

/* 移动端适配 */
@media (max-width: 768px) {
    .model-selector {
        left: 10px;
        top: auto;
        bottom: 100px;
        transform: none;
    }

    .model-tab {
        min-width: 70px;
        height: 36px;
        font-size: 12px;
        padding: 0 12px;
    }
}

/* ========================================
   模型说明按钮样式
   ======================================== */
.model-info-btn {
    margin-top: 12px;
    width: 100%;
    padding: 10px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.model-info-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.model-info-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.model-info-btn:hover svg {
    transform: scale(1.1);
}

.model-info-btn__text {
    white-space: nowrap;
}

/* ========================================
   模型说明弹窗样式 - 简约表格设计
   ======================================== */
.modal__content--model-info {
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
}

/* 模型说明弹窗的header布局 */
.modal__content--model-info .modal__header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.modal__content--model-info .modal__title {
    flex: 1;
    text-align: center;
}

.modal__content--model-info .modal__close-btn {
    position: absolute;
    right: var(--spacing-xl);
}

.model-info-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* PRO 测试期横幅提醒 - 纯色背景单列布局 */
.model-info-notice-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #fef3c7;
    border: 1.5px solid #fbbf24;
    border-radius: var(--radius-lg);
    text-align: center;
}

body.dark-mode .model-info-notice-banner {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
}

.model-info-notice-banner svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.model-info-notice-banner__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* 主要信息行 - 并排显示 */
.notice-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.notice-main strong {
    font-size: 15px;
    font-weight: 600;
    color: #d97706;
}

.notice-separator {
    color: #fbbf24;
    font-weight: bold;
    font-size: 14px;
}

.notice-main span {
    font-size: 14px;
    color: #92400e;
}

/* 限量信息 */
.notice-limit {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #b45309;
    background: #fed7aa;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    border: 1px solid #fdba74;
    width: fit-content;
}

body.dark-mode .notice-limit {
    background: rgba(254, 215, 170, 0.2);
    border-color: rgba(253, 186, 116, 0.3);
    color: #fdba74;
}

/* 模型对比表格 */
.model-comparison-table {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.model-table-header {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 2px solid var(--glass-border);
}

body.dark-mode .model-table-header {
    background: rgba(255, 255, 255, 0.05);
}

.model-table-row {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
    border-bottom: 1px solid var(--glass-border);
    transition: background-color 0.2s ease;
}

.model-table-row:last-child {
    border-bottom: none;
}

.model-table-row:hover {
    background: rgba(0, 122, 255, 0.04);
}

.model-table-row--highlight {
    background: rgba(245, 158, 11, 0.03);
}

.model-table-row--highlight:hover {
    background: rgba(245, 158, 11, 0.06);
}

.model-table-cell {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-color);
}

.model-table-cell--header {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color-secondary);
    padding: 12px 16px;
}

.model-table-cell--name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-table-cell--resolution {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0;
}

.model-name {
    font-weight: 600;
    color: var(--text-color);
}

/* 模型徽章 */
.model-badge {
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.model-badge--stable {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.model-badge--test {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* 推荐图标 - 点赞 */
.recommend-icon {
    flex-shrink: 0;
    color: #3b82f6;
    fill: #60a5fa;
    animation: recommend-bounce 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.3));
}

@keyframes recommend-bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-2px) scale(1.1);
    }
}

/* 分辨率值 */
.resolution-value {
    font-weight: 600;
    font-size: 14px;
    margin-right: 8px;
    flex-shrink: 0;
}

.resolution-value--high {
    color: #3b82f6;
}

.resolution-value--ultra {
    color: #8b5cf6;
}

/* 分辨率进度条 */
.resolution-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
}

body.dark-mode .resolution-bar {
    background: rgba(255, 255, 255, 0.1);
}

.resolution-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #9ca3af, #6b7280);
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.resolution-bar__fill--high {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.resolution-bar__fill--ultra {
    background: linear-gradient(90deg, #a78bfa, #8b5cf6);
}

/* 速度徽章 */
.speed-badge {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.speed-badge--fast {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.speed-badge--medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.speed-badge--slow {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* 简化说明区域 */
.model-info-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.model-info-summary__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

/* 图标组容器 */
.summary-icon-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 箭头 */
.summary-arrow {
    color: var(--text-color-secondary);
    opacity: 0.5;
}

/* 图标样式 */
.summary-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13px;
    transition: transform 0.2s ease;
}

.model-info-summary__item:hover .summary-icon {
    transform: scale(1.05);
}

/* 清晰度图标 */
.summary-icon--clarity-low {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.1));
    color: #6b7280;
    border: 2px solid rgba(156, 163, 175, 0.3);
}

.summary-icon--clarity-high {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
    color: #8b5cf6;
    border: 2px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* 速度图标 */
.summary-icon--speed-fast {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: #10b981;
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.summary-icon--speed-slow {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.summary-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.summary-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.summary-text span {
    font-size: 13px;
    color: var(--text-color-secondary);
    line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modal__content--model-info {
        max-width: 95%;
        padding: 16px;
    }

    .model-table-header,
    .model-table-row {
        grid-template-columns: 1.2fr 0.6fr 1fr 0.8fr;
        font-size: 13px;
    }

    .model-table-cell {
        padding: 10px 12px;
        font-size: 13px;
    }

    .model-table-cell--header {
        padding: 10px 12px;
        font-size: 12px;
    }

    .model-name {
        font-size: 13px;
    }

    .model-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    .resolution-value {
        font-size: 13px;
    }

    .speed-badge {
        font-size: 11px;
        padding: 3px 8px;
    }

    .model-info-notice-banner {
        padding: 12px 14px;
        gap: 10px;
    }

    .notice-main {
        gap: 6px;
    }

    .notice-main strong {
        font-size: 14px;
    }

    .notice-main span {
        font-size: 13px;
    }

    .notice-separator {
        font-size: 13px;
    }

    .notice-limit {
        font-size: 12px;
        padding: 4px 10px;
    }

    .model-info-summary__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .summary-icon-group {
        gap: 8px;
    }

    .summary-icon {
        width: 38px;
        height: 38px;
        font-size: 12px;
    }

    .summary-arrow {
        width: 16px;
        height: 16px;
    }

    .summary-text strong {
        font-size: 13px;
    }

    .summary-text span {
        font-size: 12px;
    }
}

/* 设置页面存储状态样式 */
.settings-storage-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-storage-info {
    display: flex;
    align-items: center;
}

.settings-storage-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.settings-storage-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

[data-theme="dark"] .settings-storage-bar {
    background: rgba(255, 255, 255, 0.15);
}

.settings-storage-bar-fill {
    height: 100%;
    background: #4caf50;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 3px;
}