/* 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;
    overflow-y: visible; /* 让滚动由 html 元素统一管理，避免双滚动条 */
}

/* 自定义滚动条 - 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__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.header__center.hidden {
    display: none;
}

/* 移除旧按钮和积分的样式 (或者注释掉) */
/*
.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;
    white-space: nowrap;
    flex-shrink: 0;
}

.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; /* 最小高度与单行图片一致 */
}

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

/* 新增：提示词优化按钮样式 - Gemini星星 */
.optimize-prompt-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    width: 28px;
    height: 28px;
    z-index: 10;
}

/* 星星闪烁呼吸动画 - 显示时自动触发 */
.optimize-prompt-btn:not(.hidden):not(.loading) {
    animation: geminiGlow 2s ease-in-out infinite;
}

@keyframes geminiGlow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        border-color: rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 2px 16px rgba(59, 130, 246, 0.6), 0 0 20px rgba(99, 102, 241, 0.3);
        border-color: rgba(59, 130, 246, 0.6);
    }
}

/* 星星图标风车旋转 - 转一下停一下 */
.optimize-prompt-btn:not(.hidden):not(.loading) svg {
    animation: geminiWindmill 4s ease-out infinite;
}

@keyframes geminiWindmill {
    0% {
        transform: rotate(0deg);
    }
    8% {
        transform: rotate(90deg);
    }
    25% {
        transform: rotate(90deg);
    }
    33% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    58% {
        transform: rotate(270deg);
    }
    75% {
        transform: rotate(270deg);
    }
    83% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.optimize-prompt-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(99, 102, 241, 0.25) 100%);
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    animation: none;
}

.optimize-prompt-btn:hover svg {
    animation: none;
    opacity: 1;
    transform: scale(1.15);
}

.optimize-prompt-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

.optimize-prompt-btn.loading {
    opacity: 0.9;
    cursor: not-allowed;
    animation: pulse 1.5s ease-in-out infinite !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(99, 102, 241, 0.4) 100%) !important;
    border-color: #3b82f6 !important;
    transform: none !important;
}

.optimize-prompt-btn.loading svg {
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 新增：清空按钮样式调整 - 右上角 */
.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; /* 深色模式下使用稍亮的蓝色 */
}

/* 上传区图片编号：可点击自动匹配比例 */
.image-preview-item .generation-card__image-number {
    pointer-events: auto; /* 覆盖默认的 none，允许点击 */
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--radius-2xl);
}

.image-preview-item .generation-card__image-number:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    transform: scale(1.05);
}

.image-preview-item .generation-card__image-number:hover .image-aspect-indicator svg rect {
    fill: #007bff !important;
}

.image-preview-item .generation-card__image-number:active {
    transform: scale(0.95);
}

/* 深色模式下的hover效果 */
body.dark-mode .image-preview-item .generation-card__image-number:hover {
    background: rgba(92, 163, 245, 0.15);
    color: #5CA3F5;
}

body.dark-mode .image-preview-item .generation-card__image-number:hover .image-aspect-indicator svg rect {
    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.ratio-bounce {
    animation: ratioBounce 0.4s ease;
}

@keyframes ratioBounce {
    0% { transform: scale(1); }
    25% { transform: scale(1.15); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.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: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

body.dark-mode .optimize-prompt-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, rgba(99, 102, 241, 0.35) 100%);
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

body.dark-mode .optimize-prompt-btn.loading {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(99, 102, 241, 0.5) 100%) !important;
    border-color: #60a5fa !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;
}

/* 设置模态框头部样式 */
#apiKeyModal .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    padding: 0;
    border-bottom: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#apiKeyModal .modal__header .modal__title {
    margin: 0;
    text-align: left;
}

.theme-toggle-btn--header {
    margin-left: auto;
}

.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;
    white-space: nowrap;
    flex-shrink: 0;
}

.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__toggle-status--original-download::before {
    content: none !important;
}

.modal__title-checkbox:checked ~ .modal__toggle-status--original-download::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);
}

/* ========================================
   模型选择器样式 - 文件夹标签风格
   ======================================== */
.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 rgba(var(--model-tab-accent-rgb), 0.25);
    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: rgb(var(--model-tab-accent-rgb));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 3px solid rgb(var(--model-tab-accent-rgb));
}

.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[data-type="flash"] {
    /* Flash 系列：橙色 */
    --model-tab-accent-rgb: 249, 115, 22;
    --model-tab-accent-rgb-dark: 251, 146, 60;
}

.model-tab[data-type="flash-hd"],
.model-tab[data-type="ultra-4k"] {
    /* Ultra 系列：青色 */
    --model-tab-accent-rgb: 6, 182, 212;
    --model-tab-accent-rgb-dark: 34, 211, 238;
}

.model-tab[data-model="grok-4-1-image"] {
    /* Balance 模型：红色 */
    --model-tab-accent-rgb: 239, 68, 68;
    --model-tab-accent-rgb-dark: 248, 113, 113;
}

.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__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 6px;
    z-index: 3;
    pointer-events: none;
    letter-spacing: 0.5px;
    line-height: 1;
}

.model-tab__badge--free {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* 深色模式限免徽章 */
.dark-mode .model-tab__badge--free {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.5);
}

/* 热门角标 - 右上角三角形徽章 */
.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(var(--model-tab-accent-rgb-dark), 0.3);
    color: rgb(var(--model-tab-accent-rgb-dark));
    border-left-color: rgb(var(--model-tab-accent-rgb-dark));
}

.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));
}

/* ============================================
   模型禁用状态样式（远程控制）
   ============================================ */
.model-tab--disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}

.model-tab--disabled::after {
    content: '维护中';
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* 禁用时隐藏原有的徽章，避免重叠 */
.model-tab--disabled .model-tab__badge {
    display: none;
}

/* 深色模式禁用状态 */
.dark-mode .model-tab--disabled {
    opacity: 0.4;
}

.dark-mode .model-tab--disabled::after {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

/* 移动端适配 */
@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 测试期横幅提醒 - Modern Alert Style */
.model-info-notice-banner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 149, 0, 0.1); /* Subtle Orange */
    border: none;
    border-radius: 16px;
    text-align: left;
    margin-bottom: 8px;
}

body.dark-mode .model-info-notice-banner {
    background: rgba(255, 159, 10, 0.15);
    border-color: transparent;
}

.notice-icon-wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 149, 0, 0.2);
    border-radius: 50%;
    color: #ff9500;
}

.model-info-notice-banner svg {
    width: 20px;
    height: 20px;
}

.model-info-notice-banner__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}

/* 主要信息行 */
.notice-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.notice-main strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.notice-main span {
    font-size: 13px;
    color: var(--text-color-secondary);
}

.notice-separator {
    display: none;
}

/* 限量信息 */
.notice-limit {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ff9500;
    background: transparent;
    padding: 0;
    border: none;
}

body.dark-mode .notice-limit {
    background: transparent;
    color: #ff9f0a;
    border: none;
}

/* 模型对比表格 - Unified Seamless Design */
.model-comparison-table {
    display: flex;
    flex-direction: column;
    background: var(--glass-bg, #ffffff);
    border: 1px solid var(--glass-border, rgba(0,0,0,0.1));
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}

body.dark-mode .model-comparison-table {
    background: rgba(30, 30, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Header */
.model-table-header {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--glass-border);
}

body.dark-mode .model-table-header {
    background: rgba(255, 255, 255, 0.02);
}

.model-table-header .model-table-cell--header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-secondary);
    padding: 12px 24px; /* Increased padding */
}

/* Model Groups - Unified */
.model-group {
    display: contents; /* Flattens the layout */
    margin: 0;
}

.model-group-label {
    grid-column: 1 / -1; /* Spans full width if in grid, but here it's flex child */
    padding: 16px 24px 8px 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    background: transparent;
    border-top: 1px solid var(--glass-border);
    margin-top: 0;
}

/* Remove top border for the first group to avoid double borders */
.model-group:first-of-type .model-group-label {
    border-top: none;
    padding-top: 20px;
}

.model-group-content {
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: contents; /* Flattens structure */
}

/* Rows */
.model-table-row {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
    border-bottom: 1px solid var(--glass-border);
    background: transparent;
    transition: background-color 0.2s ease;
    padding: 0 8px; /* Slight horizontal padding for inner content alignment */
}

/* Last row of the whole table needs no border, but since we have groups... 
   We'll let the container border handle the bottom edge.
   Let's target the last row of the last group if possible, or just hide last border.
*/
.model-group:last-child .model-table-row:last-child {
    border-bottom: none;
}

.model-table-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

body.dark-mode .model-table-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Remove old highlighting styles */
.model-table-row--highlight {
    background: transparent;
}
.model-table-row--highlight:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Model Description */
.model-description {
    padding: 8px 16px 12px 16px;
    margin: -8px 0 0 0;
    font-size: 13px;
    color: var(--text-color-secondary);
    border-bottom: 1px solid var(--glass-border);
}

.model-description p {
    margin: 0;
    line-height: 1.5;
}

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

/* Cell Styling */
.model-table-cell {
    padding: 14px 16px; /* Reduced side padding because row has padding */
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-color);
}

.model-table-cell--name {
    font-weight: 500;
    gap: 10px;
    padding-left: 16px; 
}

/* Badges & Indicators */
.model-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.model-badge--stable {
    background: rgba(52, 199, 89, 0.15); /* iOS Green */
    color: #34c759;
}

.model-badge--new {
    background: rgba(255, 149, 0, 0.15); /* iOS Orange */
    color: #ff9500;
}

.model-badge--test {
    background: rgba(175, 82, 222, 0.15); /* iOS Purple */
    color: #af52de;
    border: none;
}

/* Speed Badges */
.speed-badge {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.speed-badge--fastest {
    background: rgba(0, 199, 190, 0.1);
    color: #00c7be;
}
.speed-badge--fast {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
}
.speed-badge--medium {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9500;
}
.speed-badge--slow {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}

/* Resolution Bar */
.resolution-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-secondary);
    width: 32px;
    margin-right: 8px;
}

.resolution-bar {
    height: 5px;
    background: rgba(120, 120, 128, 0.15);
    border-radius: 10px;
}

.resolution-bar__fill {
    background: #8e8e93;
}

.resolution-bar__fill--high {
    background: #007aff;
}

.resolution-bar__fill--ultra {
    background: #af52de;
}

.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;
}


/* === 提示词版本选择弹窗 === */
.prompt-version-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.prompt-version-modal.modal--visible {
    display: flex;
    opacity: 1;
}

.prompt-version-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.prompt-version-modal__container {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 620px;
    max-height: 80vh;
    overflow: hidden;
    animation: promptVersionFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes promptVersionFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.prompt-version-modal__header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--glass-border);
    text-align: center;
}

.prompt-version-modal__title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: -0.3px;
}

.prompt-version-modal__hint {
    font-size: 0.75rem;
    color: var(--text-color-secondary);
}

.prompt-version-modal__list {
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

/* 版本卡片样式 */
.prompt-version-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-version-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.prompt-version-card:active {
    transform: translateY(0);
}

.prompt-version-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    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 rgba(0, 122, 255, 0.3);
}

.prompt-version-card__content {
    flex: 1;
    min-width: 0;
}

.prompt-version-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prompt-version-card__text {
    font-size: 0.875rem;
    color: var(--text-color);
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
    padding-right: 4px;
}

/* 文本滚动条样式 */
.prompt-version-card__text::-webkit-scrollbar {
    width: 4px;
}

.prompt-version-card__text::-webkit-scrollbar-track {
    background: transparent;
}

.prompt-version-card__text::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.prompt-version-card__text::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.prompt-version-modal__footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--glass-border);
    text-align: center;
}

.prompt-version-modal__cancel-btn {
    padding: var(--spacing-sm) var(--spacing-xl);
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-color-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-version-modal__cancel-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-color);
}

/* 深色模式适配 */
[data-theme="dark"] .prompt-version-card {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .prompt-version-card:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .prompt-version-modal__cancel-btn {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .prompt-version-modal__cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* 响应式设计 */
@media (max-width: 600px) {
    .prompt-version-modal__container {
        width: 95%;
        max-height: 85vh;
    }

    .prompt-version-modal__header {
        padding: var(--spacing-md);
    }

    .prompt-version-card {
        padding: var(--spacing-sm);
    }

    .prompt-version-card__number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* ========================================
   顶部药丸通告样式
   ======================================== */

/* 药丸通告本体 */
.announcement-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.15) 0%,
        rgba(255, 180, 50, 0.12) 50%,
        rgba(255, 149, 0, 0.15) 100%);
    border: 1px solid rgba(255, 149, 0, 0.25);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.1);
    animation: announcement-fade-in 0.5s ease-out;
}

.announcement-pill:hover {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.22) 0%,
        rgba(255, 180, 50, 0.18) 50%,
        rgba(255, 149, 0, 0.22) 100%);
    border-color: rgba(255, 149, 0, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.18);
}

.announcement-pill:active {
    transform: translateY(0);
}

@keyframes announcement-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes announcement-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.announcement-pill__icon {
    font-size: 14px;
    flex-shrink: 0;
}

.announcement-pill__text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
}

.announcement-pill__arrow {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color-secondary);
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.announcement-pill:hover .announcement-pill__arrow {
    transform: translateX(2px);
    opacity: 1;
}

/* 关闭按钮 */
.announcement-pill__close {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color-secondary);
    opacity: 0.6;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.announcement-pill__close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-color);
    opacity: 1;
}

/* 通告详情弹窗 */
.announcement-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modal-fade-in 0.25s ease-out;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.announcement-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.announcement-modal__content {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    max-width: 520px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: modal-content-in 0.3s ease-out;
    overflow: hidden;
}

@keyframes modal-content-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.announcement-modal__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 149, 0, 0.15);
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.1) 0%,
        rgba(255, 204, 0, 0.06) 100%);
}

.announcement-modal__icon {
    font-size: 22px;
}

.announcement-modal__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    flex: 1;
}

.announcement-modal__close {
    background: transparent;
    border: none;
    color: var(--text-color-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-modal__close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-color);
}

.announcement-modal__body {
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

.announcement-modal__body p {
    margin: 0 0 12px 0;
}

.announcement-modal__body p:last-child {
    margin-bottom: 0;
}

.announcement-modal__body strong {
    color: #d97706;
    font-weight: 600;
}

.announcement-modal__highlight {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.1) 0%,
        rgba(255, 204, 0, 0.06) 100%);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin: 16px 0;
}

.announcement-modal__highlight p {
    margin: 0 0 10px 0;
}

.announcement-modal__highlight ul {
    margin: 0;
    padding-left: 20px;
}

.announcement-modal__highlight li {
    margin: 6px 0;
}

.announcement-modal__footer-text {
    text-align: center;
    color: var(--text-color-secondary);
    font-size: 13px;
    margin-top: 16px !important;
}

.announcement-modal__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: center;
}

.announcement-modal__btn {
    background: linear-gradient(135deg, #ff9500 0%, #ff7b00 100%);
    color: white;
    border: none;
    padding: 10px 32px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.announcement-modal__btn:hover {
    background: linear-gradient(135deg, #ff7b00 0%, #ff6b00 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 149, 0, 0.4);
}

/* 深色模式药丸通告样式 */
[data-theme="dark"] .announcement-pill {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.18) 0%,
        rgba(255, 180, 50, 0.12) 50%,
        rgba(255, 149, 0, 0.18) 100%);
    border-color: rgba(255, 149, 0, 0.3);
}

[data-theme="dark"] .announcement-pill:hover {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.25) 0%,
        rgba(255, 180, 50, 0.18) 50%,
        rgba(255, 149, 0, 0.25) 100%);
    border-color: rgba(255, 149, 0, 0.4);
}

[data-theme="dark"] .announcement-pill__close {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .announcement-pill__close:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .announcement-modal__header {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.15) 0%,
        rgba(255, 204, 0, 0.08) 100%);
    border-bottom-color: rgba(255, 149, 0, 0.2);
}

[data-theme="dark"] .announcement-modal__body strong {
    color: #fbbf24;
}

[data-theme="dark"] .announcement-modal__highlight {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.15) 0%,
        rgba(255, 204, 0, 0.08) 100%);
    border-color: rgba(255, 149, 0, 0.25);
}

[data-theme="dark"] .announcement-modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 响应式设计 - 药丸通告 */
@media (max-width: 768px) {
    .header__center {
        position: static;
        transform: none;
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .header {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .announcement-pill {
        padding: 5px 10px;
    }

    .announcement-pill__text {
        font-size: 11px;
    }

    .announcement-pill__icon {
        font-size: 12px;
    }

    .announcement-modal__content {
        width: 95%;
        max-height: 85vh;
        overflow-y: auto;
    }

    .announcement-modal__body {
        padding: 16px;
        font-size: 13px;
    }

    .announcement-modal__highlight {
        padding: 12px;
    }
}