/* 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 */
    --bg-color-light: #f0f2f5;
    --bg-image-light: 
        radial-gradient(ellipse at top left, rgba(120, 119, 198, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at top right, rgba(255, 119, 198, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at bottom center, rgba(120, 219, 255, 0.04) 0%, transparent 60%),
        linear-gradient(135deg, rgba(230, 232, 235, 0.9) 0%, rgba(220, 222, 227, 0.7) 50%, rgba(235, 237, 240, 0.9) 100%),
        linear-gradient(0deg, #e8eaed 0%, #f0f2f5 100%);
    --text-color-light: #1d1d1f;
    --text-color-secondary-light: #6e6e73;
    --accent-color-light: #007aff;
    --glass-bg-light: rgba(255, 255, 255, 0.6);
    --glass-border-light: rgba(255, 255, 255, 0.8);
    --glass-fade-light: rgba(255, 255, 255, 0.9);
    --shadow-color-light: rgba(0, 0, 0, 0.1);

    /* Dark Mode Palette */
    --bg-color-dark: #121212;
    --bg-image-dark: 
        radial-gradient(ellipse at top left, rgba(120, 119, 198, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse at bottom right, rgba(255, 119, 198, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse at center, rgba(120, 219, 255, 0.03) 0%, transparent 70%),
        linear-gradient(145deg, rgba(39, 43, 48, 0.8) 0%, rgba(26, 26, 26, 0.6) 50%, rgba(18, 18, 18, 0.9) 100%),
        linear-gradient(0deg, #0f0f0f 0%, #1a1a1a 100%);
    --text-color-dark: #f5f5f7;
    --text-color-secondary-dark: #8e8e93;
    --accent-color-dark: #0a84ff;
    --glass-bg-dark: rgba(28, 28, 30, 0.75);
    --glass-border-dark: rgba(60, 60, 60, 0.7);
    --glass-fade-dark: rgba(15, 23, 42, 0.9);
    --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);
}

/* 默认为浅色模式 */
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);

    /* 消息通知颜色 - 使用玻璃效果增强 */
    --shutdown-notice-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    --shutdown-notice-text: #ffffff;
    --shutdown-notice-icon-bg: rgba(255, 255, 255, 0.2);
    --shutdown-notice-close-hover: rgba(255, 255, 255, 0.3);
    --message-update-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    --message-update-text: #ffffff;
    --message-maintenance-bg: linear-gradient(135deg, rgba(240, 147, 251, 0.9) 0%, rgba(245, 87, 108, 0.9) 100%);
    --message-maintenance-text: #ffffff;
    --message-general-bg: linear-gradient(135deg, rgba(79, 172, 254, 0.9) 0%, rgba(0, 242, 254, 0.9) 100%);
    --message-general-text: #ffffff;
    --shutdown-notice-shadow: var(--shadow-lg);
}

/* 深色模式 */
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(15, 15, 15, 0.8);
    --card-bg: rgba(20, 20, 20, 0.95);
    --border-color: rgba(60, 60, 60, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.5);
}

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

html {
    font-size: 16px; /* 基准字号 */
    /* 隐藏页面滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
    scrollbar-width: none; /* Firefox隐藏滚动条 */
}

/* Webkit浏览器隐藏html滚动条 */
html::-webkit-scrollbar {
    display: none;
}

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; /* 隐藏水平滚动条 */
    scrollbar-width: none; /* Firefox隐藏滚动条 */
}

/* Webkit浏览器隐藏滚动条 */
body::-webkit-scrollbar {
    display: none;
}

/* 添加石膏墙颗粒纹理 */
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 {
    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 {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 新增手册按钮样式 */
.header__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__user-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--placeholder-text-color); 
    border-radius: 50%; 
    border: 1px dashed var(--secondary-text-color);
}
*/

/* 主体内容样式 */
.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;
}

/* 服务状态装饰线样式 */
.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: var(--route-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，确保显示3行文本 */
    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);
}

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

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

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

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

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

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

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

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

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

.generation-card__image-upload {
    display: flex;
    gap: var(--spacing-small);
    align-items: flex-start; /* 改为顶部对齐，为底部标记腾出空间 */
    flex-shrink: 0; /* 防止被压缩 */
    /* 根据预览图数量调整宽度，这里给个大致值 */
    /* 也可以考虑用 JS 动态调整 */
    /* width: auto; */
    max-width: calc(80px * 3 + var(--spacing-small) * 2 + 80px + var(--spacing-small)); /* 3个预览+2个间隔+按钮+1个间隔 */
    overflow: visible; /* 改为visible以显示底部标记 */
    padding-bottom: 8px; /* 为底部标记腾出空间 */
}

/* 保持预览图和按钮大小 */
.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;
    fill: var(--text-color); /* 使用主题文字颜色 */
    stroke: none;
}

/* 调整添加按钮样式 */
.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);
    }
}

/* 控制区域 */
.generation-card__controls {
    display: flex;
    justify-content: space-between; /* 让按钮分布在两端 */
    align-items: center;
    gap: var(--spacing-medium);
}

/* 新增：图片控制组样式 */
.image-controls-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    /* 确保这个组在父容器中居中 */
    flex: 1;
    justify-content: center;
}

/* 新增：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;
}

/* 深色模式下透明背景控件的优化 */
body.dark-mode .toggle-wrapper {
    background-image: linear-gradient(to bottom, #1a1a1a, #0f0f0f); /* 深色模式：使用更纯的黑色渐变，减少蓝色调 */
    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, 255, 255, 0.08); /* 减弱边框可见度 */
}

body.dark-mode .toggle-container {
    background-color: #1f1f1f; /* 深色模式：使用更深的灰色，减少蓝色调 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 1px rgba(255, 255, 255, 0.05); /* 减弱内阴影效果 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 减弱边框可见度 */
}

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

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

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

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

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

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

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

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

body.dark-mode .clear-text-btn:hover {
    background: rgba(28, 28, 30, 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-direction: column;
        align-items: stretch;
        gap: calc(var(--spacing-medium) * 1.5);
        position: relative; /* 为绝对定位提供基准 */
    }
    
    /* AI工具按钮在移动端占47%宽度，留出间距 */
    .generation-card__controls > .generation-card__style-toggle-btn {
        width: 47%; /* 占47%宽度，留出间距 */
        text-align: center; /* 文本居中对齐 */
        justify-content: center; /* 内容居中对齐 */
    }
    
    /* 图片控制组 */
    .generation-card__controls > .image-controls-group {
        width: 100%;
    }
    
    /* 生成按钮 */
    .generation-card__controls > .generation-card__generate-btn {
        width: 100%;
    }
    
    /* 移动端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开关 */
    }
    
    /* 移动端生成按钮优化 */
    .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 {
        justify-content: flex-start; /* 左对齐 */
        margin-top: 0; /* 移除顶部边距，已由gap控制 */
        gap: calc(var(--spacing-small) * 1.5); /* 增加图片间距 */
        flex-wrap: wrap; /* 允许换行 */
        max-width: calc(90px * 3 + var(--spacing-small) * 2 + 90px + var(--spacing-small)); /* 调整最大宽度以适应新的图片尺寸 */
    }
    
    .image-preview-item,
    .generation-card__add-image-btn {
        width: 90px; /* 增加移动端图片预览尺寸 */
        height: 90px;
        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,
    .edit-image-btn-preview {
        width: 24px; /* 增加按钮大小 */
        height: 24px;
        top: 4px; /* 调整位置 */
    }
    
    .remove-image-btn {
        right: 4px;
    }
    
    .edit-image-btn-preview {
        left: 4px;
    }
    
    .remove-image-btn svg,
    .edit-image-btn-preview 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;
    }
    
    .generation-card__controls > .generation-card__style-toggle-btn {
        width: 47%; /* 占47%宽度，留出间距 */
        text-align: center; /* 文本居中对齐 */
        justify-content: center; /* 内容居中对齐 */
    }
    
    /* 更小屏幕透明背景也占47%宽度，留出间距 */
    .image-controls-group > .png-output-option {
        position: absolute;
        top: 0;
        right: 0;
        width: 47%; /* 占47%宽度，留出间距 */
        display: flex; /* 确保内部元素正常排列 */
        flex-direction: row; /* 强制水平排列 */
        align-items: center; /* 垂直居中对齐 */
        justify-content: center; /* 内容居中对齐 */
        white-space: nowrap; /* 防止文字换行 */
    }
    
    /* 确保更小屏幕的尺寸选择器居中 */
    .image-controls-group {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-medium);
    }
    
    .generation-card__generate-btn {
        height: 44px; /* 保持足够的触控区域 */
        font-size: 1rem;
        /* 更小屏幕悬浮缩放效果 */
        transition: all var(--transition-quick);
    }
    
    /* 更小屏幕生成按钮悬停效果 */
    .generation-card__generate-btn:hover {
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.1);
        box-shadow: var(--shadow-md);
    }
    
    /* 更小屏幕激活状态悬停效果 */
    .generation-card__generate-btn--active:hover {
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.1);
        box-shadow: var(--shadow-md);
    }
    
    /* 更小屏幕的图片预览 */
    .image-preview-item,
    .generation-card__add-image-btn {
        width: 100px; /* 调整为100px，与文本框高度保持一致 */
        height: 100px; /* 调整为100px，与文本框高度保持一致 */
        overflow: visible; /* 改回visible以显示底部标记 */
        box-sizing: border-box; /* 确保包含边框和内边距 */
    }
    
    .image-preview-item img {
        width: 100%; /* 使用100%宽度以完全填充容器 */
        height: 100%; /* 使用100%高度以完全填充容器 */
    }
    
    .generation-card__image-number {
        font-size: 9px; /* 更小的字体 */
        padding: 2px 4px; /* 更小的内边距 */
        margin-top: 1px; /* 减少与图片的距离 */
        color: var(--text-color); /* 确保使用主题文字颜色 */
    }
    
    .generation-card__add-image-btn svg {
        width: 32px; /* 适中的图标大小 */
        height: 32px;
    }
    
    /* 更小屏幕遮罩层固定尺寸 */
    .image-preview-overlay {
        width: 100px; /* 使用固定宽度，与图片预览项一致 */
        height: 100px; /* 使用固定高度，与图片预览项一致 */
    }
    
    /* 更小屏幕的状态信息 */
    #usageCounter,
    .update-status__text,
    .cost-counter {
        font-size: 0.75rem; /* 适度缩小字体 */
    }
    
    /* 更小屏幕也隐藏累计请求信息和悬浮按钮 */
    .cost-counter-wrapper,
    .manual-button,
    .history-button {
        display: none !important; /* 确保在更小屏幕也隐藏 */
    }
    
    /* 更小屏幕的Logo */
    .header__logo img {
        height: 70px; /* 进一步缩小logo */
    }
    
    /* 更小屏幕的AI工具网格 */
    .generation-card__style-gallery {
        gap: var(--spacing-small); /* 减少间距以节省空间 */
        max-height: 250px; /* 减少高度 */
        scrollbar-width: none; /* Firefox隐藏滚动条 */
        -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
    }
    
    .generation-card__style-gallery::-webkit-scrollbar {
        display: none; /* Webkit浏览器隐藏滚动条 */
        width: 0; /* 确保滚动条宽度为0 */
        background: transparent; /* 背景透明 */
    }
    
    /* 针对Windows系统的额外隐藏滚动条样式 */
    .generation-card__style-gallery::-webkit-scrollbar-track {
        display: none;
    }
    
    .generation-card__style-gallery::-webkit-scrollbar-thumb {
        display: none;
    }
    
    .generation-card__style-gallery::-webkit-scrollbar-corner {
        display: none;
    }
    
    .style-item__caption {
        font-size: 0.75rem; /* 减小字体 */
    }
    
    
    /* 更小屏幕也禁用Witt松鼠图标的黄色气泡弹窗 */
    .usage-info__witt-link::after,
    .usage-info__witt-link::before {
        display: none !important; /* 隐藏气泡和箭头 */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .usage-info__witt-link:hover::after,
    .usage-info__witt-link:hover::before,
    .usage-info__witt-link.witt-active::after,
    .usage-info__witt-link.witt-active::before {
        display: none !important; /* 强制隐藏悬停和激活状态的气泡 */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }
}

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

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

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

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

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

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

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

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

.modal__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-previews {
    display: flex; /* 横向排列预览图 */
    gap: var(--spacing-small); /* 预览图之间的间距 */
    flex-wrap: wrap; /* 允许换行 */
}

.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 .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;
}
/* --- 新增结束 --- */

/* --- 新增：图片预览编辑按钮样式 --- */
.edit-image-btn-preview {
    position: absolute; /* 绝对定位到左上角 */
    top: 4px;
    left: 4px; /* 增加内边距确保不超出边界 */
    background-color: rgba(128, 128, 128, 0.6); /* 默认灰色半透明背景 */
    color: white;
    border: none;
    border-radius: 50%; /* 圆形按钮 */
    width: 18px; /* 稍微减小尺寸确保适配 */
    height: 18px;
    cursor: pointer;
    padding: 0; /* 移除默认 padding */
    display: flex; /* 使用 flex 居中图标 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    opacity: 1; /* 默认常亮显示 */
    transition: all 0.2s ease; /* 平滑过渡效果 */
    z-index: 10; /* 确保在图片之上 */
}

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

/* 编辑按钮悬停效果 */
.edit-image-btn-preview:hover {
    opacity: 1; /* 悬停时完全显示 */
    background-color: rgba(128, 128, 128, 0.8); /* 悬停时背景加深 */
    transform: scale(1.1); /* 轻微放大 */
}

/* 已标注状态的编辑按钮 */
.edit-image-btn-preview--annotated {
    background-color: rgba(0, 122, 255, 0.8) !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: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 确保在最上层 */
    backdrop-filter: blur(5px); /* 添加毛玻璃效果 */
    -webkit-backdrop-filter: blur(5px); /* Safari 兼容 */
}

/* 加载内容容器 */
.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% + 25px); /* 向右偏移25px，移到右侧 */
    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% - 25px); /* 向左偏移25px，移到左侧 */
    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; /* 确保没有额外的内边距影响图标居中 */
}

.download-image-btn.is-loading,
.copy-image-btn.is-loading {
    opacity: 1;
    cursor: wait;
}

.download-image-btn.is-loading svg,
.copy-image-btn.is-loading svg {
    opacity: 0;
}

.download-image-btn.is-loading::after,
.copy-image-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: button-spin 0.8s linear infinite;
}

/* 容器悬停时显示按钮和遮罩 */
.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 { /* <--- 新增：悬停时显示提示文字 */
    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; /* 图标颜色 */
}

/* --- 新增：下载按钮下方的提示文字样式 --- */
.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; /* 提示文字不拦截鼠标事件 */
}

@keyframes button-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* --- 新增结束 --- */

/* 消息通知组件样式 */
/* 药丸状消息通知 - 简约高级设计 */
.message-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    /* 添加text-align确保内容居中 */
    text-align: center;
    /* 移除固定宽度，让内容决定大小 */
}

.message-notification.hidden {
    display: none;
}

.message-notification--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* 药丸状标题栏 */
.message-notification__pill {
    cursor: pointer;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    position: relative;
    display: inline-block; /* 让宽度根据内容自适应 */
    min-width: 200px; /* 设置最小宽度 */
    max-width: 400px; /* 设置最大宽度 */
    /* 确保药丸本身在父容器中居中 */
    margin: 0 auto;
}

.message-notification__pill:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

.message-notification__pill-content {
    display: flex;
    align-items: center;
    gap: 6px; /* 减小间距 */
    padding: 6px 12px; /* 减小内边距 */
    position: relative;
    white-space: nowrap; /* 防止换行 */
}

.message-notification__icon {
    flex-shrink: 0;
    width: 20px; /* 缩小图标 */
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.message-notification__icon svg {
    width: 12px; /* 缩小SVG */
    height: 12px;
    stroke: currentColor;
}

.message-notification__content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* 允许flex收缩 */
    gap: 1px;
}

.message-notification__title {
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.message-notification__title::after {
    content: ' (点击详情)';
    font-weight: 400;
    opacity: 0.7;
    font-size: 11px;
}

.message-notification__time {
    font-size: 10px;
    opacity: 0.8;
    font-weight: 400;
    line-height: 1;
}

.message-notification__actions {
    display: flex;
    align-items: center;
    gap: 1px; /* 减小按钮间距 */
    flex-shrink: 0;
}

.message-notification__expand-btn,
.message-notification__close {
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 3px; /* 减小按钮内边距 */
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    width: 22px; /* 固定按钮大小 */
    height: 22px;
}

.message-notification__expand-btn:hover,
.message-notification__close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
    transform: scale(1.05); /* 减小缩放效果 */
}

.message-notification__expand-btn svg,
.message-notification__close svg {
    transition: transform 0.3s ease;
    width: 11px; /* 缩小按钮图标 */
    height: 11px;
}

/* 展开状态的箭头旋转 */
.message-notification--expanded .message-notification__expand-btn svg {
    transform: rotate(180deg);
}

/* 展开的详细内容区域 */
.message-notification__expanded {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 12px;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%; /* 确保展开区域和药丸同宽 */
}

.message-notification--expanded .message-notification__expanded {
    max-height: 180px;
    opacity: 1;
    padding: 12px 16px;
}

.message-notification__body {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #333;
    white-space: pre-line; /* 保持换行符 */
    word-wrap: break-word; /* 长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器支持 */
}

.message-notification__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    opacity: 0.8;
}

.message-notification__type-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #666;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.message-notification__timestamp {
    font-size: 10px;
    opacity: 0.7;
    color: #666;
}

/* 消息类型样式 - 使用纯色背景 */
.message-notification--update .message-notification__pill {
    background: #10b981;  /* 绿色 */
    color: #ffffff;
}

.message-notification--update .message-notification__expanded {
    background: #f0fdf4;  /* 浅绿色背景 */
    border-color: #10b981;
}

.message-notification--maintenance .message-notification__pill {
    background: #ef4444;  /* 红色 */
    color: #ffffff;
}

.message-notification--maintenance .message-notification__expanded {
    background: #fef2f2;  /* 浅红色背景 */
    border-color: #ef4444;
}

/* 服务通知样式 - 黄色 */
.message-notification--service .message-notification__pill {
    background: #f59e0b;  /* 黄色 */
    color: #ffffff;
}

.message-notification--service .message-notification__expanded {
    background: #fffbeb;  /* 浅黄色背景 */
    border-color: #f59e0b;
}

/* 常规通知样式 - 蓝色 */
.message-notification--general .message-notification__pill {
    background: #3b82f6;  /* 蓝色 */
    color: #ffffff;
}

.message-notification--general .message-notification__expanded {
    background: #eff6ff;  /* 浅蓝色背景 */
    border-color: #3b82f6;
}

/* 深色模式下的消息通知样式 */
body.dark-mode .message-notification__body {
    color: #ffffff; /* 纯白色文本，提高对比度 */
}

body.dark-mode .message-notification__title {
    color: #ffffff; /* 纯白色标题 */
}

body.dark-mode .message-notification__timestamp {
    color: #d1d5db; /* 更亮的时间戳颜色 */
}

body.dark-mode .message-notification__type-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* 深色模式下展开区域的背景和边框 */
body.dark-mode .message-notification--update .message-notification__expanded {
    background: rgba(16, 185, 129, 0.1); /* 深色绿色背景 */
    border-color: #10b981;
}

body.dark-mode .message-notification--maintenance .message-notification__expanded {
    background: rgba(239, 68, 68, 0.1); /* 深色红色背景 */
    border-color: #ef4444;
}

body.dark-mode .message-notification--service .message-notification__expanded {
    background: rgba(245, 158, 11, 0.1); /* 深色黄色背景 */
    border-color: #f59e0b;
}

body.dark-mode .message-notification--general .message-notification__expanded {
    background: rgba(59, 130, 246, 0.1); /* 深色蓝色背景 */
    border-color: #3b82f6;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .message-notification__pill {
        min-width: 180px;
        max-width: 95vw; /* 使用视口宽度 */
    }
    
    .message-notification__pill-content {
        padding: 5px 10px;
        gap: 5px;
    }
    
    .message-notification__icon {
        width: 18px;
        height: 18px;
    }
    
    .message-notification__icon svg {
        width: 10px;
        height: 10px;
    }
    
    .message-notification__title {
        font-size: 12px;
    }
    
    .message-notification__title::after {
        content: ' (详情)'; /* 移动端更简短 */
        font-size: 10px;
    }
    
    .message-notification__time {
        font-size: 9px;
    }
    
    .message-notification__body {
        font-size: 11px;
        line-height: 1.4;
        white-space: pre-line; /* 保持换行符 */
        word-wrap: break-word; /* 长单词换行 */
        overflow-wrap: break-word; /* 现代浏览器支持 */
    }
    
    .message-notification--expanded .message-notification__expanded {
        padding: 8px 10px;
        max-height: 100px;
    }
    
    .message-notification__expand-btn,
    .message-notification__close {
        width: 20px;
        height: 20px;
        padding: 2px;
    }
    
    .message-notification__expand-btn svg,
    .message-notification__close svg {
        width: 10px;
        height: 10px;
    }
}

/* 页脚样式 */
.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;
}

/* 图片放大预览弹窗样式 */
.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: 1001;
    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 {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    margin: auto;
    /* 新增：设置变换原点为中心 */
    transform-origin: center;
    /* 新增：添加平滑过渡 */
    transition: transform 0.05s ease-out;
    /* 更新：初始状态下可点击 */
    pointer-events: auto;
    /* 新增：添加阴影以区分背景 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.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: #0ea5e9;
    border-radius: 50%;
    flex-shrink: 0; /* 防止圆点被压缩 */
    transition: background-color var(--transition-quick), box-shadow var(--transition-quick);
}

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

/* 新增：单个模特选项组（标签+选择框）的样式 */
.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;
}

/* 当缩放大于100%时应用的样式 */
.image-preview-modal__image.draggable {
    cursor: grab !important;
}

/* 拖拽状态样式 */
.image-preview-modal__image.dragging {
    cursor: grabbing !important;
    /* 移除任何过渡效果，确保响应迅速 */
    transition: none !important;
}

/* 为图片容器添加硬件加速 */
.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: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* --- 新增：金额计数器样式 --- */
.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;
}

.auto-save-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auto-save-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.auto-save-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auto-save-toggle__label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--primary-text-color);
}

.auto-save-status {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-color-secondary, #6b7280);
}

.auto-save-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-text-color, #9ca3af);
}

.auto-save-clear {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
}

.auto-save-clear:hover {
    text-decoration: underline;
}

.auto-save-clear:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auto-save-toggle .toggle-wrapper {
    font-size: 0.72em;
}

body.dark-mode .auto-save-status {
    color: var(--text-color-secondary-dark, #a1a1aa);
}

body.dark-mode .auto-save-hint {
    color: var(--muted-text-color-dark, #71717a);
}

body.dark-mode .auto-save-clear {
    color: #60a5fa;
}

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

/* 新增：成功消息样式 */
.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__content--compact {
    max-width: 420px;
    padding: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.dark-mode .api-modal__footer strong {
    color: #ffffff;
}

/* 主按钮样式 */
.modal__button--primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #6366f1 100%);
    color: white;
    border: none;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal__button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* 版本更新弹窗样式 - Liquid Glass */
.modal__version-info {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    padding: 16px 20px;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.version-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.version-info-row:last-child {
    margin-bottom: 0;
}

.version-label {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    font-weight: 500;
}

.version-value {
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 弹窗显示动画 */
.modal--show {
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 透明背景棋格样式 */
.transparent-bg-checker {
    background-image: 
        linear-gradient(45deg, #e5e5e5 25%, transparent 25%), 
        linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e5e5e5 75%), 
        linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
    background-size: 12px 12px; /* 减小棋格大小，更适合小尺寸预览 */
    background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
    background-color: #f8f8f8; /* 添加浅色背景基底 */
}

/* --- 自定义提示词弹窗样式 --- */
/* 自定义提示词按钮样式 */
.header__user-prompts-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-2xl);
    transition: all 0.2s ease;
    color: var(--secondary-text-color);
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__user-prompts-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--primary-text-color);
}

/* 确保自定义提示词弹窗有足够高的z-index */
#customPromptsModal {
    z-index: 1001 !important;
}

/* 提示词弹窗内容样式 */
.modal__content--prompts {
    max-width: 400px;
    width: 90vw;
    padding: 0;
    background: #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
}

/* 标签页样式 */
.prompts-tabs {
    display: flex;
    background: #d0d0d0;
    border-radius: 12px 12px 0 0;
}

.prompts-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px 12px 0 0;
}

.prompts-tab--active {
    background: #e8e8e8;
    color: #333;
}

.prompts-tab:hover:not(.prompts-tab--active) {
    background: rgba(255, 255, 255, 0.3);
}

/* 星标样式 */
.prompts-tab-star {
    margin-right: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    display: inline-block;
}

.prompts-tab-star:hover {
    transform: scale(1.2);
}

/* 内容区域 */
.prompts-content {
    display: none;
    padding: 20px;
}

.prompts-content--active {
    display: block;
}

/* 输入框容器 */
.prompts-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 输入框包装器 */
.prompts-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.prompts-input-wrapper:has(.prompts-input:not(:placeholder-shown)) {
    background: #fff;
}

.prompts-input-wrapper:has(.prompts-input:focus) {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.prompts-input-wrapper:has(.prompts-input:not(:placeholder-shown)):hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 输入框样式 */
.prompts-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.prompts-input::placeholder {
    color: #999;
}

.prompts-input:focus {
    outline: none;
}

.prompts-input:not(:placeholder-shown) {
    cursor: pointer;
}

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

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

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

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

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

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

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

/* 操作按钮区域 */
.prompts-actions {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 4px;
}

/* 三点菜单按钮 */
.prompts-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 1; /* 改为常亮显示 */
    padding: 8px;
    gap: 2px;
}

.prompts-menu-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.prompts-menu-btn span {
    width: 4px;
    height: 4px;
    background: #999;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.prompts-menu-btn:hover span {
    background: #666;
}

/* 滑出菜单 */
.prompts-menu {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.prompts-menu.show {
    transform: translateY(-50%) translateX(-8px);
    opacity: 1;
    visibility: visible;
}

/* 编辑和删除按钮 */
.prompts-edit-btn,
.prompts-delete-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    position: relative;
}

.prompts-edit-btn {
    background: #e3f2fd;
}

.prompts-edit-btn:hover {
    background: #bbdefb;
    transform: scale(1.1);
}

.prompts-delete-btn {
    background: #ffebee;
}

.prompts-delete-btn:hover {
    background: #ffcdd2;
    transform: scale(1.1);
}


/* 按钮样式 */
.modal__actions {
    padding: 0 20px 20px 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal__button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal__button--save {
    background: #007AFF;
    color: white;
}

.modal__button--save:hover {
    background: #0056CC;
}

.modal__button--close {
    background: #f0f0f0;
    color: #666;
}

.modal__button--close:hover {
    background: #e0e0e0;
}

/* 标题开关样式 */
.modal__section-title-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 4px 0;
    margin: 0;
    transition: all 0.2s ease;
}

.modal__section-title-toggle:hover {
    background-color: rgba(59, 130, 246, 0.05);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 0 -8px;
}

.modal__title-checkbox {
    appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.modal__toggle-status {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    transition: all 0.2s ease;
    background-color: #10b981;
    color: white;
    margin-left: auto;
}

.modal__toggle-status::before {
    content: '开启';
}

.modal__title-checkbox:checked ~ .modal__toggle-status {
    background-color: #ef4444;
    color: white;
}

.modal__title-checkbox:checked ~ .modal__toggle-status::before {
    content: '关闭';
}

/* 任务模式特殊样式 - 移除伪元素内容 */
.modal__toggle-status--task-mode::before {
    content: none !important;
}

.modal__title-checkbox:checked ~ .modal__toggle-status--task-mode::before {
    content: none !important;
}

/* 自动保存特殊样式 - 移除伪元素内容 */
.modal__toggle-status--auto-save::before {
    content: none !important;
}

.modal__title-checkbox:checked ~ .modal__toggle-status--auto-save::before {
    content: none !important;
}

/* 帮助图标样式 */
.modal__help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.modal__help-icon:hover {
    background-color: #cbd5e1;
    color: #475569;
    transform: scale(1.1);
}

/* 状态显示与移除按钮的容器 */
.modal__status-with-remove {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 移除按钮样式 */
.modal__remove-btn {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.modal__remove-btn:hover {
    background-color: #fee2e2;
}

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

/* 文件夹名称样式 */
.folder-name {
    color: #3b82f6;
    font-weight: 500;
}

/* Enter 键生成模式特殊样式 - 移除伪元素内容 */
.modal__toggle-status--enter-mode::before {
    content: none !important;
}

.modal__title-checkbox:checked ~ .modal__toggle-status--enter-mode::before {
    content: none !important;
}




/* 保留原有复选框样式以备其他地方使用 */
.modal__checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 8px 0;
    padding: 4px 0;
}

.modal__checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal__checkbox:hover {
    border-color: #6c75ff;
}

.modal__checkbox:checked {
    background-color: #6c75ff;
    border-color: #6c75ff;
}

.modal__checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.modal__checkbox-text {
    font-size: 14px;
    color: #333;
    user-select: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modal__content--prompts {
        width: 95vw;
        max-width: 350px;
    }
    
    .prompts-input {
        padding: 10px 14px;
        font-size: 13px;
    }
}
/* --- 自定义提示词弹窗样式结束 --- */

/* --- 快速选择提示词样式 - Liquid Glass --- */
.quick-select-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
    z-index: 10000;
    width: 420px;
    max-height: 400px;
    animation: quickSelectFadeIn var(--transition-fluid);
    overflow: hidden; /* 防止子元素溢出造成样式问题 */
}

/* 移除可能导致底部蓝色条的伪元素 */
.quick-select-container::before,
.quick-select-container::after {
    display: none !important;
}

@keyframes quickSelectFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.quick-select-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--glass-border);
}


.quick-select-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 260px;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
}

/* 移除可能导致蓝色条的伪元素 */
.quick-select-list::before,
.quick-select-list::after {
    display: none !important;
}

/* 快速选择列表滚动条样式 - Liquid Glass */
.quick-select-list::-webkit-scrollbar {
    width: 6px;
}

.quick-select-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
}

.quick-select-list::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-quick);
}

.quick-select-list::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.6);
    transform: scaleX(1.2);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.quick-select-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    transition: all 0.2s ease; /* 使用更稳定的过渡效果 */
    border: 1px solid var(--glass-border);
    position: relative; /* 防止层级问题 */
}

.quick-select-item:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--glass-border) !important; /* 边框完全不变 */
}

/* 防止快速选择项受到其他样式影响 */
.quick-select-item:focus,
.quick-select-item:active {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--glass-border) !important; /* 边框完全不变 */
    outline: none !important;
}

/* 确保所有快速选择项的基础样式不被覆盖 */
.quick-select-container .quick-select-item {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-2xl) !important;
    box-sizing: border-box !important;
}

/* 防止快速选择弹窗内的任何元素产生意外的样式 */
.quick-select-container * {
    box-sizing: border-box;
}

/* 移除可能导致闪烁的任何伪元素 */
.quick-select-container *::before,
.quick-select-container *::after {
    display: none !important;
}

.quick-select-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent-color) 0%, #1d4ed8 100%);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 30%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.quick-select-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

/* 快速选择弹窗响应式设计 */
@media (max-width: 768px) {
    .quick-select-container {
        width: 90vw;
        max-width: 380px;
        padding: var(--spacing-md);
    }
    
    .quick-select-list {
        min-height: 240px;
        max-height: 280px;
    }
    
    .quick-select-title {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .quick-select-item {
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: var(--spacing-xs);
    }
    
    .quick-select-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .quick-select-text {
        font-size: 13px;
        max-width: 260px;
    }
}
/* --- 快速选择提示词样式结束 --- */

/* --- 图灵手册按钮样式开始 --- */
.manual-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* width: 56px; */
    /* height: 56px; */
    /* border-radius: 50%; */
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
}

.manual-button:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); */
}

.manual-button:active {
    transform: translateY(0);
}

/* 图灵手册按钮角标样式 */
.manual-button__badge {
    position: absolute;
    top: -12px;
    right: -5px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid white;
    min-width: auto;
    white-space: nowrap;
}


/* --- 历史记录按钮样式 --- */
.history-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
}

.history-button:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); */
}

.history-button:active {
    transform: translateY(0);
}

/* 历史记录按钮角标样式 */
.history-button__badge {
    position: absolute;
    top: -12px;
    right: -5px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid white;
    min-width: auto;
    white-space: nowrap;
}

/* 深色模式下的历史记录角标 */
body.dark-mode .history-button__badge {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    border-color: rgba(255, 255, 255, 0.9);
}

/* 历史记录弹窗样式 */
.modal__content--history {
    width: 90vw;
    max-width: 900px;
    max-height: 85vh;
    padding: 0;
    overflow: hidden;
    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);
}

.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 {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.6;
    word-break: break-word;
    font-weight: 500;
}

.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: #1a1a1a; /* 与剪裁弹窗保持一致的深色背景 */
    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: #2a2a2a; /* 稍微调亮一点 */
}

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

/* 移除不需要的旧样式 */
.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%;
}

/* 覆盖顶部导航栏的遮罩 */
.manual-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0; /* 右对齐 */
    width: 33.33%; /* 宽度为1/3 */
    height: 40px; /* 高度不变 */
    background: #ffffff;
    z-index: 10;
    pointer-events: none;
}

/* 移动端适配 */
@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;
    }
}

/* --- 违禁词建议样式 - Liquid Glass --- */
.violation-suggestion {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid var(--accent-color);
    border-radius: var(--radius-2xl);
    padding: 16px 20px;
    margin: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-fluid);
    color: var(--text-color);
}

.violation-suggestion:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.violation-suggestion strong {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.025em;
}

/* 深色模式下的违规建议样式 */
body.dark-mode .violation-suggestion {
    background: rgba(28, 28, 30, 0.8);
    border-color: rgba(60, 60, 60, 0.5);
    color: var(--text-color-dark);
}

body.dark-mode .violation-suggestion strong {
    color: var(--accent-color-dark);
}

/* --- 违禁词弹窗样式 - 简约清新设计 --- */
.violation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modalFadeIn 0.3s ease-out;
}

.violation-modal__content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.08);
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
}

.violation-modal__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.violation-modal__icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
    flex-shrink: 0;
}

.violation-modal__icon svg {
    color: white;
    stroke-width: 2.5;
}

.violation-modal__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.violation-modal__body {
    margin-bottom: 32px;
}

.violation-modal__description {
    font-size: 16px;
    color: var(--text-color-secondary);
    margin: 0 0 20px 0;
    line-height: 1.5;
    font-weight: 500;
}

.violation-modal__suggestion {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid var(--accent-color);
    border-radius: 16px;
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-color);
    text-align: center;
    letter-spacing: -0.025em;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

.violation-modal__suggestion::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.violation-modal__suggestion:hover::before {
    left: 100%;
}

.violation-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.violation-modal__button {
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.025em;
    min-width: 140px;
    position: relative;
    overflow: hidden;
}

.violation-modal__button--primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
}

.violation-modal__button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 123, 255, 0.4);
}

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

.violation-modal__button--secondary {
    background: rgba(108, 117, 125, 0.1);
    color: var(--text-color-secondary);
    border: 1px solid rgba(108, 117, 125, 0.2);
}

.violation-modal__button--secondary:hover {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-color);
    transform: translateY(-1px);
}

/* 深色模式适配 */
body.dark-mode .violation-modal__content {
    background: rgba(28, 28, 30, 0.95);
    border-color: rgba(60, 60, 60, 0.8);
}

body.dark-mode .violation-modal__title {
    color: var(--text-color-dark);
}

body.dark-mode .violation-modal__description {
    color: var(--text-color-dark);
}

body.dark-mode .violation-modal__suggestion {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.15) 0%, rgba(10, 132, 255, 0.1) 100%);
    border-color: var(--accent-color-dark);
    color: #ffffff;
}

body.dark-mode .violation-modal__button--primary {
    background: linear-gradient(135deg, var(--accent-color-dark) 0%, #0056b3 100%);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.3);
}

body.dark-mode .violation-modal__button--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color-dark);
    border-color: rgba(255, 255, 255, 0.2);
}

/* 动画效果 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* 响应式适配 */
@media (max-width: 768px) {
    .violation-modal__content {
        padding: 24px;
        margin: 20px;
        border-radius: 20px;
    }
    
    .violation-modal__header {
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .violation-modal__icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    
    .violation-modal__title {
        font-size: 20px;
    }
    
    .violation-modal__description {
        font-size: 15px;
    }
    
    .violation-modal__suggestion {
        padding: 16px 20px;
        font-size: 16px;
        border-radius: 12px;
    }
    
    .violation-modal__actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .violation-modal__button {
        width: 100%;
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* ========================= 网络稳定性监控弹窗样式 ========================= */
.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: #f0f2f5;
    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: #f0f2f5;
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.prompt-tooltip__btn--fill:hover {
    background: #e8eaed;
    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(28, 28, 30, 0.98) 0%, rgba(38, 38, 41, 0.95) 100%);
    border: 1px solid rgba(60, 60, 60, 0.4);
    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, 255, 255, 0.05);
}

body.dark-mode .prompt-tooltip__content {
    color: #f5f5f7;
    background: rgba(48, 48, 51, 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(48, 48, 51, 0.8);
    color: #f5f5f7;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .prompt-tooltip__btn--fill:hover {
    background: rgba(58, 58, 61, 0.9);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}