/* ========================================
   Admin Style System - Refactored
   管理后台样式系统 - 重构版
   使用 @layer 和 CSS 变量优化
   ======================================== */

/* 全局样式 - 禁止页面滚动，由 main.flex-1 接管 */
html, body {
    overflow: hidden;
    max-width: 100%;
    height: 100vh;
}

/* 下拉框高z-index，用于弹窗内 - 使用高特异性选择器替代 !important */
html body .high-z-select {
    z-index: 99999;
}

/* 下拉菜单样式 - 在admin.html中单独定义 */

/* 全局：纯色卡颜色选择器 - 去除外层边框，只保留色卡 */
.hide-picker-icon.el-color-picker .el-color-picker__trigger {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 10px;
}
.hide-picker-icon.el-color-picker .el-color-picker__color {
    border: none;
    border-radius: 10px;
}
.hide-picker-icon.el-color-picker .el-color-picker__color-inner {
    border-radius: 10px;
}
.hide-picker-icon.el-color-picker .el-color-picker__icon {
    display: none;
}

/* ==================== @layer admin-base: 基础组件样式 ==================== */
@layer admin-base {
    /* 通用工具类 */
    .cursor-pointer {
        cursor: pointer;
    }

    /* 禁用浏览器自动填充样式（使用动画替代!important） */
    @keyframes autofill-reset {
        0%, 100% {
            background: transparent;
            color: inherit;
        }
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-animation: autofill-reset 0s forwards;
        animation: autofill-reset 0s forwards;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* 密码样式输入框（不使用 type=password） */
    .secret-input input {
        -webkit-text-security: disc;
    }
    .secret-input.show-text input {
        -webkit-text-security: none;
    }

    /* 表单标签右对齐样式 */
    .text-right.el-form-item .el-form-item__content {
        justify-content: flex-end;
        display: flex;
    }

    .text-right.el-form-item .el-form-item__label {
        text-align: left;
        justify-content: flex-start;
    }

    .text-right .el-switch,
    .text-right .el-color-picker {
        margin-left: auto;
    }

    /* 颜色选择器基础样式 */
    .el-color-picker .el-color-picker__trigger {
        cursor: pointer;
    }

    .el-color-picker .el-color-picker__color {
        cursor: pointer;
    }

    /* 动态卡片颜色选择器 */
    .card-color-picker.el-color-picker {
        width: var(--admin-width-full);
        height: var(--admin-height-xs);
    }

    .card-color-picker .el-color-picker__trigger {
        width: var(--admin-width-full);
        height: var(--admin-height-xs);
        border-radius: var(--admin-radius-xs);
        padding: 0;
        border: 1px solid var(--admin-color-border);
        background: var(--admin-color-bg-transparent);
        box-shadow: var(--admin-shadow-none);
        transition: var(--admin-transition-fast);
    }

    .card-color-picker .el-color-picker__trigger:hover {
        border-color: var(--admin-color-primary);
    }

    .card-color-picker .el-color-picker__color {
        width: var(--admin-width-full);
        height: var(--admin-width-full);
        border: none;
        border-radius: 3px;
    }

    .card-color-picker .el-color-picker__color-inner {
        width: var(--admin-width-full);
        height: var(--admin-width-full);
        border-radius: 3px;
    }

    .card-color-picker .el-color-picker__icon {
        display: none;
    }

    .el-form-item .flex-1.el-color-picker {
        width: var(--admin-width-full);
    }

    .el-form-item .flex-1.el-color-picker .el-color-picker__trigger {
        width: var(--admin-width-full);
        min-width: var(--admin-width-full);
    }

    /* 侧边栏样式 */
    .sidebar {
        background: var(--admin-color-bg-white);
        border-right: 1px solid var(--admin-color-border-light);
        width: var(--admin-width-sidebar);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transition: transform var(--admin-transition-smooth);
        z-index: 50;
        display: flex;
        flex-direction: column;
    }

    .sidebar-logo {
        padding: 20px 32px;
        display: flex;
        align-items: center;
        gap: var(--admin-spacing-md);
    }

    .logo-box {
        width: var(--admin-width-logo);
        height: var(--admin-width-logo);
        background: var(--admin-gradient-primary);
        border-radius: var(--admin-radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--admin-color-text-white);
        box-shadow: var(--admin-shadow-logo);
        flex-shrink: 0;
        overflow: visible;
    }

    .logo-box img,
    .logo-box .logo-img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: var(--admin-radius-lg);
    }

    /* 有自定义logo时移除背景 */
    .logo-box:has(img) {
        background: transparent;
        box-shadow: none;
    }

    .logo-text-wrapper {
        display: flex;
        flex-direction: column;
    }

    .el-menu-admin {
        border-right: none;
        padding: 0 var(--admin-spacing-lg);
        background: var(--admin-color-bg-transparent);
    }

    .el-menu-item {
        border-radius: var(--admin-radius-lg);
        height: var(--admin-height-menu-item);
        line-height: var(--admin-height-menu-item);
        margin-bottom: 0;
        color: var(--admin-color-text-muted);
        font-weight: var(--admin-font-weight-medium);
        border: 1px solid transparent;
    }

    .el-menu-item .el-icon {
        font-size: var(--admin-font-size-3xl);
        margin-right: var(--admin-spacing-md);
        transition: var(--admin-transition-normal);
    }

    .el-menu-item.is-active {
        background: var(--admin-color-primary-lighter);
        color: var(--admin-color-primary);
        border-color: var(--admin-color-indigo-100);
        font-weight: var(--admin-font-weight-bold);
    }

    .el-menu-item.is-active .el-icon {
        color: var(--admin-color-primary);
        transform: scale(1.1);
    }

    .el-menu-item:hover:not(.is-active) {
        background: var(--admin-color-bg-transparent);
    }

    /* 头部样式 */
    .main-header {
        height: var(--admin-height-header);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--admin-color-border-light);
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* 面包屑导航 */
    .header-breadcrumb {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .breadcrumb-home {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
    }

    .breadcrumb-separator {
        color: #cbd5e1;
        font-size: 14px;
    }

    .breadcrumb-current {
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        letter-spacing: 0.5px;
    }

    /* 右侧功能区 */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* 通知按钮 */
    .header-notify-btn {
        width: 42px;
        height: 42px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #64748b;
    }

    .header-notify-btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #475569;
    }

    /* 管理员信息 */
    .header-admin-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px 12px 6px 6px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .header-admin-info:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .header-admin-info .admin-avatar {
        border: 2px solid white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .header-admin-info .admin-text {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
    }

    .header-admin-info .admin-name {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
    }

    .header-admin-info .admin-role {
        font-size: 11px;
        color: #64748b;
    }

    .header-admin-info .dropdown-arrow {
        font-size: 12px;
        color: #94a3b8;
        margin-left: 4px;
        transition: transform 0.2s;
    }

    .header-admin-info:hover .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* 管理员下拉菜单 */
    .admin-dropdown-menu .dropdown-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 8px;
    }

    .admin-dropdown-menu .dropdown-header-info {
        display: flex;
        flex-direction: column;
    }

    .admin-dropdown-menu .dropdown-header-name {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
    }

    .admin-dropdown-menu .dropdown-header-email {
        font-size: 12px;
        color: #64748b;
    }

    .admin-dropdown-menu .logout-item:hover {
        color: #ef4444;
        background: #fef2f2;
    }

    .breadcrumb-item {
        color: var(--admin-color-text-light);
        font-size: var(--admin-font-size-md);
        font-weight: var(--admin-font-weight-medium);
        display: flex;
        align-items: center;
        gap: var(--admin-spacing-sm);
    }

    .breadcrumb-active {
        color: var(--admin-color-text-primary);
        font-weight: var(--admin-font-weight-extrabold);
        letter-spacing: 0.02em;
    }

    /* 侧边栏底部 */
    .sidebar-footer {
        padding: var(--admin-spacing-2xl);
        border-top: 1px solid var(--admin-color-border-light);
        margin-top: auto;
    }

    .logout-btn {
        height: var(--admin-height-lg);
        border-radius: var(--admin-radius-lg);
        background: var(--admin-color-danger-light);
        color: var(--admin-color-rose-600);
        border: 1px solid var(--admin-color-rose-100);
        width: var(--admin-width-full);
        transition: var(--admin-transition-normal);
    }

    .logout-btn:hover {
        background: var(--admin-color-rose-600);
        color: var(--admin-color-text-white);
        box-shadow: var(--admin-shadow-button-danger);
    }

    /* 卡片通用美化 */
    .el-card {
        border-radius: var(--admin-radius-2xl);
        border: none;
        box-shadow: var(--admin-shadow-card);
        transition: transform var(--admin-transition-smooth), box-shadow var(--admin-transition-smooth);
    }

    .el-card:hover {
        transform: none;
    }

    .el-card__header {
        border-bottom: 1px solid var(--admin-color-border-light);
        padding: var(--admin-spacing-xl) var(--admin-spacing-2xl);
    }

    /* 表格样式 */
    .el-table {
        --el-table-border-color: var(--admin-color-border-light);
        --el-table-header-bg-color: var(--admin-color-bg-light);
        border-radius: var(--admin-radius-md);
    }

    .el-table th.el-table__cell {
        font-weight: var(--admin-font-weight-bold);
        color: var(--admin-color-text-secondary);
        text-transform: uppercase;
        font-size: var(--admin-font-size-sm);
        letter-spacing: 0.05em;
        background-color: var(--admin-color-bg-light);
    }

    .el-table .cell {
        overflow: visible;
    }

    .el-table .el-switch {
        position: relative;
        z-index: 10;
        pointer-events: auto;
    }

    /* 按钮样式 */
    .el-button {
        border-radius: var(--admin-radius-md);
        font-weight: var(--admin-font-weight-semibold);
        transition: var(--admin-transition-fast);
    }

    .el-button:not(.el-button--small) {
        padding: 10px var(--admin-spacing-2xl);
    }

    .el-button--small {
        padding: 6px var(--admin-spacing-md);
        border-radius: var(--admin-radius-sm);
    }

    .el-button--primary:not(.is-plain) {
        background: var(--admin-gradient-primary);
        border: none;
    }

    .el-button--primary.is-plain {
        background: var(--admin-color-primary-lighter);
        color: var(--admin-color-primary);
        border: 1px solid var(--admin-color-indigo-200);
    }

    .el-button--primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--admin-shadow-button-primary-hover);
    }

    /* 弹窗基础样式 */
    .el-dialog {
        border-radius: var(--dialog-radius);
        overflow: hidden;
        box-shadow: var(--dialog-shadow);
    }

    .el-dialog__header {
        padding: var(--admin-spacing-2xl) var(--admin-spacing-3xl) 0;
        margin-right: 0;
        text-align: center;
    }

    .el-dialog__title {
        font-weight: var(--admin-font-weight-extrabold);
        color: var(--admin-color-text-primary);
        font-size: var(--admin-font-size-3xl);
    }

    .el-dialog__body {
        padding: var(--admin-spacing-3xl);
    }

    .el-dialog__footer {
        padding: 0 var(--admin-spacing-3xl) var(--admin-spacing-3xl);
        border-top: none;
    }

    /* 弹窗内表格布局修复 */
    .el-dialog .el-table__header-wrapper table,
    .el-dialog .el-table__body-wrapper table {
        width: var(--admin-width-full);
        table-layout: fixed;
        display: table;
    }

    .el-dialog .el-table tr {
        display: table-row;
    }

    .el-dialog .el-table th.el-table__cell,
    .el-dialog .el-table td.el-table__cell {
        display: table-cell;
        vertical-align: middle;
    }

    .el-dialog .el-table .cell {
        display: block;
        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
        overflow: visible;
        text-overflow: ellipsis;
    }
}

/* ==================== @layer admin-components: 功能组件样式 ==================== */
@layer admin-components {
    /* standard-dialog 弹窗 */
    .standard-dialog.el-dialog {
        padding: 0;
    }

    .standard-dialog .el-dialog__header {
        padding: var(--dialog-header-padding);
        margin: 0;
        background: var(--admin-gradient-success);
        text-align: center;
    }

    .standard-dialog .el-dialog__title {
        font-size: var(--admin-font-size-2xl);
        font-weight: var(--admin-font-weight-bold);
        color: var(--admin-color-text-white);
    }

    .standard-dialog .el-dialog__body {
        padding: var(--admin-spacing-2xl);
        background: var(--admin-color-bg-white);
    }

    .standard-dialog .el-form-item__label {
        font-weight: var(--admin-font-weight-bold);
        color: var(--admin-color-text-secondary);
        font-size: var(--admin-font-size-md);
        padding-bottom: var(--admin-spacing-sm);
    }

    .standard-dialog .el-dialog__footer {
        padding: 0 var(--admin-spacing-3xl) var(--admin-spacing-3xl);
        background: var(--admin-color-bg-white);
    }

    .standard-dialog .el-dialog__footer .el-button--primary {
        background: var(--admin-gradient-primary);
        border: none;
        box-shadow: var(--admin-shadow-button-primary);
        color: var(--admin-color-text-white);
    }

    .standard-dialog .el-dialog__footer .el-button--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 20px -5px rgba(79, 70, 229, 0.5);
    }

    /* 重置密码弹窗 */
    .reset-password-dialog.el-dialog {
        border-radius: var(--dialog-radius);
        overflow: hidden;
    }

    .reset-password-dialog .el-dialog__header {
        padding: 0;
        margin: 0;
    }

    .reset-password-dialog .el-dialog__body {
        padding: 0 var(--admin-spacing-xl) var(--admin-spacing-xl) var(--admin-spacing-xl);
    }

    .reset-password-dialog .el-dialog__footer {
        padding: 0 var(--admin-spacing-xl) var(--admin-spacing-xl) var(--admin-spacing-xl);
        border-top: none;
    }

    /* 图标选择器 */
    .icon-picker-container {
        background: var(--admin-color-bg-light);
        border-radius: var(--admin-radius-xl);
        padding: var(--admin-spacing-lg);
        border: 1px solid var(--admin-color-border);
    }

    .icon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
        gap: var(--admin-spacing-sm);
        max-height: 98px;
        overflow-y: auto;
        padding: var(--admin-spacing-xs);
    }

    .icon-item {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--admin-color-bg-white);
        border: 1px solid var(--admin-color-border);
        border-radius: var(--admin-radius-sm);
        cursor: pointer;
        transition: var(--admin-transition-fast);
    }

    .icon-item:hover {
        border-color: var(--admin-color-border);
    }

    .icon-item.is-selected {
        border-color: var(--admin-color-primary);
        background: var(--admin-color-primary);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    }

    .icon-item img {
        width: 20px;
        height: 20px;
        filter: grayscale(0.5);
    }

    .icon-item.is-selected img {
        filter: brightness(0) invert(1) grayscale(0);
    }

    /* 提示框美化 */
    .el-message-box {
        --el-messagebox-border-radius: var(--dialog-radius);
        border-radius: var(--dialog-radius);
        padding: 0;
        border: none;
        box-shadow: var(--dialog-shadow);
        max-width: 420px;
        overflow: hidden;
    }

    .el-message-box__header {
        padding: var(--dialog-header-padding);
        background: var(--admin-gradient-danger);
        text-align: center;
        margin: 0;
    }

    .el-message-box__title {
        font-weight: var(--admin-font-weight-extrabold);
        color: var(--admin-color-black);
        font-size: var(--admin-font-size-3xl);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--admin-spacing-sm);
    }

    .el-message-box__status {
        color: var(--admin-color-amber-400);
        font-size: var(--admin-font-size-5xl);
    }

    .el-message-box__status.el-icon {
        color: var(--admin-color-amber-400);
    }

    .el-message-box__content {
        padding: var(--admin-spacing-3xl) var(--admin-spacing-2xl);
        text-align: center;
        color: var(--admin-color-text-secondary);
        font-size: var(--admin-font-size-xl);
        font-weight: var(--admin-font-weight-semibold);
        background: var(--admin-color-bg-white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .el-message-box__container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .el-message-box__message {
        text-align: center;
    }

    .el-message-box__btns,
    .el-message-box__footer,
    .el-overlay .el-message-box__btns,
    .el-overlay .el-message-box__footer,
    .el-message-box .el-message-box__btns {
        padding: 0 var(--admin-spacing-2xl) var(--admin-spacing-3xl);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--admin-spacing-md);
        background: var(--admin-color-bg-white);
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* 重置 Element Plus 默认的 margin */
    .el-message-box__btns .el-button:first-child,
    .el-message-box__btns .el-button + .el-button,
    .el-message-box__btns .el-button,
    .el-overlay .el-message-box__btns .el-button {
        margin-left: 0;
        margin-right: 0;
    }

    /* 确保按钮组不使用 flex-end */
    .el-message-box__footer .el-message-box__btns,
    .el-message-box .el-message-box__btns {
        justify-content: center;
    }

    .el-message-box__btns button {
        border-radius: var(--admin-radius-lg);
        padding: var(--admin-spacing-md) var(--admin-spacing-3xl);
        font-weight: var(--admin-font-weight-extrabold);
        height: var(--admin-height-lg);
        font-size: var(--admin-font-size-lg);
        transition: var(--admin-transition-normal);
        min-width: 120px;
        margin-left: 0;
    }

    .el-message-box__btns .el-button--primary,
    .el-message-box__btns button.el-button--primary {
        background: var(--admin-gradient-primary);
        border: none;
        box-shadow: var(--admin-shadow-button-primary);
        color: var(--admin-color-text-white);
    }

    .el-message-box__btns .el-button--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 20px -5px rgba(79, 70, 229, 0.5);
    }

    .el-message-box__btns .el-button--danger,
    .el-message-box__btns button.el-button--danger {
        background: var(--admin-gradient-danger);
        border: none;
        box-shadow: 0 8px 16px -4px rgba(239, 68, 68, 0.4);
        color: var(--admin-color-text-white);
    }

    .el-message-box__btns .el-button--danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 20px -5px rgba(239, 68, 68, 0.5);
    }

    .el-message-box__btns .el-button--default {
        background: var(--admin-color-bg-lighter);
        border: 1px solid var(--admin-color-border);
        color: var(--admin-color-text-secondary);
    }

    .el-message-box__btns .el-button--default:hover {
        background: var(--admin-color-bg-gray);
        border-color: var(--admin-color-border-dark);
        transform: translateY(-2px);
    }

    /* 输入框在 Prompt 中的样式 */
    .el-message-box__input .el-input {
        --el-input-border-color: transparent;
        --el-input-hover-border-color: transparent;
        --el-input-focus-border-color: transparent;
    }

    .el-message-box__input .el-input__wrapper {
        height: var(--admin-height-lg);
        border-radius: var(--admin-radius-lg);
        padding: 0 var(--admin-spacing-lg);
        background: var(--admin-color-bg-light);
        box-shadow: 0 0 0 1px var(--admin-color-border-light) inset;
        transition: var(--admin-transition-normal);
    }

    .el-message-box__input .el-input__wrapper.is-focus {
        background: var(--admin-color-bg-white);
        box-shadow: 0 0 0 2px var(--admin-color-primary) inset;
    }

    .el-message-box__input .el-input__inner {
        font-weight: var(--admin-font-weight-semibold);
        text-align: center;
        color: var(--admin-color-text-primary);
    }

    /* 统一标准弹窗表单项 */
    .standard-dialog .el-input__wrapper,
    .standard-dialog .el-textarea__inner {
        border-radius: var(--admin-radius-md);
        background: var(--admin-color-bg-light);
        box-shadow: 0 0 0 1px var(--admin-color-border-light) inset;
        border: none;
    }

    .standard-dialog .el-input__wrapper.is-focus,
    .standard-dialog .el-textarea__inner:focus {
        background: var(--admin-color-bg-white);
        box-shadow: 0 0 0 2px var(--admin-color-primary) inset;
    }

    /* 目标受众用户名红色字体 */
    .username-red-input .el-input__inner,
    .username-red-input.is-disabled .el-input__inner,
    .username-red-input .el-input.is-disabled .el-input__inner,
    .el-input.username-red-input.is-disabled .el-input__inner {
        color: var(--admin-color-danger);
        font-weight: var(--admin-font-weight-bold);
        -webkit-text-fill-color: var(--admin-color-danger);
    }

    /* 经典单选组 */
    .classic-radio-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--admin-spacing-md);
        width: var(--admin-width-full);
    }

    .classic-radio-group .el-radio {
        margin-right: 0;
        height: var(--admin-height-md);
        padding: 0 var(--admin-spacing-sm);
        border-radius: var(--admin-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--admin-width-full);
        box-sizing: border-box;
        border: 1px solid var(--admin-color-border);
        transition: var(--admin-transition-fast);
    }

    .classic-radio-group .el-radio.is-bordered.is-checked {
        background-color: var(--admin-color-primary-lighter);
        border-color: var(--admin-color-primary);
        box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.1);
    }

    .classic-radio-group .el-radio__label {
        padding-left: 6px;
        font-weight: var(--admin-font-weight-bold);
        font-size: var(--admin-font-size-md);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 权益等级标签配色 */
    .tag-level-free {
        background: var(--admin-color-text-light);
        border-color: var(--admin-color-text-light);
        color: var(--admin-color-text-white);
    }

    .tag-level-premium, .tag-level-普通会员 {
        background: var(--admin-color-primary);
        border: none;
        color: var(--admin-color-text-white);
    }

    .tag-level-vip, .tag-level-超级会员, .tag-level-年卡套餐 {
        background: var(--admin-color-blue-700);
        border: none;
        color: var(--admin-color-text-white);
        font-weight: var(--admin-font-weight-semibold);
        box-shadow: 0 2px 4px rgba(29, 78, 216, 0.3);
    }

    .tag-level-exclusive, .tag-level-定制用户 {
        background: var(--admin-color-emerald-600);
        border: none;
        color: var(--admin-color-text-white);
        font-weight: var(--admin-font-weight-semibold);
    }

    .tag-level-quarterly, .tag-level-季卡套餐, .tag-level-季度套餐 {
        background: var(--admin-color-cyan-600);
        border: none;
        color: var(--admin-color-text-white);
        font-weight: var(--admin-font-weight-semibold);
    }

    .tag-level-monthly, .tag-level-月卡套餐 {
        background: var(--admin-color-pink-600);
        border: none;
        color: var(--admin-color-text-white);
        font-weight: var(--admin-font-weight-semibold);
    }

    .tag-level-permanent, .tag-level-永久会员 {
        background: var(--admin-color-orange-600);
        border: none;
        color: var(--admin-color-text-white);
        font-weight: var(--admin-font-weight-semibold);
    }

    .tag-level-weekly, .tag-level-周卡套餐 {
        background: var(--admin-color-primary-light);
        border: none;
        color: var(--admin-color-text-white);
        font-weight: var(--admin-font-weight-semibold);
    }

    /* 消息通知中心 */
    .notification-popover {
        padding: 0;
        border-radius: var(--admin-radius-2xl);
        border: 1px solid var(--admin-color-border-light);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        overflow: hidden;
    }

    /* 弹窗主体 */
    .notification-popover-body {
        display: flex;
        flex-direction: column;
        height: 450px;
    }

    /* 弹窗头部 */
    .notify-popover-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .notify-popover-title {
        font-size: 14px;
        font-weight: 800;
        color: #1e293b;
        letter-spacing: 0.5px;
    }

    /* 筛选栏 */
    .notify-filter-bar {
        display: flex;
        gap: 4px;
        padding: 8px 16px;
        border-bottom: 1px solid #f1f5f9;
        background: #fafbfc;
    }

    /* 消息列表容器 */
    .notify-list-container {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
    }

    /* 空状态 */
    .notify-empty {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #cbd5e1;
    }

    .notify-empty p {
        margin-top: 8px;
        font-size: 12px;
    }

    /* 消息项容器 */
    .notification-popover .notify-item {
        position: relative;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 12px;
        border: 1px solid transparent;
        transition: all 0.2s ease;
    }

    .notification-popover .notify-item:hover {
        transform: translateX(2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    /* 未读状态 - 添加左侧边框指示 */
    .notification-popover .notify-item.unread {
        border-left: 3px solid #6366f1;
    }

    /* 根据类型设置背景色 */
    .notification-popover .notify-item.type-PAYMENT {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        border-color: #a7f3d0;
    }

    .notification-popover .notify-item.type-SECURITY {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-color: #fcd34d;
    }

    .notification-popover .notify-item.type-REGISTER {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-color: #bfdbfe;
    }

    .notification-popover .notify-item.type-ANOMALY {
        background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
        border-color: #fca5a5;
    }

    .notification-popover .notify-item.type-SUMMARY {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        border-color: #c4b5fd;
    }

    .notification-popover .notify-item.type-REPORT {
        background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
        border-color: #99f6e4;
    }

    /* 消息项内容布局 */
    .notification-popover .notify-item-content {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    /* 消息图标 */
    .notification-popover .notify-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* 消息文本区域 */
    .notification-popover .notify-text {
        flex: 1;
        min-width: 0;
    }

    .notification-popover .notify-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 4px;
    }

    .notification-popover .notify-title {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
        word-break: break-word;
    }

    .notification-popover .notify-time {
        font-size: 10px;
        color: #94a3b8;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .notification-popover .notify-content {
        font-size: 12px;
        color: #64748b;
        line-height: 1.5;
        word-break: break-word;
    }

    /* 操作按钮区域 */
    .notification-popover .notify-actions {
        display: none;
        position: absolute;
        right: 8px;
        bottom: 8px;
        gap: 4px;
    }

    .notification-popover .notify-item:hover .notify-actions {
        display: flex;
    }

    .notification-popover .notify-actions .el-button {
        width: 24px;
        height: 24px;
        padding: 0;
    }

    /* 高级感配置板块标题 */
    .config-header-pro {
        display: flex;
        align-items: center;
        gap: var(--admin-spacing-lg);
        margin-bottom: var(--admin-spacing-3xl);
        padding-bottom: var(--admin-spacing-lg);
        border-bottom: 1px solid var(--admin-color-border-light);
        position: relative;
    }

    .config-header-pro .icon-wrapper {
        width: var(--admin-height-lg);
        height: var(--admin-height-lg);
        background: var(--admin-color-primary-lighter);
        color: var(--admin-color-primary);
        border-radius: var(--admin-radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--admin-font-size-4xl);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
        border: 1px solid rgba(79, 70, 229, 0.1);
    }

    .config-header-pro .title-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .config-header-pro .main-title {
        font-size: 17px;
        font-weight: var(--admin-font-weight-extrabold);
        color: var(--admin-color-text-primary);
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .config-header-pro .sub-badge {
        font-size: var(--admin-font-size-sm);
        font-weight: var(--admin-font-weight-medium);
        color: var(--admin-color-text-light);
        letter-spacing: 0;
        margin-top: var(--admin-spacing-xs);
        line-height: 1.4;
    }

    .config-header-pro::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 44px;
        height: 3.5px;
        background: var(--admin-color-primary);
        border-radius: var(--admin-radius-xs);
    }

    /* 高级感内嵌标签表单项 */
    .el-form .config-form-item-pro {
        position: relative;
        margin-top: var(--admin-spacing-xl);
        margin-bottom: var(--admin-spacing-2xl);
    }

    .config-form-item-pro .el-form-item__label {
        position: absolute;
        top: -11px;
        left: var(--admin-spacing-lg);
        background: var(--admin-color-bg-white);
        padding: 0 10px;
        height: 22px;
        line-height: 22px;
        z-index: 5;
        font-size: var(--admin-font-size-sm);
        font-weight: var(--admin-font-weight-extrabold);
        color: var(--admin-color-text-muted);
        transition: var(--admin-transition-normal);
        pointer-events: none;
    }

    .settings-tabs .el-form-item__label {
        background: var(--admin-color-bg-white); 
    }
    .bg-slate-50 .config-form-item-pro .el-form-item__label { background: var(--admin-color-bg-light); }
    .bg-indigo-50 .config-form-item-pro .el-form-item__label { background: var(--admin-color-indigo-50); }
    .bg-indigo-50\/30 .config-form-item-pro .el-form-item__label { background: var(--admin-color-indigo-50-30); }

    .config-form-item-pro .el-input__wrapper,
    .config-form-item-pro .el-textarea__inner,
    .config-form-item-pro .el-input-number .el-input__wrapper,
    .config-form-item-pro .el-select .el-input__wrapper,
    .config-form-item-pro .el-switch {
        border: 1.5px solid var(--admin-color-border);
        box-shadow: var(--admin-shadow-none);
        background: var(--admin-color-bg-transparent);
        border-radius: var(--admin-radius-lg);
        height: var(--admin-height-xl);
        transition: var(--admin-transition-normal);
        box-sizing: border-box;
    }

    .config-form-item-pro .el-textarea__inner {
        height: auto;
        min-height: var(--admin-height-xl);
        line-height: 1.6;
        padding: var(--admin-spacing-lg) var(--admin-spacing-lg);
    }

    .config-form-item-pro .el-switch {
        width: var(--admin-width-full);
        justify-content: flex-start;
        padding: 0 var(--admin-spacing-lg);
        background: var(--admin-color-bg-light);
    }

    .config-form-item-pro .el-input-number {
        width: var(--admin-width-full);
        line-height: var(--admin-height-xl);
    }

    .config-form-item-pro .el-input__wrapper.is-focus,
    .config-form-item-pro .el-textarea__inner:focus,
    .config-form-item-pro .el-input-number .el-input__wrapper.is-focus,
    .config-form-item-pro .el-select .el-input__wrapper.is-focus,
    .config-form-item-pro .el-switch.is-checked {
        border-color: var(--admin-color-primary);
        background: var(--admin-color-bg-white);
    }

    /* 极简开关列表项样式 */
    .el-form .config-switch-item {
        margin-bottom: 0;
        padding: var(--admin-spacing-lg) var(--admin-spacing-xl);
        border-bottom: 1px solid var(--admin-color-border-light);
        transition: var(--admin-transition-fast);
        border-radius: 0;
    }

    .config-switch-item:last-child {
        border-bottom: none;
    }

    .config-switch-item:hover {
        background: rgba(79, 70, 229, 0.04);
    }

    .config-switch-item .el-form-item__label {
        font-size: var(--admin-font-size-base);
        font-weight: var(--admin-font-weight-semibold);
        color: var(--admin-color-text-secondary);
        padding-bottom: 0;
    }

    .config-switch-item .el-switch {
        border: none;
        height: auto;
        background: var(--admin-color-bg-transparent);
        padding: 0;
    }

    .config-form-item-pro .is-focus + .el-form-item__label,
    .config-form-item-pro .el-input__wrapper.is-focus ~ .el-form-item__label {
        color: var(--admin-color-primary);
    }

    /* 自定义滚动条 */
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: var(--admin-color-bg-transparent);
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: var(--admin-color-border);
        border-radius: var(--admin-radius-sm);
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: var(--admin-color-border-dark);
    }

    /* 工具自动打包组件样式 */
    .tool-builder-container {
        width: var(--admin-width-full);
    }

    .tool-builder-container .stat-card {
        background: var(--admin-color-bg-white);
        border-radius: var(--admin-radius-xl);
        padding: var(--admin-spacing-2xl);
        box-shadow: var(--admin-shadow-sm);
        display: flex;
        align-items: center;
        gap: var(--admin-spacing-lg);
    }

    .tool-builder-container .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: var(--admin-radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tool-builder-container .stat-content {
        flex: 1;
    }

    .tool-builder-container .stat-value {
        font-size: 28px;
        font-weight: var(--admin-font-weight-extrabold);
        color: var(--admin-color-text-primary);
        line-height: 1;
    }

    .tool-builder-container .stat-label {
        font-size: var(--admin-font-size-base);
        color: var(--admin-color-text-muted);
        margin-top: var(--admin-spacing-xs);
        font-weight: var(--admin-font-weight-semibold);
    }

    .tool-builder-container .standard-card {
        border-radius: var(--admin-radius-xl);
        border: 1px solid var(--admin-color-border-light);
    }

    .tool-builder-container .card-header-title {
        font-size: var(--admin-font-size-xl);
        font-weight: var(--admin-font-weight-bold);
        color: var(--admin-color-text-primary);
    }

    /* 打包对话框样式 */
    .build-form {
        padding: var(--admin-spacing-sm);
    }

    .build-form .upload-form-item {
        margin-bottom: var(--admin-spacing-3xl);
    }

    .build-form .upload-wrapper {
        display: flex;
        flex-direction: row;
        gap: var(--admin-spacing-xl);
        width: var(--admin-width-full);
        align-items: stretch;
    }

    .tool-builder-container .build-form .upload-area {
        flex: 1;
        min-width: 0;
        max-width: 50%;
        display: block;
    }

    .build-form .upload-area .el-upload {
        width: var(--admin-width-full);
        height: var(--admin-width-full);
        display: block;
    }

    .build-form .upload-area .el-upload-dragger {
        padding: var(--admin-spacing-5xl) var(--admin-spacing-2xl);
        border: 2px dashed var(--admin-color-border-dark);
        border-radius: var(--admin-radius-xl);
        background: var(--admin-color-bg-light);
        transition: var(--admin-transition-normal);
        height: var(--admin-width-full);
        min-height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .build-form .upload-area .el-upload-dragger:hover {
        border-color: var(--admin-color-primary);
        background: var(--admin-color-primary-lighter);
    }

    .build-form .el-icon--upload {
        margin-bottom: var(--admin-spacing-lg);
    }

    .build-form .el-upload__text {
        line-height: 1.8;
    }

    /* 提示信息卡片 */
    .build-form .tips-card {
        flex: 1;
        min-width: 0;
        max-width: 50%;
        background: linear-gradient(135deg, var(--admin-color-blue-900) 0%, var(--admin-color-primary-lighter) 100%);
        border: 1px solid var(--admin-color-indigo-100);
        border-radius: var(--admin-radius-md);
        padding: var(--admin-spacing-xl) var(--admin-spacing-2xl);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .tip-item {
        display: flex;
        align-items: center;
        gap: var(--admin-spacing-md);
        padding: var(--admin-spacing-sm) 0;
        font-size: var(--admin-font-size-md);
        color: var(--admin-color-text-secondary);
        line-height: 1.6;
    }

    .tip-item:not(:last-child) {
        border-bottom: 1px dashed var(--admin-color-indigo-100);
    }

    .tip-item.tip-info-highlight {
        background: linear-gradient(135deg, var(--admin-color-blue-100) 0%, var(--admin-color-indigo-100) 100%);
        border-radius: var(--admin-spacing-sm);
        padding: var(--admin-spacing-md) var(--admin-spacing-lg);
        margin-top: var(--admin-spacing-sm);
        border: 1px solid var(--admin-color-blue-200);
        color: var(--admin-color-blue-800);
        font-weight: var(--admin-font-weight-semibold);
    }

    .tip-icon {
        font-size: var(--admin-font-size-2xl);
        flex-shrink: 0;
    }

    .tip-text {
        flex: 1;
        font-weight: var(--admin-font-weight-medium);
    }

    /* 帮助文本 */
    .help-text {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: var(--admin-spacing-sm);
        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
        background: var(--admin-color-blue-50);
        border-left: 3px solid var(--admin-color-info);
        border-radius: 6px;
        font-size: var(--admin-font-size-sm);
        color: var(--admin-color-blue-800);
    }

    .help-text .el-icon {
        font-size: var(--admin-font-size-base);
        color: var(--admin-color-info);
    }

    /* 对话框底部按钮 */
    .dialog-footer {
        display: flex;
        justify-content: center;
        gap: var(--admin-spacing-lg);
        padding-top: var(--admin-spacing-sm);
    }

    .footer-btn {
        min-width: 140px;
        height: var(--admin-height-md);
        border-radius: var(--admin-radius-md);
        font-weight: var(--admin-font-weight-semibold);
        font-size: var(--admin-font-size-lg);
    }

    .footer-btn.cancel-btn {
        border: 2px solid var(--admin-color-border);
        color: var(--admin-color-text-muted);
    }

    .footer-btn.cancel-btn:hover {
        border-color: var(--admin-color-border-dark);
        background: var(--admin-color-bg-light);
    }

    .footer-btn.submit-btn {
        background: var(--admin-gradient-primary);
        border: none;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }

    .footer-btn.submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
    }

    .footer-btn .mr-2 {
        margin-right: var(--admin-spacing-sm);
    }
}

/* ==================== 登录页样式已迁移至 admin-login.css ==================== */

/* ==================== 全局强制覆盖（layer 外优先级最高） ==================== */
/* 这些样式必须在 @layer 外部才能覆盖所有 layer 内的样式 */

/* 强制锁定主内容区，防止 flex 溢出 */
main.flex-1 {
    min-width: 0;
    flex: 1 1 0%;
    transition: none;
    overflow-x: hidden;
    overflow-y: auto;
    /* 自适应容器：由于侧边栏是 fixed，需要用 calc 减去侧边栏宽度 */
    width: calc(100% - 280px);
    margin-left: 280px;
    height: 100vh;
    box-sizing: border-box;
}

/* 顶部面包屑栏 - 固定高度 */
main.flex-1 > .main-header {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* 主内容区 section 容器 - 内容自适应高度 */
main.flex-1 > section {
    flex: 0 0 auto;  /* 不自动扩展，根据内容自适应 */
    width: calc(100% - 20px);  /* 左 10px + 右 10px */
    max-width: calc(100% - 20px);
    min-width: 0;
    box-sizing: border-box;
    /* 间距：上 20px，左右各 10px，下 20px */
    margin: 20px 10px;
}

/* section 内的组件容器 */
main.flex-1 > section > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* 禁用筛选区域动画，防止卡片滑动问题 */
.users-panel,
.users-panel *,
.users-panel .grid,
.users-panel .grid > div,
.users-panel .grid > div * {
    transition: none;
    animation: none;
    transform: none;
    will-change: auto;
}

/* ==================== Tabs 样式优化 ==================== */
/* 设置页面 Tabs 胶囊式导航 */
.settings-tabs.el-tabs {
    --el-tabs-header-height: 44px;
}

.settings-tabs.el-tabs > .el-tabs__header {
    margin: 20px 10px;  /* 上下20px，左右10px */
    border-bottom: none;
    padding: 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__nav-wrap {
    padding: 0;
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__nav-wrap::after {
    height: 0;
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__nav {
    display: flex;
    gap: 6px;
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__item {
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    border-radius: 10px;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__item:hover {
    color: #4f46e5;
    background: rgba(79, 70, 229, 0.08);
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__item.is-active {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__active-bar {
    display: none;
}

.settings-tabs.el-tabs > .el-tabs__header .el-tabs__item .el-icon {
    margin-right: 5px;
    font-size: 15px;
}

/* 设置页内容区域优化 */
.settings-tabs.el-tabs > .el-tabs__content {
    padding: 0 10px;  /* 左右10px间距 */
    overflow: visible;
}

.settings-tabs.el-tabs .el-tab-pane {
    width: 100%;
}

/* 面板配置页分栏布局 */
.settings-tabs .grid.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-panel .el-card__header {
    padding: 20px 28px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
}

.settings-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.settings-panel .el-card__body {
    padding: 0;  /* 间距由tab header的margin控制 */
}

/* 设置页分组卡片样式 */
.settings-section-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.settings-section-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.settings-section-card:last-child {
    margin-bottom: 0;
}

/* 设置页表单紧凑优化 */
.settings-tabs .config-form-item-pro {
    margin-top: 18px;
    margin-bottom: 20px;
}

.settings-tabs .config-form-item-pro .el-input__wrapper,
.settings-tabs .config-form-item-pro .el-textarea__inner {
    height: 44px;
}

.settings-tabs .config-form-item-pro .el-textarea__inner {
    height: auto;
    min-height: 44px;
}

/* 设置页两栏布局优化 */
.settings-tabs .grid.grid-cols-1.lg\:grid-cols-2 {
    gap: 32px;
}

.settings-tabs .grid.grid-cols-1.lg\:grid-cols-2 > div {
    padding-right: 0;
}

.settings-tabs .grid.grid-cols-1.lg\:grid-cols-2 > div:first-child {
    border-right: 1px solid #e2e8f0;
    padding-right: 32px;
}

/* 设置页表格统一样式 */
.settings-tabs .el-table {
    --el-table-header-bg-color: #f8fafc;
    --el-table-row-hover-bg-color: #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.settings-tabs .el-table th.el-table__cell {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.settings-tabs .el-table td.el-table__cell {
    padding: 14px 16px;
    font-size: 13px;
    color: #334155;
}

.settings-tabs .el-table .el-table__row:hover > td {
    background: #f8fafc;
}

/* 设置页开关卡片样式 */
.settings-tabs .config-switch-item {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.settings-tabs .config-switch-item:last-child {
    border-bottom: none;
}

.settings-tabs .config-switch-item:hover {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.02) 0%, rgba(99, 102, 241, 0.04) 100%);
}

.settings-tabs .config-switch-item .el-form-item__label {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

/* 设置页警告/提示卡片样式 */
.settings-tabs .settings-alert-card {
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid;
    transition: all 0.3s ease;
}

.settings-tabs .settings-alert-card.warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}

.settings-tabs .settings-alert-card.info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.settings-tabs .settings-alert-card.success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
}

/* 设置页功能开关卡片 */
.settings-tabs .feature-switch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 10px;
    transition: all 0.25s ease;
}

.settings-tabs .feature-switch-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
    transform: translateY(-1px);
}

.settings-tabs .feature-switch-card:last-child {
    margin-bottom: 0;
}

.settings-tabs .feature-switch-card .switch-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

.settings-tabs .feature-switch-card .switch-content {
    flex: 1;
}

.settings-tabs .feature-switch-card .switch-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.settings-tabs .feature-switch-card .switch-desc {
    font-size: 12px;
    color: #94a3b8;
}

/* 设置页卡片按钮组 */
.settings-tabs .card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.settings-tabs .card-actions .el-button {
    border-radius: 8px;
    font-weight: 500;
}

/* 设置页空状态样式 */
.settings-tabs .empty-placeholder {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.settings-tabs .empty-placeholder .empty-icon {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.settings-tabs .empty-placeholder .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

.settings-tabs .empty-placeholder .empty-desc {
    font-size: 14px;
    color: #94a3b8;
}

/* 设置页动效优化 */
.settings-tabs .settings-section-card {
    animation: fadeInUp 0.3s ease-out;
}

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

/* 设置页输入框聚焦效果 */
.settings-tabs .config-form-item-pro .el-input__wrapper:focus-within,
.settings-tabs .config-form-item-pro .el-textarea__inner:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 设置页按钮悬停效果 */
.settings-tabs .el-button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.settings-tabs .el-button--danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 设置页分组卡片内的标题图标缩小 */
.settings-section-card .config-header-pro .icon-wrapper {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.settings-section-card .config-header-pro.mb-0 .icon-wrapper {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

/* 动态卡片列表图标尺寸控制 */
.settings-section-card .feature-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    flex-shrink: 0;
}

.settings-section-card .feature-card-icon img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
}

/* 动态卡片单行布局图标 */
.settings-section-card .feature-card-row-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
    flex-shrink: 0;
    overflow: hidden;
}

.settings-section-card .feature-card-row-icon img,
.feature-card-row-icon img {
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
    object-fit: contain;
}

.settings-section-card .feature-card-icon .el-icon {
    font-size: 20px;
}

/* ==================== 面板配置页现代化布局 ==================== */
.ui-panel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 0 10px 0;  /* 上左右0，下10px（左右由父容器控制） */
}

.ui-panel-left,
.ui-panel-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 面板卡片基础样式 */
.panel-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.panel-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* 卡片头部 */
.panel-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
}

.panel-card-header .header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

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

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

.panel-card-header .header-icon.frontend {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}

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

.panel-card-header .header-text {
    flex: 1;
    min-width: 0;
}

.panel-card-header .header-text h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 2px 0;
}

.panel-card-header .header-text p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.panel-card-header .add-card-btn {
    flex-shrink: 0;
}

/* 卡片内容区 */
.panel-card-body {
    padding: 20px;
}

/* 表单行 */
.panel-card-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.panel-card-body .form-row:last-child {
    margin-bottom: 0;
}

.panel-card-body .form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panel-card-body .form-item:last-child:only-child {
    grid-column: span 2;
}

.panel-card-body .form-item > label {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

/* 主题选择网格 */
.theme-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.25s ease;
}

.theme-option:hover {
    border-color: #a5b4fc;
    background: #f8fafc;
}

.theme-option.active {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.theme-option .theme-preview {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-option .theme-preview .check-icon {
    font-size: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.theme-option .theme-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.theme-option .theme-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.theme-option .theme-value {
    font-size: 12px;
    color: #94a3b8;
}

/* 动态卡片特殊样式 */
.feature-cards-panel {
    background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
    border-color: #c7d2fe;
}

.feature-cards-panel .panel-card-header {
    background: transparent;
    border-bottom-color: #c7d2fe;
}

.empty-cards {
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
}

.empty-cards .el-icon {
    margin-bottom: 8px;
    opacity: 0.6;
}

.empty-cards p {
    font-size: 13px;
}

/* 动态卡片列表 */
.feature-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.feature-card-item:hover {
    border-color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.feature-card-item .card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px dashed #cbd5e1;
    transition: all 0.2s ease;
    overflow: hidden;
}

.feature-card-item .card-icon:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.feature-card-item .card-icon img {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
}

.feature-card-item .icon-input {
    width: 90px;
    flex-shrink: 0;
}

.feature-card-item .text-input {
    flex: 1;
    min-width: 120px;
}

/* ==================== 安全配置页现代化布局 ==================== */
.security-panel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 0 10px 0;  /* 上左右0，下10px */
}

.security-panel-left,
.security-panel-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 管理员图标 */
.panel-card-header .header-icon.admin {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.panel-card-header .header-icon.security {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
}

/* 头部操作按钮 */
.panel-card-header .header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* 管理员信息卡片 */
.admin-info-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.admin-info-card .info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.admin-info-card .info-header .el-icon {
    color: #6366f1;
}

.admin-info-card .info-content {
    padding: 16px;
}

.admin-info-card .info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 13px;
}

.admin-info-card .info-row:last-child {
    border-bottom: none;
}

.admin-info-card .info-row.login-records {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.admin-info-card .info-label {
    color: #64748b;
    min-width: 80px;
    flex-shrink: 0;
}

.admin-info-card .info-value {
    color: #1e293b;
    font-weight: 500;
}

.admin-info-card .info-value.warning {
    color: #dc2626;
}

.admin-info-card .records-list {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
}

.admin-info-card .record-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
    font-size: 12px;
}

.admin-info-card .record-item:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

.admin-info-card .record-time {
    color: #475569;
    min-width: 140px;
}

.admin-info-card .record-ip {
    color: #64748b;
    font-family: monospace;
}

.admin-info-card .no-records {
    color: #94a3b8;
    font-size: 12px;
}

/* 安全功能卡片 */
.security-feature-card {
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
}

.security-feature-card.warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
}

.security-feature-card.info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
}

.security-feature-card .feature-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.security-feature-card .feature-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.security-feature-card.warning .feature-title {
    color: #92400e;
}

.security-feature-card.warning .feature-title .el-icon {
    color: #d97706;
}

.security-feature-card.info .feature-title {
    color: #1e40af;
}

.security-feature-card.info .feature-title .el-icon {
    color: #2563eb;
}

.security-feature-card .feature-desc {
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

.security-feature-card.warning .feature-desc {
    color: #a16207;
}

.security-feature-card.info .feature-desc {
    color: #1d4ed8;
}

.security-feature-card .feature-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.security-feature-card .option-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.security-feature-card .option-item label {
    font-size: 12px;
}

.security-feature-card.warning .option-item label {
    color: #92400e;
}

.security-feature-card.info .option-item label {
    color: #1e40af;
}

/* ==================== 支付网关页现代化布局 ==================== */
.pay-panel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 0 10px 0;  /* 上左右0，下10px */
}

.pay-panel-left,
.pay-panel-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 支付图标 */
.panel-card-header .header-icon.pay-official {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    color: #1d4ed8;
}

.panel-card-header .header-icon.pay-easy {
    background: linear-gradient(135deg, #e0e7ff 0%, #a5b4fc 100%);
    color: #4338ca;
}

/* 支付渠道卡片 */
.pay-channel-card {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.pay-channel-card:last-child {
    margin-bottom: 0;
}

.pay-channel-card.alipay {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
}

.pay-channel-card.wechat {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
}

.pay-channel-card.easypay {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
}

.pay-channel-card .channel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pay-channel-card .channel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pay-channel-card .channel-icon {
    font-size: 18px;
    font-family: "Font Awesome 6 Brands", sans-serif;
}

.pay-channel-card.alipay .channel-icon {
    color: #1677ff;
}

.pay-channel-card.wechat .channel-icon {
    color: #07c160;
}

.pay-channel-card.easypay .channel-icon {
    color: #6366f1;
}

.pay-channel-card .channel-name {
    font-size: 14px;
    font-weight: 600;
}

.pay-channel-card.alipay .channel-name {
    color: #1e40af;
}

.pay-channel-card.wechat .channel-name {
    color: #166534;
}

.pay-channel-card.easypay .channel-name {
    color: #4338ca;
}

.pay-channel-card .channel-body {
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
}

.pay-channel-card .channel-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.pay-channel-card .channel-body .form-row:last-child {
    margin-bottom: 0;
}

.pay-channel-card .channel-body .form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.pay-channel-card .channel-body .form-row .form-item {
    margin-bottom: 0;
}

.pay-channel-card .channel-body .form-item:last-child {
    margin-bottom: 0;
}

.pay-channel-card .channel-body .form-item > label {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

/* 支付提示卡片 */
.pay-tips-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-top: 16px;
}

.pay-tips-card .tips-icon {
    color: #6366f1;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.pay-tips-card .tips-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.pay-tips-card .tips-content ul {
    margin: 0;
    padding-left: 16px;
}

.pay-tips-card .tips-content li {
    font-size: 12px;
    color: #64748b;
    line-height: 1.8;
}

/* ==================== 通讯验证页现代化布局 ==================== */
.comm-panel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 0 10px 0;  /* 上左右0，下10px */
}

.comm-panel-left,
.comm-panel-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 通讯图标 */
.panel-card-header .header-icon.sms {
    background: linear-gradient(135deg, #dcfce7 0%, #86efac 100%);
    color: #16a34a;
}

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

/* 通讯渠道卡片 */
.comm-channel-card {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.comm-channel-card:last-child {
    margin-bottom: 0;
}

.comm-channel-card.sms {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
}

.comm-channel-card.email {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
}

.comm-channel-card .channel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.comm-channel-card .channel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm-channel-card .channel-icon {
    font-size: 16px;
}

.comm-channel-card .channel-name {
    font-size: 14px;
    font-weight: 600;
}

.comm-channel-card.sms .channel-name {
    color: #166534;
}

.comm-channel-card.email .channel-name {
    color: #92400e;
}

.comm-channel-card .channel-body {
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
}

.comm-channel-card .channel-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.comm-channel-card .channel-body .form-row:last-child {
    margin-bottom: 0;
}

.comm-channel-card .channel-body .form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.comm-channel-card .channel-body .form-row .form-item {
    margin-bottom: 0;
}

.comm-channel-card .channel-body .form-item:last-child {
    margin-bottom: 0;
}

.comm-channel-card .channel-body .form-item > label {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

/* 通讯提示卡片 */
.comm-tips-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 12px;
    margin-top: 16px;
}

.comm-tips-card.warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    color: #92400e;
}

.comm-tips-card .el-icon {
    font-size: 16px;
    color: #d97706;
}

/* SMTP配置参考卡片 */
.comm-ref-card {
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-top: 16px;
}

.comm-ref-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.comm-ref-card .ref-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comm-ref-card .ref-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.comm-ref-card .ref-name {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

.comm-ref-card .ref-value {
    font-size: 12px;
    font-family: ui-monospace, monospace;
    color: #6366f1;
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ==================== 消息开关页现代化布局 ==================== */
.msg-switch-panel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 0 10px 0;  /* 上左右0，下10px */
}

.msg-switch-panel-left,
.msg-switch-panel-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 消息开关图标 */
.panel-card-header .header-icon.feature {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    color: #1d4ed8;
}

.panel-card-header .header-icon.notify {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    color: #1d4ed8;
}

/* 开关列表 */
.switch-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.switch-list.notify-list {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

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

.switch-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

.switch-item .switch-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switch-item .switch-icon {
    font-size: 18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.switch-item .switch-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.switch-item .switch-label {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

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

/* 通知列表特殊样式 */
.notify-list .switch-item .switch-icon {
    background: rgba(255, 255, 255, 0.9);
}

/* ==================== 海报轮播页现代化布局 ==================== */
.poster-panel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 0 10px 0;  /* 上左右0，下10px */
}

.poster-panel-left,
.poster-panel-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 海报图标 */
.panel-card-header .header-icon.poster {
    background: linear-gradient(135deg, #fae8ff 0%, #e879f9 100%);
    color: #a21caf;
}

.panel-card-header .header-icon.carousel {
    background: linear-gradient(135deg, #e0e7ff 0%, #818cf8 100%);
    color: #4338ca;
}

/* 海报空状态 */
.poster-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border-radius: 12px;
    border: 2px dashed #e879f9;
}

.poster-empty-state .el-icon {
    color: #d946ef;
    margin-bottom: 12px;
}

.poster-empty-state .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.poster-empty-state .empty-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* 海报列表 */
.poster-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.poster-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border-radius: 10px;
    border: 1px solid #f0abfc;
    transition: all 0.2s ease;
}

.poster-item:hover {
    border-color: #e879f9;
    box-shadow: 0 2px 8px rgba(217, 70, 239, 0.15);
}

.poster-item .poster-index {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #d946ef 0%, #a855f7 100%);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.poster-item .poster-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.poster-item .poster-preview {
    width: 80px;
    height: 35px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

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

.poster-item .poster-select {
    flex: 1;
    min-width: 0;
}

.poster-item .poster-select .el-select {
    width: 100%;
}

/* 海报提示卡片 */
.poster-tips-card {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 10px;
    border: 1px solid #93c5fd;
    margin-top: 16px;
}

.poster-tips-card .el-icon {
    color: #2563eb;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.poster-tips-card .tips-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.poster-tips-card .tips-text p {
    font-size: 12px;
    color: #475569;
    margin: 0;
}

/* 轮播间隔卡片 */
.carousel-interval-card {
    padding: 16px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-radius: 12px;
    border: 1px solid #c7d2fe;
    margin-bottom: 16px;
}

.carousel-interval-card .interval-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.carousel-interval-card .interval-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4338ca;
}

.carousel-interval-card .el-slider {
    padding: 0 8px;
}

/* 轮播开关列表 */
.carousel-switch-list {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.carousel-switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.carousel-switch-item:last-child {
    border-bottom: none;
}

.carousel-switch-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

.carousel-switch-item .switch-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carousel-switch-item .switch-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
}

.carousel-switch-item .switch-icon.green {
    background: linear-gradient(135deg, #dcfce7 0%, #86efac 100%);
    color: #16a34a;
}

.carousel-switch-item .switch-icon.amber {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
    color: #d97706;
}

.carousel-switch-item .switch-icon.purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #d8b4fe 100%);
    color: #9333ea;
    font-size: 10px;
    letter-spacing: 2px;
}

.carousel-switch-item .switch-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.carousel-switch-item .switch-label {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.carousel-switch-item .switch-desc {
    font-size: 12px;
    color: #64748b;
}

/* 轮播配置参考卡片 */
.carousel-ref-card {
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.carousel-ref-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.carousel-ref-card .ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.carousel-ref-card .ref-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.carousel-ref-card .ref-label {
    color: #475569;
    font-weight: 500;
}

.carousel-ref-card .ref-value {
    color: #64748b;
}

/* ==================== 工具资源管理页面样式 ==================== */

/* 统计卡片网格 */
.tools-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.tools-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tools-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.tools-stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 图标颜色变体 */
.tools-stat-card .stat-icon.icon-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.tools-stat-card .stat-icon.icon-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.tools-stat-card .stat-icon.icon-orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.tools-stat-card .stat-icon.icon-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* 装饰元素 */
.tools-stat-card .stat-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.06;
    transform: translate(30%, -30%);
}

.tools-stat-card:nth-child(1) .stat-decoration {
    background: #3b82f6;
}

.tools-stat-card:nth-child(2) .stat-decoration {
    background: #10b981;
}

.tools-stat-card:nth-child(3) .stat-decoration {
    background: #f59e0b;
}

.tools-stat-card:nth-child(4) .stat-decoration {
    background: #8b5cf6;
}

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

.tools-stat-card .stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

.tools-stat-card .stat-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 500;
}

/* 主内容卡片 */
.tools-main-card.el-card {
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

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

/* 工具栏 */
.tools-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
    border-radius: 16px 16px 0 0;
}

.tools-toolbar .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tools-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 搜索框 */
.tools-toolbar .search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.tools-toolbar .search-box .search-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 16px;
    z-index: 1;
}

.tools-toolbar .search-input.el-input {
    width: 280px;
}

.tools-toolbar .search-input .el-input__wrapper {
    padding-left: 38px;
    border-radius: 10px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: none;
    transition: all 0.2s ease;
}

.tools-toolbar .search-input .el-input__wrapper:hover {
    border-color: #cbd5e1;
}

.tools-toolbar .search-input .el-input__wrapper.is-focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 分类选择器 */
.tools-toolbar .category-select.el-select {
    width: 160px;
    --el-select-input-font-size: 14px;
}

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

.tools-toolbar .category-select .el-input {
    --el-input-height: 40px;
}

.tools-toolbar .category-select .el-select__wrapper {
    min-height: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

.tools-toolbar .category-select .el-input__wrapper:hover {
    border-color: #cbd5e1;
}

/* 刷新按钮 */
.tools-toolbar .refresh-btn.el-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.tools-toolbar .refresh-btn.el-button:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

/* 分类管理按钮 */
.tools-toolbar .category-manage-btn.el-button {
    height: 40px;
    border-radius: 10px;
    padding: 0 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #b45309;
    font-weight: 600;
}

.tools-toolbar .category-manage-btn.el-button:hover {
    background: #fde68a;
    border-color: #fbbf24;
}

/* 添加工具按钮 */
.tools-toolbar .add-tool-btn.el-button {
    height: 40px;
    border-radius: 10px;
    padding: 0 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.tools-toolbar .add-tool-btn.el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

/* 表格容器 */
.tools-table-wrapper {
    padding: 0;
}

.tools-table.el-table {
    --el-table-border-color: #f1f5f9;
}

.tools-table .el-table__header th {
    padding: 14px 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tools-table .el-table__body td {
    padding: 16px;
}

/* 工具信息单元格 */
.tool-info-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tool-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-icon-wrapper.has-icon {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px;
}

.tool-icon-wrapper.no-icon {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
    font-weight: 700;
    font-size: 18px;
}

.tool-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-icon-letter {
    text-transform: uppercase;
}

.tool-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.tool-name {
    font-weight: 700;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.3;
}

.tool-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.tool-url {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #94a3b8;
    font-family: ui-monospace, monospace;
}

.tool-url .el-icon {
    font-size: 10px;
}

.tool-url span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* 分类标签 */
.category-tag.el-tag {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
    border-radius: 8px;
    padding: 4px 10px;
    font-weight: 500;
}

/* 权重标记 */
.weight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 8px;
    background: #f1f5f9;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

/* 版本标签 */
.version-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #f5f3ff;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: #7c3aed;
}

/* 准入等级标签 */
.level-tag.el-tag {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
    font-weight: 600;
    padding: 0 12px;
}

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

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

.action-buttons .edit-btn.el-button:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

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

.action-buttons .delete-btn.el-button:hover {
    background: #fee2e2;
    border-color: #f87171;
}

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

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

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

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

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

.tools-empty .empty-action-btn.el-button {
    border-radius: 10px;
    padding: 12px 24px;
    height: auto;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.tools-empty .empty-action-btn.el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

/* ==================== 工具弹窗紧凑布局 ==================== */

/* 紧凑弹窗容器 */
.tool-dialog-compact.el-dialog .el-dialog__body {
    padding: 16px 24px;
    min-height: 350px;
}

.tool-dialog-compact.el-dialog .el-dialog__footer {
    padding: 12px 24px 20px;
}

/* 紧凑表单 */
.tool-form-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 表单行布局 - 2列 */
.tool-form-compact .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* 表单行布局 - 1列（单列全宽） */
.tool-form-compact .form-row-1 {
    display: block;
    width: 100%;
}

.tool-form-compact .form-row-1 .el-form-item__content {
    width: 100%;
}

.tool-form-compact .form-row-1 .el-select {
    width: 100%;
}

/* 表单行布局 - 3列 */
.tool-form-compact .form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* 弹窗底部居中 */
.dialog-footer-center {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.tool-form-compact .compact-form-item.el-form-item {
    margin-bottom: 0;
}

.tool-form-compact .compact-form-item .el-form-item__label {
    padding-bottom: 4px;
    font-size: 13px;
    line-height: 1.4;
}

/* 紧凑图标选择器 */
.icon-picker-compact {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    width: 100%;
}

.icon-picker-compact .icon-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.icon-picker-compact .icon-filter-bar .el-tag {
    font-size: 11px;
    padding: 2px 8px;
    height: 24px;
}

.icon-picker-compact .icon-grid-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 97px;
    overflow-y: auto;
    padding: 6px;
    width: 100%;
}

.icon-picker-compact .icon-grid-compact .icon-item {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 6px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-picker-compact .icon-grid-compact .icon-item:hover {
    border-color: #6366f1;
    background: #f5f3ff;
}

.icon-picker-compact .icon-grid-compact .icon-item.is-selected {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.icon-picker-compact .icon-grid-compact .icon-item img {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.icon-picker-compact .icon-grid-compact .icon-item:hover img,
.icon-picker-compact .icon-grid-compact .icon-item.is-selected img {
    opacity: 1;
}

.icon-picker-compact .icon-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #64748b;
}

/* 输入框紧凑样式 */
.tool-form-compact .el-input__wrapper,
.tool-form-compact .el-textarea__inner {
    font-size: 13px;
}

.tool-form-compact .el-input {
    --el-input-height: 36px;
}

.tool-form-compact .el-select {
    --el-select-input-font-size: 13px;
}

.tool-form-compact .el-input-number {
    --el-input-number-height: 36px;
}

/* 弹窗表单统一高度 */
.tool-form-compact .el-select .el-select__wrapper {
    min-height: 36px;
    height: 36px;
    border-radius: 6px;
}

.tool-form-compact .el-input-group {
    --el-input-height: 36px;
}

.tool-form-compact .el-input-group .el-input__wrapper {
    height: 36px;
}

.tool-form-compact .el-input-group__append {
    padding: 0 12px;
}

/* 统一上传输入框样式 */
.el-input-group__append .el-upload {
    display: flex;
    align-items: center;
}

.el-input-group__append .el-button {
    border: none;
    background: transparent;
    color: var(--admin-color-primary);
    font-weight: 600;
    padding: 0 4px;
    height: auto;
}

.el-input-group__append .el-button:hover {
    background: transparent;
    color: var(--admin-color-primary-dark);
}

.el-input-group__prepend {
    padding: 0 8px;
    background: var(--admin-color-bg-light);
}

/* ==================== 工具自动打包页面样式 ==================== */

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

/* 统计卡片网格 */
.builder-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.builder-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.builder-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.builder-stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.builder-stat-card .stat-icon.icon-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.builder-stat-card .stat-icon.icon-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.builder-stat-card .stat-icon.icon-orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.builder-stat-card .stat-icon.icon-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.builder-stat-card .stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.builder-stat-card .stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

.builder-stat-card .stat-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.builder-stat-card .stat-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.06;
    transform: translate(30%, -30%);
}

.builder-stat-card:nth-child(1) .stat-decoration { background: #3b82f6; }
.builder-stat-card:nth-child(2) .stat-decoration { background: #10b981; }
.builder-stat-card:nth-child(3) .stat-decoration { background: #f59e0b; }
.builder-stat-card:nth-child(4) .stat-decoration { background: #ef4444; }

/* 主卡片 */
.builder-main-card.el-card {
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

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

/* 工具栏 */
.builder-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}

.builder-toolbar .toolbar-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.builder-toolbar .title-icon {
    color: #6366f1;
}

.builder-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.builder-toolbar .refresh-btn.el-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.builder-toolbar .upload-btn.el-button {
    border-radius: 10px;
    height: 40px;
    padding: 0 20px;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
}

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

.builder-table.el-table {
    --el-table-border-color: #f1f5f9;
    --el-table-row-hover-bg-color: #f8fafc;
}

.builder-table .el-table__header th {
    font-weight: 600;
    color: #475569;
}

/* 工具信息单元格 */
.build-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.build-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.build-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.build-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.build-id {
    font-size: 12px;
    color: #94a3b8;
    font-family: monospace;
}

/* 状态标签 */
.builder-table .status-tag {
    font-weight: 500;
}

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

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

.builder-table .download-btn.el-button {
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: #ffffff;
    font-weight: 500;
}

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

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

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

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

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

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

.builder-empty .empty-action-btn.el-button {
    border-radius: 10px;
    padding: 12px 24px;
    height: auto;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* 弹窗样式 */
.builder-dialog .builder-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.builder-dialog .upload-wrapper {
    width: 100%;
}

.builder-dialog .upload-area {
    width: 100%;
}

.builder-dialog .upload-area .el-upload-dragger {
    width: 100%;
    padding: 32px 20px;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.builder-dialog .upload-area .el-upload-dragger:hover {
    border-color: #6366f1;
    background: #f5f3ff;
}

.builder-dialog .upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.builder-dialog .upload-icon {
    color: #6366f1;
}

.builder-dialog .upload-text {
    text-align: center;
}

.builder-dialog .upload-main-text {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.builder-dialog .upload-sub-text {
    font-size: 13px;
    color: #64748b;
}

.builder-dialog .upload-sub-text em {
    color: #6366f1;
    font-style: normal;
    font-weight: 600;
}

/* 提示卡片 */
.builder-dialog .tips-card,
.builder-form .tips-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
}

.builder-dialog .tip-item,
.builder-form .tip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: #64748b;
}

.builder-dialog .tip-icon,
.builder-form .tip-icon {
    font-size: 14px;
}

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

@media (max-width: 768px) {
    .builder-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .builder-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .builder-toolbar .toolbar-right {
        justify-content: flex-end;
    }
}

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

/* === 管理员审计日志面板 === */
.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;
}

/* 分销配置两栏布局 */
.referral-config .config-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}

.referral-config .config-main {
    min-width: 0;
}

.referral-config .config-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 配置预览卡片 */
.referral-config .preview-card .header-icon.preview {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.referral-config .preview-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}

.referral-config .preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.referral-config .preview-label {
    font-size: 14px;
    color: #64748b;
}

.referral-config .preview-value {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.referral-config .preview-value.highlight {
    font-size: 18px;
    color: #6366f1;
}

.referral-config .preview-example {
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px 16px;
}

.referral-config .example-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 10px;
}

.referral-config .example-content {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
}

.referral-config .example-content .text-green {
    color: #10b981;
}

/* 说明卡片 */
.referral-config .tips-card .header-icon.tips {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.referral-config .tips-card .tips-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.referral-config .tips-card .tip-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

.referral-config .tips-card .tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.referral-config .tips-card .tip-dot.info {
    background: #3b82f6;
}

.referral-config .tips-card .tip-dot.success {
    background: #10b981;
}

.referral-config .tips-card .tip-dot.warning {
    background: #f59e0b;
}

.referral-config .tips-card .tip-dot.danger {
    background: #ef4444;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .referral-config .config-layout {
        grid-template-columns: 1fr;
    }
    
    .referral-config .config-side {
        flex-direction: row;
    }
    
    .referral-config .config-side .panel-card {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .referral-config .config-side {
        flex-direction: column;
    }
}

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

.referral-toolbar .toolbar-tips .tip-dot.danger {
    background: #ef4444;
}

/* 提现审核工具栏 */
.withdraw-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);
    margin-bottom: 16px;
}

.withdraw-toolbar .toolbar-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.withdraw-toolbar .filter-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.withdraw-toolbar .filter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.withdraw-toolbar .filter-card.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.withdraw-toolbar .filter-card.pending {
    color: #d97706;
}

.withdraw-toolbar .filter-card.pending:hover {
    background: #fffbeb;
}

.withdraw-toolbar .filter-card.pending.active {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.withdraw-toolbar .filter-card.approved {
    color: #2563eb;
}

.withdraw-toolbar .filter-card.approved:hover {
    background: #eff6ff;
}

.withdraw-toolbar .filter-card.approved.active {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.withdraw-toolbar .filter-card.paid {
    color: #059669;
}

.withdraw-toolbar .filter-card.paid:hover {
    background: #ecfdf5;
}

.withdraw-toolbar .filter-card.paid.active {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.withdraw-toolbar .filter-card.rejected {
    color: #dc2626;
}

.withdraw-toolbar .filter-card.rejected:hover {
    background: #fef2f2;
}

.withdraw-toolbar .filter-card.rejected.active {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.withdraw-toolbar .toolbar-tips {
    display: flex;
    align-items: center;
    gap: 16px;
}

.withdraw-toolbar .toolbar-tips .tips-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #f59e0b;
}

.withdraw-toolbar .toolbar-tips .tips-divider {
    width: 1px;
    height: 16px;
    background: #e2e8f0;
}

.withdraw-toolbar .toolbar-tips .tip-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.withdraw-toolbar .toolbar-tips .tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.withdraw-toolbar .toolbar-tips .tip-dot.info {
    background: #3b82f6;
}

.withdraw-toolbar .toolbar-tips .tip-dot.success {
    background: #10b981;
}

.withdraw-toolbar .toolbar-tips .tip-dot.warning {
    background: #f59e0b;
}

.withdraw-toolbar .toolbar-tips .tip-dot.danger {
    background: #ef4444;
}

.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-nav-cards {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.cdk-tab-card {
    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(139, 92, 246, 0.2);
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.cdk-tab-card:hover {
    background: white;
    border-color: rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

.cdk-tab-card.active {
    background: white;
    border-color: #8b5cf6;
    color: #8b5cf6;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.2);
}

.cdk-tab-card .el-icon {
    color: currentColor;
}

/* CDK列表横向工具栏 */
.cdk-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    gap: 20px;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-section.status-filters {
    flex: 1;
}

.toolbar-label {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
}

.filter-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.filter-btn.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

.filter-btn .el-icon {
    font-size: 16px;
}

/* CDK状态筛选卡片 - 现代化样式 */
.cdk-list-toolbar .filter-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cdk-list-toolbar .filter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cdk-list-toolbar .filter-card.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.cdk-list-toolbar .filter-card.unused {
    color: #2563eb;
}

.cdk-list-toolbar .filter-card.unused:hover {
    background: #eff6ff;
}

.cdk-list-toolbar .filter-card.unused.active {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.cdk-list-toolbar .filter-card.used {
    color: #059669;
}

.cdk-list-toolbar .filter-card.used:hover {
    background: #ecfdf5;
}

.cdk-list-toolbar .filter-card.used.active {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.cdk-list-toolbar .filter-card.disabled {
    color: #dc2626;
}

.cdk-list-toolbar .filter-card.disabled:hover {
    background: #fef2f2;
}

.cdk-list-toolbar .filter-card.disabled.active {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.toolbar-section.batch-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-section.search-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-section.batch-filter .el-input {
    width: 200px;
}

/* 生成CDK横向工具栏 */
.generate-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: white;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.toolbar-unit {
    font-size: 13px;
    color: #94a3b8;
    margin-left: 4px;
}

.toolbar-section.toolbar-action {
    margin-left: auto;
}

/* 生成结果卡片 */
.generate-result-card {
    width: 100%;
}

/* 调整生成容器布局 */
.generate-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 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布局 - 已移除旧样式，使用新的横向工具栏布局 */

/* 生成结果 */
.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-list .panel-card-body {
    padding: 0;
}

.cdk-table.el-table--border .el-table__cell {
    border-right: 1px solid #ebeef5;
}

/* CDK表格边框 - 使用高特异性选择器替代 !important */
html body .cdk-table .el-table__header th {
    border-right: 1px solid #e2e8f0;
}

html body .cdk-table .el-table__body td {
    border-right: 1px solid #f1f5f9;
}

.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,
    .list-container {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 992px) {
    .cdk-overview .overview-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-panel .modern-panel-header {
    border-radius: 12px;
}

/* 内容区 */
.media-library-content {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-top: 20px;
    padding: 0 10px;
}

/* 左侧分类树 */
.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-checkbox .el-checkbox__label {
    display: none;
}

.media-card .media-preview {
    position: relative;
    height: 140px;
    /* 棋盘格背景，方便查看透明/白色图片 */
    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 {
    object-fit: cover;
}

.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-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 公共组件 */

/* 上传按钮取消悬停效果 */
.no-hover-effect.el-button:hover,
.no-hover-effect.el-button:focus,
.no-hover-effect.el-button:active {
    background-color: var(--el-button-bg-color);
    border-color: var(--el-button-border-color);
    color: var(--el-button-text-color);
    transform: none;
    box-shadow: none;
}
.no-hover-effect.el-button--primary:hover,
.no-hover-effect.el-button--primary:focus,
.no-hover-effect.el-button--primary:active {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    color: #fff;
    transform: none;
    box-shadow: none;
}
.el-upload .no-hover-effect.el-button--primary:hover,
.el-upload .no-hover-effect.el-button--primary:focus {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}

/* 媒体库弹窗确认按钮禁用状态样式 */
.el-dialog .el-button--primary.is-disabled,
.el-dialog .el-button--primary.is-disabled:hover {
    background-color: #a0cfff;
    border-color: #a0cfff;
    color: #fff;
    opacity: 0.7;
}

/* ========================================
   输入框+媒体库按钮组合样式
   ======================================== */
.input-with-media-btn {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-media-btn .el-input {
    flex: 1;
}

.input-with-media-btn .el-button {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* ========================================
   媒体库选择弹窗布局样式
   ======================================== */
.media-picker-layout {
    display: flex;
    gap: 16px;
    min-height: 450px;
}

.media-picker-sidebar {
    width: auto;
    min-width: 140px;
    max-width: 280px;
    flex-shrink: 0;
    background: transparent;
    border-right: 1px solid #e5e7eb;
    padding: 8px 16px 8px 8px;
    max-height: 450px;
    overflow-y: auto;
}

.media-category-item {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    color: #475569;
    transition: all 0.2s;
    margin-bottom: 4px;
    white-space: nowrap;
}

.media-category-item:hover {
    background: #e2e8f0;
}

.media-category-item.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-weight: 500;
}

.media-picker-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-content: start;
    max-height: 450px;
    overflow-y: auto;
    padding: 8px;
}

.media-picker-item {
    position: relative;
    aspect-ratio: 16 / 10;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    transition: all 0.2s;
    overflow: hidden;
    background-color: #f0f0f0;
    background-image:
        linear-gradient(45deg, #d4d4d4 25%, transparent 25%, transparent 75%, #d4d4d4 75%),
        linear-gradient(45deg, #d4d4d4 25%, transparent 25%, transparent 75%, #d4d4d4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.media-picker-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-picker-item:hover {
    border-color: #a5b4fc;
    transform: scale(1.02);
}

.media-picker-item.selected {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.media-picker-item .media-item-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6366f1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.media-picker-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.media-picker-empty p {
    margin-top: 12px;
    font-size: 14px;
}

.media-picker-dialog .el-dialog__header {
    background: linear-gradient(135deg, #10b981, #059669);
    padding: 16px 20px;
    margin: 0;
}

.media-picker-dialog .el-dialog__title {
    color: white;
    font-weight: 600;
}

.media-picker-dialog .el-dialog__headerbtn .el-dialog__close {
    color: white;
}