/* ================================================================
 * 文件: app/web/static/css/style.css
 * 项目: Media Automator - 媒体自动化管理系统
 * 说明: 统一的UI样式表，包含完整的设计令牌系统和组件库
 * 最后更新: 2025-11-04
 * ================================================================ */

/* 导入字体: Inter - 现代、清晰、支持多语言的无衬线字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

/* ================================================================
 * 零、全局盒模型重置 (Global Box Model Reset)
 * ================================================================ */

/* 全局盒模型设置：确保所有元素的宽高计算包含padding和border */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ================================================================
 * 一、设计令牌系统 (Design Tokens) - 深色模式默认值
 * ================================================================ */

:root {
    /* --- 1.1 基础颜色变量 (深色主题) --- */
    /* 功能说明: 这些变量定义了整个应用的基础配色方案 */
    
    --bg-color: #121212;              /* 页面主背景色 - 深黑色 */
    --card-bg-color: #1e1e1e;         /* 卡片背景色 - 稍浅的黑色，用于内容区块 */
    --card-bg-hover: #2a2a2a;         /* 卡片悬浮态背景色 - 用于交互反馈 */
    --text-color: #e0e0e0;            /* 主要文字颜色 - 浅灰色，保证可读性 */
    --text-color-muted: #9e9e9e;      /* 次要文字颜色 - 中灰色，用于辅助信息 */
    --border-color: #333;             /* 边框颜色 - 深灰色，用于分隔元素 */

    /* --- 1.2 品牌色系统 (主题无关) --- */
    /* 功能说明: 这些颜色在深色和浅色模式下保持一致，用于传达特定的语义 */
    /* UI优化: 升级为更现代化、更明亮的配色方案 */
    
    --primary-color: #8b5cf6;         /* 主品牌色 - 现代紫色 (Violet 500) */
    --primary-color-hover: #7c3aed;   /* 主品牌色悬浮态 - Violet 600 */
    --primary-color-light: #a78bfa;   /* 浅紫色 - Violet 400，用于次要元素 */
    --primary-color-dark: #6d28d9;    /* 深紫色 - Violet 700，用于按下状态 */
    
    --secondary-color: #10b981;       /* 次要品牌色 - 翡翠绿 (Emerald 500) */
    --secondary-color-hover: #059669; /* 悬浮态 - Emerald 600 */
    
    --error-color: #ef4444;           /* 错误/危险色 - 现代红色 (Red 500) */
    --error-color-hover: #dc2626;     /* 悬浮态 - Red 600 */
    
    --success-color: #10b981;         /* 成功色 - 翡翠绿 (与次要色一致) */
    --info-color: #3b82f6;            /* 信息色 - 现代蓝色 (Blue 500) */
    --warning-color: #f59e0b;         /* 警告色 - 琥珀色 (Amber 500) */
    
    /* 渐变色 - 用于特殊强调元素 */
    --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);

    /* --- 1.3 间距系统 --- */
    /* 功能说明: 统一的间距标准，确保整个应用的视觉节奏一致 */
    /* UI优化: 精致紧凑的间距系统 */
    
    --spacing-xs: 4px;                /* 极小间距 - 用于紧密相关的元素，如图标与文字 */
    --spacing-sm: 6px;                /* 小间距 - 用于组件内部的小元素 */
    --spacing-md: 12px;               /* 标准间距 - 最常用，用于组件之间 */
    --spacing-lg: 20px;               /* 大间距 - 用于区块之间的分隔 */
    --spacing-xl: 28px;               /* 超大间距 - 用于页面级别的布局 */

    /* --- 1.4 圆角系统 --- */
    /* 功能说明: 统一的圆角规范，创造友好柔和的视觉效果 */
    /* UI优化: 精致的圆角系统 */
    
    --border-radius-sm: 4px;          /* 小圆角 - 用于小标签、徽章 */
    --border-radius-md: 6px;          /* 中圆角 - 用于按钮、输入框 */
    --border-radius-lg: 10px;         /* 大圆角 - 用于卡片、弹窗 */
    --border-radius-xl: 14px;         /* 超大圆角 - 用于特殊容器 */
    --border-radius-full: 9999px;     /* 完全圆角 - 用于Pills、圆形按钮 */

    /* --- 1.5 阴影系统 --- */
    /* 功能说明: 统一的阴影规范，创造深度和层次感 */
    /* UI优化: 新增阴影系统，提升视觉立体感 */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* 彩色阴影 - 用于强调元素 */
    --shadow-primary: 0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -2px rgba(139, 92, 246, 0.1);
    --shadow-success: 0 10px 15px -3px rgba(16, 185, 129, 0.2), 0 4px 6px -2px rgba(16, 185, 129, 0.1);

    /* --- 1.6 字体系统 --- */
    /* 功能说明: 定义字体族和动画过渡时间 */
    
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --transition-speed: 0.25s;        /* 标准过渡时间 - 用于大多数交互 */
    --transition-fast: 0.15s;         /* 快速过渡时间 - 用于微小的反馈效果 */
    --transition-slow: 0.35s;         /* 慢速过渡 - 用于复杂动画 */

    /* --- 1.7 语义化颜色变量 (深色主题) --- */
    /* 功能说明: 这些变量为特定的UI组件提供颜色值，
     * 它们会在浅色模式下被覆盖，实现自动主题切换。
     * 使用语义化命名而非具体颜色值，提高代码可读性。 */
    
    --input-bg-color: #121212;                      /* 输入框背景色 */
    --input-border-color: #444;                     /* 输入框边框色 */
    --bg-color-inset: #121212;                      /* 一级内嵌背景 - 用于表格头、标签栏 */
    --bg-color-inset-secondary: #242424;            /* 二级内嵌背景 - 用于规则卡片、操作组 */
                                                    /* 设计说明: 创建三层颜色深度 - 页面(#121212) > 卡片(#1e1e1e) > 子卡片(#242424) */
    --bg-color-table-row-even: rgba(255, 255, 255, 0.02);  /* 表格偶数行背景 - 创造条纹效果 */
    --bg-color-code: #111;                          /* 代码片段/日志背景 */
    --text-color-table-header: #a0a0a0;             /* 表格头文字颜色 */
    --text-color-subheading: var(--text-color-muted);      /* 子标题文字颜色 */
    --bg-color-subheading: rgba(0, 0, 0, 0.2);      /* 子标题背景色 */
    --border-color-subheading-left: var(--secondary-color); /* 子标题左侧边框 - 绿色强调 */

    /* --- 1.7 特殊模块颜色 (深色主题) --- */
    --tutorial-bg-color: rgba(49, 130, 206, 0.1);   /* 教程/说明模块背景 - 淡蓝色 */
    --tutorial-border-color: rgba(49, 130, 206, 0.2); /* 教程/说明模块边框 */

    /* --- 1.8 日志查看器专用颜色 (深色主题) --- */
    --bg-color-log: #0c0c0c;                        /* 日志查看器背景 - 更深的黑色 */
    --log-text-color: #ccc;                         /* 日志文本颜色 */
    --log-text-timestamp: #666;                     /* 日志时间戳颜色 */
}

/* ================================================================
 * 二、浅色主题 (Light Theme) - 通过 data-theme 属性切换
 * ================================================================ */

/* 功能说明: 
 * 当 <html> 标签设置 data-theme="light" 时，这些变量会覆盖默认的深色主题。
 * 所有使用变量的组件会自动适应新的配色方案。
 * 主题切换由 JS (theme.js) 控制，状态保存在 localStorage 中。 */

html[data-theme="light"] {
    /* --- 2.1 基础颜色 (浅色主题) --- */
    --bg-color: #f3f4f6;                    /* 页面背景 - 浅灰色 */
    --card-bg-color: #ffffff;               /* 卡片背景 - 纯白色 */
    --card-bg-hover: #f9fafb;               /* 卡片悬浮态 - 极浅灰 */
    --text-color: #1f2937;                  /* 主文字 - 深灰色 */
    --text-color-muted: #6b7280;            /* 次要文字 - 中灰色 */
    --border-color: #e5e7eb;                /* 边框 - 浅灰色 */

    /* --- 2.2 语义化颜色变量 (浅色主题) --- */
    --input-bg-color: #ffffff;              /* 输入框背景 - 白色 */
    --input-border-color: #d1d5db;          /* 输入框边框 - 浅灰色 */
    --bg-color-inset: #f9fafb;              /* 一级内嵌背景 - 极浅灰 */
    --bg-color-inset-secondary: #f3f4f6;    /* 二级内嵌背景 - 与页面背景相同 */
                                            /* 设计说明: 浅色模式的层级 - 页面(#f3f4f6) < 卡片(#ffffff) > 子卡片(#f3f4f6) */
    --bg-color-table-row-even: rgba(0, 0, 0, 0.03);  /* 表格偶数行 - 淡灰色 */
    --bg-color-code: #e5e7eb;               /* 代码片段背景 */
    --text-color-table-header: #6b7280;     /* 表格头文字 */
    --text-color-subheading: #374151;       /* 子标题文字 - 较深以保证可读性 */
    --bg-color-subheading: var(--bg-color-inset-secondary);  /* 子标题背景 */
    --border-color-subheading-left: var(--border-color);     /* 子标题左边框 */

    /* --- 2.3 特殊模块颜色 (浅色主题) --- */
    --tutorial-bg-color: #eff6ff;           /* 教程模块背景 - 极淡蓝色 */
    --tutorial-border-color: #dbeafe;       /* 教程模块边框 - 柔和蓝色 */

    /* --- 2.4 日志查看器专用颜色 (浅色主题) --- */
    --bg-color-log: #f5f5f5;                /* 日志查看器背景 - 浅灰色（加深） */
    --log-text-color: #374151;              /* 日志文本 - 深灰色 */
    --log-text-timestamp: #9ca3af;          /* 日志时间戳 - 中灰色 */

    /* --- 2.5 浅色主题专属动画覆盖 --- */
    /* 功能说明: 
     * 在浅色模式下，辉光动画需要使用更柔和的阴影强度，
     * 因为白色背景对高亮效果更敏感。 */
    
    .show-card.status-missing .show-card-poster-wrapper {
        animation-name: top-glow-red-light;    /* 使用浅色版红色辉光 */
    }

    .show-card.status-washing .show-card-poster-wrapper {
        animation-name: top-glow-blue-light;   /* 使用浅色版蓝色辉光 */
    }
}
/* ================================================================
 * 三、关键帧动画 (Keyframe Animations)
 * ================================================================ */

/* --- 3.1 媒体卡片顶部辉光动画 (红色 - 表示缺失集数) --- */

/* 深色主题版本: 使用较强的阴影和辉光效果 */
@keyframes top-glow-red-dark {
    0% {
        border-top-color: rgba(229, 62, 62, .5);        /* 边框半透明红色 */
        box-shadow: 0 -2px 10px rgba(229, 62, 62, .3); /* 初始辉光 */
    }
    50% {
        border-top-color: rgba(229, 62, 62, .8);        /* 边框更亮的红色 */
        box-shadow: 0 -2px 18px 2px rgba(229, 62, 62, .5); /* 最强辉光 */
    }
    100% {
        border-top-color: rgba(229, 62, 62, .5);        /* 回到初始状态 */
        box-shadow: 0 -2px 10px rgba(229, 62, 62, .3);
    }
}

/* 浅色主题版本: 使用更柔和的阴影，避免过于刺眼 */
@keyframes top-glow-red-light {
    0% {
        border-top-color: rgba(229, 62, 62, .5);
        box-shadow: 0 -2px 10px rgba(229, 62, 62, .1);  /* 阴影强度降低 */
    }
    50% {
        border-top-color: rgba(229, 62, 62, .8);
        box-shadow: 0 -2px 18px 2px rgba(229, 62, 62, .2);
    }
    100% {
        border-top-color: rgba(229, 62, 62, .5);
        box-shadow: 0 -2px 10px rgba(229, 62, 62, .1);
    }
}

/* --- 3.2 媒体卡片顶部辉光动画 (蓝色 - 表示洗版中) --- */

/* 深色主题版本 */
@keyframes top-glow-blue-dark {
    0% {
        border-top-color: rgba(49, 130, 206, .5);       /* 边框半透明蓝色 */
        box-shadow: 0 -2px 10px rgba(49, 130, 206, .3);
    }
    50% {
        border-top-color: rgba(49, 130, 206, .8);       /* 边框更亮的蓝色 */
        box-shadow: 0 -2px 18px 2px rgba(49, 130, 206, .5);
    }
    100% {
        border-top-color: rgba(49, 130, 206, .5);
        box-shadow: 0 -2px 10px rgba(49, 130, 206, .3);
    }
}

/* 浅色主题版本 */
@keyframes top-glow-blue-light {
    0% {
        border-top-color: rgba(49, 130, 206, .5);
        box-shadow: 0 -2px 10px rgba(49, 130, 206, .1);
    }
    50% {
        border-top-color: rgba(49, 130, 206, .8);
        box-shadow: 0 -2px 18px 2px rgba(49, 130, 206, .2);
    }
    100% {
        border-top-color: rgba(49, 130, 206, .5);
        box-shadow: 0 -2px 10px rgba(49, 130, 206, .1);
    }
}

/* ================================================================
 * 四、全局基础样式 (Global Base Styles)
 * ================================================================ */

/* --- 4.1 Body 基础样式 --- */
/* 功能说明: 设置页面的基础外观和字体渲染优化 */
/* UI优化: 精致的全局字体大小 */
body {
    font-family: var(--font-family);           /* 使用设计令牌中的字体族 */
    background-color: var(--bg-color);         /* 页面背景色 */
    color: var(--text-color);                  /* 默认文字颜色 */
    margin: 0;                                 /* 移除默认边距 */
    padding: var(--spacing-lg);                /* 页面四周留白 */
    font-size: 14px;                           /* 精致的基础字号 */
    line-height: 1.5;                          /* 精致的行高 */
    -webkit-font-smoothing: antialiased;       /* macOS/iOS 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale;        /* Firefox 字体抗锯齿 */
}

/* 响应式: 在小屏幕上减少边距 */
@media (max-width: 768px) {
    /* 移动端修复：确保所有元素使用border-box */
    html {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;  /* 隐藏水平滚动条 */
    }
    
    body {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-md);            /* 手机端使用更小的边距 */
        box-sizing: border-box;                /* 确保padding包含在宽度内 */
        overflow-x: hidden;  /* 隐藏水平滚动条 */
    }

    /* 移动端修复：确保容器不会溢出视口 */
    .container {
        width: 100% !important;                /* 占满body宽度，强制覆盖桌面端的90vw */
        max-width: 100% !important;            /* 不超过body宽度 */
        padding: 0 !important;                 /* 移除padding，由body提供边距 */
        margin: 0 !important;                  /* 移除margin */
        box-sizing: border-box;                /* 确保box model正确 */
    }

    /* 确保卡片也不会溢出 - 仅限于首页的订阅列表卡片 */
    .main-grid .card,
    .left-column .card,
    .right-column .card {
        width: 100% !important;                /* 占满父容器宽度 */
        max-width: 100% !important;            /* 不超过父容器宽度 */
        box-sizing: border-box !important;     /* 确保padding和border包含在宽度内 */
        margin-left: 0 !important;             /* 移除可能的负边距 */
        margin-right: 0 !important;            /* 移除可能的负边距 */
        overflow-x: hidden !important;         /* 隐藏水平溢出，防止被子元素撑开 */
        /* 关键修复：Flexbox 子项需要设置 min-width */
        min-width: 0 !important;               /* 允许内容收缩，但不强制从0开始 */
    }
    
    /* 确保首页卡片内的所有子元素都遵守父容器宽度 */
    .main-grid .card > *,
    .left-column .card > *,
    .right-column .card > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 特别修复：shows-grid 和 category-tabs 在移动端的宽度问题 */
    .shows-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .category-tabs {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .controls-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;               /* 移除桌面端的 min-width: 280px */
        box-sizing: border-box !important;
    }
    
    /* 修复：允许分类标签和下拉框在移动端收缩 */
    .category-tab {
        flex-shrink: 1 !important;            /* 允许收缩，覆盖桌面端的 flex-shrink: 0 */
        min-width: 0 !important;
        padding: 6px 12px !important;          /* 减小内边距以节省空间 */
    }
    
    .subscription-sort-select {
        flex-shrink: 1 !important;            /* 允许收缩，覆盖桌面端的 flex-shrink: 0 */
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    /* 修复：controls-row 在移动端需要允许换行和收缩 */
    .controls-row {
        min-width: 0 !important;
        flex-wrap: wrap !important;            /* 允许换行 */
    }
    
    /* 修复：main-grid 和列容器在移动端的宽度限制 */
    .main-grid {
        grid-template-columns: minmax(0, 1fr) !important;  /* 强制单列，最小宽度为0 */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .left-column,
    .right-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 修复：add-form 和其内部元素的宽度限制 */
    .add-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .add-form .form-control {
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    
    .add-form .btn {
        flex-shrink: 0 !important;
    }
    
    /* 修复：确保输入框不会超宽 - 仅限于首页 */
    .main-grid .form-control,
    .left-column .form-control,
    .right-column .form-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .main-grid .filter-input-full-width,
    .left-column .filter-input-full-width,
    .right-column .filter-input-full-width {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 修复：card-header 和 card-header-flex - 仅限于首页 */
    .main-grid .card-header,
    .main-grid .card-header-flex,
    .left-column .card-header,
    .left-column .card-header-flex,
    .right-column .card-header,
    .right-column .card-header-flex {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 修复：shows-list-container 宽度限制 */
    #shows-list-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
}

/* --- 4.2 容器布局 --- */

/* 主容器: 限制最大宽度并居中 */
.container {
    width: 90vw;                               /* 占据90%的视口宽度 */
    max-width: 1800px;                         /* 超宽屏上限制最大宽度 */
    margin: 0 auto;                            /* 水平居中 */
}

/* 登录页专用容器: 窄版居中布局 */
.setup-container {
    max-width: 500px;                          /* 固定窄宽度 */
    margin-top: 5vh;                           /* 顶部留白 */
}

/* --- 4.3 页面头部 --- */
/* 功能说明: 包含标题和操作按钮的区域 */
header {
    display: flex;                             /* 使用flex布局 */
    justify-content: space-between;            /* 左右两端对齐 */
    align-items: center;                       /* 垂直居中 */
    margin-bottom: var(--spacing-lg);          /* 与下方内容的间距 */
}

/* --- 4.4 标题样式统一规范 --- */

/* h1: 页面主标题 (如"Media Automator 仪表盘") */
h1 {
    color: var(--text-color);                  /* 使用主题文字颜色 */
    font-weight: 500;                          /* 中等字重 */
    font-size: 1.75rem;                        /* 较大字号 */
    margin: 0;                                 /* 移除默认margin */
}

/* h2: 卡片/区块标题 (带图标和底部边框) */
h2 {
    display: flex;                             /* 使用flex以便图标对齐 */
    align-items: center;                       /* 图标与文字垂直居中 */
    gap: var(--spacing-sm);                    /* 图标与文字的间距 */
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color); /* 底部分隔线 */
    padding-bottom: var(--spacing-md);
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    font-size: 1.25rem;
}

/* h2 内的图标使用品牌色高亮 */
h2 .lucide {
    color: var(--primary-color);               /* 紫色图标 */
}

/* h3: 次级标题/分组标题 */
h3 {
    font-weight: 500;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
}

/* 设计说明: h4-h6 不再使用特定样式，由特定的类来处理 (如 .config-subheading) */

/* --- 4.5 卡片组件基础样式 --- */
/* 功能说明: 卡片是整个应用最基础的容器组件 */
/* UI优化: 精致紧凑的卡片设计 */
.card {
    background-color: var(--card-bg-color);    /* 卡片背景色 */
    border: 1px solid var(--border-color);     /* 卡片边框 */
    border-radius: var(--border-radius-lg);    /* 大圆角 */
    padding: 16px;                             /* 精致内边距 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* 精致阴影 */
    /* [性能优化] 显式指定过渡属性，避免 transition: all */
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
                border-color var(--transition-speed) ease;
    position: relative;                        /* 为伪元素定位做准备 */
}

/* 卡片悬浮效果 - 微妙 */
.card:hover {
    transform: translateY(-1px);               /* 轻微上浮 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 稍深阴影 */
    border-color: rgba(139, 92, 246, 0.3);     /* 边框变为浅紫色 */
}

/* 浅色模式下卡片使用更柔和的视觉效果 */
html[data-theme="light"] .card {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 更浅的阴影 */
    border-color: rgba(0, 0, 0, 0.06);         /* 更淡的边框 */
}

html[data-theme="light"] .card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-color: rgba(139, 92, 246, 0.3);
}

/* --- 4.6 加载状态文本 --- */
.loading-text {
    text-align: center;                        /* 文字居中 */
    padding: 40px 0;                           /* 上下留白 */
    color: var(--text-color-muted);            /* 使用次要文字颜色 */
}

/* ================================================================
 * 五、UI组件库 (UI Components Library)
 * ================================================================ */

/* ----------------------------------------------------------------
 * 5.1 按钮组件 (Button Component)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 按钮是最常用的交互组件,采用BEM命名约定。
 * 基础类 .btn 提供统一的样式框架,必须配合变体类使用。
 * 变体类定义不同的语义和配色方案。
 */

/* --- 5.1.1 按钮基础类 --- */
/* UI优化: 精致紧凑的按钮设计 */
.btn {
    /* 布局 */
    display: inline-flex;                      /* 使用flex以便图标与文字对齐 */
    align-items: center;                       /* 垂直居中 */
    justify-content: center;                   /* 水平居中 */
    gap: var(--spacing-sm);                    /* 图标与文字的间距 */
    
    /* 尺寸 - 精致紧凑 */
    padding: 8px 16px;                         /* 适中内边距 */
    height: 36px;                              /* 固定高度 - 避免椭圆 */
    
    /* 外观 */
    border-radius: var(--border-radius-md);    /* 中等圆角 */
    border: 1px solid transparent;             /* 默认透明边框,为变体预留 */
    background-color: transparent;             /* 默认透明背景 */
    
    /* 文字 */
    font-weight: 500;                          /* 中等字重 */
    font-size: 0.875rem;                       /* 精致字号 14px */
    text-align: center;                        /* 文字居中 */
    text-decoration: none;                     /* 移除链接下划线 */
    color: inherit;                            /* 继承文字颜色,由变体覆盖 */
    line-height: 1.2;                          /* 固定行高 */
    white-space: nowrap;                       /* 不换行 */
    
    /* 交互 */
    cursor: pointer;                           /* 鼠标指针变为手型 */
    /* [性能优化] 显式指定过渡属性，避免 transition: all */
    transition: transform var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1),
                background-color var(--transition-fast) ease,
                border-color var(--transition-fast) ease;
    position: relative;                        /* 为伪元素定位 */
    user-select: none;                         /* 防止文字选中 */
}

/* 按钮悬浮效果 - 微妙 */
.btn:hover {
    transform: translateY(-1px);               /* 轻微上浮 */
}

/* 按钮按下效果 */
.btn:active {
    transform: translateY(0);                  /* 恢复位置 */
}

/* --- 5.1.2 按钮变体: 主按钮 (Primary) --- */
/* 用途: 页面主要操作,如"保存设置"、"确认" */
/* UI优化: 纯色背景，清晰易读 */
.btn-primary {
    background-color: var(--primary-color);    /* 紫色背景 */
    border-color: var(--primary-color);        /* 紫色边框 */
    color: #fff;                               /* 白色文字 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* 精致阴影 */
}

.btn-primary:hover {
    background-color: var(--primary-color-hover); /* 悬浮时变深 */
    border-color: var(--primary-color-hover);
    box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.2), 0 2px 4px -1px rgba(139, 92, 246, 0.1); /* 紫色阴影 */
}

.btn-primary:active {
    transform: translateY(0);                  /* 按下效果 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

/* --- 5.1.3 按钮变体: 次要按钮 (Secondary) --- */
/* 用途: 辅助操作,如"取消"、"返回" */
/* UI优化: 增强悬浮效果 */
.btn-secondary {
    background-color: var(--card-bg-color);    /* 卡片背景色 */
    border-color: var(--border-color);         /* 使用主题边框色 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
}

.btn-secondary:hover {
    background-color: var(--card-bg-hover);    /* 悬浮时显示背景 */
    border-color: var(--primary-color);        /* 边框变为品牌色 */
    color: var(--text-color);                  /* 文字变亮 */
    box-shadow: var(--shadow-sm);              /* 添加小阴影 */
}

/* --- 5.1.3.1 按钮变体: 空心主色按钮 (Outline Primary) --- */
/* 用途: 次级重要操作，如"获取列表"、"测试连接" */
/* UI优化: 使用品牌色描边，悬浮时填充 */
.btn-outline-primary {
    background-color: transparent;             /* 透明背景 */
    border-color: var(--primary-color);        /* 品牌色边框 */
    color: var(--primary-color);               /* 品牌色文字 */
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);    /* 悬浮时填充品牌色 */
    color: #fff;                               /* 文字变白 */
    box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.2), 0 2px 4px -1px rgba(139, 92, 246, 0.1);
}

.btn-outline-primary:active {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    transform: translateY(0);
}

/* --- 5.1.4 按钮变体: 成功按钮 (Success) --- */
/* 用途: 确认性操作,如"保存成功"、"提交" */
/* UI优化: 纯色背景，清晰易读 */
.btn-success {
    background-color: var(--success-color);    /* 绿色背景 */
    border-color: var(--success-color);        /* 绿色边框 */
    color: #fff;                               /* 白色文字 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.btn-success:hover {
    background-color: var(--secondary-color-hover); /* 悬浮时变深 */
    border-color: var(--secondary-color-hover);
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2), 0 2px 4px -1px rgba(16, 185, 129, 0.1);
}

.btn-success:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

/* --- 5.1.5 按钮变体: 危险按钮 (Danger) --- */
/* 用途: 危险操作,如"删除"、"清空" */
/* UI优化: 增强警示效果 */
.btn-danger {
    background-color: var(--error-color);      /* 红色背景 */
    border-color: var(--error-color);          /* 红色边框 */
    color: #fff;                               /* 白色文字 */
    box-shadow: 0 4px 10px -2px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
    background-color: var(--error-color-hover); /* 悬浮时变为更深的红色 */
    border-color: var(--error-color-hover);
    transform: translateY(-2px);               /* 上浮效果 */
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.35), 0 4px 6px -2px rgba(239, 68, 68, 0.2);
}

.btn-danger:active {
    transform: translateY(-1px) scale(0.98);
}

/* --- 5.1.6 按钮变体: 信息按钮 (Info) --- */
/* 用途: 信息性操作,如"查看详情"、"测试连接" */
/* UI优化: 优化蓝色调 */
.btn-info {
    background-color: var(--info-color);       /* 蓝色背景 */
    border-color: var(--info-color);           /* 蓝色边框 */
    color: #fff;                               /* 白色文字 */
    box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.25);
}

.btn-info:hover {
    background-color: #2563eb;                 /* 悬浮时变为更深的蓝色 Blue 600 */
    border-color: #2563eb;
    transform: translateY(-2px);               /* 上浮效果 */
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.35), 0 4px 6px -2px rgba(59, 130, 246, 0.2);
}

.btn-info:active {
    transform: translateY(-1px) scale(0.98);
}

/* --- 5.1.7 按钮状态: 禁用 --- */
/* 功能说明: 当按钮不可用时的样式 */
.btn:disabled,
button:disabled {
    background-color: var(--border-color);     /* 灰色背景 */
    border-color: var(--border-color);         /* 灰色边框 */
    color: var(--text-color-muted);            /* 灰色文字 */
    cursor: not-allowed;                       /* 禁止点击光标 */
    transform: none;                           /* 禁用悬浮效果 */
    box-shadow: none;                          /* 移除阴影 */
}

/* ----------------------------------------------------------------
 * 5.2 表单控件组件 (Form Control Component)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * .form-control 是所有表单输入元素的基础类，
 * 适用于 input、select、textarea 等元素。
 * 提供统一的外观、尺寸和交互反馈。
 */

/* --- 5.2.1 表单控件基础类 --- */
/* UI优化: 精致紧凑的表单控件 */
.form-control {
    /* 布局与尺寸 */
    width: 100%;                               /* 默认占满容器宽度 */
    box-sizing: border-box;                    /* 包含padding和border在宽度内 */
    padding: 8px 12px;                         /* 精致内边距 */
    height: 36px;                              /* 固定高度 */
    
    /* 外观 */
    background-color: var(--input-bg-color);   /* 输入框背景色 */
    border: 1px solid var(--input-border-color); /* 精致边框 */
    border-radius: var(--border-radius-md);    /* 中等圆角 */
    
    /* 文字 */
    color: var(--text-color);                  /* 文字颜色 */
    font-family: var(--font-family);           /* 继承应用字体 */
    font-size: 0.875rem;                       /* 精致字号 14px */
    line-height: 1.5;                          /* 舒适的行高 */
    
    /* 交互 */
    /* [性能优化] 显式指定过渡属性，避免 transition: all */
    transition: border-color var(--transition-fast) ease;
}

/* 焦点状态: 高亮显示正在编辑的输入框 */
.form-control:focus {
    outline: none;                             /* 移除浏览器默认轮廓 */
    border-color: var(--primary-color);        /* 边框变为品牌紫色 */
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); /* 精致紫色辉光 */
}

/* 悬浮状态 - 微妙 */
.form-control:hover:not(:focus) {
    border-color: rgba(139, 92, 246, 0.3);     /* 边框变浅紫色 */
}

/* --- 5.2.2 下拉选择框 (Select) 特殊样式 --- */
/* 功能说明: 
 * 自定义下拉框的外观，移除浏览器默认样式，
 * 使用SVG图标作为下拉箭头，适配深色/浅色主题。
 */
select.form-control {
    appearance: none;                          /* 移除浏览器默认样式 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239e9e9e' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    /* SVG下拉箭头 - 深色主题版 */
    background-repeat: no-repeat;              /* 不重复 */
    background-position: right 12px center;    /* 定位在右侧 */
    background-size: 16px 16px;                /* 图标尺寸 */
    padding-right: 40px;                       /* 为箭头腾出空间 */
}

/* 浅色主题下的下拉箭头颜色调整 */
html[data-theme="light"] select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    /* 使用更深的灰色以保证可见性 */
}

/* --- 5.2.3 多行文本框 (Textarea) 特殊样式 --- */
textarea.form-control {
    min-height: 80px;                          /* 最小高度 - 确保至少3-4行 */
    resize: vertical;                          /* 只允许垂直调整大小 */
}

/* ----------------------------------------------------------------
 * 5.3 表单布局组件 (Form Layout Components)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 提供多种表单布局模式，以适应不同的使用场景。
 * 主要有两种布局：垂直布局(.form-group)和水平布局(.form-group-horizontal)
 */

/* --- 5.3.1 垂直表单组 (标签在上，输入框在下) --- */
/* 用途: 适用于登录页、独立表单等场景 */
.form-group {
    margin-bottom: var(--spacing-md);          /* 表单项之间的间距 */
}

/* 表单标签通用样式 */
.form-group label,
.form-grid-item label {
    display: flex;                             /* 使用flex布局以便对齐图标 */
    align-items: center;                       /* 垂直居中 */
    gap: var(--spacing-xs);                    /* 标签文字与图标的间距 */
    font-size: 0.85rem;                        /* 较小的字号 */
    font-weight: 500;                          /* 中等字重 */
    margin-bottom: var(--spacing-sm);          /* 标签与输入框的间距 */
    color: var(--text-color);                  /* 使用主题文字颜色 */
}

/* 浅色主题下确保标签颜色正确 */
html[data-theme="light"] .form-group label,
html[data-theme="light"] .form-grid-item label {
    color: var(--text-color);
}

/* --- 5.3.2 水平表单组 (标签在左，输入框在右) --- */
/* 用途: 适用于设置页面、配置表单等场景 */
.form-group-horizontal {
    display: grid;                             /* 使用Grid布局 */
    grid-template-columns: 200px 1fr;          /* 标签固定200px，输入框占据剩余空间 */
    align-items: center;                       /* 垂直居中对齐 */
    gap: var(--spacing-md);                    /* 标签与输入框的间距 */
    margin-bottom: var(--spacing-md);          /* 表单项之间的间距 */
}

/* --- 5.3.3 水平表单组布局修饰符 --- */

/* 修饰符: 自动标签宽度 */
/* 功能说明:
 * 当标签文字较短时，使用auto宽度可以节省空间。
 * 标签宽度自适应内容，输入框占据剩余空间。
 * 适用于标签较短的表单项，如"端口"、"超时"等。
*/
.form-group-horizontal.layout-auto-label {
    grid-template-columns: auto 1fr;           /* 标签自适应，输入框占满 */
}

/* 修饰符: 顶部对齐 */
/* 功能说明: 当输入框是多行文本或高度较大时使用 */
.form-group-horizontal.align-start {
    align-items: start;                        /* 顶部对齐 */
}

/* 修饰符: 全宽布局 (垂直排列) */
/* 功能说明: 当标签+输入框需要独占一行时使用 */
.form-group-horizontal.full-width {
    grid-template-columns: 1fr;                /* 单列布局 */
}

.form-group-horizontal.full-width label {
    text-align: left;                          /* 标签左对齐 */
    margin-bottom: 6px;                        /* 标签与输入框的间距 */
    justify-content: flex-start;               /* 内容左对齐 */
}

/* --- 5.3.4 水平表单组内的标签样式 --- */
.form-group-horizontal label {
    text-align: right;                         /* 标签文字右对齐 */
    font-weight: 500;                          /* 中等字重 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
    padding-right: var(--spacing-sm);          /* 右侧留白 */
    margin-bottom: 0;                          /* 移除底部margin */
    font-size: 0.9rem;                         /* 标准字号 */
    display: flex;                             /* flex布局 */
    justify-content: flex-end;                 /* 内容右对齐 */
    align-items: center;                       /* 垂直居中 */
}

/* --- 5.3.5 水平表单组内的表单控件 --- */
/* 功能说明: 确保所有表单控件占满其网格区域 */
.form-group-horizontal .input-wrapper,
.form-group-horizontal input.form-control,
.form-group-horizontal textarea.form-control,
.form-group-horizontal select.form-control,
.form-group-horizontal .custom-multiselect,
.form-group-horizontal .input-with-button {
    width: 100%;                               /* 占满容器宽度 */
    box-sizing: border-box;                    /* 包含padding在宽度内 */
}

/* 短输入框: 限制最大宽度 */
/* 用途: 适用于端口号、数字等不需要很宽的输入框 */
.form-group-horizontal .input-short {
    max-width: 200px;                          /* 限制最大宽度 */
}

/* [新] 限制单行输入控件的最大宽度，避免在大屏上过于拉伸 */
.form-group-horizontal input.form-control,
.form-group-horizontal select.form-control,
.form-group-horizontal .input-with-button {
    width: 100%;
    box-sizing: border-box;
    max-width: 480px; /* 黄金宽度，既能显示足够内容又不显空旷 */
}

/* 多行文本和多选框保持全宽，利用 Grid 剩余空间 */
.form-group-horizontal textarea.form-control,
.form-group-horizontal .custom-multiselect {
    width: 100%;
}

/* --- 5.3.6 嵌套的表单组 --- */
/* 功能说明: 当.form-group嵌套在.form-group-horizontal内时 */
.form-group-horizontal .form-group {
    margin-bottom: 0;                          /* 移除底部margin避免双重间距 */
}

/* --- 5.3.7 嵌套的复选框组 --- */
/* 功能说明: 当复选框组嵌套在水平表单组内时的特殊处理 */
.form-group-horizontal .form-group-checkbox {
    grid-column: 2 / -1;                       /* 复选框占据输入框列 */
    margin-bottom: 0;                          /* 移除底部margin */
    padding: 0;                                /* 移除内边距 */
    background-color: transparent;             /* 透明背景 */
}

.form-group-horizontal .form-group-checkbox:hover {
    background-color: transparent;             /* 悬浮时保持透明 */
}

/* ----------------------------------------------------------------
 * 5.4 复选框组件 (Checkbox Component)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 复选框组件提供两种使用模式：
 * 1. 块级模式(.form-group-checkbox): 带背景的完整区块
 * 2. 内联模式(.form-checkbox-inline): 轻量级，可与其他元素排列
 */

/* --- 5.4.1 复选框组 (块级模式) --- */
/* 用途: 独立的复选框选项，带背景高亮 */
.form-group-checkbox {
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: var(--spacing-sm);                    /* 复选框与标签的间距 */
    padding: var(--spacing-sm);                /* 内边距 */
    border-radius: var(--border-radius-md);    /* 圆角 */
    background-color: var(--bg-color-inset-secondary); /* 浅色背景 */
    transition: background-color var(--transition-speed); /* 平滑过渡 */
}

/* 悬浮效果: 背景变亮 */
.form-group-checkbox:hover {
    background-color: var(--card-bg-hover);
}

/* 复选框组内的标签 */
.form-group-checkbox label {
    margin-bottom: 0;                          /* 移除底部margin */
    color: var(--text-color-muted);            /* 次要文字颜色 */
    cursor: pointer;                           /* 鼠标指针变为手型 */
}

/* 浅色主题下的标签颜色 */
html[data-theme="light"] .form-group-checkbox label {
    color: var(--text-color-muted);
}

/* --- 5.4.2 复选框基础元素 --- */
.form-checkbox {
    width: 18px;                               /* 宽度 */
    height: 18px;                              /* 高度 */
    accent-color: var(--primary-color);        /* 选中时的颜色 - 品牌紫色 */
    cursor: pointer;                           /* 鼠标指针 */
    margin: 0;                                 /* 移除默认margin */
    flex-shrink: 0;                            /* 防止被压缩 */
}

/* --- 5.4.3 禁用状态 --- */
.form-checkbox:disabled + label {
    opacity: 0.5;                              /* 降低透明度 */
    cursor: not-allowed;                       /* 禁止点击光标 */
}


/* ----------------------------------------------------------------
 * 5.5 头部操作区域组件 (Header Actions)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 页面头部右侧的操作按钮区域，包含版本标签、主题切换、文档链接等。
 * 使用flex布局水平排列，自动适应不同数量的按钮。
 */

.header-actions {
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 0.75rem;                             /* 按钮组之间的间距 */
}

/* Header按钮分组 */
.header-actions-group {
    display: flex;                             /* flex布局 */
    align-items: center;                      /* 垂直居中 */
    gap: 0.5rem;                              /* 组内按钮间距 */
}

/* Header分隔线 */
.header-divider {
    width: 1px;                               /* 宽度 */
    height: 24px;                             /* 高度 */
    background-color: var(--border-color);     /* 边框色 */
    margin: 0 0.25rem;                         /* 左右间距 */
    flex-shrink: 0;                           /* 不收缩 */
}

/* Header图标按钮 */
.header-icon-btn {
    width: 36px;                              /* 宽度 */
    height: 36px;                             /* 高度 */
    padding: 0;                                /* 无内边距 */
    min-width: 36px;                          /* 最小宽度 */
    border-radius: var(--border-radius-md);    /* 圆角 */
    display: flex;                            /* flex布局 */
    align-items: center;                      /* 垂直居中 */
    justify-content: center;                  /* 水平居中 */
    background-color: var(--card-bg-color);   /* 卡片背景色 */
    border: 1px solid var(--border-color);    /* 边框 */
    color: var(--text-color-muted);           /* 次要文字颜色 */
    cursor: pointer;                           /* 指针光标 */
    /* [性能优化] 显式指定过渡属性，避免 transition: all */
    transition: transform var(--transition-speed) ease,
                background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
    text-decoration: none;                      /* 无下划线（用于链接） */
}

.header-icon-btn:hover {
    background-color: var(--card-bg-hover);   /* 悬浮时显示背景 */
    border-color: var(--primary-color);       /* 边框变为品牌色 */
    color: var(--text-color);                  /* 文字变亮 */
    box-shadow: var(--shadow-sm);             /* 添加小阴影 */
    transform: translateY(-1px);              /* 轻微上浮 */
}

.header-icon-btn:active {
    transform: translateY(0);                  /* 按下效果 */
}

/* 图标按钮内的图标 */
.header-icon-btn .lucide {
    width: 18px;                               /* 图标宽度 */
    height: 18px;                              /* 图标高度 */
}

/* 主题切换按钮特殊样式（保持原有样式） */
.header-icon-btn.theme-toggle-btn .theme-icon-light,
.header-icon-btn.theme-toggle-btn .theme-icon-dark {
    width: 18px;
    height: 18px;
}

/* [Header优化] 设置中心和返回仪表盘按钮 - 与图标按钮协调 */
header .header-actions .button-link.btn-primary,
header .header-actions .button-link.btn-info,
.settings-header .header-actions .button-link.btn-primary,
.settings-header .header-actions .button-link.btn-info {
    height: 36px !important;                    /* 与图标按钮高度一致 - 提高优先级 */
    padding: 8px 16px !important;               /* 与图标按钮协调的内边距 */
    font-size: 0.875rem !important;             /* 精致字号 */
    line-height: 1 !important;                  /* 固定行高为1，避免文字撑高 */
    display: inline-flex !important;             /* flex布局 */
    align-items: center !important;              /* 垂直居中 */
    gap: var(--spacing-sm) !important;           /* 图标与文字间距 */
    min-height: 36px !important;                /* 确保最小高度 */
    max-height: 36px !important;                /* 确保最大高度 */
    box-sizing: border-box !important;          /* 确保padding包含在高度内 */
}

/* ----------------------------------------------------------------
 * 5.6 版本标签组件 (Version Tag)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 显示应用版本号的标签，采用徽章样式。
 * 使用等宽字体确保版本号整齐对齐。
 */

/* UI优化: 精致的版本标签 */
.version-tag {
    /* 外观 */
    background-color: rgba(139, 92, 246, 0.1);  /* 紫色半透明背景 */
    border: 1px solid rgba(139, 92, 246, 0.2);  /* 紫色边框 */
    border-radius: var(--border-radius-full);   /* 完全圆角 */
    
    /* 尺寸 */
    padding: 4px 10px;                          /* 精致内边距 */
    height: 24px;                               /* 固定高度避免拉伸 */
    display: inline-flex;                       /* flex避免拉伸 */
    align-items: center;                        /* 垂直居中 */
    
    /* 文字 */
    color: var(--primary-color-light);          /* 浅紫色文字 */
    font-size: 0.75rem;                         /* 精致字号 12px */
    font-weight: 500;                           /* 中等字重 */
    font-family: monospace;                     /* 等宽字体 */
    
    /* 交互 */
    /* [性能优化] 移除不必要的过渡，版本标签不需要动画 */
}

/* 浅色主题下的版本标签 */
html[data-theme="light"] .version-tag {
    background-color: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.15);
    color: var(--primary-color);
}

/* ----------------------------------------------------------------
 * 5.7 特殊样式选择框 (Styled Select)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 为特定的下拉选择框添加蓝色左边框强调，
 * 用于突出显示重要的配置选项（如资源推送目标）。
 */

.rule-row select[name="destination"],
.styled-select-blue {
    border-left: 4px solid var(--info-color);  /* 蓝色左边框 */
    padding-left: 10px;                        /* 增加左内边距以容纳边框 */
    /* [性能优化] 显式指定过渡属性 */
    transition: border-color 0.2s ease-in-out;
}

/* 悬浮时边框变亮 */
.rule-row select[name="destination"]:hover,
.styled-select-blue:hover {
    border-left-color: #60a5fa;                /* 更亮的蓝色 */
}

/* ================================================================
 * 六、页面专属样式 (Page-Specific Styles)
 * ================================================================ */

/* ----------------------------------------------------------------
 * 6.1 设置中心页面 (Settings Page)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 设置中心采用左侧导航 + 右侧内容的经典布局。
 * 导航栏固定宽度，内容区域自适应。
 */

/* --- 6.1.1 设置中心页面头部 --- */
.settings-header {
    display: flex;                             /* flex布局 */
    justify-content: space-between;            /* 左右两端对齐 */
    align-items: center;                       /* 垂直居中 */
}

/* 汉堡菜单按钮和遮罩层 - 桌面端默认隐藏 */
.settings-menu-toggle {
    display: none;                             /* 桌面端隐藏 */
}

.settings-nav-overlay {
    display: none;                             /* 桌面端隐藏 */
}

/* --- 6.1.2 设置中心主布局 --- */
/* UI优化: 精致紧凑的布局间距 */
.settings-layout {
    display: grid;                             /* grid布局 */
    grid-template-columns: 220px 1fr;          /* 导航栏220px，内容区域自适应 */
    gap: 16px;                                 /* 导航与内容的间距 - 更紧凑 */
    align-items: flex-start;                   /* 顶部对齐 */
}

/* --- 6.1.3 设置导航栏 (Settings Navigation) --- */

/* 功能说明:
 * 左侧固定导航栏，使用sticky定位，滚动时保持在视口内。
 * 采用卡片样式，与页面背景形成区分。
 */

/* UI优化: 精致紧凑的导航容器 */
.settings-nav {
    position: sticky;                          /* 粘性定位 */
    top: 20px;                                 /* 距离视口顶部20px */
    background-color: var(--card-bg-color);    /* 卡片背景色 */
    border: 1px solid var(--border-color);     /* 边框 */
    border-radius: var(--border-radius-lg);    /* 大圆角 */
    padding: 12px;                             /* 精致内边距 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* 精致阴影 */
}

/* 浅色模式下添加轻微阴影 */
html[data-theme="light"] .settings-nav {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 导航列表 */
.settings-nav ul {
    list-style: none;                          /* 移除列表标记 */
    padding: 0;                                /* 移除内边距 */
    margin: 0;                                 /* 移除外边距 */
}

/* --- 6.1.4 导航菜单项 --- */

/* UI优化: 适中舒适的导航项 */
.settings-nav-item {
    /* 布局 */
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 10px;                                 /* 图标与文字的间距 */
    
    /* 尺寸与间距 */
    height: 40px;                              /* 舒适高度 */
    padding: 0 12px;                           /* 内边距 */
    margin-bottom: 3px;                        /* 菜单项之间的间距 */
    
    /* 外观 */
    border-radius: var(--border-radius-md);    /* 圆角 */
    
    /* 文字 */
    color: var(--text-color-muted);            /* 未激活时的文字颜色 */
    text-decoration: none;                     /* 移除下划线 */
    font-size: 0.9375rem;                      /* 15px - 舒适字号 */
    font-weight: 500;                          /* 字重 */
    white-space: nowrap;                       /* 不换行 */
    
    /* 交互 */
    transition: background-color var(--transition-speed), 
                color var(--transition-speed); /* 平滑过渡 */
}

/* 导航项内的图标 - UI优化: 舒适尺寸 */
.settings-nav-item .lucide {
    width: 18px;                               /* 舒适图标宽度 */
    height: 18px;                              /* 舒适图标高度 */
    flex-shrink: 0;                            /* 不收缩 */
    transition: color var(--transition-speed); /* 颜色平滑过渡 */
}

/* 悬浮状态 */
.settings-nav-item:hover {
    background-color: var(--card-bg-hover);    /* 背景变亮 */
    color: var(--text-color);                  /* 文字变亮 */
}

/* UI优化: 精致的激活状态 (深色模式) */
.settings-nav-item.active {
    background-color: var(--primary-color);    /* 紫色背景 */
    color: #fff;                               /* 白色文字 */
    font-weight: 600;                          /* 加粗 */
    box-shadow: 0 1px 3px 0 rgba(139, 92, 246, 0.3); /* 紫色阴影 */
}

.settings-nav-item.active .lucide {
    color: #fff;                               /* 白色图标 */
}

/* UI优化: 精致的激活状态 (浅色模式) */
html[data-theme="light"] .settings-nav-item.active {
    background-color: rgba(139, 92, 246, 0.1); /* 浅紫色背景 */
    color: var(--primary-color);               /* 紫色文字 */
    font-weight: 600;                          /* 加粗 */
    border-left: 3px solid var(--primary-color); /* 左侧紫色边框强调 */
    padding-left: 9px;                         /* 调整内边距以补偿边框宽度 */
}

html[data-theme="light"] .settings-nav-item.active .lucide {
    color: var(--primary-color);               /* 紫色图标 */
}

/* --- 6.1.5 返回按钮 --- */

.nav-back-button {
    margin-top: var(--spacing-md);             /* 顶部间距，与导航菜单分隔 */
    padding-top: var(--spacing-md);            /* 顶部内边距 */
    border-top: 2px solid var(--border-color); /* 顶部边框 */
    height: 36px !important;                   /* [Header优化] 与图标按钮高度一致 */
    padding: 8px 16px !important;              /* [Header优化] 协调的内边距 */
    font-size: 0.875rem !important;            /* [Header优化] 精致字号 */
    line-height: 1 !important;                  /* [Header优化] 固定行高为1，避免文字撑高 */
    display: inline-flex !important;            /* [Header优化] flex布局 */
    align-items: center !important;             /* [Header优化] 垂直居中 */
    gap: var(--spacing-sm) !important;         /* [Header优化] 图标与文字间距 */
    min-height: 36px !important;              /* [Header优化] 确保最小高度 */
    max-height: 36px !important;               /* [Header优化] 确保最大高度 */
    box-sizing: border-box !important;          /* [Header优化] 确保padding包含在高度内 */
}

/* --- 6.1.6 设置内容区域 --- */
/* UI优化: 精致紧凑的卡片间距 */
.settings-main .card {
    margin-bottom: 12px;                       /* 卡片之间的间距 - 更紧凑 */
}

/* 设置内容面板 - 默认隐藏 */
.settings-content {
    display: none;                             /* 默认不显示 */
}

/* 激活的设置内容面板 */
.settings-content.active {
    display: block;                            /* 显示激活的面板 */
}

/* [Header优化] 模态框中的设置内容面板 - 始终显示 */
.modal .settings-content {
    display: block !important;                 /* 模态框中始终显示 */
}

/* ----------------------------------------------------------------
 * 6.2 规则行组件 (Rule Row Component)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 规则行用于动态添加/删除的配置规则，
 * 如豆瓣订阅规则、TG搜索规则等。
 * 采用卡片式设计，带删除按钮和可选的动画效果。
 */

/* --- 6.2.1 规则行基础样式 --- */
/* UI优化: 精致紧凑的规则行 */
.rule-row {
    /* 尺寸与间距 */
    padding: 16px;                            /* 精致内边距 */
    margin-bottom: 12px;                       /* 规则之间的间距 - 更紧凑 */
    
    /* 外观 */
    background-color: var(--bg-color-inset-secondary); /* 子卡片背景 */
    border: 1px solid rgba(255, 255, 255, 0.12); /* 边框 - 深色模式 */
    border-radius: var(--border-radius-md);    /* 圆角 */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); /* 精致阴影 */
    
    /* 交互 */
    /* [性能优化] 显式指定过渡属性，避免 transition: all */
    transition: border-color var(--transition-speed) ease;
}

/* 浅色模式下的规则行 */
html[data-theme="light"] .rule-row {
    border-color: rgba(0, 0, 0, 0.08);         /* 浅色边框 */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.03); /* 精致阴影 */
}

/* --- 6.2.2 规则行特殊效果：偶数行辉光 --- */
/* 功能说明:
 * 为偶数规则行添加橙色边框，
 * 帮助用户快速区分不同的规则。
 * [性能优化] 移除无限动画，改为静态边框
 */
.rule-row:nth-child(even) {
    border-color: var(--warning-color);        /* 橙色边框 */
    /* animation: pulse-amber-glow 3s ease-in-out infinite; [性能优化] 移除无限动画 */
}

/* --- 6.2.3 规则名称输入框 --- */
.rule-row input[name="name"] {
    color: var(--warning-color);               /* 橙色文字 - 突出显示 */
    font-weight: 500;                          /* 中等字重 */
    background-color: var(--bg-color-inset);   /* 内嵌背景 */
    border-color: var(--border-color);         /* 标准边框 */
}

/* --- 6.2.4 规则头部区域 --- */

.rule-header {
    display: flex;                             /* flex布局 */
    justify-content: space-between;            /* 左右两端对齐 */
    align-items: center;                       /* 垂直居中 */
    margin-bottom: 15px;                       /* 与表单内容的间距 */
}

/* 规则标题 */
.rule-header .rule-header-title {
    margin: 0;                                 /* 移除默认margin */
    color: var(--secondary-color);             /* 绿色文字 */
    font-size: 1.1rem;                         /* 字号 */
    font-weight: 500;                          /* 字重 */
}

/* --- 6.2.5 删除规则按钮 --- */
/* 功能说明:
 * 圆形的删除按钮，悬浮时旋转90度提供视觉反馈。
 */

.remove-row-btn {
    width: 32px;                               /* 宽度 */
    height: 32px;                              /* 高度 */
    padding: 0;                                /* 移除内边距 */
    min-width: 32px;                           /* 最小宽度 - 覆盖.btn的默认值 */
    border-radius: 50%;                        /* 完全圆形 */
}

/* 悬浮效果: 旋转90度 */
.remove-row-btn:hover {
    transform: rotate(90deg);                  /* 旋转动画 */
}

/* ----------------------------------------------------------------
 * 6.3 教程/说明模块 (Description Module)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 教程模块用于显示功能说明、使用指南等信息。
 * 采用淡蓝色背景，与普通内容形成视觉区分。
 */

.description-module-loaded {
    /* 外观 */
    background-color: var(--tutorial-bg-color);    /* 淡蓝色背景 */
    border: 1px solid var(--tutorial-border-color); /* 蓝色边框 */
    border-left: 3px solid var(--primary-color);   /* 左侧彩色竖线 */
    border-radius: var(--border-radius-md);        /* 圆角 */
    
    /* 尺寸与间距 */
    margin-top: -10px;                             /* 顶部间距调整 */
    margin-bottom: 12px;                           /* 底部间距 - 更紧凑 */
    padding: 16px;                                 /* 内边距 - 更紧凑 */
    
    /* 文字 */
    line-height: 1.6;                              /* 舒适的行高 */
}

/* 模块内的标题 */
.description-module-loaded h3 {
    margin-top: 0;                                 /* 移除顶部margin */
}

/* 模块内的段落和列表 */
.description-module-loaded p,
.description-module-loaded ul,
.description-module-loaded ol {
    margin-bottom: 10px;                           /* 元素之间的间距 */
}

/* 最后一个元素移除底部间距 */
.description-module-loaded ul:last-child,
.description-module-loaded ol:last-child,
.description-module-loaded p:last-child {
    margin-bottom: 0;
}

/* 列表项间距 */
.description-module-loaded li {
    margin-bottom: 5px;                            /* 列表项之间的间距 */
}

/* ----------------------------------------------------------------
 * 6.4 设置页面表单优化
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 设置页面中的表单组件需要一些特殊的间距调整。
 */
/* UI优化: 精致紧凑的表单间距 */
.settings-main .form-group {
    margin-bottom: 12px;                           /* 表单组间距 - 更紧凑 */
}

.settings-main .form-group label,
.settings-main .form-grid-item label {
    gap: 0.3rem;                                   /* 标签内元素间距 */
    margin-bottom: 6px;                            /* 标签与输入框间距 - 更紧凑 */
}

/* --- 6.4.1 提示图标 --- */
/* 功能说明: 带有悬浮提示的信息图标 */

.tooltip-icon {
    color: var(--text-color-muted);                /* 次要文字颜色 */
    cursor: help;                                  /* 帮助光标 */
}

.tooltip-icon .lucide {
    width: 14px;                                   /* 图标宽度 */
    height: 14px;                                  /* 图标高度 */
}

/* --- 6.4.2 设置页面复选框组 --- */

.settings-main .form-group-checkbox {
    gap: 10px;                                     /* 复选框与标签间距 */
    padding: 8px;                                  /* 内边距 */
    border-radius: var(--border-radius-md);        /* 圆角 */
}

/* --- 6.4.3 AI解析策略页面专用样式 --- */

/* 功能说明: 解析器配置卡片 */
.parser-config-card {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.parser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.parser-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

/* 功能说明: 配置说明信息框 - 带左侧彩色竖线 */
.section-description,
.info-box {
    background: var(--bg-color);
    border-left: 3px solid var(--primary-color);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
}

.info-box ul {
    margin: var(--spacing-sm) 0 0 var(--spacing-md);
    padding: 0;
}

.info-box li {
    margin: var(--spacing-xs) 0;
}

/* ----------------------------------------------------------------
 * 6.5 主开关容器组件 (Master Switch Container)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 主开关容器用于功能模块的总开关，
 * 采用"主动的控制面板"设计，提供清晰的视觉反馈。
 * 未选中时使用虚线边框，选中时变为实线边框并添加辉光效果。
*/

/* --- 6.5.1 主开关容器基础样式 --- */

.master-switch-container {
    /* 外观 - 默认状态(未选中) */
    background-color: var(--bg-color-inset);       /* 内嵌背景色 */
    border: 2px dashed var(--input-border-color);  /* 虚线边框 - 表示未激活 */
    border-radius: var(--border-radius-md);        /* 圆角 */
    
    /* 尺寸与间距 */
    padding: 12px 18px;                            /* 内边距 */
    margin-bottom: 25px;                           /* 与下方内容的间距 */
    
    /* 交互 */
    cursor: pointer;                               /* 整个容器可点击 */
    transition: background-color var(--transition-speed), 
                border-color var(--transition-speed), 
                box-shadow var(--transition-speed); /* 平滑过渡所有属性 */
}

/* 悬浮状态 */
.master-switch-container:hover {
    border-color: var(--primary-color-hover);      /* 边框变为高亮紫色 */
    background-color: var(--card-bg-hover);        /* 背景变亮 */
}

/* --- 6.5.2 选中状态 (深色模式) --- */
/* 功能说明:
 * 使用CSS :has() 选择器，当内部复选框被勾选时，
 * 整个容器的样式自动改变，提供强烈的视觉反馈。
*/

.master-switch-container:has(input:checked) {
    background-color: rgba(126, 34, 206, 0.1);     /* 浅紫色背景 */
    border-color: var(--primary-color);            /* 实线紫色边框 */
    border-style: solid;                           /* 改为实线 */
    box-shadow: 0 0 10px rgba(126, 34, 206, 0.2);  /* 紫色辉光效果 */
}

/* --- 6.5.3 选中状态 (浅色模式) --- */

html[data-theme="light"] .master-switch-container:has(input:checked) {
    background-color: #f5f3ff;                     /* 极浅紫色背景 */
    border-color: #a78bfa;                         /* 浅紫色边框 */
    box-shadow: 0 0 10px rgba(126, 34, 206, 0.1);  /* 柔和辉光 */
}

/* --- 6.5.4 容器内的标签 --- */

.master-switch-container label {
    display: flex;                                 /* flex布局 */
    align-items: center;                           /* 垂直居中 */
    gap: 10px;                                     /* 复选框与文字的间距 */
    margin-bottom: 0;                              /* 移除底部margin */
    color: var(--text-color);                      /* 主文字颜色 */
    cursor: pointer;                               /* 可点击 */
    font-size: 0.95rem;                            /* 字号 */
}

/* 标签内的强调文本 */
.master-switch-container label strong {
    font-weight: 500;                              /* 中等字重 */
}

/* --- 6.5.5 选中时的标签样式 --- */

.master-switch-container:has(input:checked) label {
    color: var(--primary-color);                   /* 紫色文字 */
    font-weight: 500;                              /* 加粗 */
}

html[data-theme="light"] .master-switch-container:has(input:checked) label {
    font-weight: 500;                              /* 浅色模式下也加粗 */
}

/* [UI Refactor] 步骤 3.3: .config-subheading 现在是 <h3> */
.config-subheading {
    border: none;
    padding: 10px 15px;
    margin: 30px 0 20px 0;
    background-color: var(--bg-color-subheading);
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--border-color-subheading-left);
    color: var(--text-color-subheading);
    font-size: 0.9rem;
    /* 保持原大小 */
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.rule-row .config-subheading {
    margin-top: 25px;
    margin-bottom: 15px;
}

.form-body>.config-subheading:first-child {
    margin-top: 0;
}

/* [库黑名单] 配置区块容器 - 明显分块 */
.config-section {
    background-color: var(--bg-color-inset-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px; /* 增加内边距，更宽松 */
    margin-bottom: var(--spacing-xl);
}

.config-section:last-of-type {
    margin-bottom: var(--spacing-md);
}

/* [库黑名单] 配置区块标题 - 大标题 */
.config-section .config-subheading {
    margin-top: 0;
    margin-bottom: 15px;
    padding: 0 0 10px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color); /* 视觉分隔线 */
    font-size: 1rem; /* 稍微调小字号，更精致 */
    font-weight: 600;
    color: var(--text-color-subheading);
    letter-spacing: 0.3px;
}

/* [库黑名单] 区块说明文字 - 灰色小字，与标题间距小 */
.config-block-description {
    font-size: 0.85rem;
    color: var(--text-color-muted);
    line-height: 1.6;
    margin: 0 0 25px 0;
    padding: 10px 15px;
    background-color: var(--bg-color-table-row-even); /* 极淡的背景色 */
    border-left: 3px solid var(--info-color); /* 左侧强调线 */
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* [库黑名单] 全宽按钮 */
.btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* [库黑名单] 配置项解释文字 - 明显的从属关系 */
.config-section .help-text {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
    margin-left: var(--spacing-lg);
    opacity: 0.85;
}

/* [库黑名单] 配置区块内的表单组 - 清晰分隔 */
.config-section .form-group-horizontal {
    margin-bottom: var(--spacing-xl);
}

.config-section .form-group-horizontal:last-child {
    margin-bottom: 0;
}

/* [库黑名单] 配置区块内的label - 强化显示 */
.config-section .form-group-horizontal > label {
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
}

.settings-main .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

/* [UI Refactor] 步骤 3.D: 删除 .button-link-add (已被 .btn .btn-info 替换) */

.conditional-field {
    display: none;
}

.input-wrapper {
    width: 100%;
    position: relative
}

.toggle-vis {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: 0 0;
    border: none;
    cursor: pointer;
    color: var(--text-color-muted);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.toggle-vis:hover {
    background-color: var(--border-color);
    color: var(--text-color)
}

html[data-theme=light] .toggle-vis:hover {
    background-color: var(--bg-color-inset);
    color: var(--text-color)
}

.toggle-vis .lucide {
    width: 16px;
    height: 16px
}

/* ================================================= */
/* =========   首页仪表盘专属样式 (V4 修正)    ========= */
/* ================================================= */
/* UI优化: 精致紧凑的首页布局 */
.main-grid {
    display: grid;
    grid-template-columns: 3fr 1.5fr;
    gap: 16px;                                  /* 精致间距 */
    align-items: flex-start;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;                                  /* 精致间距 */
}

.right-column .card {
    margin-bottom: 0;
}

.add-form {
    display: flex;
    margin-top: 16px;                           /* 精致上边距 */
}

.add-form .form-control {
    /* [UI Refactor] 步骤 3.D: 使新类生效 */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.add-form .btn {
    /* [UI Refactor] 步骤 3.D: 使新类生效 */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none;
}

/* UI优化: 精致紧凑的状态概览网格 */
.status-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;                                  /* 精致间距 */
}

/* UI优化: 精致紧凑的状态项 */
.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;                                   /* 精致间距 */
    padding: 12px 10px;                         /* 精致内边距 */
    background-color: var(--bg-color-inset-secondary);
    border-radius: var(--border-radius-md);
    text-align: center;
}

/* [V3 新增] 浅色模式下状态项的文字颜色 */
html[data-theme="light"] .status-label {
    color: var(--text-color-muted);
}

html[data-theme="light"] .status-value {
    color: var(--text-color);
}

.status-icon {
    color: var(--text-color-muted);
}

.status-label {
    font-size: 0.8125rem;                       /* 精致字号 13px */
    font-weight: 500;
}

.status-value {
    font-weight: 700;                           /* 更明显的字重 */
    font-size: 0.9375rem;                       /* 精致字号 15px */
}

.status-value.ok {
    color: var(--success-color);
}

.status-value.error {
    color: var(--error-color);
}

.status-item.ok .status-icon {
    color: var(--success-color);
}

.status-item.error .status-icon {
    color: var(--error-color);
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 12px;                                  /* 精致间距 */
}

/* UI优化: 精致紧凑的动作组 */
.action-group {
    background-color: var(--bg-color-inset-secondary);
    padding: 12px;                              /* 精致内边距 */
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

/* [UI Refactor] 步骤 3.3: 统一子标题为 <h3> (替换 .action-group-title) */
.action-group-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: var(--text-color-subheading);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

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

/* [UI Refactor] 步骤 3.D: 删除 .action-btn-solid 和 .action-btn-outline (已被 .btn 替换) */
/* [UI Refactor] 步骤 3.D: 为新按钮应用小尺寸 */
.action-grid-solid .btn,
.action-grid-outline .btn {
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* ... (toggle-switch 样式保持不变) ... */
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0
}

.toggle-switch-label {
    font-size: .9rem;
    color: #ccc
}

html[data-theme=light] .toggle-switch-label {
    color: var(--text-color)
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: var(--transition-speed);
    border-radius: 24px
}

html[data-theme=light] .slider {
    background-color: #ccc
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: var(--transition-speed);
    border-radius: 50%
}

input:checked+.slider {
    background-color: var(--primary-color)
}

input:checked+.slider:before {
    transform: translateX(20px)
}

/* 订阅列表标题栏 (V3 修正) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    min-width: 0;  /* 允许内容收缩 */
}

/* 标题组容器：包含"订阅列表"和"归档剧"，分割线在中间 */
.header-title-group {
    display: flex;
    align-items: center;
    gap: 0;
}

/* 可切换的标题样式 */
.header-toggle-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    cursor: pointer;
    /* [性能优化] 显式指定过渡属性 */
    transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "订阅列表"标题 - 主标题，永远醒目 */
#subscription-list-title {
    font-size: 1.4rem;
    font-weight: 700;
    padding-right: 14px;           /* 缩小间距 */
    color: var(--text-color);
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* "订阅列表"标题后的分割线 - 使用与标题相同的颜色 */
#subscription-list-title::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 28px;
    background-color: var(--text-color);  /* 使用标题颜色 */
    opacity: 0.3;                         /* 稍微透明 */
    border-radius: 1px;
}

/* "归档剧"标题 - 副标题，和谐显眼 */
#archived-shows-title {
    font-size: 1rem;               /* 适中大小 */
    font-weight: 400;              /* 正常字重 */
    padding-left: 14px;            /* 对称间距 */
    color: #ef4444;                /* 柔和的红色 */
    opacity: 0.6;                  /* 适度弱化，但仍清晰 */
    cursor: pointer;
    /* [性能优化] 显式指定过渡属性 */
    transition: opacity 0.25s ease, color 0.25s ease;
    align-self: flex-end;          /* 底部对齐 */
    letter-spacing: 0.02em;        /* 轻微字间距，更精致 */
}

/* 归档剧激活状态 - 完全清晰 */
#archived-shows-title.active {
    opacity: 1;                    /* 完全清晰 */
    color: #dc2626;                /* 更深的红色 */
    font-weight: 500;              /* 稍微加粗 */
}

/* 订阅列表悬停效果 - 轻微变化 */
#subscription-list-title:hover {
    opacity: 0.85;
}

/* 归档剧悬停效果 - 平滑过渡 */
#archived-shows-title:not(.active):hover {
    opacity: 0.8;
    transform: translateY(-1px);   /* 轻微上移 */
}

.controls-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-basis: 40%;
    max-width: 500px;
    min-width: 280px;  /* 减小最小宽度以适应小屏幕设备 */
}

/* 控制行切换动画 */
#subscription-controls,
#archived-controls {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 列表容器切换动画 */
#shows-list-container {
    animation: fadeIn 0.3s ease-in-out;
}

.controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.category-tabs {
    display: flex;
    background-color: var(--bg-color-inset);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

/* [UI Refactor] 步骤 3.D: 为 .category-tab 添加 .btn 基础样式 */
.category-tab {
    padding: 8px 16px;
    font-size: 14px;
    background-color: transparent;
    border: none;
    color: var(--text-color-subheading);
    box-shadow: none;
    border-radius: 0;
    flex-shrink: 0;
    /* [UI Refactor] 合并 .btn 的基础属性 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 500;
    /* [性能优化] 显式指定过渡属性 */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    text-decoration: none;
}

.category-tab.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

/* 订阅排序下拉框 */
.subscription-sort-select {
    padding-top: 8px;                          /* 垂直内边距微调 */
    padding-bottom: 8px;                       /* 与分类标签对齐 */
    font-size: 14px;                           /* 字号 */
    flex-shrink: 0;                            /* 防止收缩 */
    width: auto;                               /* 自适应宽度 */
}

/* 全宽过滤输入框 */
.filter-input-full-width {
    width: 100%;                               /* 占满容器宽度 */
    padding: 8px 12px;                         /* 内边距 */
    font-size: 0.85rem;                        /* 字号 */
}

/* ----------------------------------------------------------------
 * 7.3 媒体卡片组件 (Media Card Component)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 媒体卡片用于显示订阅的电视剧/电影，
 * 采用网格布局自动排列，支持响应式调整。
 * 卡片包含海报、标题、状态指示等信息。
 */

/* --- 7.3.1 媒体卡片网格容器 --- */
.shows-grid {
    display: grid;                             /* 网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 自动填充，最小180px */
    gap: 25px;                                 /* 卡片之间的间距 */
    padding-top: 10px;                         /* 顶部留白 */
    width: 100%;                               /* 占满容器宽度 */
    max-width: 100%;                           /* 不超过容器宽度 */
    box-sizing: border-box;                    /* 包含padding在宽度内 */
    /* 强制Grid列遵守容器宽度，不被内容撑开 */
    overflow: hidden;                          /* 隐藏溢出内容 */
    /* [性能优化] 开启内容可见性优化，跳过屏幕外元素的渲染 */
    content-visibility: auto;
    contain-intrinsic-size: 1000px;            /* 估算高度，避免滚动条抖动 */
}

/* 隐藏的卡片（用于过滤） */
.show-card.hidden {
    display: none;
}

/* --- 7.3.2 媒体卡片基础样式 --- */
/* UI优化: 精致的悬浮效果 */
.show-card {
    position: relative;                        /* 相对定位，为悬浮按钮提供定位参考 */
    background-color: transparent;             /* 透明背景 */
    border-radius: var(--border-radius-md);    /* 圆角 */
    border: none;                              /* 无边框 */
    /* [性能优化] 移除 all 过渡，改为特定属性 */
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;                           /* 鼠标指针 */
    min-width: 0;                              /* 允许内容收缩 */
    overflow: hidden;                          /* 隐藏溢出内容 */
    /* [性能优化] 提示浏览器该元素会发生变换，启用硬件加速图层 */
    will-change: transform;
}

/* 悬浮效果：卡片上浮 - 精致不夸张 */
.show-card:hover {
    transform: translateY(-4px);               /* 上浮4px */
}

/* --- 7.3.3 海报容器 --- */
/* 功能说明: 
 * 海报容器使用2:3宽高比（标准电影海报比例）。
 * 顶部边框用于状态指示（缺失、洗版中、已完成）。
 */
/* UI优化: 精致的阴影效果 */
.show-card-poster-wrapper {
    position: relative;                        /* 相对定位 */
    aspect-ratio: 2 / 3;                       /* 2:3宽高比 */
    background-color: var(--bg-color-code);    /* 占位背景色 - 深色模式 */
    border-radius: var(--border-radius-md);    /* 圆角 */
    overflow: hidden;                          /* 裁剪超出部分 */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* 精致阴影 */
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), 
                opacity var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), 
                border-color var(--transition-speed) ease; /* 优化性能：移除box-shadow过渡 */
    border-top: 3px solid transparent;         /* 顶部边框 */
}

/* 海报悬浮效果 - 微妙 */
.show-card:hover .show-card-poster-wrapper {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 稍深阴影 */
}

/* 浅色模式下的海报容器 */
html[data-theme="light"] .show-card-poster-wrapper {
    background-color: #e5e7eb;                 /* 占位背景色 - 浅色模式 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 更柔和的阴影 */
}

/* 悬浮时增强阴影效果 */
.show-card:hover .show-card-poster-wrapper {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 深色模式 - 优化性能：减小模糊半径 */
}

html[data-theme="light"] .show-card:hover .show-card-poster-wrapper {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 浅色模式 - 优化性能：减小模糊半径 */
}

/* --- 7.3.4 海报图片 --- */
.show-card-poster {
    width: 100%;                               /* 占满容器宽度 */
    height: 100%;                              /* 占满容器高度 */
    object-fit: cover;                         /* 裁剪以填满容器 */
    display: block;                            /* 块级元素 */
}

/* --- 7.3.5 卡片悬浮操作按钮 --- */
/* 功能说明: 
 * 鼠标悬浮时显示的操作按钮（刷新、搜索、删除等）。
 * 采用半透明圆形按钮，带毛玻璃效果。
 */
.show-card-actions {
    display: flex;                             /* flex布局 */
    justify-content: flex-end;                 /* 右对齐 */
    gap: var(--spacing-sm);                    /* 按钮间距 */
    position: absolute;                        /* 绝对定位 */
    top: var(--spacing-sm);                    /* 距离顶部 */
    right: var(--spacing-sm);                  /* 距离右侧 */
    opacity: 0;                                /* 默认隐藏 */
    transition: opacity var(--transition-speed); /* 平滑过渡 */
}

/* 悬浮时显示按钮 */
.show-card:hover .show-card-actions {
    opacity: 1;                                /* 显示 */
}

/* 卡片悬浮按钮样式覆盖 */
.show-card-actions .btn {
    width: 32px;                               /* 宽度 */
    height: 32px;                              /* 高度 */
    min-width: 32px;                           /* 最小宽度 */
    border-radius: 50%;                        /* 圆形 */
    padding: 0;                                /* 移除内边距 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);  /* 阴影 */
    background-color: rgba(30, 30, 30, 0.95);  /* 纯色深色背景 */
}

/* 浅色模式下的按钮 */
html[data-theme="light"] .show-card-actions .btn {
    background-color: rgba(255, 255, 255, 0.95); /* 纯色浅色背景 */
    color: #1f2937;                            /* 深色文字 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 柔和阴影 */
}

/* 悬浮时放大 */
.show-card-actions .btn:hover {
    transform: scale(1.1);                     /* 放大10% */
}

/* 按钮内的图标尺寸 */
.show-card-actions .btn .lucide {
    width: 16px;
    height: 16px;
}

/* 危险操作按钮（删除）*/
.show-card-actions .btn-danger {
    background-color: rgba(229, 62, 62, 0.8);  /* 半透明红色 */
    color: white;                              /* 白色文字 */
}

html[data-theme="light"] .show-card-actions .btn-danger {
    background-color: rgba(229, 62, 62, 0.8);  /* 两种模式下保持一致 */
    color: white;
}

/* --- 7.3.6 卡片信息区域 --- */
.show-card-info {
    padding-top: 10px;                         /* 与海报的间距 */
    text-align: left;                          /* 左对齐 */
    min-width: 0;                              /* 允许内容收缩 */
    width: 100%;                               /* 占满卡片宽度 */
    overflow: hidden;                          /* 隐藏溢出内容 */
}

/* 卡片标题 */
.show-card-title {
    font-size: 0.9rem;                         /* 字号 */
    font-weight: 500;                          /* 中等字重 */
    white-space: nowrap;                       /* 不换行 */
    overflow: hidden;                          /* 隐藏溢出 */
    text-overflow: ellipsis;                   /* 显示省略号 */
    min-width: 0;                              /* 打破 min-content 宽度计算，允许Grid收缩 */
}

/* 年份信息 */
.show-card-year {
    font-size: 0.8rem;                         /* 较小字号 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
    min-width: 0;                              /* 确保可以收缩 */
}

/* 底部信息行（播出日期、进度等） */
.show-card-bottom-info {
    display: flex;                             /* flex布局 */
    justify-content: space-between;            /* 两端对齐 */
    align-items: center;                       /* 垂直居中 */
    font-size: 0.75rem;                        /* 小字号 */
    margin-top: 6px;                           /* 顶部间距 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
    gap: 8px;                                  /* 两个信息项之间的间距 */
    min-width: 0;                              /* 允许子元素收缩 */
}

/* 底部信息项 */
.bottom-info-item {
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 4px;                                  /* 图标与文字间距 */
    min-width: 0;                              /* 允许内容收缩 */
    flex-shrink: 1;                            /* 允许收缩 */
    overflow: hidden;                          /* 隐藏溢出 */
    max-width: 100%;                           /* 不超过父容器 */
}

.bottom-info-item .lucide {
    width: 12px;                               /* 小图标宽度 */
    height: 12px;                              /* 小图标高度 */
    flex-shrink: 0;                            /* 图标不收缩 */
}

/* 底部信息项中的文本包裹 */
.bottom-info-item > span {
    min-width: 0;                              /* 允许内容收缩 */
    overflow: hidden;                          /* 隐藏溢出 */
    white-space: nowrap;                       /* 不换行 */
    text-overflow: ellipsis;                   /* 文本溢出显示省略号 */
    flex-shrink: 1;                            /* 允许收缩 */
}

/* 播出日期样式 */
.bottom-info-air-date {
    color: var(--warning-color);               /* 橙色 - 表示即将播出 */
}

/* 进度信息样式 */
.bottom-info-progress {
    color: var(--success-color);               /* 绿色 - 表示有进度 */
}

/* 已完结标记 */
.bottom-info-ended {
    color: var(--success-color);               /* 绿色 */
    font-weight: 500;                          /* 加粗 */
}

/* --- 7.3.7 卡片状态指示（顶部辉光动画） --- */
/* 功能说明: 
 * 通过顶部边框的辉光动画显示媒体状态。
 * - 红色辉光：有缺失集数
 * - 蓝色辉光：洗版中
 * - 绿色边框：已完成/在库中
 */

/* 状态：缺失集数（静态红色高亮效果） */
.show-card.status-missing .show-card-poster-wrapper {
    border-top-color: rgba(229, 62, 62, 0.85);         /* 红色顶部边框 */
    box-shadow: 0 -1px 8px rgba(229, 62, 62, 0.35);    /* 轻微向上的红色阴影，高亮但不使用动画 */
}

/* 状态：洗版中（静态蓝色高亮效果） */
.show-card.status-washing .show-card-poster-wrapper {
    border-top-color: rgba(49, 130, 206, 0.85);        /* 蓝色顶部边框 */
    box-shadow: 0 -1px 8px rgba(49, 130, 206, 0.35);   /* 轻微向上的蓝色阴影 */
}

/* 状态：在库中/已完成（绿色静态边框） */
.show-card.status-in_library .show-card-poster-wrapper,
.show-card.status-completed .show-card-poster-wrapper {
    border-top-color: var(--success-color);    /* 绿色边框 */
    animation: none;                           /* 无动画 */
}

/* 当任意模态框打开时，弱化所有订阅卡片的阴影和动画，以降低 GPU 开销 */
html.modal-open .show-card-poster-wrapper {
    /* 关闭可能存在的动画（防御性写法，当前状态下已无动画） */
    animation: none !important;
    /* 使用较轻的统一阴影，避免与全屏遮罩叠加产生过高合成成本 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}


/* ----------------------------------------------------------------
 * 7.4 数据统计组件 (Statistics Bar)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 显示系统核心数据的统计条，如订阅总数、缺失集数等。
 * 使用图标+数值+标签的布局方式。
 */
/* UI优化: 精致紧凑的统计条 */
.stats-bar {
    padding: 12px 20px;                         /* 精致内边距 */
}

/* 统计项网格 */
.stats-bar .stats-grid {
    display: grid;                             /* 网格布局 */
    grid-template-columns: repeat(5, 1fr);     /* 5列等宽 */
    gap: 16px;                                 /* 精致间距 */
}

/* 单个统计项 */
.stats-bar .stat-item {
    text-align: left;                          /* 左对齐 */
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 10px;                                 /* 精致图标间距 */
}

/* 统计项图标 */
.stats-bar .stat-item .lucide {
    width: 24px;                               /* 精致图标宽度 */
    height: 24px;                              /* 精致图标高度 */
    color: var(--primary-color);               /* 品牌紫色 */
    flex-shrink: 0;                            /* 不收缩 */
}

/* 统计信息容器 */
.stats-bar .stat-info {
    display: flex;                             /* flex布局 */
    flex-direction: column;                    /* 垂直排列 */
}

/* 统计数值 */
.stats-bar .stat-value {
    font-size: 1.125rem;                       /* 精致字号 18px */
    font-weight: 700;                          /* 粗体 */
    color: var(--text-color);                  /* 主文字颜色 */
    line-height: 1.3;                          /* 舒适的行高 */
}

/* 统计标签 */
.stats-bar .stat-label {
    font-size: 0.8125rem;                      /* 精致字号 13px */
    color: var(--text-color-muted);            /* 次要文字颜色 */
}

/* ----------------------------------------------------------------
 * 7.5 系统事件组件 (System Events)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 显示系统事件时间线，如订阅更新、搜索完成等。
 * 采用列表形式，每个事件包含图标、消息和时间。
 */

/* 事件列表容器 */
.system-events-list {
    max-height: 250px;                         /* 最大高度 */
    overflow-y: auto;                          /* 垂直滚动 */
}

/* 单个事件项 */
.system-event {
    display: flex;                             /* flex布局 */
    gap: 10px;                                 /* 元素间距 */
    font-size: 0.85rem;                        /* 字号 */
    padding: 8px 5px;                          /* 内边距 */
    border-bottom: 1px solid var(--border-color); /* 底部分隔线 */
}

/* 最后一个事件移除底部边框 */
.system-event:last-child {
    border-bottom: none;
}

/* 事件图标 */
.system-event .lucide {
    width: 14px;                               /* 图标宽度 */
    height: 14px;                              /* 图标高度 */
    flex-shrink: 0;                            /* 不收缩 */
    margin-top: 2px;                           /* 顶部微调对齐 */
}

/* 事件图标颜色变体 */
.event-icon-success {
    color: var(--success-color);               /* 成功 - 绿色 */
}

.event-icon-info {
    color: var(--info-color);                  /* 信息 - 蓝色 */
}

.event-icon-warning {
    color: var(--warning-color);               /* 警告 - 橙色 */
}

/* 事件消息 */
.event-message {
    flex-grow: 1;                              /* 占据剩余空间 */
}

/* 事件时间 */
.event-time {
    color: var(--text-color-muted);            /* 次要文字颜色 */
    font-size: 0.75rem;                        /* 小字号 */
    white-space: nowrap;                       /* 不换行 */
}

/* ----------------------------------------------------------------
 * 7.6 媒体详情弹窗组件 (Media Details Modal)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 点击媒体卡片后显示的详情弹窗，
 * 包含海报、标题、剧集矩阵、操作按钮等完整信息。
 */

/* 详情内容布局 */
/* UI优化: 精致紧凑的详情弹窗布局 */
#card-details-content {
    display: grid;                             /* 网格布局 */
    grid-template-columns: 200px 1fr;          /* 海报200px，信息区自适应 */
    gap: 20px;                                 /* 精致间距 */
}

/* 详情海报 */
#card-details-content .detail-poster {
    width: 100%;                               /* 占满容器宽度 */
    border-radius: var(--border-radius-md);    /* 圆角 */
}

/* 详情海报容器 */
.detail-poster-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;                                 /* 海报与引导区间距 - 增加距离 */
}

/* 海报下方的使用引导 */
.detail-poster-guide {
    background-color: var(--bg-color-inset-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;                        /* 精致内边距 */
    display: flex;
    gap: 8px;                                  /* 图标与内容间距 */
    align-items: flex-start;
}

.detail-poster-guide .guide-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--info-color);                  /* 信息色 */
    margin-top: 1px;                          /* 微调对齐 */
}

.detail-poster-guide .guide-icon .lucide {
    width: 16px;
    height: 16px;
}

.detail-poster-guide .guide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;                                  /* 文本行间距 */
}

.detail-poster-guide .guide-title {
    font-size: 0.8125rem;                      /* 13px */
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2px;
}

.detail-poster-guide .guide-text {
    font-size: 0.75rem;                        /* 12px */
    color: var(--text-color-muted);
    line-height: 1.4;
}

/* 详情信息区域的标题 */
#card-details-content .detail-info h3 {
    margin-top: 0;                             /* 移除顶部margin */
    margin-bottom: 12px;                       /* 底部间距 */
}

/* 操作按钮网格 */
#card-details-content .action-grid {
    display: grid;                             /* 网格布局 */
    grid-template-columns: repeat(3, 1fr);     /* 3列等宽 */
    gap: 10px;                                 /* 按钮间距 */
    margin-bottom: 16px;                       /* 精致底部间距 */
}

/* 详情弹窗内的按钮尺寸 */
#card-details-content .action-grid .btn {
    width: 100%;                               /* 占满网格单元 */
    padding: 8px 12px;                         /* 精致内边距 */
}

/* 浅色模式下详情弹窗按钮的特殊样式 */
/* 功能说明: 在浅色模式下，次要按钮使用更内敛的样式 */
html[data-theme=light] #card-details-content .action-grid .btn-secondary {
    background-color: var(--bg-color-inset);   /* 浅灰背景 */
    color: var(--text-color-subheading);       /* 次要文字色 */
    border-color: var(--border-color);         /* 边框色 */
}

html[data-theme=light] #card-details-content .action-grid .btn-secondary:hover {
    background-color: var(--bg-color);         /* 悬浮时稍深 */
}

/* 浅色模式下主按钮使用浅紫色背景 */
html[data-theme=light] #card-details-content .action-grid .btn-primary {
    background-color: #f5f3ff;                 /* 浅紫色背景 */
    color: var(--primary-color);               /* 紫色文字 */
    font-weight: 600;                          /* 加粗 */
    border: 1px solid #ddd6fe;                 /* 浅紫色边框 */
}

html[data-theme=light] #card-details-content .action-grid .btn-primary:hover {
    background-color: #ede9fe;                 /* 悬浮时更深的紫色 */
    color: var(--primary-color-hover);         /* 文字变亮 */
    border-color: #c4b5fd;                     /* 边框变深 */
}

/* ----------------------------------------------------------------
 * 7.7 剧集矩阵组件 (Episode Matrix)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 以网格形式显示所有剧集的状态（在库/缺失/未播出）。
 * 使用不同的颜色和样式区分剧集状态。
 */

/* 剧集矩阵容器 */
.episode-matrix {
    margin-top: 10px;                          /* 顶部间距 */
    padding: 10px;                             /* 内边距 */
    background-color: var(--bg-color-inset);   /* 背景色，确保可见 */
    border-radius: var(--border-radius-md);    /* 圆角 */
}

/* 单季区块 */
.season-block {
    margin-bottom: 15px;                       /* 季之间的间距 */
}

/* 季标题 */
.season-title {
    font-weight: 700;                          /* 粗体 */
    font-size: 0.9rem;                         /* 字号 */
    margin-bottom: 8px;                        /* 与剧集网格的间距 */
}

/* 剧集网格 */
.episodes-grid {
    display: grid;                             /* 网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); /* 自动填充，最小45px */
    gap: 5px;                                  /* 剧集标签间距 */
}

/* --- 7.7.1 剧集标签基础样式 --- */
.episode-tag {
    /* 布局 */
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    justify-content: center;                   /* 水平居中 */
    
    /* 尺寸 */
    padding: 5px;                              /* 内边距 */
    
    /* 外观 */
    font-size: 0.75rem;                        /* 字号 */
    border-radius: var(--border-radius-sm);    /* 小圆角 */
    border: 1px solid var(--border-color);     /* 边框 */
    background-color: var(--bg-color);         /* 默认背景色 */
    color: var(--text-color);                  /* 默认文字色 */
    
    /* 交互 */
    cursor: help;                              /* 帮助光标，表示有提示 */
    position: relative;                        /* 相对定位，为tooltip提供参考 */
    /* [性能优化] 显式指定过渡属性 */
    transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

html[data-theme=light] .episode-tag {
    border-color: var(--border-color);
    background-color: #f3f4f6;                 /* 浅色模式默认背景 */
}

/* --- 7.7.2 剧集状态变体 --- */

/* 状态：在库中 */
.episode-tag.in-library {
    background-color: var(--primary-color);    /* 紫色背景 */
    border-color: var(--primary-color-hover);  /* 更亮的紫色边框 */
    color: #fff;                               /* 白色文字 */
}

/* 状态：缺失 */
.episode-tag.missing {
    background-color: #555;                    /* 灰色背景 - 深色模式 */
}

html[data-theme=light] .episode-tag.missing {
    background-color: #e5e7eb;                 /* 浅灰背景 - 浅色模式 */
    color: #4b5563;                            /* 深灰文字 */
}

/* 状态：未播出 */
.episode-tag.not-aired {
    background-color: var(--bg-color-code);    /* 更深的背景 */
    color: #666;                               /* 灰色文字 */
}

html[data-theme=light] .episode-tag.not-aired {
    background-color: #f9fafb;                 /* 极浅灰背景 */
    color: #9ca3af;                            /* 中灰文字 */
}

/* --- [调整] 浅色主题对齐深色主题语义风格 --- */
/* 1) 已入库：沿用深色主题的主色实底 + 白字（保证一致的强提示） */
html[data-theme=light] .episode-tag.in-library {
    background-color: var(--primary-color);
    border-color: var(--primary-color-hover);
    color: #fff;
}

/* 2) 缺失：更深的中性灰底与正常边框，增强对比但保持中性语义 */
html[data-theme=light] .episode-tag.missing {
    background-color: #e5e7eb;                  /* 浅灰背景（较深） */
    color: #374151;                              /* 深灰文字 */
    border-color: var(--border-color);          /* 统一边框色 */
    font-weight: 600;                           /* 略加粗，强化可读性 */
}

/* 3) 未播出：更浅的灰底 + 虚线边框，和“缺失”拉开视觉层级 */
html[data-theme=light] .episode-tag.not-aired {
    background-color: var(--bg-color-inset);    /* 极浅灰背景 */
    color: var(--text-color-muted);             /* 次要文字色 */
    border-color: var(--border-color);
    border-style: dashed;                       /* 虚线边框表示“未到达/未生效” */
    font-weight: 500;
}

/* 状态：手动设置的大结局 */
.episode-tag.manual-finale {
    border-color: var(--warning-color);        /* 橙色边框 */
    box-shadow: 0 0 8px rgba(221, 107, 32, .7); /* 橙色辉光 - 深色模式 */
    color: var(--warning-color);               /* 橙色文字 */
    font-weight: 700;                          /* 粗体 */
}

html[data-theme=light] .episode-tag.manual-finale {
    border-color: var(--warning-color);
    box-shadow: 0 0 8px rgba(221, 107, 32, .3); /* 更柔和的辉光 - 浅色模式 */
    color: var(--warning-color);
}

/* --- 7.7.3 剧集标签悬浮提示 --- */
/* 功能说明: 鼠标悬浮时显示剧集详细信息（标题、播出日期等） */
/* UI优化: 修复白色模式下的文字可见性 */
.episode-tag .tooltip-text {
    visibility: hidden;                        /* 默认隐藏 */
    width: auto;                               /* 自动宽度 */
    min-width: 150px;                          /* 最小宽度 */
    max-width: 250px;                          /* 最大宽度 */
    background-color: var(--bg-color-code);    /* 深色背景 - 深色模式 */
    color: #fff;                               /* 白色文字 */
    text-align: center;                        /* 居中对齐 */
    border-radius: 6px;                        /* 圆角 */
    padding: 8px 10px;                         /* 精致内边距 */
    
    /* 定位 */
    position: absolute;                        /* 绝对定位 */
    z-index: 1001;                             /* 置于Modal之上 */
    bottom: 125%;                              /* 位于标签上方 */
    left: 50%;                                 /* 水平居中 */
    transform: translateX(-50%);               /* 居中对齐 */
    
    /* 动画 */
    opacity: 0;                                /* 初始透明 */
    transition: opacity 0.3s;                  /* 淡入淡出动画 */
    pointer-events: none;                      /* 不响应鼠标事件 */
    line-height: 1.4;                          /* 行高 */
    font-size: 0.8125rem;                      /* 精致字号 13px */
    white-space: pre-line;                     /* 保留换行符 */
}

/* 白色模式下的提示框 - 使用深色背景确保文字清晰 */
html[data-theme="light"] .episode-tag .tooltip-text {
    background-color: #1f2937;                 /* 深灰背景 */
    color: #fff;                                /* 白色文字 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 白色边框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 阴影 */
}

/* 悬浮时显示提示 */
.episode-tag:hover .tooltip-text {
    visibility: visible;                       /* 显示 */
    opacity: 1;                                /* 完全不透明 */
}

/* ----------------------------------------------------------------
 * 7.8 详情区块组件 (Detail Section)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 详情弹窗中的各个信息区块，如"搜索别名设置"、"最近任务"等。
 */
/* UI优化: 精致紧凑的详情区块 */
.detail-section {
    margin-top: 16px;                          /* 区块间距 - 更紧凑 */
    padding: 12px;                             /* 内边距 */
    border-top: 1px solid var(--border-color); /* 顶部分隔线 */
    background-color: var(--bg-color);         /* 背景色，确保可见 */
    border-radius: var(--border-radius-md);    /* 圆角 */
}

/* 区块标题 */
.detail-section-title {
    font-size: 0.9rem;                         /* 字号 */
    font-weight: 700;                          /* 粗体 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
    margin: 0 0 10px 0;                        /* 间距 */
    text-transform: uppercase;                 /* 大写 */
    letter-spacing: 0.5px;                     /* 字间距 */
}

/* 详情信息网格 */
.detail-info-grid {
    display: flex;                             /* flex布局 */
    flex-direction: column;                    /* 垂直排列 */
    gap: 8px;                                  /* 行间距 */
}

/* 详情信息行 */
.detail-info-row {
    display: flex;                             /* flex布局 */
    justify-content: space-between;            /* 两端对齐 */
    gap: 20px;                                 /* 列间距 */
}

/* 详情网格项 */
.detail-grid-item {
    display: flex;                             /* flex布局 */
    justify-content: flex-start;               /* 标签和值紧凑排列在一起 */
    align-items: center;                       /* 垂直居中 */
    font-size: 0.85rem;                        /* 字号 */
    padding: 4px 0;                            /* 垂直内边距 */
    flex-grow: 1;                              /* 等分空间 */
    flex-basis: 0;                             /* 基准值为0，完全由flex-grow控制 */
}

/* 详情项标签 */
.detail-grid-item .label {
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 6px;                                  /* 图标与文字间距 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
}

/* 详情项标签 */
.detail-grid-item .label {
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 6px;                                  /* 图标与文字间距 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
}

/* 详情项值 */
.detail-grid-item .value {
    font-weight: 700;                          /* 粗体 */
    color: var(--text-color);                  /* 主文字颜色 */
    text-align: left;                          /* 紧邻标签显示 */
    margin-left: 8px;                          /* 标签与数值间距 */
    white-space: nowrap;                       /* 保持单行 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 详情项图标 */
.detail-grid-item .lucide {
    width: 14px;                               /* 图标宽度 */
    height: 14px;                              /* 图标高度 */
}

/* ----------------------------------------------------------------
 * 7.9 右键菜单组件 (Context Menu)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 在媒体卡片上右键显示的快捷操作菜单，
 * 包含搜索、下载、删除等功能。
 */
/* UI优化: 修复白色模式下的文字可见性 */
.context-menu {
    position: absolute;                        /* 绝对定位 */
    z-index: 2000;                             /* 置于最顶层 */
    background-color: #2a2a2a;                 /* 深灰背景 - 深色模式 */
    border: 1px solid #444;                    /* 边框 */
    border-radius: var(--border-radius-md);    /* 中圆角 */
    padding: 8px;                              /* 内边距 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 阴影 */
    display: flex;                             /* flex布局 */
    flex-direction: column;                    /* 垂直排列 */
    gap: 4px;                                  /* 菜单项间距 */
}

/* 白色模式下的右键菜单 */
html[data-theme="light"] .context-menu {
    background-color: #ffffff;                /* 白色背景 */
    border: 1px solid #e5e7eb;                /* 浅灰边框 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
}

/* 菜单项按钮 */
.context-menu button {
    background: none;                          /* 无背景 */
    border: none;                              /* 无边框 */
    color: var(--text-color);                  /* 文字颜色 */
    padding: 8px 12px;                         /* 内边距 */
    text-align: left;                          /* 左对齐 */
    border-radius: 6px;                        /* 圆角 */
    cursor: pointer;                           /* 指针光标 */
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 8px;                                  /* 图标与文字间距 */
    font-size: 0.875rem;                       /* 精致字号 14px */
    white-space: nowrap;                       /* 不换行 */
    /* [性能优化] 显式指定过渡属性 */
    transition: background-color var(--transition-fast) ease;
}

/* 白色模式下的菜单项按钮 - 确保文字清晰可见 */
html[data-theme="light"] .context-menu button {
    color: #1f2937;                            /* 深色文字 */
}

/* 菜单项悬浮效果 */
.context-menu button:hover {
    background-color: var(--primary-color);    /* 紫色背景 */
    color: #fff;                               /* 白色文字 */
}

/* 菜单项图标 */
.context-menu .lucide {
    width: 16px;                               /* 图标宽度 */
    height: 16px;                              /* 图标高度 */
    flex-shrink: 0;                            /* 不收缩 */
}

/* 白色模式下菜单项图标颜色 */
html[data-theme="light"] .context-menu .lucide {
    color: #1f2937;                            /* 深色图标 */
}

html[data-theme="light"] .context-menu button:hover .lucide {
    color: #fff;                               /* 悬浮时白色图标 */
}

/* 菜单项信息提示样式（禁用状态） */
.context-menu button.context-menu-info {
    cursor: default;                           /* 默认光标 */
    opacity: 0.85;                             /* 半透明 */
    background-color: rgba(139, 92, 246, 0.15); /* 淡紫色背景 */
    color: var(--primary-color);               /* 紫色文字 */
}

.context-menu button.context-menu-info:hover {
    background-color: rgba(139, 92, 246, 0.15); /* 悬浮时保持淡紫色背景 */
    color: var(--primary-color);               /* 悬浮时保持紫色文字 */
}

html[data-theme="light"] .context-menu button.context-menu-info {
    background-color: rgba(139, 92, 246, 0.1); /* 浅色模式淡紫色背景 */
    color: #7c3aed;                            /* 浅色模式紫色文字 */
}

html[data-theme="light"] .context-menu button.context-menu-info:hover {
    background-color: rgba(139, 92, 246, 0.1); /* 悬浮时保持淡紫色背景 */
    color: #7c3aed;                            /* 悬浮时保持紫色文字 */
}

/* ----------------------------------------------------------------
 * 7.10 日志查看器组件 (Log Viewer)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 显示系统运行日志，支持按日志级别筛选和实时滚动。
 * 使用等宽字体以保证日志格式对齐。
 */

/* 日志查看器容器 */
.log-viewer {
    background-color: var(--bg-color-log);     /* 日志专用背景色 */
    color: var(--log-text-color);              /* 日志文本颜色 */
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace; /* 等宽字体 */
    font-size: 0.8rem;                         /* 字号 */
    padding: 15px;                             /* 内边距 */
    border-radius: var(--border-radius-md);    /* 圆角 */
    height: 300px;                             /* 固定高度 */
    overflow-y: auto;                          /* 垂直滚动 */
    white-space: pre-wrap;                     /* 保留空白和换行 */
    word-break: break-all;                     /* 长单词断行 */
    border: 1px solid var(--border-color);     /* 边框，浅色模式下更明显 */
}

/* [Header优化] 模态框中的日志查看器 - 使用flex布局填充剩余空间 */
#logs-modal .log-viewer {
    height: auto !important;                   /* 移除固定高度 */
    flex: 1;                                   /* 填充剩余空间 */
    min-height: 400px;                         /* 最小高度 */
    max-height: calc(90vh - 120px);            /* 最大高度（减去header和padding） */
}

/* 确保弹窗中的搜索框不会悬浮 */
#logs-modal .log-quickbar {
    position: relative !important;             /* 相对定位，不悬浮 */
    z-index: 1;                                /* 正常层级 */
    flex-shrink: 0;                            /* 不收缩 */
}

/* 卡片头部弹性布局 */
.card-header-flex {
    display: flex;                             /* flex布局 */
    justify-content: space-between;            /* 两端对齐 */
    align-items: center;                       /* 垂直居中 */
}

/* 日志控制栏 */
.log-controls {
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 15px;                                 /* 控件间距 */
    font-size: 0.85rem;                        /* 字号 */
}

/* 日志级别选择器 */
.log-controls .log-level-select {
    width: auto;                               /* 宽度自适应 */
    padding: 4px 8px;                          /* 内边距 */
    font-size: 0.8rem;                         /* 字号 */
}

/* --- 7.10.1 日志行组件 --- */

/* 日志行容器 - 单行布局 */
.log-line {
    padding: 2px 0;                            /* 垂直内边距 */
    display: flex;                             /* 单行 flex 布局 */
    flex-direction: row;
    align-items: baseline;
    gap: 8px;                                  /* 元素间距 */
    flex-wrap: wrap;                           /* 内容过长时允许自然换行 */
}

/* 时间戳 */
.log-timestamp {
    color: var(--log-text-timestamp);          /* 时间戳颜色（灰色） */
    white-space: nowrap;                       /* 不换行 */
    overflow: hidden;                          /* 隐藏溢出 */
    text-overflow: ellipsis;                   /* 超出部分显示省略号 */
}

/* 日志级别标签 */
.log-level {
    font-weight: 700;                          /* 粗体 */
    white-space: nowrap;                       /* 不换行 */
    overflow: hidden;                          /* 隐藏溢出 */
    text-overflow: ellipsis;                   /* 超出部分显示省略号 */
}

/* 模块名标签 */
.log-module {
    background-color: var(--border-color);     /* 深色模式：深灰背景 */
    color: #ddd;                               /* 浅灰文字 */
    padding: 0 6px;                            /* 水平内边距 */
    border-radius: 4px;                        /* 圆角 */
    font-size: 0.75rem;                        /* 小字号 */
    white-space: nowrap;                       /* 不换行 */
    overflow: hidden;                          /* 隐藏溢出 */
    text-overflow: ellipsis;                   /* 超出部分显示省略号 */
    box-sizing: border-box;                    /* 包含padding和border在宽度内 */
}

html[data-theme=light] .log-module {
    background-color: #e5e7eb;                 /* 浅色模式：浅灰背景 */
    color: #4b5563;                            /* 深灰文字 */
}

/* 日志消息 */
.log-message {
    min-width: 0;                              /* 允许收缩 */
    word-break: break-word;                    /* 允许换行 */
    flex: 1;
}


/* 追踪ID */
.log-trace {
    color: var(--text-color-muted);            /* 次要文字颜色 */
    font-size: 0.75rem;                        /* 小字号 */
    white-space: nowrap;                       /* 不换行 */
    cursor: pointer;                           /* 指针样式 */
}

/* 详情容器（当前默认不渲染，仅保留样式定义以兼容未来扩展） */
.log-detail-container {
    grid-column: 3 / -1;
}

/* --- 7.10.2 日志级别颜色 --- */

/* DEBUG级别 - 灰色 */
.log-line.level-debug .log-level {
    color: #888;
}

/* INFO级别 - 蓝色 */
.log-line.level-info .log-level {
    color: var(--info-color);
}

/* WARNING级别 - 橙色 */
.log-line.level-warning .log-level {
    color: var(--warning-color);
}

/* ERROR级别 - 红色 */
.log-line.level-error .log-level {
    color: var(--error-color);
}

/* CRITICAL级别 - 红色加粗，带背景高亮 */
.log-line.level-critical {
    color: var(--error-color);                 /* 红色文字 */
    font-weight: 700;                          /* 粗体 */
    background-color: rgba(229, 62, 62, 0.1);  /* 淡红色背景 */
}

/* 系统日志 - 绿色斜体 */
.log-line.log-system {
    color: var(--secondary-color);             /* 绿色 */
    font-style: italic;                        /* 斜体 */
    padding-left: 0;                           /* 无左边距 */
}


/* 任务事件特殊样式 */
.log-line.log-task-event {
    border-left: 3px solid var(--primary-color); /* 左边框 */
    padding-left: 10px;                         /* 增加左内边距 */
    background-color: rgba(59, 130, 246, 0.05); /* 浅蓝色背景 */
}

/* 日志详情展开功能 */
.log-detail-toggle {
    color: var(--primary-color);
    cursor: pointer;
    margin-left: 4px;
    user-select: none;
    transition: opacity 0.2s ease;
}

.log-detail-toggle:hover {
    opacity: 0.8;
}

.log-detail-container {
    margin-top: 4px;
    margin-left: 20px;
    padding: 8px;
    background-color: var(--card-bg-color);
    border-left: 2px solid var(--primary-color);
    border-radius: 4px;
    font-size: 0.85em;
}

.log-detail-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-detail-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4px;
    line-height: 1.5;
}

.log-detail-label {
    font-weight: bold;
    color: var(--primary-color);
    margin-right: 4px;
    flex-shrink: 0;
}

.log-detail-value {
    color: var(--text-color);
    word-break: break-word;
}

.log-detail-value code {
    background-color: var(--bg-color);
    padding: 2px 4px;
    border-radius: 2px;
    font-family: monospace;
    font-size: 0.9em;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .log-detail-container {
        margin-left: 10px;
        padding: 6px;
        font-size: 0.8em;
    }
    
    .log-detail-item {
        flex-direction: column;
    }
    
    .log-detail-label {
        margin-bottom: 2px;
    }
}

/* ================================================================
 * 八、模态框系统 (Modal System)
 * ================================================================ */

/* ----------------------------------------------------------------
 * 8.1 模态框基础样式
 * ---------------------------------------------------------------- */

/* 功能说明:
 * 模态框系统用于显示详情、确认对话框、表单等弹出内容。
 * 采用全屏遮罩 + 居中内容的设计，支持背景模糊效果。
 */

/* 模态框遮罩层 */
.modal {
    display: none;                             /* 默认隐藏 */
    position: fixed;                           /* 固定定位 */
    z-index: 1000;                             /* 高层级 */
    left: 0;                                   /* 左边对齐 */
    top: 0;                                    /* 顶部对齐 */
    width: 100%;                               /* 全宽 */
    height: 100%;                              /* 全高 */
    overflow: auto;                            /* 允许滚动 */
    background-color: rgba(0, 0, 0, 0.9);      /* 深色模式：深色遮罩 */
}

/* 浅色模式下的遮罩 */
html[data-theme=light] .modal {
    background-color: rgba(0, 0, 0, 0.6);      /* 浅色模式：半透明遮罩 */
}

/* 模态框内容区 */
/* UI优化: 精致紧凑的Modal弹窗 */
.modal-content {
    background-color: var(--card-bg-color);    /* 卡片背景色 */
    margin: 5vh auto;                          /* 上下5vh居中，左右自动居中 */
    padding: 20px;                             /* 精致内边距（从var(--spacing-lg)改为固定值） */
    border: 1px solid var(--border-color);     /* 边框 */
    width: 90%;                                /* 响应式宽度 */
    max-width: 800px;                          /* 最大宽度 */
    border-radius: var(--border-radius-lg);    /* 大圆角 */
    position: relative;                        /* 相对定位 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* 阴影 - 深色模式 - 优化性能：减小模糊半径 */
}

html[data-theme=light] .modal-content {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 阴影 - 浅色模式 - 优化性能：减小模糊半径 */
}

/* ----------------------------------------------------------------
 * 8.2 模态框关闭按钮
 * ---------------------------------------------------------------- */

.close-btn {
    color: #aaa;                               /* 灰色 - 深色模式 */
    position: absolute;                        /* 绝对定位 */
    top: 15px;                                 /* 距顶部 */
    right: 15px;                               /* 距右侧 */
    font-size: 28px;                           /* 字号 */
    font-weight: 700;                          /* 粗体 */
    cursor: pointer;                           /* 指针光标 */
    width: 32px;                               /* 宽度 */
    height: 32px;                              /* 高度 */
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    justify-content: center;                   /* 水平居中 */
    border-radius: 50%;                        /* 圆形 */
    /* [性能优化] 显式指定过渡属性 */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

html[data-theme=light] .close-btn {
    color: #9ca3af;                            /* 灰色 - 浅色模式 */
}

/* 关闭按钮悬浮效果 */
.close-btn:hover {
    background-color: var(--border-color);     /* 背景色 */
    color: #fff;                               /* 白色文字 */
}

html[data-theme=light] .close-btn:hover {
    background-color: #e5e7eb;                 /* 浅灰背景 */
    color: #1f2937;                            /* 深色文字 */
}

/* ----------------------------------------------------------------
 * 8.3 Toast通知组件 (Toast Notification)
 * ---------------------------------------------------------------- */

/* 功能说明:
 * Toast是临时的轻量级通知，用于向用户反馈操作结果。
 * 从底部淡入，3秒后自动淡出。
 */

.toast {
    visibility: hidden;                        /* 默认隐藏 */
    min-width: 250px;                          /* 最小宽度 */
    background-color: #2a2a2a;                 /* 深色背景 */
    color: #fff;                               /* 白色文字 */
    text-align: center;                        /* 居中对齐 */
    border-radius: var(--border-radius-md);    /* 中圆角 */
    border: 1px solid var(--border-color);     /* 边框 */
    padding: 16px;                             /* 内边距 */
    position: fixed;                           /* 固定定位 */
    z-index: 2000;                             /* 置于最顶层 */
    left: 50%;                                 /* 水平居中 */
    transform: translateX(-50%);               /* 偏移以实现居中 */
    bottom: 30px;                              /* 距底部30px */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 阴影 */
    font-weight: 500;                          /* 中粗 */
}

/* 浅色模式下的Toast */
html[data-theme=light] .toast {
    background-color: #1f2937;                 /* 深灰背景 */
    color: #fff;                               /* 白色文字 */
    border: none;                              /* 无边框 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
}

/* Toast类型变体（浅色模式） */
html[data-theme=light] .toast.success {
    background-color: var(--success-color);    /* 成功 - 绿色 */
}

html[data-theme=light] .toast.error {
    background-color: var(--error-color);      /* 错误 - 红色 */
}

html[data-theme=light] .toast.info {
    background-color: var(--info-color);       /* 信息 - 蓝色 */
}

html[data-theme=light] .toast.warning {
    background-color: var(--warning-color);    /* 警告 - 橙色 */
}

/* Toast显示状态 */
.toast.show {
    visibility: visible;                       /* 显示 */
    animation: fadein 0.5s, fadeout 0.5s 3.0s; /* 淡入+延迟淡出 */
}

/* Toast淡入动画 */
@keyframes fadein {
    from {
        bottom: 0;                             /* 从底部0位置开始 */
        opacity: 0;                            /* 完全透明 */
    }

    to {
        bottom: 30px;                          /* 移动到底部30px */
        opacity: 1;                            /* 完全不透明 */
    }
}

/* Toast淡出动画 */
@keyframes fadeout {
    from {
        bottom: 30px;                          /* 从底部30px开始 */
        opacity: 1;                            /* 完全不透明 */
    }

    to {
        bottom: 0;                             /* 移动到底部0位置 */
        opacity: 0;                            /* 完全透明 */
    }
}

/* ================================================================
 * 九、通用工具类 (Utility Classes)
 * ================================================================ */

/* ----------------------------------------------------------------
 * 9.1 图标样式
 * ---------------------------------------------------------------- */

/* Lucide图标基础样式 */
.lucide {
    width: 1em;                                /* 宽度跟随字号 */
    height: 1em;                               /* 高度跟随字号 */
    stroke-width: 2;                           /* 线条粗细 */
}

/* ----------------------------------------------------------------
 * 9.2 动画类
 * ---------------------------------------------------------------- */

/* 旋转动画（用于加载图标） */
.animate-spin {
    animation: spin 1s linear infinite;        /* 1秒匀速无限旋转 */
}

@keyframes spin {
    from {
        transform: rotate(0deg);               /* 起始角度 */
    }

    to {
        transform: rotate(360deg);             /* 旋转360度 */
    }
}

/* ================================================================
 * 十、列表模态框组件 (List Modal)
 * ================================================================ */

/* 功能说明:
 * 用于显示列表形式的内容，如订阅列表、搜索结果等。
 * 支持滚动和缩略图展示。
 */

/* ----------------------------------------------------------------
 * 10.1 列表模态框布局
 * ---------------------------------------------------------------- */

/* 列表模态框内容区 */
.list-modal-content {
    max-height: 70vh;                          /* 最大高度为视口70% */
    display: flex;                             /* flex布局 */
    flex-direction: column;                    /* 垂直排列 */
}

/* 列表容器 */
.list-modal-list {
    overflow-y: auto;                          /* 垂直滚动 */
    margin: 0 -15px -15px;                     /* 负margin以抵消padding */
    padding: 0 15px 15px;                      /* 内边距 */
    flex-grow: 1;                              /* 占据剩余空间 */
}

/* ----------------------------------------------------------------
 * 10.2 列表组项
 * ---------------------------------------------------------------- */

/* 列表组单项 */
.list-group-item {
    background-color: var(--bg-color-inset-secondary); /* 二级内嵌背景 */
    border-radius: var(--border-radius-md);    /* 中圆角 */
    margin-bottom: 15px;                       /* 项之间的间距 */
    padding: 15px;                             /* 内边距 */
}

/* 列表组头部 */
.list-group-header {
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    gap: 15px;                                 /* 元素间距 */
    margin-bottom: 10px;                       /* 与内容的间距 */
}

/* 列表组缩略图 */
.list-group-thumbnail {
    width: 40px;                               /* 宽度 */
    height: 60px;                              /* 高度 */
    object-fit: cover;                         /* 裁剪适应 */
    border-radius: var(--border-radius-sm);    /* 小圆角 */
    flex-shrink: 0;                            /* 不收缩 */
    background-color: var(--bg-color-code);    /* 深色模式：深色背景 */
}

html[data-theme=light] .list-group-thumbnail {
    background-color: #e5e7eb;                 /* 浅色模式：浅灰背景 */
}

/* 列表组信息区 */
.list-group-info {
    display: flex;                             /* flex布局 */
    flex-direction: column;                    /* 垂直排列 */
    flex-grow: 1;                              /* 占据剩余空间 */
}

/* 列表组标题 */
.list-group-title {
    font-size: 1.1rem;                         /* 较大字号 */
    font-weight: 500;                          /* 中粗 */
}

/* 列表组元信息 */
.list-group-meta {
    font-size: 0.85rem;                        /* 小字号 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
}

/* 列表组操作按钮区 */
.list-group-actions {
    display: flex;                             /* flex布局 */
    gap: 8px;                                  /* 按钮间距 */
    flex-shrink: 0;                            /* 不收缩 */
}

/* 列表组操作按钮样式 */
.list-group-actions .btn {
    width: 32px;                               /* 圆形按钮宽度 */
    height: 32px;                              /* 圆形按钮高度 */
    min-width: 32px;                           /* 最小宽度 */
    padding: 0;                                /* 无内边距 */
    border-radius: 50%;                        /* 完全圆形 */
}

/* 操作按钮内的图标 */
.list-group-actions .btn .lucide {
    width: 16px;                               /* 图标宽度 */
    height: 16px;                              /* 图标高度 */
}

/* 危险按钮移除旋转效果 */
.list-group-actions .btn-danger:hover {
    transform: none;                           /* 无变形 */
}

/* 列表组内容区 */
.list-group-content {
    display: flex;                             /* flex布局 */
    flex-wrap: wrap;                           /* 允许换行 */
    gap: 8px;                                  /* 元素间距 */
}

/* 列表组标签 */
.list-group-tag {
    background-color: var(--border-color);     /* 深色模式：边框色背景 */
    color: var(--text-color);                  /* 主文字颜色 */
    padding: 4px 10px;                         /* 内边距 */
    border-radius: var(--border-radius-full);  /* 完全圆角（pills样式） */
    font-size: 0.8rem;                         /* 字号 */
    font-weight: 500;                          /* 中粗 */
}

html[data-theme=light] .list-group-tag {
    background-color: #e5e7eb;                 /* 浅色模式：浅灰背景 */
    color: var(--text-color);
}

/* ================================================================
 * 十一、分页组件 (Pagination)
 * ================================================================ */

/* 功能说明:
 * 用于内容列表的分页导航。
 * 支持激活态、禁用态、省略号等状态。
 */

/* ----------------------------------------------------------------
 * 11.1 分页容器
 * ---------------------------------------------------------------- */

/* 分页容器 */
.pagination-container {
    display: flex;                             /* flex布局 */
    justify-content: center;                   /* 水平居中 */
    margin-top: 25px;                          /* 顶部间距 */
    padding-top: 25px;                         /* 内部顶部间距 */
    border-top: 1px solid var(--border-color); /* 顶部分隔线 */
}

/* 分页列表 */
.pagination {
    display: flex;                             /* flex布局 */
    list-style: none;                          /* 移除列表样式 */
    padding: 0;                                /* 无内边距 */
    margin: 0;                                 /* 无外边距 */
    gap: 8px;                                  /* 页码按钮间距 */
}

/* 分页项 */
.page-item {
    margin: 0;                                 /* 无外边距 */
}

/* ----------------------------------------------------------------
 * 11.2 分页链接
 * ---------------------------------------------------------------- */

/* 分页链接基础样式 */
.page-link {
    /* 布局 */
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    justify-content: center;                   /* 水平居中 */
    
    /* 尺寸 */
    min-width: 44px;                           /* 最小宽度 */
    height: 44px;                              /* 高度 */
    padding: 0 10px;                           /* 水平内边距 */
    
    /* 外观 */
    font-size: 1rem;                           /* 字号 */
    font-weight: 500;                          /* 中粗 */
    color: var(--text-color-muted);            /* 次要文字颜色 */
    background-color: var(--card-bg-color);    /* 卡片背景色 */
    border: 1px solid var(--border-color);     /* 边框 */
    border-radius: var(--border-radius-md);    /* 中圆角 */
    
    /* 交互 */
    cursor: pointer;                           /* 指针光标 */
    /* [性能优化] 显式指定过渡属性 */
    transition: background-color var(--transition-fast) ease-in-out,
                border-color var(--transition-fast) ease-in-out,
                color var(--transition-fast) ease-in-out;
}

/* 分页链接悬浮效果 */
.page-link:hover {
    border-color: var(--primary-color);        /* 紫色边框 */
    color: var(--primary-color);               /* 紫色文字 */
    transform: translateY(-2px);               /* 上移2px */
}

html[data-theme=light] .page-link {
    background-color: var(--card-bg-hover);    /* 浅色模式：卡片悬浮态背景 */
}

/* ----------------------------------------------------------------
 * 11.3 分页状态变体
 * ---------------------------------------------------------------- */

/* 激活态分页项 */
.page-item.active .page-link {
    background-color: var(--primary-color);    /* 紫色背景 */
    border-color: var(--primary-color);        /* 紫色边框 */
    color: #fff;                               /* 白色文字 */
    font-weight: 700;                          /* 粗体 */
    cursor: default;                           /* 默认光标（不可点击） */
    transform: none;                           /* 无变形 */
    box-shadow: 0 4px 10px rgba(126, 34, 206, 0.3); /* 紫色阴影 */
}

/* 禁用态分页项 */
.page-item.disabled .page-link {
    color: #555;                               /* 深色模式：深灰文字 */
    background-color: var(--bg-color-code);    /* 深色背景 */
    cursor: not-allowed;                       /* 禁止光标 */
    transform: none;                           /* 无变形 */
}

html[data-theme=light] .page-item.disabled .page-link {
    color: #d1d5db;                            /* 浅色模式：浅灰文字 */
    background-color: #f9fafb;                 /* 极浅灰背景 */
}

/* 省略号样式 */
.page-link.ellipsis {
    border: none;                              /* 无边框 */
    background-color: transparent;             /* 透明背景 */
    cursor: default;                           /* 默认光标 */
    font-weight: 700;                          /* 粗体 */
}

.page-link.ellipsis:hover {
    transform: none;                           /* 无变形 */
    color: var(--text-color-muted);            /* 保持次要文字颜色 */
}

/* ================================================================
 * 十二、响应式布局 (Responsive Layout)
 * ================================================================ */

/* 功能说明:
 * 针对不同屏幕尺寸调整布局，确保在各种设备上都有良好的体验。
 * 断点: 1400px (大屏), 1200px (中屏), 992px (平板), 768px (手机)
 */

/* ----------------------------------------------------------------
 * 12.1 大屏幕适配 (≤1400px)
 * ---------------------------------------------------------------- */
@media (max-width: 1400px) {
    /* 主网格：调整左右列比例 */
    .main-grid {
        grid-template-columns: 2.5fr 1.5fr;    /* 右侧栏稍窄 */
    }

    /* 媒体卡片网格：减少最小卡片宽度 */
    .shows-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ----------------------------------------------------------------
 * 12.2 中等屏幕适配 (≤1200px)
 * ---------------------------------------------------------------- */
@media (max-width: 1200px) {
    /* 统计条：从5列改为3列 */
    .stats-bar .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----------------------------------------------------------------
 * 12.3 平板适配 (≤992px)
 * ---------------------------------------------------------------- */
@media (max-width: 992px) {
    /* 主网格：单列布局 */
    .main-grid {
        grid-template-columns: 1fr;
    }

    /* 右侧栏移到顶部 */
    .right-column {
        order: -1;                             /* 将右侧栏移到上方 */
    }

    /* 媒体卡片网格：进一步减小最小宽度 */
    .shows-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    /* 统计条：改为2列 */
    .stats-bar .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------------------------------
 * 12.4 移动端适配 (≤1024px) - 手机和平板通用样式
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* --- 页面头部优化 --- */
    header {
        flex-wrap: wrap;                         /* 允许换行 */
        gap: var(--spacing-sm);                  /* 间距 */
    }
    
    header h1 {
        font-size: 1.5rem;                       /* 缩小标题 */
        flex: 1 1 100%;                          /* 占满整行 */
        margin-bottom: var(--spacing-sm);
    }
    
    .header-actions {
        flex-wrap: wrap;                         /* 按钮组换行 */
        gap: var(--spacing-xs);
        width: 100%;
        justify-content: flex-end;
    }
    
    .header-icon-btn {
        min-width: 44px;                         /* 增大触摸目标 */
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
    
    .version-tag {
        font-size: 0.75rem;                      /* 缩小版本号 */
    }
    
    /* --- 媒体卡片网格优化 --- */
    .shows-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--spacing-sm);
    }
    
    /* --- 操作按钮优化 --- */
    .action-btn-solid,
    .action-btn-outline {
        min-height: 44px;                        /* 增大触摸目标 */
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 0.9rem;
    }
    
    .action-grid-solid,
    .action-grid-outline {
        gap: var(--spacing-sm);                  /* 减小间距 */
    }
    
    /* --- 模态框优化 --- */
    .modal-content {
        width: 95vw;                             /* 几乎全屏 */
        max-width: none;
        max-height: 90vh;                        /* 限制高度 */
        padding: var(--spacing-md);
        margin: var(--spacing-md);
        overflow-y: auto;                        /* 垂直滚动 */
        overflow-x: hidden;                      /* 隐藏水平滚动 */
        box-sizing: border-box;                  /* box model */
    }
    
    .close-btn {
        width: 40px;                             /* 增大关闭按钮 */
        height: 40px;
        font-size: 1.5rem;
        line-height: 40px;
    }
    
    /* --- 表格组件优化 --- */
    .table-container {
        overflow-x: auto;                        /* 横向滚动 */
        -webkit-overflow-scrolling: touch;       /* iOS平滑滚动 */
    }
    
    table {
        min-width: 600px;                        /* 最小宽度 */
        font-size: 0.875rem;                     /* 缩小字号 */
    }
    
    /* --- 表单组件优化 --- */
    .form-control {
        min-height: 44px;                        /* 增大触摸目标 */
        font-size: 16px;                         /* 防止iOS自动缩放 */
    }
    
    .form-group {
        margin-bottom: var(--spacing-md);
    }
    
    /* --- 导航栏优化（设置页） --- */
    .settings-nav {
        padding: var(--spacing-sm) 0;
        -webkit-overflow-scrolling: touch;       /* iOS平滑滚动 */
    }
    
    .settings-nav-item {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px;                        /* 增大触摸目标 */
        white-space: nowrap;                     /* 防止换行 */
    }
    
    /* --- 按钮组件优化（通用） --- */
    .btn {
        min-height: 44px;                         /* 增大触摸目标 */
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    /* --- 卡片组件优化 --- */
    .card {
        padding: var(--spacing-md);              /* 减小内边距 */
    }
    
    h2 {
        font-size: 1.1rem;                       /* 缩小标题 */
    }
    
    /* --- 设置中心多列布局优化 --- */
    /* 设置主网格：改为单列 */
    .settings-main-grid {
        grid-template-columns: 1fr !important;    /* 单列布局，强制覆盖内联样式 */
        gap: var(--spacing-md);                  /* 保持间距 */
        width: 100%;                              /* 占满父容器 */
        max-width: 100%;                          /* 不超出父容器 */
        box-sizing: border-box;                   /* 确保box model正确 */
    }
    
    /* 表单行网格：改为单列 */
    .form-row-grid {
        grid-template-columns: 1fr !important;  /* 单列布局，强制覆盖 */
        gap: var(--spacing-md);                  /* 保持间距 */
        width: 100%;                              /* 占满父容器 */
        max-width: 100%;                          /* 不超出父容器 */
        box-sizing: border-box;                   /* 确保box model正确 */
    }
    
    /* 固定列网格：2列改为单列 */
    .form-grid-fixed.cols-2 {
        grid-template-columns: 1fr !important;  /* 单列布局，强制覆盖 */
        gap: var(--spacing-md);                  /* 保持间距 */
        width: 100%;                              /* 占满父容器 */
        max-width: 100%;                          /* 不超出父容器 */
        box-sizing: border-box;                   /* 确保box model正确 */
    }
    
    /* 固定列网格：3列改为单列 */
    .form-grid-fixed.cols-3 {
        grid-template-columns: 1fr !important;  /* 单列布局，强制覆盖 */
        gap: var(--spacing-md);                  /* 保持间距 */
        width: 100%;                              /* 占满父容器 */
        max-width: 100%;                          /* 不超出父容器 */
        box-sizing: border-box;                   /* 确保box model正确 */
    }
    
    /* 外部链接网格：改为单列 */
    .external-links-grid {
        grid-template-columns: 1fr !important;  /* 单列布局，强制覆盖 */
        gap: var(--spacing-md);                  /* 保持间距 */
    }
    
    /* --- 内联样式覆盖：处理内联的grid-template-columns --- */
    /* 覆盖系统页面中的4列网格布局 */
    .form-actions[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;   /* 强制改为单列 */
        gap: var(--spacing-md) !important;      /* 保持间距 */
    }
    
    /* --- 表格组件优化 --- */
    .settings-table {
        font-size: 0.875rem;                     /* 缩小字号 */
        width: 100%;                             /* 占满容器 */
    }
    
    .settings-table th,
    .settings-table td {
        padding: var(--spacing-sm);             /* 减小内边距 */
    }
    
    /* --- 输入框+按钮组合优化 --- */
    .input-with-button {
        flex-direction: column;                   /* 垂直排列 */
        gap: var(--spacing-sm);                  /* 添加间距 */
    }
    
    .input-with-button .form-control,
    .input-with-button .input-wrapper {
        width: 100%;                             /* 占满整行 */
    }
    
    .input-with-button .btn {
        width: 100%;                             /* 按钮占满整行 */
        min-height: 44px;                        /* 增大触摸目标 */
    }
    
    /* --- 内联复选框优化 --- */
    .form-group-checkbox.form-checkbox-inline {
        display: block;                          /* 改为块级显示 */
        margin-bottom: var(--spacing-sm);        /* 添加间距 */
        margin-left: 0 !important;              /* 移除左边距 */
        width: 100%;                             /* 占满整行 */
    }
    
    /* 切换开关组：改为垂直布局 */
    .toggle-group {
        flex-direction: column;                   /* 垂直排列 */
        align-items: flex-start;                 /* 左对齐 */
        gap: var(--spacing-sm);                  /* 添加间距 */
        padding: var(--spacing-sm) 0;            /* 增加内边距 */
    }
    
    /* 切换开关组内的标签和开关：确保足够大小 */
    .toggle-group .toggle-switch-label {
        min-width: auto;                          /* 不限制宽度 */
        margin-bottom: var(--spacing-xs);         /* 与开关的间距 */
    }
    
    .toggle-group .toggle-switch {
        min-width: 44px;                         /* 增大触摸目标 */
        min-height: 44px;                        /* 增大触摸目标 */
    }
    
    /* 设置组盒子：确保有足够空间 */
    .settings-group-box {
        min-width: 0;                            /* 允许收缩 */
        padding: var(--spacing-md);              /* 保持内边距 */
    }
    
    /* --- 强制覆盖内联样式的多列布局 --- */
    /* 针对有内联grid样式的元素，强制改为单列 */
    .form-actions[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;   /* 强制单列 */
        gap: var(--spacing-md) !important;      /* 保持间距 */
    }
    
    /* 针对其他可能有内联grid的元素（排除模态框和媒体网格） */
    div[style*="grid-template-columns"]:not(.modal-content):not(.shows-grid):not(.main-grid) {
        grid-template-columns: 1fr !important;   /* 强制单列 */
    }
    
    /* 针对form-grid类 */
    .form-grid {
        grid-template-columns: 1fr !important;   /* 强制单列 */
    }
    
    /* 确保表格在移动端也能正常显示 */
    .settings-table {
        font-size: 0.875rem;                     /* 缩小字体 */
        min-width: 100%;                         /* 占满宽度 */
    }
    
    .settings-table th,
    .settings-table td {
        padding: var(--spacing-sm);              /* 减小内边距 */
        white-space: nowrap;                     /* 防止换行 */
    }
    
    /* 多选组件优化 */
    .custom-multiselect {
        min-width: 0;                            /* 允许收缩 */
        width: 100%;                             /* 占满宽度 */
    }
    
    /* 输入框+按钮组合优化（确保垂直排列） */
    .input-with-button {
        flex-direction: column;                   /* 垂直排列 */
        gap: var(--spacing-sm);                  /* 添加间距 */
    }
    
    .input-with-button .form-control,
    .input-with-button .input-wrapper {
        width: 100%;                             /* 占满整行 */
        flex-grow: 1;
    }
    
    .input-with-button .btn {
        width: 100%;                             /* 按钮占满整行 */
        min-height: 44px;                        /* 增大触摸目标 */
        flex-shrink: 0;
    }
    
    /* 内联复选框优化 */
    .form-group-checkbox.form-checkbox-inline {
        display: block;                          /* 改为块级显示 */
        margin-bottom: var(--spacing-sm);        /* 添加间距 */
        margin-left: 0 !important;              /* 移除左边距 */
        width: 100%;                             /* 占满整行 */
    }
}

/* ----------------------------------------------------------------
 * 12.5 手机专用适配 (≤768px) - 手机竖屏专用样式
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
    /* --- 设置页布局：单列 --- */
    .settings-layout {
        grid-template-columns: 1fr;               /* 单列布局 */
    }

    /* --- 设置页头部优化 --- */
    .settings-header h1 {
        font-size: 1.25rem;                       /* 缩小标题字号 */
        margin: 0;
    }

    .settings-header .header-actions {
        flex-wrap: wrap;                          /* 允许换行 */
        gap: 8px;
    }

    .settings-header .header-actions .btn {
        font-size: 0.75rem;                       /* 缩小按钮字号 */
        padding: 6px 12px;
    }

    /* 确保右上角的"返回仪表盘"按钮始终可见和可点击 */
    .settings-header .header-actions .button-link {
        display: inline-flex !important;          /* 强制显示 */
        pointer-events: auto !important;          /* 确保可点击 */
    }

    .settings-header .version-tag {
        font-size: 0.7rem;                        /* 缩小版本标签 */
    }

    /* --- 设置页面：确保卡片和表单元素自适应 --- */
    .settings-content .card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;                       /* 防止内容溢出 */
    }

    /* 特殊处理：包含下拉多选框的card需要允许内容溢出，并提升层级 */
    #content-history-cache .card:first-child,
    #content-tg-searcher .card:first-child,
    #content-douban .card:first-child,
    #content-maoyan .card:first-child,
    #content-p115 .card:first-child {
        overflow: visible !important;             /* 允许下拉菜单超出卡片 */
        position: relative;                       /* 建立定位上下文 */
        z-index: 10;                              /* 提升层级，确保下拉菜单覆盖后续card */
    }

    /* 降低后续card的层级，确保不会覆盖下拉菜单 */
    #content-history-cache .card:nth-child(2),
    #content-tg-searcher .card:nth-child(2),
    #content-douban .card:nth-child(2),
    #content-maoyan .card:nth-child(2),
    #content-p115 .card:nth-child(2) {
        z-index: 1;                               /* 低于第一个card的z-index */
    }

    /* 设置页面：确保所有表单元素不超出容器 */
    .settings-content .form-control,
    .settings-content textarea,
    .settings-content select,
    .settings-content input[type="text"],
    .settings-content input[type="number"],
    .settings-content input[type="password"],
    .settings-content input[type="datetime-local"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 设置页面：确保自定义多选框不超出 */
    .settings-content .custom-multiselect {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 设置页面：确保规则卡片不超出容器 */
    .settings-content .rule-row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;                       /* 防止内容溢出 */
    }

    /* 设置页面：确保规则容器不超出 */
    .settings-content .settings-main-grid,
    .settings-content .form-row-grid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- 设置导航：改为汉堡菜单 --- */
    .settings-nav {
        position: fixed;                          /* 固定定位 */
        top: 0;
        left: -100%;                              /* 默认隐藏在左侧 */
        width: 80%;                               /* 占据80%宽度 */
        max-width: 320px;                         /* 最大320px */
        height: 100vh;                            /* 全屏高度 */
        background-color: var(--card-bg-color);   /* 背景色 */
        border-right: 1px solid var(--border-color); /* 右侧边框 */
        overflow-y: auto;                         /* 垂直滚动 */
        z-index: 1000;                            /* 在最上层 */
        transition: left 0.3s ease;               /* 滑动动画 */
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); /* 阴影 */
        padding: 16px 12px;                       /* 内边距 */
    }

    /* 导航展开状态 */
    .settings-nav.open {
        left: 0;                                  /* 滑入屏幕 */
    }

    .settings-nav ul {
        display: flex;                            /* flex布局 */
        flex-direction: column;                   /* 垂直排列（恢复桌面端样式） */
    }

    /* 导航遮罩层 */
    .settings-nav-overlay {
        display: none;                            /* 默认隐藏 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);     /* 半透明黑色 */
        z-index: 999;                             /* 在导航下方 */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .settings-nav-overlay.active {
        display: block;                           /* 显示 */
        opacity: 1;                               /* 淡入 */
    }

    /* 汉堡菜单按钮 */
    .settings-menu-toggle {
        display: inline-flex !important;          /* 移动端显示（强制） */
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background-color: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: var(--border-radius-md);
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        transition: background-color 0.2s ease;
        position: relative;                       /* 确保z-index生效 */
        z-index: 10;                              /* 确保按钮在最上层 */
        pointer-events: auto;                     /* 确保可点击 */
        outline: none;                            /* 移除默认轮廓 */
    }

    .settings-menu-toggle:active {
        background-color: var(--primary-color-hover);
        transform: scale(0.98);                   /* 点击反馈 */
    }

    .settings-menu-toggle:hover {
        background-color: var(--primary-color-hover);
    }

    .settings-menu-toggle .lucide {
        width: 18px;
        height: 18px;
        flex-shrink: 0;                           /* 防止图标收缩 */
    }

    /* 确保导航项在移动端正常显示 */
    .settings-nav .settings-nav-item {
        width: 100%;
        box-sizing: border-box;
    }

    /* 确保导航栏的返回按钮在移动端正常显示 */
    .settings-nav .nav-back-button {
        width: 100%;
        box-sizing: border-box;
        margin-top: 16px;
        display: flex;                            /* 确保在移动端显示 */
    }

    /* --- 操作按钮网格：单列 --- */
    .action-grid-solid,
    .action-grid-outline {
        grid-template-columns: 1fr;               /* 单列，按钮堆叠 */
    }

    /* --- 移动端修复：卡片头部完全自适应 --- */
    .card-header {
        width: 100%;
        min-width: 0;
        padding: 0;
        margin-bottom: 12px;
        gap: 12px;
    }

    /* 标题组移动端适配 */
    .header-title-group {
        gap: 0;
    }

    #subscription-list-title {
        font-size: 1.15rem;                       /* 移动端缩小 */
        padding-right: 10px;                      /* 移动端更紧凑 */
    }

    #subscription-list-title::after {
        height: 24px;                             /* 移动端分割线变短 */
    }

    #archived-shows-title {
        font-size: 0.85rem;                       /* 移动端保持副标题效果 */
        padding-left: 10px;                       /* 移动端更紧凑 */
    }

    /* --- 移动端修复：控制面板自适应 --- */
    .controls-wrapper {
        min-width: 0;                             /* 移除固定最小宽度，允许完全自适应 */
        width: 100%;                              /* 占满可用宽度 */
        flex-basis: 100%;                         /* 移动端占满整行 */
        max-width: none;                          /* 移除最大宽度限制 */
    }

    /* --- 分类标签：移动端优化 --- */
    .category-tabs {
        width: 100%;                              /* 占满宽度 */
        max-width: 100%;                          /* 不超过父容器 */
        min-width: 0;                             /* 允许收缩 */
    }
    
    .category-tab {
        flex: 1;                                   /* 平均分配空间 */
        flex-shrink: 1;                           /* 覆盖桌面端的 flex-shrink: 0，允许收缩 */
        padding: 8px 4px;                         /* 减小左右内边距 */
        font-size: 13px;                          /* 略微缩小字号 */
        min-width: 0;                             /* 允许收缩到最小 */
    }
    
    /* --- 控制栏：移动端变为垂直布局 --- */
    .controls-row {
        flex-direction: column;                   /* 垂直排列 */
        align-items: stretch;                     /* 拉伸对齐 */
        gap: 8px;                                 /* 间距 */
    }
    
    .subscription-sort-select {
        width: 100%;                              /* 占满宽度 */
    }

    /* --- 媒体卡片网格：2列布局 --- */
    .shows-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));    /* 2列布局，强制最小宽度为0 */
        gap: var(--spacing-sm);
    }
    
    .show-card {
        min-height: 240px;                        /* 确保足够高度 */
    }

    .bottom-info-item {
        max-width: 48%;                           /* 每个信息项最多占48%宽度 */
        font-size: 0.7rem;                        /* 移动端略微缩小字号 */
    }

    /* 移动端：缩小图标尺寸 */
    .bottom-info-item .lucide {
        width: 10px;
        height: 10px;
        flex-shrink: 0;                           /* 图标不收缩 */
    }

    /* --- 详情弹窗：单列居中 --- */
    #card-details-content {
        grid-template-columns: 1fr;               /* 单列布局 */
        text-align: center;                       /* 居中对齐 */
        gap: 16px;                                /* 海报和信息区之间的间距 */
        width: 100%;                              /* 占满父容器宽度 */
        max-width: 100%;                          /* 不超出父容器 */
        box-sizing: border-box;                   /* 确保box model正确 */
        overflow-x: hidden;                       /* 隐藏水平溢出 */
    }
    
    /* --- 详情弹窗：修复移动端布局问题 --- */
    #card-details-content .detail-info {
        text-align: left;                         /* 内容左对齐 */
        width: 100%;                              /* 占满宽度 */
        max-width: 100%;                          /* 不超出 */
        box-sizing: border-box;                   /* box model */
    }

    /* --- 详情弹窗：标题和文本溢出处理 --- */
    #card-details-content .detail-info h3,
    #card-details-content .detail-info p,
    #card-details-content .detail-section p {
        word-wrap: break-word;                    /* 长单词换行 */
        word-break: break-word;                   /* 强制换行 */
        overflow-wrap: break-word;                /* 现代标准 */
        max-width: 100%;                          /* 不超出 */
    }
    
    #card-details-content .detail-section {
        margin-bottom: 16px;                      /* 增加底部间距，避免重叠 */
        width: 100%;                              /* 占满宽度 */
        max-width: 100%;                          /* 不超出 */
        box-sizing: border-box;                   /* box model */
    }

    /* --- 详情海报：缩小尺寸 --- */
    #card-details-content .detail-poster {
        width: 150px;                             /* 较小宽度 */
        margin: 0 auto;                           /* 居中 */
    }

    /* --- 详情弹窗：按钮网格自适应 --- */
    #card-details-content .action-grid {
        grid-template-columns: repeat(2, 1fr);    /* 移动端改为2列 */
        width: 100%;                              /* 占满宽度 */
        max-width: 100%;                          /* 不超出 */
        box-sizing: border-box;                   /* box model */
    }

    /* --- 详情弹窗：剧集矩阵自适应 --- */
    #card-details-content .episode-matrix {
        width: 100%;                              /* 占满宽度 */
        max-width: 100%;                          /* 不超出 */
        box-sizing: border-box;                   /* box model */
        overflow-x: auto;                         /* 允许水平滚动（如果剧集太多） */
    }

    /* --- 统计条：单列 --- */
    .stats-bar .stats-grid {
        grid-template-columns: 1fr;               /* 单列，统计项垂直堆叠 */
    }

    /* --- 状态概览网格：单列 --- */
    .status-overview-grid {
        grid-template-columns: 1fr;
    }

    /* --- 水平表单组：在手机上变为垂直布局 --- */
    .form-group-horizontal {
        grid-template-columns: 1fr;               /* 单列布局 */
    }

    /* --- 水平表单组标签：左对齐 --- */
    .form-group-horizontal label {
        text-align: left;                         /* 标签左对齐 */
        margin-bottom: var(--spacing-sm);         /* 与输入框的间距 */
        justify-content: flex-start;              /* 内容左对齐 */
    }

    .form-group-horizontal .form-group-checkbox {
        grid-column: 1 / -1;
        /* 复选框占满整行 */
    }
    
    /* --- 日志查看器优化 --- */
    .log-viewer {
        max-height: 40vh;                        /* 限制高度，为其他内容留空间 */
        height: auto;                            /* 自适应高度 */
        min-height: 200px;                       /* 最小高度 */
        font-size: 0.7rem;                       /* 稍微缩小字号 */
        padding: 10px;                           /* 减小内边距 */
        line-height: 1.4;                        /* 行高 */
    }
    
    /* 日志卡片头部：移动端垂直排列 */
    .card-header-flex {
        flex-direction: column;                  /* 垂直排列 */
        align-items: flex-start;                 /* 左对齐 */
        gap: 12px;                               /* 增加间距 */
    }

    .card-header-flex h2 {
        width: 100%;                             /* 标题占满宽度 */
        margin: 0;
    }
    
    .log-controls {
        width: 100%;                             /* 控制栏占满宽度 */
        flex-wrap: wrap;                         /* 控制项换行 */
        gap: 10px;                               /* 控件间距 */
        justify-content: flex-start;             /* 左对齐 */
    }
    
    .log-controls select {
        min-height: 44px;                        /* 增大触摸目标 */
        min-width: 140px;                        /* 最小宽度 */
        font-size: 0.85rem;                      /* 字号 */
        padding: 8px 12px;                       /* 内边距 */
    }

    .log-controls label {
        display: flex;                           /* flex布局 */
        align-items: center;                     /* 垂直居中 */
        gap: 8px;                                /* 文字与开关间距 */
        font-size: 0.85rem;                      /* 字号 */
        min-height: 44px;                        /* 增大触摸目标 */
    }

    /* toggle开关优化：增大尺寸，更易操作 */
    .log-controls .toggle-switch {
        width: 52px;                             /* 增大宽度 */
        height: 28px;                            /* 增大高度 */
        min-height: 44px;                        /* 增大触摸目标区域 */
        display: flex;
        align-items: center;
    }

    .log-controls .toggle-switch .slider {
        border-radius: 28px;                     /* 适配新高度 */
    }

    .log-controls .toggle-switch .slider:before {
        height: 22px;                            /* 滑块高度 */
        width: 22px;                             /* 滑块宽度 */
        left: 3px;                               /* 左侧间距 */
        bottom: 3px;                             /* 底部间距 */
    }

    .log-controls .toggle-switch input:checked + .slider:before {
        transform: translateX(24px);             /* 滑动距离 */
    }

    /* 移动端日志行优化 - 保持换行但优化布局 */
    .log-line {
        padding: 4px 0;                          /* 增加垂直间距 */
        gap: 4px;                                /* 元素间距 */
        flex-wrap: wrap;                         /* 允许换行 */
        align-items: baseline;                   /* 基线对齐 */
    }

    .log-timestamp {
        font-size: 0.65rem;                      /* 时间戳字号 */
        flex-shrink: 0;                          /* 不收缩 */
        min-width: auto;                         /* 自动宽度 */
    }

    .log-level {
        font-size: 0.7rem;                       /* 日志级别字号 */
        font-weight: 600;                        /* 加粗 */
        flex-shrink: 0;                          /* 不收缩 */
        min-width: auto;                         /* 自动宽度 */
    }

    .log-module {
        font-size: 0.65rem;                      /* 模块名字号 */
        flex-shrink: 0;                          /* 不收缩 */
        min-width: auto;                         /* 自动宽度 */
        max-width: 100px;                        /* 限制最大宽度 */
        overflow: hidden;                        /* 隐藏溢出 */
        text-overflow: ellipsis;                 /* 显示省略号 */
    }

    .log-message {
        font-size: 0.75rem;                      /* 消息字号 */
        flex: 1 1 100%;                          /* 占满整行 */
        min-width: 100%;                         /* 确保独占一行 */
        word-break: break-word;                  /* 长单词断行 */
        overflow-wrap: break-word;               /* 内容换行 */
        white-space: normal;                     /* 允许换行 */
    }

    .log-trace {
        font-size: 0.65rem;                      /* trace 标签字号 */
        flex-shrink: 0;                          /* 不收缩 */
        min-width: auto;                         /* 自动宽度 */
    }

    .log-line.log-task-event {
        border-left: 2px solid var(--primary-color); /* 移动端减小边框宽度 */
        padding-left: 8px;                         /* 相应减小内边距 */
    }
    
    /* --- 标题进一步缩小 --- */
    header h1 {
        font-size: 1.25rem;                      /* 手机端更小的标题 */
    }
    
    h2 {
        font-size: 1rem;                          /* 卡片标题缩小 */
    }
    
    /* --- 卡片内边距进一步减小 --- */
    .card {
        padding: var(--spacing-sm);
    }
    
    /* --- 设置中心多列布局进一步优化（手机专用） --- */
    /* 表单网格项：确保有足够空间 */
    .form-grid-item {
        min-width: 0;                            /* 允许收缩 */
        width: 100%;                              /* 占满整行 */
    }
    
    /* 切换开关组：进一步优化间距 */
    .toggle-group {
        gap: var(--spacing-md);                  /* 增大间距 */
        padding: var(--spacing-md) 0;            /* 增大内边距 */
    }
    
    /* 设置组盒子：进一步减小内边距 */
    .settings-group-box {
        padding: var(--spacing-sm);              /* 减小内边距 */
    }
    
    /* --- 强制覆盖内联样式的多列布局（手机专用） --- */
    /* 系统页面的4列按钮组改为单列 */
    .form-actions[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;   /* 强制单列 */
        gap: var(--spacing-sm) !important;       /* 减小间距 */
    }
    
    /* 表格在手机端进一步优化 */
    /* 使用横向滚动方案，保持表格结构 */
    .settings-table {
        font-size: 0.75rem;                      /* 进一步缩小字体 */
        min-width: 600px;                        /* 最小宽度，确保横向滚动 */
    }
    
    /* 确保表格容器支持横向滚动 */
    .settings-table-wrapper,
    .card .settings-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;       /* iOS平滑滚动 */
        margin: 0 calc(-1 * var(--spacing-sm)); /* 负边距，让表格可以滚动到边缘 */
        padding: 0 var(--spacing-sm);
    }
    
    .settings-table th,
    .settings-table td {
        padding: var(--spacing-xs);              /* 减小内边距 */
        font-size: 0.75rem;                      /* 缩小字体 */
    }
    
    /* --- 输入框+按钮组合进一步优化（手机专用） --- */
    .input-with-button {
        gap: var(--spacing-md);                  /* 增大间距 */
    }
    
    /* --- 内联复选框进一步优化（手机专用） --- */
    .form-checkbox-inline {
        margin-left: 0 !important;              /* 移除左边距 */
        margin-bottom: var(--spacing-md);       /* 增大底部间距 */
    }
    
    /* --- 多选组件进一步优化（手机专用） --- */
    .custom-multiselect {
        width: 100%;                             /* 占满宽度 */
    }
    
.multiselect-display {
    min-height: 44px;                        /* 增大触摸目标 */
    }
}

/* --- 时间选择框样式优化 --- */
/* 限制datetime-local输入框的宽度，避免过宽 */
input[type="datetime-local"].input-datetime-local {
    max-width: 300px;                        /* 限制最大宽度 */
    min-width: 200px;                        /* 确保最小宽度 */
}

/* ... (选择弹窗, 列表弹窗样式保持不变，圆角使用变量) ... */
#choices-list {
    max-height: 60vh;
    overflow-y: auto
}

.choice-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast)
}

.choice-item:hover {
    background-color: var(--card-bg-hover)
}

.choice-item img {
    width: 80px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0
}

.choice-info p {
    font-size: .85rem;
    color: var(--text-color-muted);
    margin-top: 5px;
    max-height: 60px;
    overflow: hidden
}

#confirm-modal {
    z-index: 1050
}

#confirm-modal .form-actions {
    justify-content: flex-end
}

#restart-required-modal .btn-primary {
    /* [UI Refactor] 步骤 3.D: 替换 .save-btn */
    background-color: var(--primary-color)
}

#restart-required-modal .btn-primary:hover {
    /* [UI Refactor] 步骤 3.D: 替换 .save-btn */
    background-color: var(--primary-color-hover)
}

#login-form .form-group {
    margin-bottom: 20px
}

#login-form .btn-success {
    /* [UI Refactor] 步骤 3.D: 替换 .save-btn */
    width: 100%;
    margin-top: 10px
}

#tg-auth-modal .setup-step {
    display: none
}

#tg-auth-modal .setup-step.active {
    display: block
}

#tg-auth-modal .form-group {
    margin-bottom: 20px
}

#tg-auth-modal .btn-success {
    /* [UI Refactor] 步骤 3.D: 替换 .save-btn */
    width: 100%
}

#confirm-modal .btn-secondary {
    /* [UI Refactor] 步骤 3.D: 替换 .button-link */
    background-color: #555 !important
}

#confirm-modal .btn-danger {
    /* [UI Refactor] 步骤 3.D: 替换 .save-btn */
    background-color: var(--error-color) !important
}

#restart-required-modal .form-actions {
    border-top: none;
    padding-top: 0;
    justify-content: flex-end
}

/* TG 搜索群组确认弹窗 */
.search-group-confirm-modal {
    max-width: 450px;
}

.search-group-confirm-title {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.search-group-confirm-text {
    margin: 15px 0;
    line-height: 1.6;
}

.search-group-link {
    color: var(--primary-color);
    text-decoration: underline;
}

.search-group-confirm-actions {
    border-top: none;
    padding-top: 0;
    justify-content: flex-end;
}

/* ... (隐藏数字输入框箭头) ... */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

/* ... (自定义多选组件 样式保持不变，圆角使用变量) ... */
.custom-multiselect {
    position: relative;
    z-index: 10;                               /* 确保下拉框在其他元素之上 */
}

/* 确保包含下拉框的表单组不会裁剪下拉菜单 */
.form-group-horizontal.full-width {
    overflow: visible !important;              /* 允许下拉菜单超出容器 */
}

/* 确保包含下拉框的card不会裁剪下拉菜单，并提升层级 */
#content-history-cache .card:first-child,
#content-tg-searcher .card:first-child,
#content-douban .card:first-child,
#content-maoyan .card:first-child,
#content-p115 .card:first-child,
.card > form:has(.custom-multiselect) {
    overflow: visible;                         /* 允许下拉菜单超出卡片 */
    position: relative;                        /* 建立定位上下文 */
    z-index: 10;                               /* 提升层级，确保下拉菜单覆盖后续card */
}

/* 降低后续card的层级，确保不会覆盖下拉菜单 */
#content-history-cache .card:nth-child(2),
#content-tg-searcher .card:nth-child(2),
#content-douban .card:nth-child(2),
#content-maoyan .card:nth-child(2),
#content-p115 .card:nth-child(2) {
    z-index: 1;                                /* 低于第一个card的z-index */
}

/* 兼容性方案：如果浏览器不支持 :has()，则直接设置所有包含表单的card */
.settings-content .card {
    overflow: visible;                         /* 允许下拉菜单超出卡片 */
}

.multiselect-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background-color: var(--input-bg-color, #121212);
    border: 1px solid var(--input-border-color, #444);
    color: var(--text-color);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    cursor: pointer;
    min-height: 46px
}

.custom-multiselect.open .multiselect-display {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(126, 34, 206, .3)
}

.multiselect-placeholder {
    color: var(--text-color-muted);
    font-size: .9rem
}

.multiselect-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--primary-color);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: .85rem;
    font-weight: 500
}

html[data-theme=light] .multiselect-pill {
    background-color: #f5f3ff;
    color: var(--primary-color);
    font-weight: 600;
    border: 1px solid #ddd6fe
}

html[data-theme=light] [data-pill-type=target] .multiselect-pill {
    background-color: #eff6ff;
    color: var(--info-color);
    border-color: #bfdbfe
}

.multiselect-pill-remove {
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .2);
    transition: background-color var(--transition-fast)
}

html[data-theme=light] .multiselect-pill-remove {
    color: var(--primary-color)
}

html[data-theme=light] [data-pill-type=target] .multiselect-pill-remove {
    color: var(--info-color)
}

.multiselect-pill-remove:hover {
    background-color: rgba(0, 0, 0, .4)
}

html[data-theme=light] .multiselect-pill-remove:hover {
    background-color: rgba(0, 0, 0, .1)
}

.multiselect-dropdown {
    /* [修改] 使用flex布局以容纳搜索框和选项列表 */
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--card-bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    z-index: 1000;
    /* 提高z-index确保不被其他元素遮挡 */
    max-height: 280px;
    /* 增加最大高度 */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
}

html[data-theme=light] .multiselect-dropdown {
    background-color: var(--card-bg-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.custom-multiselect.open .multiselect-dropdown {
    display: flex
}

/* --- [新增] 搜索框专属样式 --- */
.multiselect-search-wrapper {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg-hover)
}

html[data-theme=light] .multiselect-search-wrapper {
    background-color: var(--card-bg-color)
}

.multiselect-search {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--input-bg-color, #121212);
    border: 1px solid var(--input-border-color, #444);
    color: var(--text-color);
    border-radius: var(--border-radius-md);
    font-size: .9rem
}

/* --- [新增] 选项容器，使其可独立滚动 --- */
.multiselect-options-container {
    overflow-y: auto;
    flex-grow: 1
}

.multiselect-option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color var(--transition-fast)
}

.multiselect-option:hover {
    background-color: var(--primary-color-hover)
}

html[data-theme=light] .multiselect-option:hover {
    background-color: #f5f3ff;
    color: var(--primary-color)
}

.multiselect-option input[type=checkbox],
.multiselect-option input[type=radio] {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color)
}

.multiselect-option label {
    margin-bottom: 0;
    pointer-events: none
}

.multiselect-no-results {
    padding: 15px;
    text-align: center;
    color: var(--text-color-muted);
    font-style: italic
}

/* [核心新增] 添加此段新样式到文件末尾 */
.input-with-button {
    display: flex;
    align-items: center;
    gap: 10px
}

.input-with-button .form-control,
/* [UI Refactor] 步骤 3.D: 替换 input */
.input-with-button .input-wrapper {
    flex-grow: 1
}

.input-with-button .btn {
    /* [UI Refactor] 步骤 3.D: 替换 button */
    flex-shrink: 0;
    padding-left: 15px;
    padding-right: 15px
}

[data-pill-type=source] .multiselect-pill {
    background-color: var(--primary-color)
}

[data-pill-type=target] .multiselect-pill {
    background-color: var(--info-color)
}

.button-link-update {
    /* [UI Refactor] 步骤 3.D: 合并 .btn 样式 */
    box-shadow: 0 4px 14px 0 rgba(56, 161, 105, .38);
    /* animation: pulse 2s infinite; 优化性能：移除默认无限动画 */
}

.button-link-update:hover {
    animation: pulse 2s infinite; /* 优化性能：仅悬浮时播放 */
    box-shadow: 0 6px 20px 0 rgba(56, 161, 105, .45)
}

#update-version-text {
    font-size: .8rem;
    font-weight: 500
}

/* ... (changelog 弹窗样式保持不变，圆角使用变量) ... */
.changelog-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 15px 20px;
    background-color: var(--bg-color-inset);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    line-height: 1.7;
    margin-top: 15px;
    color: #ddd
}

html[data-theme=light] .changelog-body {
    color: var(--text-color)
}

.changelog-body h1,
.changelog-body h2,
.changelog-body h3 {
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-top: 20px;
    margin-bottom: 15px
}

.changelog-body h3:first-child {
    margin-top: 0
}

.changelog-body ul {
    list-style-type: none;
    padding-left: 10px
}

.changelog-body li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px
}

.changelog-body li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700
}

.changelog-body code {
    background-color: #2a2a2a;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: .9em
}

html[data-theme=light] .changelog-body code {
    background-color: var(--bg-color-inset)
}

.changelog-body a {
    color: var(--primary-color-hover);
    text-decoration: none
}

.changelog-body a:hover {
    text-decoration: underline
}

/* UI优化: 可折叠的大分类标题 */
.nav-group-header {
    font-size: 1rem;                           /* 16px - 比导航项大 */
    font-weight: 700;                          /* 加粗 */
    color: var(--text-color);                  /* 主文字色 - 更醒目 */
    text-transform: none;                      /* 不转大写 - 保持原样 */
    letter-spacing: 0;                         /* 正常字间距 */
    padding: 14px 12px 8px;                    /* 更大内边距 */
    margin-top: 12px;                          /* 更大上边距 */
    margin-bottom: 4px;                        /* 底部间距 */
    cursor: pointer;                           /* 可点击游标 */
    display: flex;                             /* flex布局 */
    align-items: center;                       /* 垂直居中 */
    justify-content: space-between;            /* 两端对齐 */
    transition: color var(--transition-speed); /* 平滑过渡 */
}

.nav-group-header:hover {
    color: var(--primary-color);               /* 悬浮变紫色 */
}

.settings-nav ul li:first-child.nav-group-header {
    margin-top: 0;
    padding-top: 0;
}

/* UI优化: 分组项缩进 */
.nav-group-item .settings-nav-item {
    padding-left: 32px;                        /* 明显缩进，体现层级 */
}

/* 分组折叠图标（预留样式） */
.nav-group-header::after {
    content: '▼';                              /* 下箭头 */
    font-size: 0.75rem;                        /* 小字号 */
    color: var(--text-color-muted);            /* 次要色 */
    transition: transform var(--transition-speed); /* 旋转过渡 */
}

/* 折叠状态（预留，需配合JS） */
.nav-group-header.collapsed::after {
    transform: rotate(-90deg);                 /* 旋转为右箭头 */
}

.nav-group-header.collapsed + * {
    display: none;                             /* 隐藏后续项（需JS配合） */
}

/* ... (弹窗内搜索框 样式保持不变，圆角使用变量) ... */
.modal-search-container {
    position: relative;
    margin-bottom: 20px;
    margin-top: 5px
}

.modal-search-container .lucide {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-muted);
    width: 16px;
    height: 16px;
    pointer-events: none
}

/* [UI Refactor] 步骤 3.D: 清理 .modal-search-input (现在由 .form-control 驱动) */
.modal-search-input {
    padding-left: 40px;
    /* 保留左内边距给图标 */
}

/* ... (设置表格 样式保持不变，圆角使用变量) ... */
/* UI优化: 精致紧凑的表格样式 */
.settings-table {
    /* 核心修复：设置最大宽度，让表格在宽屏上不再过度拉伸 */
    max-width: 950px;
    width: 100%;
    /* 保持100%宽度以适应窄屏幕 */
    border-collapse: collapse;
    margin-top: 16px;                          /* 精致上边距 */
    font-size: 0.875rem;                       /* 精致字号 14px */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    table-layout: fixed;
    background-color: var(--card-bg-color);    /* 卡片背景色 */
}

.settings-table th,
.settings-table td {
    padding: 10px 12px;                        /* 精致内边距 */
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;                          /* 舒适的行高 */
}

.settings-table thead th {
    background-color: var(--bg-color-inset);
    font-weight: 600;                          /* 更明显的字重 */
    color: var(--text-color-table-header);
    text-transform: uppercase;
    font-size: 0.8125rem;                      /* 精致字号 13px */
    letter-spacing: 0.3px;                     /* 精致字间距 */
    border-bottom: 2px solid var(--border-color);
    padding: 12px 12px;                        /* 表头内边距 */
}

.settings-table tbody tr:nth-child(even) {
    background-color: var(--bg-color-table-row-even);
}

.settings-table tbody tr {
    transition: background-color var(--transition-fast); /* 平滑过渡 */
}

.settings-table tbody tr:hover {
    background-color: var(--card-bg-hover);
}

.settings-table td code {
    background-color: var(--bg-color-code);
    padding: 4px 8px;                          /* 精致内边距 */
    border-radius: var(--border-radius-sm);
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 0.8125rem;                      /* 精致字号 13px */
}

/* [V3 新增] 浅色模式下 code 标签的文字颜色 */
html[data-theme=light] .settings-table td code {
    color: #1f2937;                            /* 深色文字，确保对比度 */
}

.settings-table .cell-muted {
    color: var(--text-color-muted);
    font-style: italic;
}

/* --- 使用百分比来定义列宽，以实现响应式缩放 --- */
.settings-table th:first-child,
.settings-table td:first-child {
    width: 5%;
    text-align: center
}

.settings-table th:nth-child(2),
.settings-table td:nth-child(2) {
    width: 40%
}

.settings-table th:nth-child(3),
.settings-table td:nth-child(3) {
    width: 20%
}

.settings-table th:nth-child(4),
.settings-table td:nth-child(4) {
    width: 15%
}

.settings-table th:nth-child(5),
.settings-table td:nth-child(5) {
    width: 20%
}

.settings-table input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color)
}

/* --- Web 频道监控专用表格样式 --- */
.web-monitor-table-wrapper {
    width: 100%;
    max-width: 850px; /* [UI修复] 限制最大宽度，避免输入框在宽屏下过长 */
}

#web-monitor-channel-table {
    table-layout: fixed;             /* 使用固定布局以精确控制列宽 */
    width: 100%;
    margin-top: 4px;
    max-width: none;
}

/* 桌面端列宽比例 */
#web-monitor-channel-table .col-channel { width: 60%; }
#web-monitor-channel-table .col-label { width: 30%; }
#web-monitor-channel-table .col-action { width: 10%; }

#web-monitor-channel-table th,
#web-monitor-channel-table td {
    white-space: nowrap;
    overflow: hidden;
    padding: 6px 8px;
    vertical-align: middle;
    text-align: left;
}

#web-monitor-channel-table td:last-child {
    text-align: center; /* 操作列居中 */
}

/* 移动端适配 (≤768px) */
@media (max-width: 768px) {
    .web-monitor-table-wrapper {
        max-width: 100%;
    }

    /* [UI修复] 移动端调整列宽，确保删除按钮有足够空间 */
    #web-monitor-channel-table .col-channel { width: 45%; }
    #web-monitor-channel-table .col-label { width: 35%; }
    #web-monitor-channel-table .col-action { width: 20%; }

    #web-monitor-channel-table th,
    #web-monitor-channel-table td {
        padding: 4px; /* 减小内边距 */
    }
    
    /* 调整输入框样式以适应小屏幕 */
    #web-monitor-channel-table input.form-control {
        padding: 4px 8px;
        font-size: 13px;
        height: 32px; /* 稍微减小高度 */
    }
    
    /* 确保删除按钮可见 */
    #web-monitor-channel-table .btn-sm {
        padding: 4px 8px;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* [UI Refactor] 步骤 3.D: 清理 .external-link-btn (现在由 .btn 驱动) */
.external-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 15px 0
}

.external-link-btn {
    /* .btn 样式已在 JS 中添加 */
}

.external-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3)
}

/* TMDB按钮专属的悬浮颜色 */
.external-link-btn.tmdb-link:hover {
    background-color: #0d253f;
    /* TMDB 品牌深蓝色 */
    border-color: #01b4e4;
    color: #fff
}

/* 豆瓣按钮专属的悬浮颜色 */
.external-link-btn.douban-link:hover {
    background-color: #007722;
    /* 豆瓣品牌绿色 */
    border-color: #26a563;
    color: #fff
}

html[data-theme=light] .external-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05)
}

html[data-theme=light] .external-link-btn.tmdb-link:hover {
    background-color: #0d253f;
    border-color: #01b4e4;
    color: #fff
}

html[data-theme=light] .external-link-btn.douban-link:hover {
    background-color: #007722;
    border-color: #26a563;
    color: #fff
}

/* UI优化: 精致紧凑的设置面板网格 */
.settings-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 1:1 两栏 */
    gap: 16px;                                     /* 栏和行之间的间距 - 更紧凑 */
    /* 栏和行之间的间距 */
    align-items: stretch;
    /* [核心] 自动等高 */
    margin-top: 12px;                              /* 上边距 - 更紧凑 */
}


/* 2. "卡片中的卡片" 样式 (栅格的项目) */
/* UI优化: 精致紧凑的设置组 */
.settings-group-box {
    /* [V5 修复] 统一使用子卡片背景变量 */
    background-color: var(--bg-color-inset-secondary);
    border: 1px solid var(--border-color);
    padding: 16px;                                 /* 精致内边距 */
    border-radius: var(--border-radius-lg);
    display: flex;
    /* 确保卡片可以拉伸 */
    flex-direction: column
}

html[data-theme=light] .settings-group-box {
    /* [V5 修复] 浅色模式下，子卡片使用浅灰色背景，并添加轻微阴影 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

.settings-group-box .form-body {
    flex-grow: 1
        /* 让表单体占满剩余空间 */
}

/* 3. [核心] 让动态添加的 .rule-row 也表现得像一个卡片 */
.settings-main-grid>.rule-row {
    margin-bottom: 0;
    background-color: var(--bg-color-inset-secondary);
    border: 1px solid var(--border-color);
    padding: 16px;                                 /* 精致内边距 */
    border-radius: var(--border-radius-lg)
}

/* 功能逻辑注释: 
   这是一个可复用的工具类，用于包裹那些您希望并排显示的 .form-group-horizontal 元素。
   它会自动根据可用空间调整列数 (最少250px一列)。
*/
/* UI优化: 精致紧凑的表单行网格 */
.form-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;                                     /* 间距 - 更紧凑 */
    margin-bottom: 12px;                          /* 底部间距 - 更紧凑 */
    align-items: baseline;
    /* <-- 【优化】改为基线对齐，解决高度不一致导致的裁切 */
}

/* 功能逻辑注释: 
   当 .form-group-horizontal 成为栅格的子项时，
   移除它自己的底部外边距，以避免双重间距。
*/
.form-row-grid>.form-group-horizontal {
    margin-bottom: 0;
}

/* [UI Refactor] 步骤 3.3: 统一子标题为 <h3> (替换 h5) */
/* UI优化: 精致紧凑的子标题 */
.settings-group-box h3.config-subheading {
    margin: 0 0 12px 0;                           /* 底部间距 - 更紧凑 */
    padding-bottom: 10px;                         /* 内边距 - 更紧凑 */
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    border-left: none;
    padding-left: 0;
    font-size: 1rem;                              /* 字号 - 更精致 */
    color: var(--text-color);
    font-weight: 600;                             /* 字重 - 更明显 */
}

.form-body>.config-subheading {
    margin: 16px 0 10px 0;                        /* 间距 - 更紧凑 */
}

.form-body>.config-subheading:first-child {
    margin-top: 0
}

.settings-group-box h3.config-subheading:first-child {
    margin-top: 0
}

/* ... (主题切换按钮 样式保持不变，圆角使用变量) ... */
.theme-toggle-btn {
    /* [UI Refactor] 步骤 3.D: 清理 .theme-toggle-btn (现在由 .btn 驱动) */
    padding: 10px;
    line-height: 1
}

.theme-toggle-btn:hover {
    box-shadow: 0 4px 10px rgba(126, 34, 206, .2)
}

/* 功能逻辑注释: 
 * 这两个规则用于在浅/深色模式下，
 * 仅显示对应的图标 (月亮或太阳)。
 */
html[data-theme="light"] .theme-icon-dark {
    display: none
}

html[data-theme="dark"] .theme-icon-light {
    display: none
}

/* --- [UI 修正] 全局 Flex 布局工具类 --- */
/* 功能逻辑注释: 
 * 这是一个新的、可复用的 flex 容器类。
 * - display: flex -> 启用 flex 布局
 * - justify-content: space-between -> 子元素两端对齐 (左/右)
 * - align-items: center -> 子元素垂直居中
 * - gap: var(--spacing-md) -> 子元素之间的间距
 */
.form-row-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

/* 功能逻辑注释: 
 * 这是一个新的、用于 flex 布局中的 label 类。
 * - margin-bottom: 0 -> 移除 .form-group 带来的底部外边距
 * - flex-shrink: 0 -> 防止标签在空间不足时被压缩
 * - (其他) -> 保持与 .form-group label 视觉一致
 */
.form-label-flex {
    margin-bottom: 0;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* --- [V4 修复] 115 登录面板独立样式 (优化版) --- */
/* 功能逻辑注释: 
     这是一个专用的、独立的样式规则，用于解决115登录面板的布局问题。
     它会覆盖其他通用样式，强制实现你想要的紧邻布局。
*/

/* 功能逻辑注释: 将登录账号信息文本设置为绿色 */
#p115-account-status-container p {
    color: var(--success-color);
}

#p115-login-controls {
    display: flex;
    /* 1. 使用 flex 布局让子元素排成一行 */
    align-items: center;
    /* 2. 垂直居中对齐所有子元素 */

    /* 功能逻辑注释: (解决拥挤) 将固定的10px间距改为你UI库中的标准间距 (16px) */
    gap: var(--spacing-md);

    margin-bottom: 20px;
    /* 4. 保持与下方 "任务设置" 标题的间距 */
}

/* 功能逻辑注释: 确保标签在 flex 布局中表现正常 */
#p115-login-controls .form-label-flex {
    margin-bottom: 0;
    flex-shrink: 0;
    /* 防止标签被压缩 */
}

/* 功能逻辑注释: 确保选择框不会被过度拉伸或压缩 */
#p115-login-controls .form-control {
    width: 250px;
    /* 保持你原有的宽度 */
    flex-shrink: 0;
    /* 防止被压缩 */
}

/* 功能逻辑注释: 确保按钮容器也不会被压缩 */
#p115-login-controls #p115-account-action-container {
    flex-shrink: 0;
}

/* --- [V4 修复] 结束 --- */

/* --- [V4 修复] 新增：固定列网格布局 (用于 豆瓣/猫眼 规则卡片) --- */
/* 功能逻辑注释: 
 * 这是一个新的、可复用的布局类，专门用于实现固定列数的网格。
 * 它与 .form-row-grid (响应式，会自动换行) 是互补的。
 */
.form-grid-fixed {
    display: grid;
    /* 1. 关键：强制使用网格布局 */
    gap: 20px;
    /* 2. 子项之间的间距 (与 .form-row-grid 保持一致) */
    margin-bottom: 20px;
    /* 3. 与下方元素的间距 */
    align-items: start;
    /* 4. 子项顶部对齐 */
}

/* 功能逻辑注释: 3列布局的变体 */
.form-grid-fixed.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    /* 强制三等分列，绝不换行 */
}

/* 功能逻辑注释: 2列布局的变体 */
.form-grid-fixed.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    /* 强制二等分列，绝不换行 */
}

/* 功能逻辑注释: 在这个新布局中，标签和输入框应该垂直堆叠 */
.form-grid-fixed .form-grid-item label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color);
    /* 确保在两种模式下颜色正确 */
}

/* --- [新增] 布局修饰符 --- */
/* 功能逻辑注释:
 * 这是一个“修饰符”类，用于 .form-grid-fixed 内部。
 * 它将其默认的 "align-items: start" (顶部对齐) 覆盖为 "baseline" (基线对齐)。
 * 这专门用于对齐一行中高度不同但都包含文本的表单元素 (如下拉框和复选框)。
*/
.form-grid-fixed.align-baseline {
    align-items: baseline;
}

html[data-theme="light"] .form-grid-fixed .form-grid-item label {
    color: var(--text-color);
}

/* --- [V4 修复] 结束 --- */

/* --- [V7 修复] 底部对齐修饰符 --- */
/* 功能逻辑注释: 
     这是一个新的“修饰符”类。
     它只在被显式添加时，才会将 .form-grid-fixed 的对齐方式覆盖为 'end'。
*/
.form-grid-fixed.align-end {
    align-items: end;
    /* 底部对齐 */
}

/* --- [V7 修复] 结束 --- */

/* --- [UI 修复] 最终版 CSS 方案 (三板斧) --- */

/* * 第一板斧：组件尺寸修饰符 
 * (让 .form-control 可以有“紧凑”的宽度)
 */
.form-control.input-short,
.input-wrapper.input-short {
    width: 140px;
    min-width: 140px;
    flex-grow: 0 !important;
}

.form-control.input-medium,
.input-wrapper.input-medium {
    width: 250px;
    min-width: 250px;
    flex-grow: 0 !important;
}

.input-wrapper.input-short .form-control,
.input-wrapper.input-medium .form-control {
    width: 100%;
}

/* * 第二板斧：布局修饰符
 * (让 .form-group-horizontal 不要强行拉伸组件)
 */
.form-group-horizontal.layout-compact {
    grid-template-columns: 200px auto; /* 核心：从 1fr (拉伸) 变为 auto (包裹) */
    justify-content: start;            /* 核心：让整个组件从左侧对齐 */
}

/* * 第三板斧：标准化复合组件
 * (修复高度不一 和 复选框对齐问题)
 */

/* 1. 修复：.input-with-button (复合输入框) */
.input-with-button {
    display: flex;
    align-items: stretch; /* 关键：强制子元素垂直拉伸 */
    gap: 10px;
}

.input-with-button .form-control,
.input-with-button .btn {
    height: 48px; /* 关键：强制等高 (匹配 .form-control 的默认高度) */
    box-sizing: border-box; 
    margin: 0;
}

.input-with-button .btn {
    padding-top: 0;
    padding-bottom: 0; /* flex 会自动居中图标 */
}

/* 2. 修复：.form-group-checkbox (复选框组) */

/* * 创建 .form-checkbox-inline 修饰符
 * 剥离复选框的“布局”属性 (背景, 边距)
 * 把它变成一个“透明、等高”的“纯粹组件”
 */
.form-group-checkbox.form-checkbox-inline {
    display: inline-flex;  /* 关键：让它像一个“元素”一样排列 */
    width: auto;           /* 关键：宽度自适应 */
    background-color: transparent;
    padding: 0;
    margin: 0;
    min-height: 48px;      /* 关键：匹配“黄金标准”高度，用于对齐 */
    align-items: center;   /* 垂直居中 */
}

.form-group-checkbox.form-checkbox-inline:hover {
    background-color: transparent; /* 移除悬停背景 */
}

.form-group-checkbox.form-checkbox-inline label {
    color: var(--text-color); /* 恢复成标准标签颜色 */
    padding: 0;
    margin: 0;
}

/* ================================================================
 * 8. 合集详情视图样式 (Collection Detail View)
 * ================================================================ */

/* 功能说明:
 * 合集弹窗的特殊布局：占满整个宽度，隐藏左侧海报，显示网格状的缺失电影列表。
 */

/* 合集详情视图 - 改变布局为全宽 */
#card-details-content.collection-detail-view {
    grid-template-columns: 1fr;  /* 从 "200px 1fr" 改为单列 */
}

/* 合集详情视图 - 隐藏左侧海报包装器 */
#card-details-content.collection-detail-view .detail-poster-wrapper {
    display: none;
}

/* ================================================================
 * 8.1 合集电影网格样式 (Collection Movies Grid)
 * ================================================================ */

/* 功能说明:
 * 合集弹窗中缺失电影的网格显示样式。
 * 每个电影显示为卡片，包含海报、标题、年份和操作按钮覆盖层。
 * 参考电影订阅列表的显示方式。
 */

.collection-movies-grid {
    /* 由inline style定义网格布局 */
}

.collection-movie-card {
    /* 单个电影卡片 - 由inline style定义基本样式 */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.collection-movie-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* 电影海报包装器 */
.collection-movie-poster-wrapper {
    /* 由inline style定义尺寸和定位 */
    position: relative;
    flex: 1;
}

/* 电影海报图片 */
.collection-movie-poster-wrapper img {
    /* 由inline style定义定位和尺寸 */
}

/* 操作按钮覆盖层 */
.collection-movie-actions {
    /* 由inline style定义定位、透明度、网格布局 */
}

/* 操作按钮 */
.collection-movie-actions button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    /* [性能优化] 显式指定过渡属性 */
    transition: background-color var(--transition-fast) ease;
    font-size: 0.7rem;
}

.collection-movie-actions button:hover {
    background-color: var(--primary-color-hover);
    transform: scale(1.05);
}

/* TG搜索按钮 */
.collection-movie-actions button.search-tg-btn {
    background-color: var(--primary-color);
}

.collection-movie-actions button.search-tg-btn:hover {
    background-color: var(--primary-color-hover);
}

/* Nullbr扫描按钮 */
.collection-movie-actions button.search-nullbr-btn {
    background-color: #ff9800;
}

.collection-movie-actions button.search-nullbr-btn:hover {
    background-color: #e68900;
}

/* 刷新信息按钮 */
.collection-movie-actions button.refresh-status-btn {
    background-color: #2196f3;
}

.collection-movie-actions button.refresh-status-btn:hover {
    background-color: #0b7dda;
}

/* 删除按钮 */
.collection-movie-actions button.delete-btn {
    background-color: var(--error-color);
}

.collection-movie-actions button.delete-btn:hover {
    background-color: var(--error-color-hover);
}

/* 电影信息区域 */
.collection-movie-info {
    /* 由inline style定义 */
}

/* 电影标题 */
.collection-movie-title {
    /* 由inline style定义标题样式 */
}

/* 电影年份 */
.collection-movie-year {
    /* 由inline style定义年份样式 */
}

/* --- Web 监控配置卡片样式 --- */
.web-monitor-card {
    padding: 0 !important; /* 重置 padding，交由内部元素控制 */
    overflow: hidden;
    margin-top: 12px;
}

.web-monitor-header {
    padding: 16px 16px 0 16px;
}

.web-monitor-body {
    padding: 16px;
}

.web-monitor-footer {
    background-color: var(--bg-color-inset); /* 比卡片背景稍深/浅一点 */
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 确保 footer 里的提示文字不大不小 */
.web-monitor-footer .footer-tip {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-color-muted);
}
/* 移动端适配 footer */
@media (max-width: 768px) {
    .web-monitor-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .web-monitor-footer .footer-tip {
        margin-top: 8px;
        text-align: center;
    }
}

/* --- 模式切换控制台样式 --- */
.mode-switch-panel {
    background-color: var(--bg-color-inset);
    /* 默认使用浅灰背景 */
    border-left: 4px solid var(--primary-color);
    /* 左侧强调边框 */
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    /* 右侧圆角 */
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column; /* [修改] 强制垂直排列，改为多行布局 */
    align-items: flex-start; /* [修改] 左对齐 */
    justify-content: flex-start;
    gap: 16px; /* [修改] 增加行间距 */
    /* [性能优化] 显式指定过渡属性 */
    transition: background-color var(--transition-fast) ease;
}

/* 当背景为淡色时，稍微加深一点阴影以突出层级 */
html[data-theme=light] .mode-switch-panel {
    background-color: #f8f9fa;
    /* 极淡的灰白背景 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.mode-switch-info {
    width: 100%; /* [修改] 占满整行 */
}

.mode-switch-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 8px; /* [修改] 增加标题与描述的间距 */
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-switch-desc {
    font-size: 0.85rem;
    color: var(--text-color-secondary);
    margin: 0;
    line-height: 1.5; /* [修改] 增加行高 */
}

.mode-switch-control {
    flex-shrink: 0;
    width: 100%; /* [修改] 下拉框容器占满整行 */
    max-width: 300px; /* [修改] 限制最大宽度，避免在宽屏下过长 */
}

/* 下拉框样式微调，使其更突出 */
.mode-switch-control .form-control {
    border-color: var(--primary-color);
    /* 使用主色调边框 */
    background-color: var(--card-bg-color);
    font-weight: 500;
    height: 42px;
    /* 稍微加高 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .mode-switch-panel {
        /* flex-direction: column;  <-- [删除] 上面已经默认设为column了 */
        /* align-items: stretch;    <-- [删除] */
        border-left-width: 4px;
        /* 保持左侧边框 */
        border-radius: var(--border-radius-md);
        /* 全圆角 */
        padding: 16px;
    }

    .mode-switch-control {
        width: 100%;
        max-width: 100%; /* [修改] 移动端占满全宽 */
        margin-top: 0; /* [删除] 间距由 gap 控制 */
    }
}