/* ========================================
   套餐订单页面
   从 admin-settings-pages.css 拆分
   版本: v1.1 - 异除已统一到 admin-components.css 的样式
   ======================================== */


/* 页面容器 */
.packages-panel {
    padding: 0;
}

/* 表格区域 */
.packages-table-wrapper {
    padding: 0;
}

.packages-table.el-table {
    --el-table-border-color: var(--admin-color-border-light);
    --el-table-row-hover-bg-color: var(--admin-color-slate-100);
}

.packages-table .el-table__header th {
    background: var(--admin-gradient-toolbar);
    font-weight: 600;
    font-size: 13px;
    color: var(--admin-color-text-secondary);
    padding: 14px 12px;
}

.packages-table .el-table__body td {
    padding: 14px 12px;
}

/* 套餐信息单元格 */
.package-info-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.package-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.package-details {
    display: flex;
    align-items: center;
    gap: 8px;
}

.package-name {
    font-weight: 600;
    color: var(--admin-color-text-primary);
    font-size: 14px;
}

/* 价格标签 */
.packages-table .price-tag {
    font-size: 15px;
    font-weight: 700;
    color: var(--admin-color-danger-dark);
}

/* 有效期文本 */
.packages-table .duration-text {
    font-size: 14px;
    color: var(--admin-color-text-secondary);
    font-weight: 500;
}

/* 颜色选择器单元格 */
.color-picker-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.color-code {
    font-size: 12px;
    color: var(--admin-color-text-muted);
    font-family: monospace;
}

/* 操作按钮 */
.packages-table .action-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.packages-table .edit-btn.el-button {
    border-radius: 8px;
    background: var(--admin-color-indigo-50);
    border: 1px solid var(--admin-color-indigo-200);
    color: var(--admin-color-primary-light);
    font-weight: 500;
}

.packages-table .edit-btn.el-button:hover {
    background: var(--admin-color-indigo-100);
    border-color: var(--admin-color-indigo-200);
}

.packages-table .delete-btn.el-button {
    border-radius: 8px;
    background: var(--admin-color-red-100);
    border: 1px solid var(--admin-color-red-200);
    color: var(--admin-color-danger-dark);
    font-weight: 500;
}

.packages-table .delete-btn.el-button:hover {
    background: var(--admin-color-danger-light);
    border-color: var(--admin-color-red-300);
}

/* ==================== 支付账单流水页面样式 ==================== */

/* 页面容器 */
.orders-panel {
    padding: 0;
}

/* 营收趋势图 */
.orders-trend-card {
    background: var(--admin-color-bg-white);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--admin-color-border-light);
    box-shadow: var(--admin-shadow-sm);
}

.orders-trend-card .trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.orders-trend-card .trend-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--admin-color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.orders-trend-card .title-icon {
    color: var(--admin-color-primary-light);
}

.orders-trend-card .trend-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orders-trend-card .control-label {
    font-size: 13px;
    color: var(--admin-color-text-muted);
}

.orders-trend-card .days-input {
    width: 100px;
}

.orders-trend-card .trend-chart {
    width: 100%;
    height: 300px;
}

/* 主卡片 */
.orders-main-card.el-card {
    border-radius: 16px;
    border: 1px solid var(--admin-color-border-light);
    overflow: hidden;
}

.orders-main-card .el-card__body {
    padding: 0;
}

/* 工具栏 */
.orders-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--admin-color-border-light);
    background: var(--admin-gradient-toolbar);
}

.orders-toolbar .toolbar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--admin-color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.orders-toolbar .title-icon {
    color: var(--admin-color-primary-light);
}

.orders-toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.orders-toolbar .date-picker.el-date-editor {
    width: 280px;
    height: 40px;
}

.orders-toolbar .date-picker.el-date-editor .el-range-input {
    font-size: 14px;
}

.orders-toolbar .date-picker.el-date-editor .el-range__icon,
.orders-toolbar .date-picker.el-date-editor .el-range__close-icon {
    line-height: 40px;
}

.orders-toolbar .search-input.el-input {
    width: 240px;
}

.orders-toolbar .search-input .el-input__wrapper {
    border-radius: 10px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

.orders-toolbar .export-btn.el-button {
    border-radius: 10px;
    height: 40px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-weight: 600;
    padding: 0 18px;
}

.orders-toolbar .export-btn.el-button:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
}

.orders-toolbar .clear-btn.el-button {
    border-radius: 10px;
    height: 40px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 600;
    padding: 0 18px;
}

.orders-toolbar .clear-btn.el-button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* 表格区域 */
.orders-table-wrapper {
    padding: 0;
}

.orders-table.el-table {
    --el-table-border-color: #f1f5f9;
    --el-table-row-hover-bg-color: #fafbfc;
}

.orders-table .el-table__header th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 600;
    font-size: 13px;
    color: #475569;
    padding: 14px 12px;
}

.orders-table .el-table__header th.el-table__cell:first-child {
    text-align: left;
}

.orders-table .el-table__body td {
    padding: 14px 12px;
}

.orders-table .el-table__row {
    transition: all 0.2s ease;
}

.orders-table .el-table__row:hover {
    background: #fafbfc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 订单号单元格 */
.order-no-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-radius: 10px;
    border: 1px solid #c7d2fe;
    transition: all 0.2s ease;
}

.order-no-cell:hover {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.order-no-cell .order-icon {
    color: #6366f1;
    font-size: 15px;
}

.order-no-cell .order-no {
    font-size: 13px;
    color: #1e293b;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.3px;
}

/* 套餐标签 */
.orders-table .package-tag.el-tag {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
    font-weight: 600;
}

/* 时间文本 */
.orders-table .time-text {
    font-size: 13px;
    color: #64748b;
}

/* 用户名 */
.orders-table .username-text {
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
}

/* 金额文本 */
.orders-table .amount-text {
    font-size: 14px;
    font-weight: 700;
    color: #6366f1;
}

/* 支付方式单元格 */
.payment-cell {
    display: flex;
    justify-content: center;
}

.payment-cell .el-tag {
    padding: 6px 12px;
    font-weight: 600;
    font-size: 13px;
}

/* 状态单元格 */
.status-cell {
    display: flex;
    justify-content: center;
}

.status-cell .el-tag {
    padding: 6px 12px;
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 时间单元格 */
.time-cell-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.time-cell .time-icon {
    color: #94a3b8;
    font-size: 15px;
}

.time-cell .time-text {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* 操作按钮 */
.orders-table .mark-paid-btn.el-button {
    border-radius: 8px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-weight: 600;
    padding: 7px 14px;
    transition: all 0.2s ease;
    margin-right: 8px;
}

.orders-table .mark-paid-btn.el-button:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.2);
}

.orders-table .delete-order-btn.el-button {
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 600;
    padding: 7px 14px;
    transition: all 0.2s ease;
}

.orders-table .delete-order-btn.el-button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.2);
}

/* 分页 - 样式继承自 admin-components.css 公共组件 */

/* 空状态 */
.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #94a3b8;
}

.orders-empty .empty-icon-wrapper {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.orders-empty .empty-icon-wrapper .el-icon {
    color: #94a3b8;
}

.orders-empty .empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #475569;
    margin: 0 0 8px 0;
}

.orders-empty .empty-desc {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

/* 响应式 */
@media (max-width: 1400px) {
    .orders-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .orders-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .orders-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .orders-toolbar .toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .orders-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* 响应式调整 */
@media (max-width: 1400px) {
    .tools-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .tools-toolbar {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .tools-toolbar .toolbar-left,
    .tools-toolbar .toolbar-right {
        flex-wrap: wrap;
    }
    
    .tools-toolbar .search-input.el-input {
        width: 100%;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .tools-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   管理/消息/行为记录页面样式
   ======================================== */

/* === 管理员审计日志面板 === */
.admin-logs-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    padding: 8px;
}

.admin-logs-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-logs-right {
    min-width: 0;
}

/* 日志筛选列表 */
.logs-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logs-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logs-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(4px);
}

.logs-filter-item.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.logs-filter-item .filter-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
}

.logs-filter-item.active .filter-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.logs-filter-item .filter-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logs-filter-item .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.logs-filter-item.active .filter-label {
    color: white;
}

.logs-filter-item .filter-desc {
    font-size: 11px;
    color: #94a3b8;
}

.logs-filter-item.active .filter-desc {
    color: rgba(255, 255, 255, 0.7);
}

.logs-filter-item .filter-check {
    color: white;
    font-size: 16px;
}

/* 日志提示卡片 */
.logs-tips-card {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.logs-tips-card ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.logs-tips-card li {
    font-size: 12px;
    color: #166534;
    margin-bottom: 6px;
}

.logs-tips-card li:last-child {
    margin-bottom: 0;
}

.logs-clear-btn {
    width: 100%;
    border-radius: 8px;
}

/* 图标渐变色 */
.header-icon.logs {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.header-icon.tips {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.header-icon.list {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
}

/* === 消息统计中心面板 === */
.notify-stats-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    padding: 8px;
}

.notify-stats-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notify-stats-right {
    min-width: 0;
}

/* 消息筛选列表 */
.notify-filter-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notify-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.notify-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.notify-filter-item.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #4f46e5;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}

.notify-filter-item .filter-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
}

.notify-filter-item.active .filter-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.notify-filter-item .filter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notify-filter-item .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.notify-filter-item.active .filter-label {
    color: white;
}

.notify-filter-item .filter-count {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.notify-filter-item.active .filter-count {
    color: white;
}

.notify-filter-item .filter-desc {
    font-size: 10px;
    color: #94a3b8;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.notify-filter-item.active .filter-desc {
    color: rgba(255, 255, 255, 0.6);
}

/* 消息类型说明 */
.notify-type-desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notify-type-desc .type-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.notify-type-desc .type-item span {
    font-size: 12px;
    color: #64748b;
}

/* 图标颜色 */
.header-icon.notify {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

/* === 通用表格分页 - 样式继承自 admin-components.css 公共组件 === */

/* === 通用头部徽章 === */
.header-badge {
    padding: 4px 12px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-left: auto;
}

/* === 响应式适配 === */
@media (max-width: 1200px) {
    .admin-logs-container,
    .notify-stats-container {
        grid-template-columns: 1fr;
    }
    
    .admin-logs-left,
    .notify-stats-left {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
}

/* ========================================
   数据记录中心页面样式
   ======================================== */

/* 页面容器 */
.records-page {
    width: 100%;
}

/* ========== 简洁现代化顶部导航 ========== */

.records-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.nav-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.nav-header-text h1 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.nav-header-text p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.nav-header-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
}

.nav-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-tab-btn:hover {
    color: #475569;
    background: rgba(255, 255, 255, 0.6);
}

.nav-tab-btn.active {
    background: #ffffff;
    color: #6366f1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nav-tab-btn.active .el-icon {
    color: #6366f1;
}

/* Tab内容区 */
.records-tab-content {
    width: 100%;
}

/* 响应式适配 */
@media (max-width: 1024px) {
    .records-nav-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .nav-header-tabs {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .nav-header-tabs {
        flex-direction: column;
    }
    
    .nav-tab-btn {
        justify-content: center;
    }
}

/* 内容区域动画 */
.records-content {
    position: relative;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ========== 审计日志侧边栏布局 ========== */

.audit-logs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 8px;
}

/* 侧边栏 */
.logs-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 18px;
    padding: 24px;
    border: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    position: relative;
}

.logs-sidebar::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
    border-radius: 18px 18px 0 0;
}

/* 统计卡片 */
.sidebar-stat-card {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 
        0 12px 32px -8px rgba(99, 102, 241, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s;
}

.sidebar-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 16px 40px -8px rgba(99, 102, 241, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.sidebar-stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
    50% { transform: scale(1.1) rotate(180deg); opacity: 0.8; }
}

.sidebar-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    backdrop-filter: blur(10px);
}

.sidebar-stat-card .stat-content {
    flex: 1;
}

.sidebar-stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.sidebar-stat-card .stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
}

/* 分组标题 */
.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* 筛选列表 */
.sidebar-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow-y: auto;
}

/* 筛选项 */
.sidebar-filter-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    border: 2px solid #f3f4f6;
    position: relative;
}

.sidebar-filter-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #6366f1, #a855f7);
    border-radius: 12px 0 0 12px;
    transform: scaleY(0);
    transition: transform 0.25s;
}

.sidebar-filter-item:hover {
    background: #f8fafc;
    transform: translateX(6px);
    border-color: #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sidebar-filter-item.active {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #a855f7;
    box-shadow: 
        0 6px 16px -4px rgba(168, 85, 247, 0.4),
        0 0 0 1px rgba(168, 85, 247, 0.1) inset;
    transform: translateX(8px);
}

.sidebar-filter-item.active::before {
    transform: scaleY(1);
}

/* 筛选图标 */
.sidebar-filter-item .filter-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    flex-shrink: 0;
    transition: all 0.2s;
}

.sidebar-filter-item.active .filter-icon-wrapper {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(168, 85, 247, 0.5);
}

/* 色彩类 */
.filter-icon-wrapper.text-slate-500 { color: #64748b; }
.filter-icon-wrapper.text-blue-500 { color: #3b82f6; }
.filter-icon-wrapper.text-emerald-500 { color: #10b981; }
.filter-icon-wrapper.text-indigo-500 { color: #6366f1; }
.filter-icon-wrapper.text-amber-500 { color: #f59e0b; }
.filter-icon-wrapper.text-rose-500 { color: #f43f5e; }
.filter-icon-wrapper.text-purple-500 { color: #a855f7; }
.filter-icon-wrapper.text-cyan-500 { color: #06b6d4; }

/* 筛选文本 */
.sidebar-filter-item .filter-text {
    flex: 1;
    min-width: 0;
}

.sidebar-filter-item .filter-name {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}

.sidebar-filter-item.active .filter-name {
    color: #7c3aed;
}

.sidebar-filter-item .filter-desc {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
    line-height: 1.2;
}

.sidebar-filter-item.active .filter-desc {
    color: #a855f7;
}

/* 操作按钮区 */
.sidebar-actions {
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* 右侧主区域 */
.logs-main-area {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 主区域头部 */
.main-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.main-area-header .header-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.main-area-header .header-title p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.main-area-header .header-filter-tag {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 主区域表格 */
.main-area-table {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.main-area-table .el-table {
    border-radius: 0;
}

.main-area-table .el-table__body-wrapper {
    max-height: calc(100vh - 450px);
    overflow-y: auto;
}

/* 主区域分页 - 样式继承自 admin-components.css 公共组件 */

/* 清爽表格样式 */
.clean-table {
    width: 100%;
}

/* ========== 消息统计卡片网格布局 ========== */

.notify-stats-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 8px;
}

/* 统计卡片网格 */
.notify-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* 单个统计卡片 */
.notify-stat-card {
    position: relative;
    background: #fff;
    border: 3px solid #e5e7eb;
    border-radius: 20px;
    padding: 28px 24px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

.notify-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.notify-stat-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #a855f7;
    box-shadow: 0 16px 48px -8px rgba(168, 85, 247, 0.35);
}

.notify-stat-card.active {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #fce7f3 100%);
    border-color: #a855f7;
    box-shadow: 
        0 20px 60px -12px rgba(168, 85, 247, 0.5),
        0 0 0 2px rgba(168, 85, 247, 0.2) inset;
    transform: translateY(-8px) scale(1.03);
}

.notify-stat-card.active::before {
    transform: scaleX(1);
}

.notify-stat-card.active {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #a855f7;
    box-shadow: 0 16px 48px -12px rgba(168, 85, 247, 0.4);
}

.notify-stat-card.active::before {
    transform: scaleX(1);
}

/* 卡片图标 */
.notify-stat-card .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.notify-stat-card .card-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.notify-stat-card:hover .card-icon::before {
    opacity: 1;
}

.notify-stat-card:hover .card-icon {
    transform: scale(1.1);
}

.notify-stat-card.active .card-icon {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(168, 85, 247, 0.5);
}

/* 图标色彩类 */
.notify-stat-card .card-icon.text-indigo-500 { color: #6366f1; }
.notify-stat-card .card-icon.text-blue-500 { color: #3b82f6; }
.notify-stat-card .card-icon.text-emerald-500 { color: #10b981; }
.notify-stat-card .card-icon.text-amber-500 { color: #f59e0b; }
.notify-stat-card .card-icon.text-rose-500 { color: #f43f5e; }

/* 卡片内容 */
.notify-stat-card .card-content {
    text-align: center;
}

.notify-stat-card .card-value {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.notify-stat-card.active .card-value {
    color: #7c3aed;
}

.notify-stat-card .card-label {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-top: 8px;
}

.notify-stat-card.active .card-label {
    color: #7c3aed;
}

.notify-stat-card .card-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.notify-stat-card.active .card-desc {
    color: #a855f7;
}

/* 卡片指示器 */
.notify-stat-card .card-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 3px 3px 0 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notify-stat-card.active .card-indicator {
    transform: translateX(-50%) scaleX(1);
}

/* 表格区域 */
.notify-table-area {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 表格头部 */
.table-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.table-area-header .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-area-header .header-left h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.table-area-header .header-filter-tag {
    display: flex;
    align-items: center;
}

/* 表格内容 */
.table-area-content {
    overflow: hidden;
}

.table-area-content .el-table {
    border-radius: 0;
}

.table-area-content .el-table__body-wrapper {
    max-height: calc(100vh - 520px);
    overflow-y: auto;
}

/* 表格分页 - 样式继承自 admin-components.css 公共组件 */

/* 响应式设计 */
@media (max-width: 1400px) {
    .notify-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .audit-logs-layout {
        grid-template-columns: 1fr;
    }
    
    .logs-sidebar {
        order: 2;
    }
    
    .logs-main-area {
        order: 1;
    }
    
    .notify-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .notify-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== 三模块统一优化 ========== */

/* 统一的卡片阴影系统 */
.audit-logs-layout,
.notify-stats-layout {
    animation: contentFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 子元素递增动画 */
.logs-sidebar,
.logs-main-area,
.notify-stats-grid,
.notify-table-area {
    animation: itemFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.logs-main-area,
.notify-table-area {
    animation-delay: 0.1s;
}

@keyframes itemFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 统一的按钮组样式 */
.logs-sidebar .el-button,
.table-area-header .el-button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.logs-sidebar .el-button:hover,
.table-area-header .el-button:hover {
    transform: translateY(-1px);
}

/* 统一的表格样式增强 */
.clean-table {
    border-radius: 0;
}

.clean-table .el-table__header th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    font-weight: 600;
    font-size: 13px;
    padding: 16px 12px;
    height: auto;
}

.clean-table .el-table__body td {
    padding: 14px 12px;
    height: auto;
}

.clean-table .el-table__row {
    transition: background-color 0.2s;
}

.clean-table .el-table__row:hover {
    background: #f8fafc;
}

/* 表格边框优化 */
.clean-table .el-table__border {
    border-color: #e5e7eb;
}

.clean-table .el-table td,
.clean-table .el-table th {
    border-color: #e5e7eb;
}

/* 卡片悬停变亮效果 */
.sidebar-filter-item,
.notify-stat-card,
.tab-card-item {
    position: relative;
    overflow: hidden;
}

.sidebar-filter-item::after,
.notify-stat-card::after,
.tab-card-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.sidebar-filter-item:hover::after,
.notify-stat-card:hover::after,
.tab-card-item:hover::after {
    left: 100%;
}

/* 微妙的边框动画 */
.logs-main-area,
.notify-table-area,
.behavior-table-container {
    position: relative;
}

.logs-main-area::before,
.notify-table-area::before,
.behavior-table-container::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 0%, rgba(168, 85, 247, 0.1) 50%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.logs-main-area:hover::before,
.notify-table-area:hover::before,
.behavior-table-container:hover::before {
    opacity: 1;
}

/* ========== 自定义滚动条样式 ========== */

/* 为表格区域添加优雅滚动条 */
.main-area-table .el-table__body-wrapper::-webkit-scrollbar,
.table-area-content .el-table__body-wrapper::-webkit-scrollbar,
.behavior-table-container .el-table__body-wrapper::-webkit-scrollbar,
.logs-sidebar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.main-area-table .el-table__body-wrapper::-webkit-scrollbar-track,
.table-area-content .el-table__body-wrapper::-webkit-scrollbar-track,
.behavior-table-container .el-table__body-wrapper::-webkit-scrollbar-track,
.logs-sidebar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.main-area-table .el-table__body-wrapper::-webkit-scrollbar-thumb,
.table-area-content .el-table__body-wrapper::-webkit-scrollbar-thumb,
.behavior-table-container .el-table__body-wrapper::-webkit-scrollbar-thumb,
.logs-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    border-radius: 4px;
    transition: background 0.3s;
}

.main-area-table .el-table__body-wrapper::-webkit-scrollbar-thumb:hover,
.table-area-content .el-table__body-wrapper::-webkit-scrollbar-thumb:hover,
.behavior-table-container .el-table__body-wrapper::-webkit-scrollbar-thumb:hover,
.logs-sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

/* 滚动条角落 */
.main-area-table .el-table__body-wrapper::-webkit-scrollbar-corner,
.table-area-content .el-table__body-wrapper::-webkit-scrollbar-corner,
.behavior-table-container .el-table__body-wrapper::-webkit-scrollbar-corner {
    background: #f1f5f9;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .records-hero-section {
        grid-template-columns: 1fr;
    }
    
    .records-tabs-card {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .records-tabs-card {
        grid-template-columns: 1fr;
    }
    
    .records-title-card {
        padding: 24px 20px;
    }
    
    .tab-card-item {
        padding: 20px 16px;
    }
}

/* ========== 旧样式保留（兼容性）========== */

/* 页面头部（已弃用，保留以防引用） */
.records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.records-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.records-header .header-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    backdrop-filter: blur(10px);
}

.records-header .header-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0 0 4px 0;
}

.records-header .header-title p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.records-header .header-right {
    display: flex;
    align-items: center;
}

.records-header .header-tabs-nav {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.records-header .header-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.records-header .header-tab-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.records-header .header-tab-item.active {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: 600;
}

/* Tab导航容器 */
.records-tabs-container {
    margin-bottom: 20px;
}

.records-tabs-nav {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 6px;
    gap: 4px;
}

.records-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.records-tab-item:hover {
    color: #475569;
    background: rgba(255, 255, 255, 0.5);
}

.records-tab-item.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.records-tab-item.active .el-icon {
    color: white;
}

/* Tab内容区 - 已在上方定义，此处删除重复 */

/* === 装饰性分栏布局样式（已弃用） === */

/* 管理员日志分栏布局 - 增强 */
.admin-logs-container .panel-card {
    margin-bottom: 16px;
}

.admin-logs-container .panel-card:last-child {
    margin-bottom: 0;
}

/* 消息统计分栏布局 - 增强 */
.notify-stats-container .panel-card {
    margin-bottom: 16px;
}

.notify-stats-container .panel-card:last-child {
    margin-bottom: 0;
}

/* 用户行为分栏布局 - 增强 */
.behavior-panel-container .panel-card {
    margin-bottom: 16px;
}

.behavior-panel-container .panel-card:last-child {
    margin-bottom: 0;
}

/* 补充header-icon颜色 */
.panel-card-header .header-icon.logs {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.panel-card-header .header-icon.tips {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.panel-card-header .header-icon.list {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
}

.panel-card-header .header-icon.notify {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.panel-card-header .header-icon.behavior {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #6366f1;
}

.panel-card-header .header-icon.filter {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.panel-card-header .header-icon.actions {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #db2777;
}

/* === 筛选列表样式补充 === */
.logs-filter-list,
.notify-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logs-filter-item,
.notify-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logs-filter-item:hover,
.notify-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(4px);
}

.logs-filter-item.active,
.notify-filter-item.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.logs-filter-item .filter-icon,
.notify-filter-item .filter-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
}

.logs-filter-item.active .filter-icon,
.notify-filter-item.active .filter-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.logs-filter-item .filter-info,
.notify-filter-item .filter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logs-filter-item .filter-label,
.notify-filter-item .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.logs-filter-item.active .filter-label,
.notify-filter-item.active .filter-label {
    color: white;
}

.logs-filter-item .filter-desc,
.notify-filter-item .filter-desc {
    font-size: 11px;
    color: #94a3b8;
}

.logs-filter-item.active .filter-desc,
.notify-filter-item.active .filter-desc {
    color: rgba(255, 255, 255, 0.7);
}

.logs-filter-item .filter-check {
    color: white;
    font-size: 16px;
}

.notify-filter-item .filter-count {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
}

.notify-filter-item.active .filter-count {
    color: white;
}

/* === 行为统计卡片样式 === */
.behavior-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.behavior-stats-grid .stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid;
}

.behavior-stats-grid .stat-card.total {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #c7d2fe;
}

.behavior-stats-grid .stat-card.today {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
}

.behavior-stats-grid .stat-card.active {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #bbf7d0;
}

.behavior-stats-grid .stat-card.success {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.behavior-stats-grid .stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.behavior-stats-grid .stat-card.total .stat-icon {
    background: #6366f1;
    color: white;
}

.behavior-stats-grid .stat-card.today .stat-icon {
    background: #3b82f6;
    color: white;
}

.behavior-stats-grid .stat-card.active .stat-icon {
    background: #22c55e;
    color: white;
}

.behavior-stats-grid .stat-card.success .stat-icon {
    background: #f59e0b;
    color: white;
}

.behavior-stats-grid .stat-card .stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.behavior-stats-grid .stat-card .stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
}

.behavior-stats-grid .stat-card .stat-label {
    font-size: 12px;
    color: #64748b;
}

/* === 筛选表单样式 === */
.behavior-filter-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.behavior-filter-form .filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.behavior-filter-form .filter-item label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.behavior-filter-form .filter-input-group {
    display: flex;
    gap: 8px;
}

.behavior-filter-form .filter-input-group .el-input {
    flex: 1;
}

.behavior-filter-form .el-select,
.behavior-filter-form .el-date-editor {
    width: 100%;
}

/* 当前用户标识 */
.current-user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    margin-top: 12px;
}

.current-user-badge > .el-icon {
    color: #3b82f6;
    font-size: 16px;
}

.current-user-badge > span {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
}

/* === 操作按钮组 === */
.behavior-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.behavior-actions .el-button {
    width: 100%;
    border-radius: 8px;
}

/* === 日志提示卡片 === */
.logs-tips-card {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.logs-tips-card ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.logs-tips-card li {
    font-size: 12px;
    color: #166534;
    margin-bottom: 6px;
}

.logs-tips-card li:last-child {
    margin-bottom: 0;
}

.logs-clear-btn {
    width: 100%;
    border-radius: 8px;
}

/* === 消息类型说明 === */
.notify-type-desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notify-type-desc .type-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.notify-type-desc .type-item span {
    font-size: 12px;
    color: #64748b;
}

/* === 通用表格分页 - 样式继承自 admin-components.css 公共组件 === */

/* === 通用头部徽章 === */
.panel-card-header .header-badge {
    padding: 4px 12px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-left: auto;
}

.panel-card-header .header-actions {
    margin-left: auto;
}

/* === 响应式适配 === */
@media (max-width: 1280px) {
    .admin-logs-container,
    .notify-stats-container,
    .behavior-panel-container {
        grid-template-columns: 1fr;
    }
    
    .admin-logs-left,
    .notify-stats-left,
    .behavior-panel-left {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .records-tabs-nav {
        flex-direction: column;
        width: 100%;
    }
    
    .records-tab-item {
        justify-content: center;
    }
    
    .records-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .records-header .header-left {
        flex-direction: column;
    }
}

/* ========================================
   教程视频管理页面样式
   ======================================== */

/* 页面容器 */
.tutorials-page {
    padding: 0;
}

/* 顶部标题栏 */
.tutorials-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.tutorials-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tutorials-header .header-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.tutorials-header .header-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.tutorials-header .header-title h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.tutorials-header .header-title p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

.tutorials-header .add-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 10px;
}

.tutorials-header .add-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.tutorials-header .manage-cat-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 10px;
    margin-left: 10px;
}

.tutorials-header .manage-cat-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.cat-dialog-content {
    padding: 0 20px 20px;
}

.cat-dialog-content .cat-add-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cat-dialog-content .cat-add-row .el-input {
    flex: 1;
}

.cat-dialog-content .cat-add-row .el-input-number {
    flex-shrink: 0;
    width: 100px;
}

.cat-dialog-content .cat-add-row .el-switch {
    flex-shrink: 0;
}

.cat-dialog-content .cat-add-row .el-button {
    flex-shrink: 0;
}

/* 工具资源分类管理弹窗样式 */
.tool-cat-add-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

.tool-cat-add-row .el-input {
    flex: 1;
    max-width: 400px;
}

.tool-cat-add-row .el-input-number {
    flex-shrink: 0;
    width: 100px;
}

.tool-cat-add-row .el-button {
    flex-shrink: 0;
}

.tutorials-header .header-center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.tutorials-header .header-stats-cards {
    display: flex;
    gap: 12px;
}

.tutorials-header .header-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 100px;
}

.tutorials-header .header-stat-card .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.tutorials-header .header-stat-card.total .stat-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.tutorials-header .header-stat-card.published .stat-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.tutorials-header .header-stat-card.scheduled .stat-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.tutorials-header .header-stat-card.rollback .stat-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.tutorials-header .header-stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.tutorials-header .header-stat-card .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tutorials-header .header-stat-card .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

/* 分栏布局 */
.tutorials-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

/* 操作提示横栏 */
.tutorials-tips-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 16px;
}

.tutorials-tips-bar .tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tutorials-tips-bar .tips-icon {
    font-size: 18px;
    color: #f59e0b;
}

.tutorials-tips-bar .tips-title {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
}

.tutorials-tips-bar .tips-divider {
    width: 1px;
    height: 20px;
    background: #fde68a;
    flex-shrink: 0;
}

.tutorials-tips-bar .tips-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.tutorials-tips-bar .tip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
}

.tutorials-tips-bar .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tutorials-tips-bar .tip-dot.danger {
    background: #ef4444;
}

.tutorials-tips-bar .tip-dot.info {
    background: #3b82f6;
}

.tutorials-tips-bar .tip-dot.success {
    background: #22c55e;
}

.tutorials-tips-bar .tip-dot.warning {
    background: #f59e0b;
}

.tutorials-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tutorials-right {
    min-width: 0;
}

/* 教程统计列表 */
.tutorial-stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tutorial-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.tutorial-stat-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.tutorial-stat-item:first-child {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #7c3aed;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.tutorial-stat-item:first-child:hover {
    transform: translateX(0);
}

.tutorial-stat-item .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.tutorial-stat-item:first-child .stat-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.tutorial-stat-item.total .stat-icon {
    background: #8b5cf6;
    color: white;
}

.tutorial-stat-item.active .stat-icon {
    background: #22c55e;
    color: white;
}

.tutorial-stat-item.views .stat-icon {
    background: #3b82f6;
    color: white;
}

.tutorial-stat-item.categories .stat-icon {
    background: #f59e0b;
    color: white;
}

.tutorial-stat-item .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tutorial-stat-item .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.tutorial-stat-item:first-child .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.tutorial-stat-item .stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.tutorial-stat-item:first-child .stat-value {
    color: white;
}

.tutorial-stat-item .stat-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
}

.tutorial-stat-item:first-child .stat-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* 分类筛选列表 */
.tutorial-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tutorial-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutorial-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.tutorial-filter-item.active {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #8b5cf6;
}

.tutorial-filter-item .filter-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.tutorial-filter-item .filter-icon.all {
    background: #e0e7ff;
    color: #4f46e5;
}

.tutorial-filter-item .filter-icon.category {
    background: #fef3c7;
    color: #d97706;
}

.tutorial-filter-item .filter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tutorial-filter-item .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.tutorial-filter-item .filter-desc {
    font-size: 11px;
    color: #94a3b8;
}

.tutorial-filter-item .check-icon {
    color: #8b5cf6;
    font-size: 16px;
}

/* 操作提示 */
.tutorials-page .tips-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tutorials-page .tip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.tutorials-page .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tutorials-page .tip-dot.success {
    background: #22c55e;
}

.tutorials-page .tip-dot.warning {
    background: #f59e0b;
}

.tutorials-page .tip-dot.danger {
    background: #ef4444;
}

.tutorials-page .tip-dot.info {
    background: #3b82f6;
}

/* 教程列表头部 */
.tutorials-page .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.tutorials-page .search-input {
    width: 200px;
}

/* 教程表格行样式 */
.tutorials-table.el-table {
    --el-table-border-color: transparent;
}

.tutorials-table .el-table__inner-wrapper::before {
    display: none;
}

.tutorials-table .el-table__body {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.tutorials-table .el-table__row {
    border: 1px solid #e2e8f0;
    border-left: 3px solid #6366f1;
    border-radius: 8px;
    background: linear-gradient(135deg, #fafbff 0%, #f8fafc 100%);
    transition: all 0.2s ease;
}

.tutorials-table .el-table__row:hover > td.el-table__cell {
    background: transparent;
}

.tutorials-table .el-table__row:hover {
    border-color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.tutorials-table .el-table__row td.el-table__cell {
    border-bottom: none;
    background: transparent;
}

.tutorials-table .el-table__row td:first-child {
    border-radius: 8px 0 0 8px;
}

.tutorials-table .el-table__row td:last-child {
    border-radius: 0 8px 8px 0;
}

/* 教程信息单元格 */
.tutorials-table .tutorial-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tutorials-table .tutorial-thumb {
    width: 72px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

.tutorials-table .tutorial-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tutorials-table .thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.tutorials-table .tutorial-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tutorials-table .tutorial-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tutorials-table .tutorial-desc {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tutorials-table .duration-text {
    font-size: 12px;
    color: #64748b;
    font-family: monospace;
}

.tutorials-table .view-count {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    font-family: monospace;
}

.tutorials-table .action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tutorials-table .edit-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.tutorials-table .edit-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.tutorials-table .delete-btn.el-button {
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 500;
}

.tutorials-table .delete-btn.el-button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.tutorials-page .refresh-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.tutorials-page .refresh-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

/* 教程页头部图标颜色 */
.tutorials-page .panel-card-header .header-icon.stats {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    color: #7c3aed;
}

.tutorials-page .panel-card-header .header-icon.filter {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.tutorials-page .panel-card-header .header-icon.tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.tutorials-page .panel-card-header .header-icon.list {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .tutorials-container {
        grid-template-columns: 280px 1fr;
    }
    
    .tutorials-page .search-input {
        width: 160px;
    }
}

@media (max-width: 992px) {
    .tutorials-container {
        grid-template-columns: 1fr;
    }
    
    .tutorials-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .tutorials-header .header-left {
        flex-direction: column;
    }
}

/* ========================================
   用户需求管理页面样式
   ======================================== */

/* 页面容器 */
.requirements-page {
    padding: 0;
}

/* 顶部标题栏 */
.requirements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.requirements-header .header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.requirements-header .header-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.requirements-header .header-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.requirements-header .header-title h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.requirements-header .header-title p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

.requirements-header .header-center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.requirements-header .header-stats-cards {
    display: flex;
    gap: 12px;
}

.requirements-header .header-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    transition: all 0.2s ease;
}

.requirements-header .header-stat-card.clickable {
    cursor: pointer;
}

.requirements-header .header-stat-card.clickable:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.requirements-header .header-stat-card.clickable.active {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.requirements-header .header-stat-card .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.requirements-header .header-stat-card.total .stat-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.requirements-header .header-stat-card.published .stat-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.requirements-header .header-stat-card.scheduled .stat-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.requirements-header .header-stat-card.rollback .stat-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.requirements-header .header-stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.requirements-header .header-stat-card .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.requirements-header .header-stat-card .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

/* 分栏布局 */
.requirements-container {
    display: block;
}

/* 操作提示横栏 */
.requirements-tips-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 16px;
}

.requirements-tips-bar .tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.requirements-tips-bar .tips-icon {
    font-size: 18px;
    color: #f59e0b;
}

.requirements-tips-bar .tips-title {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
}

.requirements-tips-bar .tips-divider {
    width: 1px;
    height: 20px;
    background: #fde68a;
    flex-shrink: 0;
}

.requirements-tips-bar .tips-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.requirements-tips-bar .tip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
}

.requirements-tips-bar .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.requirements-tips-bar .tip-dot.danger {
    background: #ef4444;
}

.requirements-tips-bar .tip-dot.info {
    background: #3b82f6;
}

.requirements-tips-bar .tip-dot.success {
    background: #22c55e;
}

.requirements-tips-bar .tip-dot.warning {
    background: #f59e0b;
}

.requirements-left {
    display: none;
}

.requirements-right {
    min-width: 0;
}

/* 需求统计列表 */
.requirement-stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.requirement-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.requirement-stat-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.requirement-stat-item:first-child {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #d97706;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.requirement-stat-item:first-child:hover {
    transform: translateX(0);
}

.requirement-stat-item .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.requirement-stat-item:first-child .stat-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.requirement-stat-item.total .stat-icon {
    background: #f59e0b;
    color: white;
}

.requirement-stat-item.pending .stat-icon {
    background: #eab308;
    color: white;
}

.requirement-stat-item.progress .stat-icon {
    background: #3b82f6;
    color: white;
}

.requirement-stat-item.completed .stat-icon {
    background: #22c55e;
    color: white;
}

.requirement-stat-item .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.requirement-stat-item .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.requirement-stat-item:first-child .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.requirement-stat-item .stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.requirement-stat-item:first-child .stat-value {
    color: white;
}

.requirement-stat-item .stat-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
}

.requirement-stat-item:first-child .stat-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* 状态筛选列表 */
.requirement-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.requirement-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.requirement-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.requirement-filter-item.active {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #f59e0b;
}

.requirement-filter-item .filter-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.requirement-filter-item .filter-icon.all {
    background: #e0e7ff;
    color: #4f46e5;
}

.requirement-filter-item .filter-icon.pending {
    background: #fef3c7;
    color: #d97706;
}

.requirement-filter-item .filter-icon.progress {
    background: #dbeafe;
    color: #2563eb;
}

.requirement-filter-item .filter-icon.completed {
    background: #dcfce7;
    color: #16a34a;
}

.requirement-filter-item .filter-icon.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.requirement-filter-item .filter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.requirement-filter-item .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.requirement-filter-item .filter-desc {
    font-size: 11px;
    color: #94a3b8;
}

.requirement-filter-item .check-icon {
    color: #f59e0b;
    font-size: 16px;
}

/* 操作提示 */
.requirements-page .tips-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.requirements-page .tip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.requirements-page .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.requirements-page .tip-dot.success {
    background: #22c55e;
}

.requirements-page .tip-dot.warning {
    background: #f59e0b;
}

.requirements-page .tip-dot.danger {
    background: #ef4444;
}

.requirements-page .tip-dot.info {
    background: #3b82f6;
}

/* 需求列表头部 */
.requirements-page .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.requirements-page .search-input {
    width: 180px;
}

.requirements-page .priority-select {
    width: 120px;
}

/* 需求表格样式 */
.requirements-table .user-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.requirements-table .requirement-title {
    cursor: pointer;
    transition: color 0.2s;
}

.requirements-table .requirement-title:hover {
    color: #3b82f6;
}

.requirements-table .title-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.requirements-table .title-desc {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.requirements-table .time-text {
    font-size: 12px;
    color: #64748b;
}

.requirements-table .action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.requirements-table .edit-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.requirements-table .edit-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.requirements-table .status-btn.el-button {
    border-radius: 8px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #16a34a;
    font-weight: 500;
}

.requirements-table .status-btn.el-button:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

.requirements-page .refresh-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.requirements-page .refresh-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

/* 需求页头部图标颜色 */
.requirements-page .panel-card-header .header-icon.stats {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.requirements-page .panel-card-header .header-icon.filter {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.requirements-page .panel-card-header .header-icon.tips {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.requirements-page .panel-card-header .header-icon.list {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .requirements-container {
        grid-template-columns: 280px 1fr;
    }
    
    .requirements-page .search-input {
        width: 150px;
    }
}

@media (max-width: 992px) {
    .requirements-container {
        grid-template-columns: 1fr;
    }
    
    .requirements-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .requirements-header .header-left {
        flex-direction: column;
    }
}

/* 需求详情抽屉样式 */
.requirement-detail-drawer .el-drawer__body {
    padding: 0;
}

.requirement-detail-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-header-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.detail-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
}

.detail-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.detail-meta {
    display: flex;
    gap: 20px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.detail-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.detail-meta .meta-item .el-icon {
    font-size: 14px;
    color: #94a3b8;
}

.detail-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
}

.section-title .el-icon {
    font-size: 16px;
    color: #6366f1;
}

.section-title.success .el-icon {
    color: #22c55e;
}

.section-title .attachment-count {
    background: #6366f1;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.section-content {
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
}

.description-content {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.reply-content {
    background: #f0fdf4;
    border-radius: 8px;
    padding: 14px;
    color: #166534;
}

.admin-reply-section {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    position: relative;
    z-index: 1;
}

.attachment-item:hover {
    background: #f1f5f9;
    z-index: 2;
}

.attachment-item .el-button {
    position: relative;
    z-index: 3;
}

.attachment-item .edit-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.attachment-item .edit-btn.el-button .el-icon {
    font-size: 14px;
}

.attachment-item .edit-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.attachment-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attachment-icon {
    font-size: 16px;
    color: #6366f1;
}

.attachment-name {
    font-size: 13px;
    color: #475569;
}

.reply-section {
    background: #fefce8;
    border-color: #fef08a;
}

.reply-textarea {
    margin-bottom: 12px;
}

.reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ========================================
   用户反馈管理页面样式
   ======================================== */

/* 页面容器 */
.feedback-page {
    padding: 0;
}

/* 顶部标题栏 */
.feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.feedback-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feedback-header .header-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.feedback-header .header-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.feedback-header .header-title h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.feedback-header .header-title p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

.feedback-header .header-center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.feedback-header .header-stats-cards {
    display: flex;
    gap: 12px;
}

.feedback-header .header-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-header .header-stat-card:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.feedback-header .header-stat-card.active {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.feedback-header .header-stat-card .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.feedback-header .header-stat-card.total .stat-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.feedback-header .header-stat-card.published .stat-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.feedback-header .header-stat-card.scheduled .stat-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.feedback-header .header-stat-card.rollback .stat-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.feedback-header .header-stat-card.improvement .stat-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
}

.feedback-header .header-stat-card.other .stat-icon {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
}

.feedback-header .header-stat-card.pending .stat-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.feedback-header .header-stat-card.in-progress .stat-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.feedback-header .header-stat-card.resolved .stat-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.feedback-header .header-stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.feedback-header .header-stat-card .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feedback-header .header-stat-card .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

/* 操作提示横栏 */
.feedback-tips-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 16px;
}

.feedback-tips-bar .tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.feedback-tips-bar .tips-icon {
    font-size: 18px;
    color: #f59e0b;
}

.feedback-tips-bar .tips-title {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
}

.feedback-tips-bar .tips-divider {
    width: 1px;
    height: 20px;
    background: #fde68a;
    flex-shrink: 0;
}

.feedback-tips-bar .tips-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.feedback-tips-bar .tip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
}

.feedback-tips-bar .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.feedback-tips-bar .tip-dot.danger {
    background: #ef4444;
}

.feedback-tips-bar .tip-dot.info {
    background: #3b82f6;
}

.feedback-tips-bar .tip-dot.success {
    background: #22c55e;
}

.feedback-tips-bar .tip-dot.warning {
    background: #f59e0b;
}

/* 分栏布局 */
.feedback-container {
    display: block;
}

.feedback-left {
    display: none;
}

.feedback-right {
    min-width: 0;
}

/* 反馈统计列表 */
.feedback-stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.feedback-stat-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.feedback-stat-item:first-child {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.feedback-stat-item:first-child:hover {
    transform: translateX(0);
}

.feedback-stat-item .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.feedback-stat-item:first-child .stat-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.feedback-stat-item.total .stat-icon {
    background: #3b82f6;
    color: white;
}

.feedback-stat-item.pending .stat-icon {
    background: #f59e0b;
    color: white;
}

.feedback-stat-item.bug .stat-icon {
    background: #ef4444;
    color: white;
}

.feedback-stat-item.resolved .stat-icon {
    background: #22c55e;
    color: white;
}

.feedback-stat-item .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feedback-stat-item .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.feedback-stat-item:first-child .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.feedback-stat-item .stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.feedback-stat-item:first-child .stat-value {
    color: white;
}

.feedback-stat-item .stat-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
}

.feedback-stat-item:first-child .stat-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* 类型筛选列表 */
.feedback-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.feedback-filter-item.active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #3b82f6;
}

.feedback-filter-item .filter-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.feedback-filter-item .filter-icon.all {
    background: #e0e7ff;
    color: #4f46e5;
}

.feedback-filter-item .filter-icon.bug {
    background: #fee2e2;
    color: #dc2626;
}

.feedback-filter-item .filter-icon.feature {
    background: #dbeafe;
    color: #2563eb;
}

.feedback-filter-item .filter-icon.improvement {
    background: #fef3c7;
    color: #d97706;
}

.feedback-filter-item .filter-icon.other {
    background: #e2e8f0;
    color: #64748b;
}

.feedback-filter-item .filter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feedback-filter-item .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.feedback-filter-item .filter-desc {
    font-size: 11px;
    color: #94a3b8;
}

.feedback-filter-item .check-icon {
    color: #3b82f6;
    font-size: 16px;
}

/* 操作提示 */
.feedback-page .tips-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback-page .tip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.feedback-page .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.feedback-page .tip-dot.success {
    background: #22c55e;
}

.feedback-page .tip-dot.warning {
    background: #f59e0b;
}

.feedback-page .tip-dot.danger {
    background: #ef4444;
}

.feedback-page .tip-dot.info {
    background: #3b82f6;
}

/* 反馈列表头部 */
.feedback-page .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.feedback-page .search-input {
    width: 180px;
}

.feedback-page .status-select {
    width: 110px;
}

/* 反馈表格样式 */
.feedback-table .user-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.feedback-table .feedback-content {
    cursor: pointer;
    font-size: 13px;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.feedback-table .feedback-content:hover {
    color: #3b82f6;
}

.feedback-table .time-text {
    font-size: 12px;
    color: #64748b;
}

.feedback-table .action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.feedback-table .edit-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.feedback-table .edit-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.feedback-table .status-btn.el-button {
    border-radius: 8px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #16a34a;
    font-weight: 500;
}

.feedback-table .status-btn.el-button:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

.feedback-page .refresh-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.feedback-page .refresh-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

/* 反馈页头部图标颜色 */
.feedback-page .panel-card-header .header-icon.stats {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.feedback-page .panel-card-header .header-icon.filter {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.feedback-page .panel-card-header .header-icon.tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.feedback-page .panel-card-header .header-icon.list {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .feedback-page .search-input {
        width: 150px;
    }
}

@media (max-width: 992px) {
    .feedback-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .feedback-header .header-left {
        flex-direction: column;
    }
}

/* 反馈详情抽屉样式 */
.feedback-detail-drawer .el-drawer__body {
    padding: 0;
}

.feedback-detail-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 截图网格 */
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.screenshot-item {
    position: relative;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16/9;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.screenshot-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.screenshot-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screenshot-item .video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

/* === 行为统计列表样式（4行1列） === */
.behavior-stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.behavior-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
}

.behavior-stat-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.behavior-stat-item:first-child {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.behavior-stat-item:first-child:hover {
    transform: translateX(0);
}

.behavior-stat-item .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.behavior-stat-item:first-child .stat-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.behavior-stat-item.total .stat-icon {
    background: #6366f1;
    color: white;
}

.behavior-stat-item.today .stat-icon {
    background: #3b82f6;
    color: white;
}

.behavior-stat-item.active .stat-icon {
    background: #22c55e;
    color: white;
}

.behavior-stat-item.success .stat-icon {
    background: #f59e0b;
    color: white;
}

.behavior-stat-item .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.behavior-stat-item .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.behavior-stat-item:first-child .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.behavior-stat-item .stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.behavior-stat-item:first-child .stat-value {
    color: white;
}

.behavior-stat-item .stat-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
}

.behavior-stat-item:first-child .stat-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   应用版本控制页面样式
   ======================================== */

/* 页面容器 */
.versions-page {
    padding: 0;
}

/* 顶部标题栏 */
.versions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 16px;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.versions-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.versions-header .header-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.versions-header .header-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.versions-header .header-title h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.versions-header .header-title p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

.versions-header .publish-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 10px;
}

.versions-header .publish-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.versions-header .header-center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.versions-header .header-stats-cards {
    display: flex;
    gap: 12px;
}

.versions-header .header-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    transition: all 0.2s ease;
}

.versions-header .header-stat-card.clickable {
    cursor: pointer;
}

.versions-header .header-stat-card.clickable:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.versions-header .header-stat-card.clickable.active {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.versions-header .header-stat-card .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.versions-header .header-stat-card.total .stat-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.versions-header .header-stat-card.published .stat-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.versions-header .header-stat-card.scheduled .stat-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.versions-header .header-stat-card.rollback .stat-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.versions-header .header-stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.versions-header .header-stat-card .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.versions-header .header-stat-card .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

/* 版本面板图标 */
.modern-panel-header .header-icon.versions {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}

/* 分栏布局 */
.versions-container {
    display: block;
    position: relative;
    z-index: 2;
}

/* 操作提示横栏 */
.versions-tips-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 16px;
}

.versions-tips-bar .tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.versions-tips-bar .tips-icon {
    font-size: 18px;
    color: #f59e0b;
}

.versions-tips-bar .tips-title {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
}

.versions-tips-bar .tips-divider {
    width: 1px;
    height: 20px;
    background: #fde68a;
    flex-shrink: 0;
}

.versions-tips-bar .tips-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.versions-tips-bar .tip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
}

.versions-tips-bar .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.versions-tips-bar .tip-dot.danger {
    background: #ef4444;
}

.versions-tips-bar .tip-dot.info {
    background: #3b82f6;
}

.versions-tips-bar .tip-dot.success {
    background: #22c55e;
}

.versions-tips-bar .tip-dot.warning {
    background: #f59e0b;
}

.versions-left {
    display: none;
}

.versions-right {
    min-width: 0;
}

.versions-page .panel-card {
    overflow: visible;
}

.versions-page .panel-card:hover {
    box-shadow: none;
}

/* 版本统计列表 */
.version-stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.version-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.version-stat-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.version-stat-item:first-child {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.version-stat-item:first-child:hover {
    transform: translateX(0);
}

.version-stat-item .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.version-stat-item:first-child .stat-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.version-stat-item.total .stat-icon {
    background: #10b981;
    color: white;
}

.version-stat-item.published .stat-icon {
    background: #22c55e;
    color: white;
}

.version-stat-item.scheduled .stat-icon {
    background: #f59e0b;
    color: white;
}

.version-stat-item.rollback .stat-icon {
    background: #ef4444;
    color: white;
}

.version-stat-item .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.version-stat-item .stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.version-stat-item:first-child .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.version-stat-item .stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.version-stat-item:first-child .stat-value {
    color: white;
}

.version-stat-item .stat-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
}

.version-stat-item:first-child .stat-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* 版本筛选列表 */
.version-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.version-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.version-filter-item.active {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #10b981;
}

.version-filter-item .filter-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.version-filter-item .filter-icon.all {
    background: #e0e7ff;
    color: #4f46e5;
}

.version-filter-item .filter-icon.published {
    background: #dcfce7;
    color: #16a34a;
}

.version-filter-item .filter-icon.scheduled {
    background: #fef3c7;
    color: #d97706;
}

.version-filter-item .filter-icon.rollback {
    background: #fee2e2;
    color: #dc2626;
}

.version-filter-item .filter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.version-filter-item .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.version-filter-item .filter-desc {
    font-size: 11px;
    color: #94a3b8;
}

.version-filter-item .check-icon {
    color: #10b981;
    font-size: 16px;
}

/* 操作提示 */
.versions-page .tips-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.versions-page .tip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.versions-page .tip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.versions-page .tip-dot.success {
    background: #22c55e;
}

.versions-page .tip-dot.warning {
    background: #f59e0b;
}

.versions-page .tip-dot.danger {
    background: #ef4444;
}

.versions-page .tip-dot.info {
    background: #3b82f6;
}

/* 版本列表表格 */
.versions-table .status-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.versions-table .version-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
}

.versions-table .time-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.versions-table .time-text {
    font-size: 12px;
    color: #64748b;
}

.versions-table .scheduled-tip {
    font-size: 10px;
    color: #f59e0b;
    font-weight: 500;
}

.versions-table .action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.versions-table .edit-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.versions-table .edit-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.versions-table .delete-btn.el-button {
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 500;
}

.versions-table .delete-btn.el-button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.versions-page .refresh-btn {
    margin-left: auto;
}

.versions-page .refresh-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.versions-page .refresh-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

/* 版本页头部图标颜色 */
.versions-page .panel-card-header .header-icon.stats {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.versions-page .panel-card-header .header-icon.filter {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.versions-page .panel-card-header .header-icon.tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.versions-page .panel-card-header .header-icon.list {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .versions-container {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 992px) {
    .versions-container {
        grid-template-columns: 1fr;
    }
    
    .versions-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .versions-header .header-left {
        flex-direction: column;
    }
}

/* ========================================
   推广分佣系统页面样式 - Referral Page
   ======================================== */

.referral-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    min-height: 100%;
}

/* 顶部标题栏 - 青色渐变 */
.referral-header {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-radius: 16px;
    padding: 20px;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25);
}

.referral-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.referral-header .header-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.referral-header .header-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.referral-header .header-title h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.referral-header .header-title p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

/* Tab导航栏 - 胶囊式 */
.referral-tabs-nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

.referral-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}

.referral-tab-item:hover {
    background: white;
    border-color: rgba(6, 182, 212, 0.4);
    color: #0891b2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.referral-tab-item.active {
    background: white;
    color: #0891b2;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

/* 内容区 */
.referral-content {
    flex: 1;
}

.referral-overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 核心指标 - 横向排列 */
.referral-stats-row {
    display: flex;
    gap: 16px;
}

.referral-stats-row .referral-stat-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.referral-stats-row .referral-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 概览页布局 */
.referral-overview .overview-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

.overview-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.overview-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 核心指标统计 - 4行1列 */
.referral-stats-list {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

.referral-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 180px;
}

.referral-stat-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.referral-stat-item .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.referral-stat-item .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.referral-stat-item .stat-label {
    font-size: 12px;
    color: #64748b;
}

.referral-stat-item .stat-value {
    font-size: 18px;
    font-weight: 700;
}

.referral-stat-item .stat-desc {
    font-size: 11px;
    color: #94a3b8;
}

/* 统计项配色 */
.referral-stat-item.total {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: #38bdf8;
}

.referral-stat-item.total .stat-icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
}

.referral-stat-item.total .stat-value {
    color: #0284c7;
}

.referral-stat-item.referrals {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border-color: #2dd4bf;
}

.referral-stat-item.referrals .stat-icon {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
}

.referral-stat-item.referrals .stat-value {
    color: #0d9488;
}

.referral-stat-item.commission {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #4ade80;
}

.referral-stat-item.commission .stat-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.referral-stat-item.commission .stat-value {
    color: #16a34a;
}

.referral-stat-item.paid {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #c084fc;
}

.referral-stat-item.paid .stat-icon {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
}

.referral-stat-item.paid .stat-value {
    color: #9333ea;
}

/* 待处理提现卡片 */
.pending-withdraw-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 12px;
    border: 1px solid #fcd34d;
}

.pending-withdraw-card .pending-count {
    font-size: 42px;
    font-weight: 700;
    color: #d97706;
    line-height: 1;
}

.pending-withdraw-card .pending-label {
    font-size: 14px;
    color: #92400e;
    margin: 8px 0 16px;
}

/* 配置页布局 */
.config-container {
    max-width: 680px;
}

.config-card .config-form {
    padding: 8px 0;
}

.config-form .form-tip {
    margin-left: 12px;
    font-size: 12px;
    color: #94a3b8;
}

.config-form .el-textarea__inner {
    font-family: inherit;
}

/* 推广用户页面 */
.referral-users {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 工具栏 - 横版布局 */
.referral-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.referral-toolbar .toolbar-search {
    display: flex;
    align-items: center;
    gap: 12px;
}

.referral-toolbar .toolbar-tips {
    display: flex;
    align-items: center;
    gap: 16px;
}

.referral-toolbar .toolbar-tips .tips-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #f59e0b;
}

.referral-toolbar .toolbar-tips .tips-divider {
    width: 1px;
    height: 16px;
    background: #e2e8f0;
}

.referral-toolbar .toolbar-tips .tip-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.referral-toolbar .toolbar-tips .tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.referral-toolbar .toolbar-tips .tip-dot.info {
    background: #3b82f6;
}

.referral-toolbar .toolbar-tips .tip-dot.success {
    background: #10b981;
}

.referral-toolbar .toolbar-tips .tip-dot.warning {
    background: #f59e0b;
}

/* 用户列表布局 */
.users-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

.users-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.users-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.users-left .search-btn {
    margin-top: 12px;
    width: 100%;
}

/* 提现审核布局 */
.withdrawals-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

.withdrawals-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.withdrawals-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 提现筛选列表 */
.withdraw-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.withdraw-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.withdraw-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.withdraw-filter-item.active {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-color: #06b6d4;
}

.withdraw-filter-item .filter-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.withdraw-filter-item .filter-icon.all {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
}

.withdraw-filter-item .filter-icon.pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.withdraw-filter-item .filter-icon.approved {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.withdraw-filter-item .filter-icon.paid {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.withdraw-filter-item .filter-icon.rejected {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
}

.withdraw-filter-item .filter-content {
    flex: 1;
}

.withdraw-filter-item .filter-label {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.withdraw-filter-item .check-icon {
    color: #06b6d4;
    font-size: 16px;
}

/* 表格样式 */
.referral-table {
    border-radius: 8px;
    overflow: hidden;
}

.referral-table .user-name {
    font-weight: 600;
    color: #1e293b;
}

.referral-table .referral-code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    color: #0891b2;
    background: #ecfeff;
    padding: 2px 8px;
    border-radius: 4px;
}

.referral-table .count-text {
    font-weight: 700;
    font-size: 15px;
    color: #334155;
}

.referral-table .money-green {
    font-weight: 600;
    color: #16a34a;
}

.referral-table .money-orange {
    font-weight: 600;
    color: #d97706;
}

.referral-table .money-red {
    font-weight: 700;
    font-size: 16px;
    color: #dc2626;
}

.referral-table .time-text {
    font-size: 13px;
    color: #64748b;
}

.referral-table .text-slate {
    color: #64748b;
}

.referral-table .account-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.referral-table .account-name {
    font-weight: 500;
    color: #1e293b;
    font-size: 13px;
}

.referral-table .account-number {
    font-size: 12px;
    color: #94a3b8;
}

.referral-table .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.referral-table .approve-btn.el-button {
    border-radius: 8px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #16a34a;
    font-weight: 500;
}

.referral-table .approve-btn.el-button:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

.referral-table .delete-btn.el-button {
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 500;
}

.referral-table .delete-btn.el-button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.referral-table .confirm-paid-btn.el-button {
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #2563eb;
    font-weight: 500;
}

.referral-table .confirm-paid-btn.el-button:hover {
    background: #dbeafe;
    border-color: #60a5fa;
    color: #1d4ed8;
}

.referral-page .refresh-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.referral-page .refresh-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.referral-table .no-action {
    color: #cbd5e1;
}

.referral-table .paid-label {
    color: #16a34a;
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.referral-table .rejected-label {
    color: #dc2626;
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 分页 - 使用全局样式 */

/* 刷新按钮 */
.referral-page .refresh-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* panel-card头部图标 */
.referral-page .panel-card-header .header-icon.stats {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.referral-page .panel-card-header .header-icon.pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.referral-page .panel-card-header .header-icon.tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.referral-page .panel-card-header .header-icon.config {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.referral-page .panel-card-header .header-icon.search {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.referral-page .panel-card-header .header-icon.filter {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.referral-page .panel-card-header .header-icon.list {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    color: #0891b2;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .overview-container,
    .users-container,
    .withdrawals-container {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 992px) {
    .overview-container,
    .users-container,
    .withdrawals-container {
        grid-template-columns: 1fr;
    }
    
    .referral-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .referral-header .header-left {
        flex-direction: column;
    }
    
    .referral-tabs-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   CDK兑换码管理页面样式 - CDK Page
   ======================================== */

.cdk-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    min-height: 100%;
}

/* 顶部标题栏 - 紫色渐变 */
.cdk-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 16px;
    padding: 20px;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25);
}

.cdk-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cdk-header .header-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.cdk-header .header-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.cdk-header .header-title h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.cdk-header .header-title p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

/* Tab导航栏 - 胶囊式 */
.cdk-tabs-container {
    background: white;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cdk-tabs-nav {
    display: flex;
    gap: 8px;
}

.cdk-tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.cdk-tab-item:hover {
    background: #f1f5f9;
    color: #7c3aed;
}

.cdk-tab-item.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* 内容区 */
.cdk-content {
    flex: 1;
}

/* 概览页布局 */
.cdk-overview .overview-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

.cdk-overview .overview-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cdk-overview .overview-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CDK统计 - 4行1列 */
.cdk-stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdk-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.cdk-stat-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cdk-stat-item .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cdk-stat-item .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cdk-stat-item .stat-label {
    font-size: 12px;
    color: #64748b;
}

.cdk-stat-item .stat-value {
    font-size: 18px;
    font-weight: 700;
}

.cdk-stat-item .stat-desc {
    font-size: 11px;
    color: #94a3b8;
}

/* 统计项配色 */
.cdk-stat-item.total {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #c084fc;
}

.cdk-stat-item.total .stat-icon {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
}

.cdk-stat-item.total .stat-value {
    color: #9333ea;
}

.cdk-stat-item.unused {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #4ade80;
}

.cdk-stat-item.unused .stat-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.cdk-stat-item.unused .stat-value {
    color: #16a34a;
}

.cdk-stat-item.used {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #60a5fa;
}

.cdk-stat-item.used .stat-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.cdk-stat-item.used .stat-value {
    color: #2563eb;
}

.cdk-stat-item.today {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}

.cdk-stat-item.today .stat-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.cdk-stat-item.today .stat-value {
    color: #d97706;
}

/* 快捷操作 */
.quick-actions {
    display: flex;
    gap: 12px;
}

.quick-actions .el-button {
    flex: 1;
}

/* 生成CDK布局 - 工具栏横向占满，结果区在下方 */
.generate-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.generate-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.generate-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.generate-form .form-tip {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.generate-form .input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.generate-form .unit {
    color: #64748b;
    font-size: 14px;
}

.generate-form .unit-tip {
    color: #94a3b8;
    font-size: 12px;
}

.generate-form .w-full {
    width: 100%;
}

.generate-form .generate-btn {
    width: 100%;
}

/* 生成结果 */
.panel-card.has-result .panel-card-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.empty-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.empty-result .empty-icon {
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-result p {
    font-size: 14px;
    margin: 0;
}

.codes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.code-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.code-item .code-text {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    color: #7c3aed;
    font-weight: 500;
}

.copy-all-btn {
    margin-left: auto;
}

/* CDK列表布局 */
.list-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

.list-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.list-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.list-left .search-btn {
    margin-top: 12px;
    width: 100%;
}

/* CDK筛选列表 */
.cdk-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cdk-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cdk-filter-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.cdk-filter-item.active {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #8b5cf6;
}

.cdk-filter-item .filter-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cdk-filter-item .filter-icon.all {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
}

.cdk-filter-item .filter-icon.unused {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.cdk-filter-item .filter-icon.used {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.cdk-filter-item .filter-content {
    flex: 1;
}

.cdk-filter-item .filter-label {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.cdk-filter-item .check-icon {
    color: #8b5cf6;
    font-size: 16px;
}

/* 表格样式 */
.cdk-table {
    border-radius: 8px;
    overflow: hidden;
}

.cdk-table .cdk-code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    color: #7c3aed;
    background: #faf5ff;
    padding: 2px 8px;
    border-radius: 4px;
}

.cdk-table .duration-text {
    font-weight: 600;
    color: #334155;
}

.cdk-table .user-text {
    color: #64748b;
}

.cdk-table .time-text {
    font-size: 13px;
    color: #94a3b8;
}

.cdk-table .batch-text {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: #94a3b8;
}

.cdk-table .no-action {
    color: #cbd5e1;
}

.cdk-table .delete-btn.el-button {
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 500;
}

.cdk-table .delete-btn.el-button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.cdk-page .refresh-btn.el-button {
    border-radius: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #6366f1;
    font-weight: 500;
}

.cdk-page .refresh-btn.el-button:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

/* 刷新按钮 */
.cdk-page .refresh-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* panel-card头部图标 */
.cdk-page .panel-card-header .header-icon.stats {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #7c3aed;
}

.cdk-page .panel-card-header .header-icon.tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.cdk-page .panel-card-header .header-icon.quick {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.cdk-page .panel-card-header .header-icon.generate {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.cdk-page .panel-card-header .header-icon.result {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #7c3aed;
}

.cdk-page .panel-card-header .header-icon.filter {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.cdk-page .panel-card-header .header-icon.search {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.cdk-page .panel-card-header .header-icon.list {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #7c3aed;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .cdk-overview .overview-container,
    .generate-container,
    .list-container {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 992px) {
    .cdk-overview .overview-container,
    .generate-container,
    .list-container {
        grid-template-columns: 1fr;
    }
    
    .cdk-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .cdk-header .header-left {
        flex-direction: column;
    }
    
    .cdk-tabs-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .codes-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   记录面板统一布局系统 - Records Panel Unified Layout
   ============================================================ */

/* === 根容器 === */
.records-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: recordsFadeIn 0.4s ease;
}

@keyframes recordsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === 顶部区域 === */
.records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.records-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.records-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.records-header-icon.audit {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.records-header-icon.notify {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.records-header-icon.behavior {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #7c3aed;
}

.records-header-info h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.records-header-info p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.records-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.records-header-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
    border-right: 1px solid #e2e8f0;
}

.records-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.records-stat-item .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.records-stat-item .stat-label {
    font-size: 11px;
    color: #94a3b8;
}

.records-header-actions {
    display: flex;
    gap: 8px;
}

/* === 工具栏区域 === */
.records-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    flex-wrap: wrap;
}

.records-toolbar-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.records-toolbar-section.filters {
    flex: 1;
}

.records-toolbar-divider {
    width: 1px;
    height: 32px;
    background: #e2e8f0;
}

/* 筛选标签组 */
.records-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.records-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.records-filter-tag:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.records-filter-tag.active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    color: #1d4ed8;
}

.records-filter-tag .tag-check {
    display: none;
    color: #2563eb;
}

.records-filter-tag.active .tag-check {
    display: inline-flex;
}

/* 筛选控件 */
.records-filter-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.records-filter-control .control-label {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    padding-left: 2px;
}

/* === 内容区域 === */
.records-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* 卡片网格布局 */
.records-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 20px;
}

/* 统一卡片样式 */
.records-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    animation: cardSlideIn 0.3s ease backwards;
}

.records-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.records-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.records-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.records-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
}

.records-card-user {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.records-card-body {
    margin-bottom: 12px;
}

.records-card-body p {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.records-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.records-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #94a3b8;
}

.records-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 操作徽章 */
.records-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.records-badge.blue { background: #dbeafe; color: #1d4ed8; }
.records-badge.green { background: #dcfce7; color: #15803d; }
.records-badge.red { background: #fee2e2; color: #dc2626; }
.records-badge.orange { background: #ffedd5; color: #c2410c; }
.records-badge.purple { background: #ede9fe; color: #7c3aed; }
.records-badge.gray { background: #f1f5f9; color: #64748b; }
.records-badge.cyan { background: #cffafe; color: #0891b2; }

/* === 列表布局 === */
.records-list {
    display: flex;
    flex-direction: column;
}

.records-list-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
    animation: listItemFadeIn 0.3s ease backwards;
}

.records-list-item:last-child {
    border-bottom: none;
}

.records-list-item:hover {
    background: #fafbfc;
}

@keyframes listItemFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.records-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.records-list-icon.blue { background: #dbeafe; color: #2563eb; }
.records-list-icon.green { background: #dcfce7; color: #16a34a; }
.records-list-icon.orange { background: #ffedd5; color: #ea580c; }
.records-list-icon.red { background: #fee2e2; color: #dc2626; }
.records-list-icon.purple { background: #ede9fe; color: #7c3aed; }
.records-list-icon.cyan { background: #cffafe; color: #0891b2; }

.records-list-content {
    flex: 1;
    min-width: 0;
}

.records-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.records-list-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.records-list-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.records-list-body {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 8px;
}

.records-list-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #94a3b8;
}

.records-list-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 阅读状态指示器 */
.records-read-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.records-read-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.records-read-status.unread .status-dot {
    background: #3b82f6;
}

.records-read-status.read .status-dot {
    background: #94a3b8;
}

.records-read-status.unread {
    color: #3b82f6;
}

.records-read-status.read {
    color: #94a3b8;
}

/* === 统计卡片组 === */
.records-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #e2e8f0;
}

.records-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.records-stat-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.records-stat-card.active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.records-stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.records-stat-card-icon.indigo { background: #e0e7ff; color: #4f46e5; }
.records-stat-card-icon.blue { background: #dbeafe; color: #2563eb; }
.records-stat-card-icon.green { background: #dcfce7; color: #16a34a; }
.records-stat-card-icon.amber { background: #fef3c7; color: #d97706; }
.records-stat-card-icon.rose { background: #fce7f3; color: #db2777; }

.records-stat-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.records-stat-card-label {
    font-size: 12px;
    color: #64748b;
}

.records-stat-card.active .records-stat-card-value {
    color: #1d4ed8;
}

.records-stat-card.active .records-stat-card-label {
    color: #3b82f6;
}

/* === 时间线布局 === */
.records-timeline {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
}

.records-timeline-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    position: relative;
}

.records-timeline-item:last-child {
    padding-bottom: 0;
}

.records-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.records-timeline-dot {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.records-timeline-dot.green { background: #dcfce7; color: #16a34a; }
.records-timeline-dot.blue { background: #dbeafe; color: #2563eb; }
.records-timeline-dot.orange { background: #ffedd5; color: #ea580c; }
.records-timeline-dot.red { background: #fee2e2; color: #dc2626; }
.records-timeline-dot.purple { background: #ede9fe; color: #7c3aed; }
.records-timeline-dot.cyan { background: #cffafe; color: #0891b2; }
.records-timeline-dot.gray { background: #f1f5f9; color: #64748b; }

.records-timeline-line {
    width: 2px;
    flex: 1;
    background: #e2e8f0;
    margin-top: 8px;
}

.records-timeline-content {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.records-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.records-timeline-user {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.records-timeline-time {
    font-size: 12px;
    color: #94a3b8;
}

.records-timeline-body {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
}

.records-timeline-target {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
}

.records-timeline-detail {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.records-timeline-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #94a3b8;
}

.records-timeline-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* === 底部分页 === */
.records-footer {
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    background: #fafbfc;
    border-top: 1px solid #e2e8f0;
}

/* === 空状态 === */
.records-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.records-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.records-empty-text {
    font-size: 14px;
}

/* === 响应式适配 === */
@media (max-width: 1200px) {
    .records-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .records-stat-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .records-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .records-header-left {
        flex-direction: column;
    }
    
    .records-header-stats {
        padding-right: 0;
        border-right: none;
        padding-bottom: 12px;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .records-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .records-toolbar-divider {
        width: 100%;
        height: 1px;
    }
    
    .records-stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .records-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   媒体库管理页面样式 - Media Library
   ======================================== */

/* 主容器 */
.media-library-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 内容区 */
.media-library-content {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-top: 20px;
}

/* 左侧分类树 */
.media-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.media-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.media-sidebar .sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.media-sidebar .category-tree {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* 分类项 */
.media-sidebar .category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    color: #475569;
}

.media-sidebar .category-item:hover {
    background: #f1f5f9;
}

.media-sidebar .category-item.active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
}

.media-sidebar .category-item.is-parent {
    font-weight: 600;
}

.media-sidebar .category-item .cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.media-sidebar .category-item .file-count {
    font-size: 12px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
}

.media-sidebar .category-item.active .file-count {
    background: rgba(59, 130, 246, 0.2);
    color: #1d4ed8;
}

.media-sidebar .category-item .cat-actions {
    opacity: 0;
    transition: opacity 0.2s;
}

.media-sidebar .category-item:hover .cat-actions {
    opacity: 1;
}

.media-sidebar .category-item .more-icon {
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s;
}

.media-sidebar .category-item .more-icon:hover {
    color: #3b82f6;
}

.media-sidebar .category-item.sub-item {
    padding-left: 36px;
    font-weight: normal;
}

/* 右侧文件列表 */
.media-main {
    flex: 1;
    min-width: 0;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 工具栏 */
.media-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    gap: 16px;
    flex-wrap: wrap;
}

.media-toolbar .toolbar-left,
.media-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 文件网格 */
.media-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* 文件卡片 */
.media-card {
    position: relative;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.media-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.media-card.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.media-card .media-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}

.media-card .media-preview {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* 棋盘格背景，方便区分图片边界 */
    background-image: 
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #fafafa;
    cursor: pointer;
}

.media-card .media-preview .el-image {
    width: 100%;
    height: 100%;
}

/* 确保图片完整显示 */
.media-card .media-preview .el-image img,
.media-card .media-preview .el-image__inner {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.media-card .media-preview .image-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #f1f5f9;
}

.media-card .video-placeholder,
.media-card .doc-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    background: #f1f5f9;
}

.media-card .video-placeholder span,
.media-card .doc-placeholder span {
    font-size: 12px;
    font-weight: 500;
}

.media-card .media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.media-card:hover .media-overlay {
    opacity: 1;
}

/* 媒体卡片 overlay 按钮样式 */
html body .media-card .media-overlay .el-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html body .media-card .media-overlay .el-button--primary {
    background-color: #3b82f6;
    color: white;
}

html body .media-card .media-overlay .el-button--primary:hover {
    background-color: #2563eb;
}

html body .media-card .media-overlay .el-button--success {
    background-color: #10b981;
    color: white;
}

html body .media-card .media-overlay .el-button--success:hover {
    background-color: #059669;
}

html body .media-card .media-overlay .el-button--danger {
    background-color: #ef4444;
    color: white;
}

html body .media-card .media-overlay .el-button--danger:hover {
    background-color: #dc2626;
}

.media-card .media-info {
    padding: 12px;
}

.media-card .media-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    margin: 0 0 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-card .media-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
}

.media-card .media-date {
    font-size: 11px;
    color: #94a3b8;
    margin: 4px 0 0 0;
}

/* 分页 - 样式继承自 admin-components.css 公共组件 */

/* 预览内容 */
.preview-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    /* 棋盘格背景，方便查看透明/白色图片 */
    background-image: 
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 20px;
}

.preview-content .preview-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-content .preview-video {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
}

.preview-content .preview-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #64748b;
}

.preview-content .preview-doc p {
    font-size: 14px;
    color: #334155;
    margin: 0;
}

/* 媒体库面板头部图标 */
.modern-panel-header .header-icon.images {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .media-library-content {
        flex-direction: column;
    }
    
    .media-sidebar {
        width: 100%;
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .media-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .media-toolbar .toolbar-left,
    .media-toolbar .toolbar-right {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* 移动文件对话框 */
.move-dialog-content {
    padding: 10px 0;
}

.move-dialog-content .move-tips {
    margin: 0 0 16px 0;
    color: #64748b;
    font-size: 14px;
}

.move-dialog-content .move-tips strong {
    color: #3b82f6;
}

.move-tree {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
}

.move-tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.move-tree-node:hover {
    background: #f1f5f9;
}

.move-tree-node.is-current {
    background: #dbeafe;
    color: #1d4ed8;
}

.move-tree-node .el-icon {
    color: #f59e0b;
}

.move-tree-node.is-current .el-icon {
    color: #3b82f6;
}

/* ========================================
   媒体库选择器弹窗样式 - Media Picker Dialog
   ======================================== */

.media-picker-dialog .el-dialog__body {
    padding: 0 20px 20px;
}

.media-picker-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.media-picker-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
}

.media-picker-grid {
    min-height: 320px;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    background: #f8fafc;
}

.media-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.media-grid-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: white;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.media-grid-item:hover {
    border-color: #a5b4fc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}

.media-grid-item.is-selected {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}

.media-item-image {
    width: 100%;
    height: 85px;
    display: block;
}

.media-item-error {
    width: 100%;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
}

.media-item-name {
    padding: 6px 8px;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: white;
    border-top: 1px solid #f1f5f9;
}

.media-grid-item.is-selected .media-item-name {
    background: #eef2ff;
    color: #4338ca;
}

.media-item-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #6366f1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(99,102,241,0.4);
}

/* 媒体选择器分页 - 样式继承自 admin-components.css 公共组件 */