/**
 * Kxfan CMS UI 组件样式
 * 仅包含 kxfanUI.js 动态生成的组件样式
 * 弹窗、抽屉、按钮、Toast、Loading、裁剪、通知、进度条等
 *
 * @version 3.0.0
 * @update 2026-06-01 Apple 风格视觉重构（去除渐变背景、柔和阴影、磨砂玻璃）
 */

/* ==================== Hero 按钮基础样式清除 ==================== */

/* 统一按钮样式：无下划线、无边框 */
.kxfan_neu_dashboard_actions .kxfan_neu_btn,
.kxfan_neu_dashboard_actions--inline .kxfan_neu_btn {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none;
}

/* 图标元素 */
.kxfan_neu_dashboard_actions i,
.kxfan_neu_dashboard_actions--inline i,
.kxfan_neu_dashboard_actions .fa-solid,
.kxfan_neu_dashboard_actions .fa-regular,
.kxfan_neu_dashboard_actions .fa-brands,
.kxfan_neu_dashboard_actions svg {
    text-decoration: none !important;
    border: none !important;
    display: inline-block;
}

/* ==================== CSS 设计令牌（Design Tokens） ==================== */
:root {
    /* 主色调 */
    --kxfan-color-primary: #6b5bff;
    --kxfan-color-primary-light: #8b7bff;
    --kxfan-color-primary-dark: #4a3bdf;
    --kxfan-color-success: #52c41a;
    --kxfan-color-success-light: #73d13d;
    --kxfan-color-warning: #faad14;
    --kxfan-color-warning-light: #ffc53d;
    --kxfan-color-danger: #ff4d4f;
    --kxfan-color-danger-dark: #e03d3f;
    --kxfan-color-danger-light: #ff7875;
    --kxfan-color-info: #1890ff;
    --kxfan-color-info-light: #40a9ff;

    /* 中性色 */
    --kxfan-color-white: #ffffff;
    --kxfan-color-black: #000000;
    --kxfan-color-text: #1f2937;
    --kxfan-color-text-secondary: #64748b;
    --kxfan-color-text-light: #94a3b8;
    --kxfan-color-border: #e2e8f0;
    --kxfan-color-border-light: #f1f5f9;
    --kxfan-color-bg: #f8fafc;
    --kxfan-color-bg-light: #f1f5f9;

    /* 圆角 */
    --kxfan-radius-sm: 8px;
    --kxfan-radius: 12px;
    --kxfan-radius-lg: 16px;
    --kxfan-radius-xl: 24px;
    --kxfan-radius-full: 9999px;

    /*遮罩层*/
    --modal-z-index: 1000;

    /* 阴影 */
    --kxfan-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --kxfan-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --kxfan-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
    --kxfan-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
    --kxfan-shadow-xl: 0 25px 80px rgba(0, 0, 0, 0.25);

    /* 字体 */
    --kxfan-font-size-xs: 11px;
    --kxfan-font-size-sm: 12px;
    --kxfan-font-size-base: 14px;
    --kxfan-font-size-lg: 16px;
    --kxfan-font-size-xl: 18px;
    --kxfan-font-size-2xl: 22px;
    --kxfan-font-weight-normal: 400;
    --kxfan-font-weight-medium: 500;
    --kxfan-font-weight-semibold: 600;
    --kxfan-font-weight-bold: 700;

    /* 间距 */
    --kxfan-spacing-xs: 4px;
    --kxfan-spacing-sm: 8px;
    --kxfan-spacing-md: 12px;
    --kxfan-spacing-base: 16px;
    --kxfan-spacing-lg: 20px;
    --kxfan-spacing-xl: 28px;

    /* 动画 */
    --kxfan-transition-fast: 0.15s ease;
    --kxfan-transition-base: 0.25s ease;
    --kxfan-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --kxfan-transition-bounce: 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-Index 层级系统 */
    --kxfan-z-base: 100000;
    --kxfan-z-overlay: var(--kxfan-z-base);
    --kxfan-z-modal: calc(var(--kxfan-z-base) + 1);
    --kxfan-z-toast: 200000;
    --kxfan-z-loading: 200000;
    --kxfan-z-notification: 200010;
    --kxfan-z-tooltip: 200001;
    --kxfan-z-popover: 200002;

    /* 渐变 */
    --kxfan-gradient-primary: linear-gradient(135deg, var(--kxfan-color-primary) 0%, var(--kxfan-color-primary-dark) 100%);
    --kxfan-gradient-danger: linear-gradient(135deg, var(--kxfan-color-danger) 0%, var(--kxfan-color-danger-light) 100%);
    --kxfan-gradient-success: linear-gradient(135deg, var(--kxfan-color-success) 0%, var(--kxfan-color-success-light) 100%);
    --kxfan-gradient-warning: linear-gradient(135deg, var(--kxfan-color-warning) 0%, var(--kxfan-color-warning-light) 100%);

    /* 全局安全区域 */
    --kxfan-safe-area-inset-top: env(safe-area-inset-top, 0px);
    --kxfan-safe-area-inset-right: env(safe-area-inset-right, 0px);
    --kxfan-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --kxfan-safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* 遮罩层 — Apple 风格：更轻透 */
.kxfan_ui_overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: var(--kxfan-z-overlay);
    opacity: 0;
    transition: opacity var(--kxfan-transition-base);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

.kxfan_ui_overlay.active { opacity: 1; }

/* 弹窗主体 — Apple 风格：更柔和阴影 */
.kxfan_ui_modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    z-index: var(--kxfan-z-modal);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kxfan-safe-area-inset-top) var(--kxfan-safe-area-inset-right) var(--kxfan-safe-area-inset-bottom) var(--kxfan-safe-area-inset-left);
}

.kxfan_ui_modal.active {
    opacity: 1;
    transform: scale(1);
}

.kxfan_ui_modal-wrapper {
    width: 540px;
    max-width: 90vw;
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 30px -5px rgba(0, 0, 0, 0.08),
        0 0 1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
    transform: scale(0.96);
    transition: transform 0.28s cubic-bezier(0.2, 0, 0.2, 1), opacity var(--kxfan-transition-base);
    will-change: transform, opacity;
}

.kxfan_ui_modal-wrapper.active { transform: scale(1); }

.kxfan_ui_modal-wrapper.kxfan_ui_modal-sm { width: 380px; }
.kxfan_ui_modal-wrapper.kxfan_ui_modal-lg { width: 720px; }
.kxfan_ui_modal-wrapper.kxfan_ui_modal-xl { width: 900px; }
.kxfan_ui_modal-wrapper.kxfan_ui_modal-wide { width: 90vw; max-width: 1400px; }
.kxfan_ui_modal-wrapper.kxfan_ui_modal-fullscreen {
    width: 100vw; height: 100vh;
    max-width: none; max-height: none;
    border-radius: 0;
}

/* 弹窗头部 — Apple 风格：纯白背景 + 底部细线 */
.kxfan_ui_modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--kxfan-color-white);
    color: var(--kxfan-color-text);
    flex-shrink: 0;
    border-bottom: 1px solid var(--kxfan-color-border);
}

.kxfan_ui_modal-title {
    font-size: var(--kxfan-font-size-lg);
    font-weight: var(--kxfan-font-weight-semibold);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

.kxfan_modal_title_icon {
    color: var(--kxfan-color-primary);
    font-size: 15px;
}

.kxfan_ui_modal-close {
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--kxfan-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--kxfan-transition-fast);
    cursor: pointer;
    color: var(--kxfan-color-text-light);
    font-size: 13px;
}
.kxfan_ui_modal-close:hover { background: var(--kxfan-color-bg); color: var(--kxfan-color-text); }
.kxfan_ui_modal-close:focus-visible { outline: 2px solid var(--kxfan-color-primary); outline-offset: 2px; }

/* 弹窗内容区 */
.kxfan_ui_modal-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--kxfan-color-white);
    overscroll-behavior: contain;
}

/* 弹窗底部 */
.kxfan_ui_modal-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--kxfan-color-border-light);
    background: var(--kxfan-color-white);
    flex-shrink: 0;
}

/* ==================== 抽屉样式 ==================== */
.kxfan_ui_drawer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    z-index: var(--kxfan-z-modal);
    opacity: 0;
    transition: opacity var(--kxfan-transition-base);
    display: flex;
    justify-content: flex-end;
}
.kxfan_ui_drawer.active { opacity: 1; }

.kxfan_ui_drawer-wrapper {
    background: var(--kxfan-color-white);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    transition: transform var(--kxfan-transition-slow), opacity var(--kxfan-transition-base);
    will-change: transform;
}

.kxfan_ui_drawer-right .kxfan_ui_drawer-wrapper { transform: translateX(100%); }
.kxfan_ui_drawer-right.active .kxfan_ui_drawer-wrapper,
.kxfan_ui_drawer.active .kxfan_ui_drawer-wrapper { transform: translateX(0); }

.kxfan_ui_drawer-left .kxfan_ui_drawer-wrapper {
    transform: translateX(-100%);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15);
}
.kxfan_ui_drawer-left.active .kxfan_ui_drawer-wrapper { transform: translateX(0); }

.kxfan_ui_drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--kxfan-color-white);
    color: var(--kxfan-color-text);
    flex-shrink: 0;
    border-bottom: 1px solid var(--kxfan-color-border);
}
.kxfan_ui_drawer-title { font-size: var(--kxfan-font-size-lg); font-weight: var(--kxfan-font-weight-semibold); }

.kxfan_ui_drawer-close {
    width: 28px; height: 28px;
    background: transparent; border: none; border-radius: var(--kxfan-radius-full);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--kxfan-transition-fast); cursor: pointer; color: var(--kxfan-color-text-light);
}
.kxfan_ui_drawer-close:hover { background: var(--kxfan-color-bg); color: var(--kxfan-color-text); }

.kxfan_ui_drawer-body {
    flex: 1; overflow-y: auto; padding: 20px;
    overscroll-behavior: contain;
}

/* ==================== 按钮基础样式 ==================== */
.kxfan_ui_btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--kxfan-radius);
    font-size: var(--kxfan-font-size-base);
    font-weight: var(--kxfan-font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--kxfan-transition-base);
    white-space: nowrap;
    user-select: none;
    outline: none;
    position: relative;
    overflow: hidden;
}
.kxfan_ui_btn::after {
    content: ''; position: absolute; inset: 0;
    background: currentColor; opacity: 0;
    transition: opacity var(--kxfan-transition-fast);
}
.kxfan_ui_btn:active::after { opacity: 0.08; }
.kxfan_ui_btn i { font-size: 13px; pointer-events: none; }
.kxfan_ui_btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* 主要按钮 — Apple 风格：纯色填充 + 轻阴影 */
.kxfan_ui_btn-primary {
    background: var(--kxfan-color-primary);
    color: var(--kxfan-color-white); border: none;
    padding: 10px 24px; font-size: 14px; font-weight: 500;
    border-radius: var(--kxfan-radius);
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all var(--kxfan-transition-base);
}
.kxfan_ui_btn-primary:hover:not(:disabled) { background: var(--kxfan-color-primary-dark); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.kxfan_ui_btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* 次要按钮 */
.kxfan_ui_btn-secondary {
    background: var(--kxfan-color-white);
    color: var(--kxfan-color-text);
    border: 2px solid var(--kxfan-color-border);
    padding: 10px 24px; font-size: 14px; font-weight: 500;
    border-radius: var(--kxfan-radius);
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px;
    transition: all var(--kxfan-transition-base);
}
.kxfan_ui_btn-secondary:hover:not(:disabled) { background: var(--kxfan-color-bg); border-color: var(--kxfan-color-primary-light); color: var(--kxfan-color-primary); }
.kxfan_ui_btn-secondary:active:not(:disabled) { transform: none; }

/* 危险按钮 — Apple 风格 */
.kxfan_ui_btn-danger {
    background: var(--kxfan-color-danger);
    color: var(--kxfan-color-white); border: none;
    padding: 10px 24px; font-size: 14px; font-weight: 500;
    border-radius: var(--kxfan-radius);
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all var(--kxfan-transition-base);
}
.kxfan_ui_btn-danger:hover:not(:disabled) { background: var(--kxfan-color-danger-dark); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.kxfan_ui_btn-danger:active:not(:disabled) { transform: translateY(0); }

/* 裁剪弹窗按钮 — Apple 风格 */
.kxfan_ui_btn-crop-cancel {
    background: var(--kxfan-color-white);
    color: var(--kxfan-color-text-secondary);
    border: 1px solid var(--kxfan-color-border);
    padding: 10px 24px; font-size: 14px; font-weight: 500;
    border-radius: var(--kxfan-radius);
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px;
    transition: all var(--kxfan-transition-base);
}
.kxfan_ui_btn-crop-cancel:hover:not(:disabled) { background: var(--kxfan-color-bg-light); border-color: var(--kxfan-color-danger-light, #ff7875); color: var(--kxfan-color-danger, #ff4d4f); }

.kxfan_ui_btn-crop-confirm {
    background: var(--kxfan-color-primary);
    color: var(--kxfan-color-white); border: none;
    padding: 10px 24px; font-size: 14px; font-weight: 500;
    border-radius: var(--kxfan-radius);
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all var(--kxfan-transition-base);
}
.kxfan_ui_btn-crop-confirm:hover:not(:disabled) { background: var(--kxfan-color-primary-dark); transform: translateY(-1px); }

/* ==================== 确认弹窗样式 — Apple 风格 ==================== */
.kxfan_ui_confirm-content {
    display: flex; flex-direction: column;
    align-items: center; text-align: center; padding: 16px 0;
}
.kxfan_ui_confirm-content.kxfan_ui_confirm-noicon { padding: 8px 0; }
.kxfan_ui_confirm-noicon > .kxfan_ui_confirm-icon { display: none; }

.kxfan_ui_confirm-icon {
    width: 52px; height: 52px; border-radius: var(--kxfan-radius-full);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; font-size: 24px; color: var(--kxfan-color-white);
    flex-shrink: 0;
    animation: kxfanConfirmIconBounce 0.5s var(--kxfan-transition-bounce);
}
@keyframes kxfanConfirmIconBounce {
    0% { transform: scale(0); } 50% { transform: scale(1.08); } 100% { transform: scale(1); }
}

.kxfan_ui_confirm-icon.kxfan_ui_confirm-icon-success {
    background: var(--kxfan-color-success);
}
.kxfan_ui_confirm-icon.kxfan_ui_confirm-icon-error {
    background: var(--kxfan-color-danger);
}
.kxfan_ui_confirm-icon.kxfan_ui_confirm-icon-warning {
    background: var(--kxfan-color-warning);
}
.kxfan_ui_confirm-icon.kxfan_ui_confirm-icon-info {
    background: var(--kxfan-color-info);
}

.kxfan_ui_confirm-text {
    width: 100%; font-size: var(--kxfan-font-size-lg);
    color: var(--kxfan-color-text); line-height: 1.6; word-break: break-word;
}

/* ==================== Toast 提示样式 — Apple 风格 ==================== */
.kxfan_ui_toast {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    background: rgba(255, 255, 255, 0.85);
    padding: 14px 24px;
    border-radius: 14px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 0 1px rgba(0, 0, 0, 0.1);
    display: flex; align-items: center; gap: 10px;
    z-index: var(--kxfan-z-toast);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    will-change: transform, opacity;
}
.kxfan_ui_toast.active { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.kxfan_ui_toast.kxfan_ui_toast-top { top: 30px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%) translateY(-20px); }
.kxfan_ui_toast.kxfan_ui_toast-top.active { transform: translateX(-50%) translateY(0); }
.kxfan_ui_toast.kxfan_ui_toast-bottom { top: auto; bottom: 30px; left: 50%; right: auto; transform: translateX(-50%) translateY(20px); }
.kxfan_ui_toast.kxfan_ui_toast-bottom.active { transform: translateX(-50%) translateY(0); }
.kxfan_ui_toast.kxfan_ui_toast-top-left { top: 30px; left: 30px; right: auto; bottom: auto; transform: translateX(-20px) translateY(-20px); }
.kxfan_ui_toast.kxfan_ui_toast-top-left.active { transform: translateX(0) translateY(0); }
.kxfan_ui_toast.kxfan_ui_toast-top-right { top: 30px; right: 30px; left: auto; bottom: auto; transform: translateX(20px) translateY(-20px); }
.kxfan_ui_toast.kxfan_ui_toast-top-right.active { transform: translateX(0) translateY(0); }
.kxfan_ui_toast.kxfan_ui_toast-bottom-left { top: auto; bottom: 30px; left: 30px; right: auto; transform: translateX(-20px) translateY(20px); }
.kxfan_ui_toast.kxfan_ui_toast-bottom-left.active { transform: translateX(0) translateY(0); }
.kxfan_ui_toast.kxfan_ui_toast-bottom-right { top: auto; bottom: 30px; right: 30px; left: auto; transform: translateX(20px) translateY(20px); }
.kxfan_ui_toast.kxfan_ui_toast-bottom-right.active { transform: translateX(0) translateY(0); }

.kxfan_ui_toast i { font-size: 18px; flex-shrink: 0; }
.kxfan_ui_toast span { font-size: var(--kxfan-font-size-base); color: var(--kxfan-color-text); }

.kxfan_ui_toast-success { border-left: 4px solid var(--kxfan-color-success); }
.kxfan_ui_toast-success i { color: var(--kxfan-color-success); }
.kxfan_ui_toast-error { border-left: 4px solid var(--kxfan-color-danger); }
.kxfan_ui_toast-error i { color: var(--kxfan-color-danger); }
.kxfan_ui_toast-warning { border-left: 4px solid var(--kxfan-color-warning); }
.kxfan_ui_toast-warning i { color: var(--kxfan-color-warning); }
.kxfan_ui_toast-info { border-left: 4px solid var(--kxfan-color-info); }
.kxfan_ui_toast-info i { color: var(--kxfan-color-info); }

/* ==================== Notification 全局通知样式 ==================== */
.kxfan_ui_notification-container {
    position: fixed; z-index: var(--kxfan-z-notification);
    pointer-events: none;
}
.kxfan_ui_notification-container.kxfan_ui_notification-top-right { top: 20px; right: 20px; }
.kxfan_ui_notification-container.kxfan_ui_notification-top-left { top: 20px; left: 20px; }
.kxfan_ui_notification-container.kxfan_ui_notification-bottom-right { bottom: 20px; right: 20px; }
.kxfan_ui_notification-container.kxfan_ui_notification-bottom-left { bottom: 20px; left: 20px; }

.kxfan_ui_notification {
    min-width: 300px; max-width: 420px;
    padding: 14px 18px; margin-bottom: 12px;
    border-radius: 14px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 0 1px rgba(0, 0, 0, 0.08);
    background: var(--kxfan-color-white);
    display: flex; align-items: flex-start; gap: 12px;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--kxfan-transition-slow);
    border-left: 4px solid transparent;
    position: relative; overflow: hidden;
    will-change: transform, opacity;
}
.kxfan_ui_notification.active { opacity: 1; transform: translateX(0); }

.kxfan_ui_notification-close {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px;
    background: transparent; border: none;
    border-radius: var(--kxfan-radius-full);
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    color: var(--kxfan-color-text-light);
    font-size: 12px;
    transition: all var(--kxfan-transition-fast); opacity: 0;
}
.kxfan_ui_notification:hover .kxfan_ui_notification-close { opacity: 1; }
.kxfan_ui_notification-close:hover { background: var(--kxfan-color-bg); color: var(--kxfan-color-text); }

.kxfan_ui_notification-icon {
    width: 28px; height: 28px; border-radius: var(--kxfan-radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; flex-shrink: 0; margin-top: 2px;
}
.kxfan_ui_notification-content { flex: 1; min-width: 0; }
.kxfan_ui_notification-title { font-size: var(--kxfan-font-size-base); font-weight: var(--kxfan-font-weight-medium); color: var(--kxfan-color-text); margin-bottom: 4px; line-height: 1.4; }
.kxfan_ui_notification-message { font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-secondary); line-height: 1.5; }
.kxfan_ui_notification-progress {
    position: absolute; bottom: 0; left: 0; height: 3px;
    background: transparent;
    border-radius: 0 0 var(--kxfan-radius) var(--kxfan-radius);
    transition: width linear;
}

.kxfan_ui_notification-success { border-left-color: var(--kxfan-color-success); }
.kxfan_ui_notification-success .kxfan_ui_notification-icon { background: var(--kxfan-color-success); }
.kxfan_ui_notification-success .kxfan_ui_notification-progress { background: var(--kxfan-color-success); }
.kxfan_ui_notification-error { border-left-color: var(--kxfan-color-danger); }
.kxfan_ui_notification-error .kxfan_ui_notification-icon { background: var(--kxfan-color-danger); }
.kxfan_ui_notification-error .kxfan_ui_notification-progress { background: var(--kxfan-color-danger); }
.kxfan_ui_notification-warning { border-left-color: var(--kxfan-color-warning); }
.kxfan_ui_notification-warning .kxfan_ui_notification-icon { background: var(--kxfan-color-warning); }
.kxfan_ui_notification-warning .kxfan_ui_notification-progress { background: var(--kxfan-color-warning); }
.kxfan_ui_notification-info { border-left-color: var(--kxfan-color-info); }
.kxfan_ui_notification-info .kxfan_ui_notification-icon { background: var(--kxfan-color-info); }
.kxfan_ui_notification-info .kxfan_ui_notification-progress { background: var(--kxfan-color-info); }

/* ==================== Loading 加载样式 ==================== */
.kxfan_ui_loading {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: var(--kxfan-z-loading);
    opacity: 0;
    transition: opacity var(--kxfan-transition-base);
}
.kxfan_ui_loading.active { opacity: 1; }

.kxfan_ui_loading-shade { position: absolute; inset: 0; pointer-events: none; }
.kxfan_ui_loading-content {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.kxfan_ui_loading-spinner {
    width: 44px; height: 44px;
    border: 3px solid var(--kxfan-color-border);
    border-top-color: var(--kxfan-color-primary);
    border-radius: 50%;
    animation: kxfanLoadingSpin 0.8s linear infinite;
}
@keyframes kxfanLoadingSpin { to { transform: rotate(360deg); } }

.kxfan_ui_loading-with-shade .kxfan_ui_loading-content {
    background: rgba(255, 255, 255, 0.9); padding: 28px 36px;
    border-radius: 14px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 0 1px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px) saturate(1.4);
}
.kxfan_ui_loading-with-shade .kxfan_ui_loading-spinner { color: var(--kxfan-color-primary); }
.kxfan_ui_loading-text { margin-top: 14px; font-size: var(--kxfan-font-size-base); color: var(--kxfan-color-text-secondary); letter-spacing: 0.02em; }

/* 骨架屏加载样式 */
.kxfan_ui_skeleton {
    background: linear-gradient(90deg, var(--kxfan-color-bg-light) 25%, var(--kxfan-color-border-light) 37%, var(--kxfan-color-bg-light) 63%);
    background-size: 400% 100%;
    animation: kxfanSkeletonShimmer 1.5s ease infinite;
    border-radius: var(--kxfan-radius-sm);
}
@keyframes kxfanSkeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.kxfan_ui_skeleton-text { height: 16px; margin-bottom: 10px; }
.kxfan_ui_skeleton-text:last-child { width: 70%; }
.kxfan_ui_skeleton-avatar { width: 48px; height: 48px; border-radius: var(--kxfan-radius-full); }
.kxfan_ui_skeleton-image { width: 100%; height: 180px; border-radius: var(--kxfan-radius); }
.kxfan_ui_skeleton-button { height: 38px; width: 120px; border-radius: var(--kxfan-radius); }
.kxfan_ui_skeleton-paragraph { padding: 16px; }
.kxfan_ui_skeleton-paragraph .kxfan_ui_skeleton-text { margin-bottom: 12px; }
.kxfan_ui_skeleton-table { width: 100%; border-collapse: collapse; }
.kxfan_ui_skeleton-table td { padding: 8px 4px; }

/* ==================== 进度条/进度环样式 ==================== */
.kxfan_ui_progress { width: 100%; height: 6px; background: var(--kxfan-color-bg-light); border-radius: var(--kxfan-radius-full); overflow: hidden; position: relative; }
.kxfan_ui_progress-bar {
    height: 100%; border-radius: var(--kxfan-radius-full);
    background: var(--kxfan-color-primary);
    transition: width var(--kxfan-transition-slow);
    position: relative;
}
.kxfan_ui_progress-status { font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-secondary); margin-top: 6px; text-align: right; }

.kxfan_ui_progress-circle { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.kxfan_ui_progress-circle svg { transform: rotate(-90deg); }
.kxfan_ui_progress-circle-track { fill: none; stroke: var(--kxfan-color-bg-light); stroke-width: 6; }
.kxfan_ui_progress-circle-bar { fill: none; stroke: var(--kxfan-color-primary); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset var(--kxfan-transition-slow); }
.kxfan_ui_progress-circle-value { position: absolute; font-size: var(--kxfan-font-size-lg); font-weight: var(--kxfan-font-weight-semibold); color: var(--kxfan-color-text); }

/* ==================== 徽标/Badge样式 ==================== */
.kxfan_ui_badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px;
    font-size: 11px; font-weight: var(--kxfan-font-weight-medium);
    line-height: 1; border-radius: var(--kxfan-radius-full);
    color: #fff; background: var(--kxfan-color-danger);
    position: relative; top: -6px; right: -8px;
    transform: translateY(-50%);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    animation: kxfanBadgePop 0.3s var(--kxfan-transition-bounce);
}
@keyframes kxfanBadgePop { 0% { transform: translateY(-50%) scale(0); } 50% { transform: translateY(-50%) scale(1.2); } 100% { transform: translateY(-50%) scale(1); } }
.kxfan_ui_badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; }
.kxfan_ui_badge-primary { background: var(--kxfan-color-primary); }
.kxfan_ui_badge-success { background: var(--kxfan-color-success); }
.kxfan_ui_badge-warning { background: var(--kxfan-color-warning); }
.kxfan_ui_badge-info { background: var(--kxfan-color-info); }

/* ==================== 空状态样式 ==================== */
.kxfan_ui_empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
.kxfan_ui_empty-image { width: 160px; height: 160px; margin-bottom: 20px; opacity: 0.6; }
.kxfan_ui_empty-image img { width: 100%; height: 100%; object-fit: contain; }
.kxfan_ui_empty-description { font-size: var(--kxfan-font-size-base); color: var(--kxfan-color-text-secondary); margin-bottom: 16px; line-height: 1.6; max-width: 280px; }
.kxfan_ui_empty-action { margin-top: 8px; }

/* ==================== 裁剪模块样式 ==================== */
.kxfan_ui_cropper { position: relative; }
.kxfan_ui_cropper-preview { position: relative; width: 100%; height: 320px; background: var(--kxfan-color-bg); border-radius: var(--kxfan-radius); overflow: hidden; cursor: move; }
.kxfan_ui_cropper-hint { text-align: center; font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-light); margin-top: 12px; }

.kxfan_ui_crop-img { width: 100%; height: auto; display: block; object-fit: contain; }

.kxfan_ui_crop-box {
    position: absolute; border: 2px solid var(--kxfan-color-primary);
    background: transparent;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move; z-index: 10; box-sizing: border-box;
    left: var(--crop-left, 50px);
    top: var(--crop-top, 50px);
    width: var(--crop-w, 150px);
    height: var(--crop-h, 150px);
}
.kxfan_ui_crop-line { position: absolute; background: rgba(107, 91, 255, 0.5); }
.kxfan_ui_crop-h-line { width: 100%; height: 1px; }
.kxfan_ui_crop-v-line { width: 1px; height: 100%; }
.kxfan_ui_crop-line--top { top: 0; }
.kxfan_ui_crop-line--bottom { bottom: 0; }
.kxfan_ui_crop-line--left { left: 0; }
.kxfan_ui_crop-line--right { right: 0; }

/* ==================== Tooltip 提示组件样式 ==================== */
.kxfan_ui_tip {
    position: fixed; z-index: var(--kxfan-z-tooltip);
    padding: 8px 14px;
    background: var(--kxfan-color-text);
    color: var(--kxfan-color-white);
    border-radius: var(--kxfan-radius);
    font-size: var(--kxfan-font-size-sm);
    line-height: 1.5;
    box-shadow: var(--kxfan-shadow-md);
    opacity: 0; transform: scale(0.9);
    transition: all var(--kxfan-transition-slow);
    pointer-events: none; max-width: 280px; word-wrap: break-word;
    will-change: transform, opacity;
}
.kxfan_ui_tip.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.kxfan_ui_tip-content { position: relative; z-index: 1; }
.kxfan_ui_tip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.kxfan_ui_tip-arrow-top { bottom: -4px; left: 50%; margin-left: -4px; }
.kxfan_ui_tip-arrow-bottom { top: -4px; left: 50%; margin-left: -4px; }
.kxfan_ui_tip-arrow-left { right: -4px; top: 50%; margin-top: -4px; }
.kxfan_ui_tip-arrow-right { left: -4px; top: 50%; margin-top: -4px; }

/* ==================== Iframe 嵌入组件样式 ==================== */
.kxfan_ui_iframe-wrapper {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
    z-index: var(--kxfan-z-modal); opacity: 0;
    display: flex; flex-direction: column;
    border-radius: var(--kxfan-radius-lg);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 30px -5px rgba(0, 0, 0, 0.08),
        0 0 1px rgba(0, 0, 0, 0.1);
    overflow: hidden; max-height: 90vh;
    transition: opacity var(--kxfan-transition-base), transform var(--kxfan-transition-bounce);
    transform: scale(0.96); will-change: transform, opacity;
}
.kxfan_ui_iframe-wrapper.active { opacity: 1; transform: scale(1); }

.kxfan_ui_iframe-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: var(--kxfan-color-white);
    color: var(--kxfan-color-text); flex-shrink: 0;
    border-bottom: 1px solid var(--kxfan-color-border);
}
.kxfan_ui_iframe-title { font-size: var(--kxfan-font-size-lg); font-weight: var(--kxfan-font-weight-semibold); }
.kxfan_ui_iframe-close {
    width: 28px; height: 28px;
    background: transparent;
    border: none; border-radius: var(--kxfan-radius-full);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--kxfan-transition-fast); color: var(--kxfan-color-text-light);
}
.kxfan_ui_iframe-close:hover { background: var(--kxfan-color-bg); color: var(--kxfan-color-text); }

.kxfan_ui_iframe-body { flex: 1; overflow: hidden; background: var(--kxfan-color-white); }
.kxfan_ui_iframe-el { width: 100%; height: 100%; border: none; }
.kxfan_ui_iframe-footer {
    display: flex; justify-content: center; gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--kxfan-color-border-light);
    background: var(--kxfan-color-white); flex-shrink: 0;
}

/* ==================== Page 全屏页面组件样式 ==================== */
.kxfan_ui_page {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: var(--kxfan-z-modal); opacity: 0;
    transition: opacity var(--kxfan-transition-base);
    background: var(--kxfan-color-bg);
}
.kxfan_ui_page.active { opacity: 1; }

.kxfan_ui_page-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--kxfan-color-white); }
.kxfan_ui_page-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--kxfan-color-white);
    color: var(--kxfan-color-text); gap: 12px; flex-shrink: 0;
    border-bottom: 1px solid var(--kxfan-color-border);
}
.kxfan_ui_page-header-left,
.kxfan_ui_page-header-center,
.kxfan_ui_page-header-right { display: flex; align-items: center; }
.kxfan_ui_page-header-center { flex: 1; justify-content: center; }
.kxfan_ui_page-title { font-size: var(--kxfan-font-size-lg); font-weight: var(--kxfan-font-weight-semibold); }

.kxfan_ui_page-back,
.kxfan_ui_page-refresh,
.kxfan_ui_page-close,
.kxfan_ui_page-action-btn {
    padding: 8px 12px;
    background: transparent;
    border: none; border-radius: var(--kxfan-radius-sm);
    color: var(--kxfan-color-primary); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--kxfan-transition-fast); font-size: var(--kxfan-font-size-base);
}
.kxfan_ui_page-back:hover,
.kxfan_ui_page-refresh:hover,
.kxfan_ui_page-close:hover,
.kxfan_ui_page-action-btn:hover { background: var(--kxfan-color-bg); }

.kxfan_ui_page-body { flex: 1; overflow: auto; overscroll-behavior: contain; }
.kxfan_ui_page-iframe { width: 100%; height: 100%; border: none; }
.kxfan_ui_page-content { padding: 20px; height: 100%; overflow-y: auto; }
.kxfan_ui_page-footer {
    display: flex; justify-content: center; gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--kxfan-color-border-light);
    background: var(--kxfan-color-white); flex-shrink: 0;
}

/* ==================== Alert 警告提示样式 ==================== */
.kxfan_ui_alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: var(--kxfan-radius);
    border-left: 4px solid transparent;
    background: var(--kxfan-color-white);
    box-shadow: var(--kxfan-shadow-sm);
    margin-bottom: 12px;
    opacity: 0; transform: translateY(-8px);
    transition: all var(--kxfan-transition-base);
}
.kxfan_ui_alert.active { opacity: 1; transform: translateY(0); }
.kxfan_ui_alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.kxfan_ui_alert-content { flex: 1; font-size: var(--kxfan-font-size-base); line-height: 1.6; color: var(--kxfan-color-text); word-break: break-word; }
.kxfan_ui_alert-close {
    width: 24px; height: 24px; background: transparent; border: none;
    border-radius: var(--kxfan-radius-full); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--kxfan-color-text-light); font-size: 11px;
    transition: all var(--kxfan-transition-fast); flex-shrink: 0; opacity: 0;
}
.kxfan_ui_alert:hover .kxfan_ui_alert-close { opacity: 1; }
.kxfan_ui_alert-close:hover { background: var(--kxfan-color-bg); color: var(--kxfan-color-text); }

.kxfan_ui_alert-success { border-left-color: var(--kxfan-color-success); background: #f6ffed; }
.kxfan_ui_alert-success .kxfan_ui_alert-icon { color: var(--kxfan-color-success); }
.kxfan_ui_alert-error { border-left-color: var(--kxfan-color-danger); background: #fff2f0; }
.kxfan_ui_alert-error .kxfan_ui_alert-icon { color: var(--kxfan-color-danger); }
.kxfan_ui_alert-warning { border-left-color: var(--kxfan-color-warning); background: #fffbe6; }
.kxfan_ui_alert-warning .kxfan_ui_alert-icon { color: var(--kxfan-color-warning); }
.kxfan_ui_alert-info { border-left-color: var(--kxfan-color-info); background: #e6f7ff; }
.kxfan_ui_alert-info .kxfan_ui_alert-icon { color: var(--kxfan-color-info); }

/* ==================== Tabs 标签页样式 ==================== */
.kxfan_ui_tabs { width: 100%; }
.kxfan_ui_tabs-nav {
    display: flex; align-items: center; gap: 0;
    border-bottom: 2px solid var(--kxfan-color-border-light);
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.kxfan_ui_tabs-nav::-webkit-scrollbar { display: none; }

.kxfan_ui_tabs-tab {
    padding: 10px 20px; font-size: var(--kxfan-font-size-base);
    font-weight: var(--kxfan-font-weight-medium);
    color: var(--kxfan-color-text-secondary); cursor: pointer;
    white-space: nowrap; position: relative;
    transition: color var(--kxfan-transition-fast); user-select: none;
    display: flex; align-items: center; gap: 6px;
}
.kxfan_ui_tabs-tab::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 2px; background: var(--kxfan-color-primary);
    transform: scaleX(0); transition: transform var(--kxfan-transition-base);
}
.kxfan_ui_tabs-tab:hover { color: var(--kxfan-color-primary); }
.kxfan_ui_tabs-tab.active { color: var(--kxfan-color-primary); }
.kxfan_ui_tabs-tab.active::after { transform: scaleX(1); }
.kxfan_ui_tabs-tab i { font-size: 13px; }
.kxfan_ui_tabs-close {
    width: 16px; height: 16px; margin-left: 4px;
    border-radius: var(--kxfan-radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--kxfan-color-text-light);
    transition: all var(--kxfan-transition-fast);
}
.kxfan_ui_tabs-close:hover { background: var(--kxfan-color-bg); color: var(--kxfan-color-danger); }

.kxfan_ui_tabs-content { padding: 16px 0; }
.kxfan_ui_tabs-pane { display: none; animation: kxfanTabsFadeIn 0.3s ease; }
.kxfan_ui_tabs-pane.active { display: block; }
@keyframes kxfanTabsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ==================== Tag 标签样式 ==================== */
.kxfan_ui_tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; font-size: var(--kxfan-font-size-sm);
    line-height: 20px; border-radius: var(--kxfan-radius-full);
    background: var(--kxfan-color-bg-light);
    color: var(--kxfan-color-text-secondary);
    border: 1px solid var(--kxfan-color-border);
    cursor: default; transition: all var(--kxfan-transition-fast);
    opacity: 0; transform: scale(0.85); white-space: nowrap;
}
.kxfan_ui_tag.active { opacity: 1; transform: scale(1); }
.kxfan_ui_tag:hover { border-color: var(--kxfan-color-primary-light); }
.kxfan_ui_tag-text { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.kxfan_ui_tag-close {
    width: 14px; height: 14px; border-radius: var(--kxfan-radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; color: inherit; opacity: 0.6;
    transition: all var(--kxfan-transition-fast); cursor: pointer;
}
.kxfan_ui_tag-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); color: var(--kxfan-color-danger); }

.kxfan_ui_tag-primary { background: rgba(107, 91, 255, 0.08); color: var(--kxfan-color-primary); border-color: rgba(107, 91, 255, 0.25); }
.kxfan_ui_tag-primary:hover { border-color: var(--kxfan-color-primary); }
.kxfan_ui_tag-success { background: rgba(82, 196, 26, 0.08); color: #389e0d; border-color: rgba(82, 196, 26, 0.25); }
.kxfan_ui_tag-success:hover { border-color: var(--kxfan-color-success); }
.kxfan_ui_tag-warning { background: rgba(250, 173, 20, 0.08); color: #d48806; border-color: rgba(250, 173, 20, 0.25); }
.kxfan_ui_tag-warning:hover { border-color: var(--kxfan-color-warning); }
.kxfan_ui_tag-danger { background: rgba(255, 77, 79, 0.08); color: #cf1322; border-color: rgba(255, 77, 79, 0.25); }
.kxfan_ui_tag-danger:hover { border-color: var(--kxfan-color-danger); }
.kxfan_ui_tag-info { background: rgba(24, 144, 255, 0.08); color: #0958d9; border-color: rgba(24, 144, 255, 0.25); }
.kxfan_ui_tag-info:hover { border-color: var(--kxfan-color-info); }

/* ==================== Steps 步骤条样式 ==================== */
.kxfan_ui_steps { display: flex; width: 100%; padding: 0; }
.kxfan_ui_step { flex: 1; display: flex; position: relative; }
.kxfan_ui_step-head { display: flex; align-items: center; flex-shrink: 0; margin-right: 10px; }
.kxfan_ui_step-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--kxfan-color-bg-light);
    border: 2px solid var(--kxfan-color-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--kxfan-color-text-secondary);
    transition: all var(--kxfan-transition-base); z-index: 1;
}
.kxfan_ui_step-icon span { font-weight: var(--kxfan-font-weight-semibold); font-size: 13px; }
.kxfan_ui_step-icon i { font-size: 13px; }
.kxfan_ui_step-line { flex: 1; height: 2px; background: var(--kxfan-color-border-light); margin-left: 8px; transition: background var(--kxfan-transition-base); }
.kxfan_ui_step-main { padding-top: 6px; }
.kxfan_ui_step-title { font-size: var(--kxfan-font-size-base); font-weight: var(--kxfan-font-weight-medium); color: var(--kxfan-color-text-secondary); line-height: 1.4; transition: color var(--kxfan-transition-base); }
.kxfan_ui_step-desc { font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-light); margin-top: 4px; line-height: 1.5; }

.kxfan_ui_step-finish .kxfan_ui_step-icon { background: var(--kxfan-color-success); border-color: var(--kxfan-color-success); color: #fff; }
.kxfan_ui_step-finish .kxfan_ui_step-line { background: var(--kxfan-color-success); }
.kxfan_ui_step-finish .kxfan_ui_step-title { color: var(--kxfan-color-text); }
.kxfan_ui_step-process .kxfan_ui_step-icon { background: var(--kxfan-color-primary); border-color: var(--kxfan-color-primary); color: #fff; box-shadow: 0 0 0 4px rgba(107, 91, 255, 0.15); }
.kxfan_ui_step-process .kxfan_ui_step-title { color: var(--kxfan-color-primary); font-weight: var(--kxfan-font-weight-semibold); }

.kxfan_ui_steps-vertical { flex-direction: column; }
.kxfan_ui_steps-vertical .kxfan_ui_step { flex: none; padding-bottom: 24px; }
.kxfan_ui_steps-vertical .kxfan_ui_step-head { flex-direction: column; margin-right: 0; margin-bottom: 6px; }
.kxfan_ui_steps-vertical .kxfan_ui_step-line { width: 2px; height: auto; flex: 1; margin-left: 15px; margin-top: 2px; margin-bottom: 0; }
.kxfan_ui_steps-vertical .kxfan_ui_step-main { padding-top: 0; padding-left: 12px; }

/* ==================== Timeline 时间线样式 ==================== */
.kxfan_ui_timeline { padding: 0; list-style: none; }
.kxfan_ui_timeline-item { position: relative; padding: 0 0 24px 28px; line-height: 1.6; }
.kxfan_ui_timeline-item:last-child { padding-bottom: 0; }
.kxfan_ui_timeline-tail { position: absolute; top: 14px; left: 7px; width: 2px; height: calc(100% - 10px); background: var(--kxfan-color-border-light); }
.kxfan_ui_timeline-item:last-child .kxfan_ui_tail-tail { display: none; }
.kxfan_ui_timeline-dot { position: absolute; top: 6px; left: 0; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--kxfan-color-primary); background: #fff; z-index: 1; }
.kxfan_ui_timeline-content { position: relative; top: -4px; }
.kxfan_ui_timeline-title { font-size: var(--kxfan-font-size-base); font-weight: var(--kxfan-font-weight-medium); color: var(--kxfan-color-text); margin-bottom: 4px; }
.kxfan_ui_timeline-item-content { font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-secondary); }
.kxfan_ui_timeline-time { font-size: var(--kxfan-font-size-xs); color: var(--kxfan-color-text-light); margin-top: 6px; }
.kxfan_ui_timeline-pending .kxfan_ui_timeline-dot { border-style: dashed; background: transparent; }
.kxfan_ui_timeline-pending .kxfan_ui_timeline-item-content,
.kxfan_ui_timeline-pending .kxfan_ui_timeline-title { color: var(--kxfan-color-text-light); }

/* ==================== Popover 气泡卡片样式 ==================== */
.kxfan_ui_popover {
    position: fixed; z-index: var(--kxfan-z-popover);
    min-width: 150px; max-width: 400px;
    background: var(--kxfan-color-white);
    border-radius: var(--kxfan-radius-lg);
    box-shadow: var(--kxfan-shadow-lg);
    opacity: 0; transform: scale(0.92) translateY(-4px);
    transition: all var(--kxfan-transition-slow);
    pointer-events: none; will-change: transform, opacity;
}
.kxfan_ui_popover.active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.kxfan_ui_popover-title { padding: 10px 16px 0; font-size: var(--kxfan-font-size-base); font-weight: var(--kxfan-font-weight-semibold); color: var(--kxfan-color-text); border-bottom: 1px solid var(--kxfan-color-border-light); margin: 0 12px; padding-bottom: 10px; }
.kxfan_ui_popover-inner { padding: 12px 16px; }
.kxfan_ui_popover-content { font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-secondary); line-height: 1.6; word-break: break-word; }
.kxfan_ui_popover-arrow { position: absolute; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.04); }
.kxfan_ui_popover-arrow-top { bottom: -5px; left: 50%; margin-left: -5px; }
.kxfan_ui_popover-arrow-bottom { top: -5px; left: 50%; margin-left: -5px; }
.kxfan_ui_popover-arrow-left { right: -5px; top: 50%; margin-top: -5px; }
.kxfan_ui_popover-arrow-right { left: -5px; top: 50%; margin-top: -5px; }

/* ==================== Pagination 分页器样式 ==================== */
.kxfan_ui_pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kxfan_ui_pagination-prev,
.kxfan_ui_pagination-next,
.kxfan_ui_pagination-item {
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--kxfan-color-border);
    border-radius: var(--kxfan-radius-sm);
    background: var(--kxfan-color-white);
    color: var(--kxfan-color-text);
    font-size: var(--kxfan-font-size-base);
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
    transition: all var(--kxfan-transition-fast); user-select: none;
}
.kxfan_ui_pagination-prev:hover:not(:disabled),
.kxfan_ui_pagination-next:hover:not(:disabled),
.kxfan_ui_pagination-item:hover:not(.active) { border-color: var(--kxfan-color-primary); color: var(--kxfan-color-primary); }
.kxfan_ui_pagination-prev:disabled,
.kxfan_ui_pagination-next:disabled { opacity: 0.5; cursor: not-allowed; }
.kxfan_ui_pagination-item.active { background: var(--kxfan-color-primary); border-color: var(--kxfan-color-primary); color: #fff; font-weight: var(--kxfan-font-weight-medium); }
.kxfan_ui_pagination-ellipsis { color: var(--kxfan-color-text-light); padding: 0 4px; font-size: var(--kxfan-font-size-sm); }
.kxfan_ui_pagination-size { height: 34px; padding: 0 8px; border: 1px solid var(--kxfan-color-border); border-radius: var(--kxfan-radius-sm); background: var(--kxfan-color-white); color: var(--kxfan-color-text); font-size: var(--kxfan-font-size-sm); cursor: pointer; outline: none; margin-left: 8px; }
.kxfan_ui_pagination-jumper { font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-secondary); margin-left: 12px; white-space: nowrap; }
.kxfan_ui_pagination-jump-input { width: 46px; height: 30px; margin: 0 6px; text-align: center; border: 1px solid var(--kxfan-color-border); border-radius: var(--kxfan-radius-sm); outline: none; font-size: var(--kxfan-font-size-sm); transition: border-color var(--kxfan-transition-fast); }
.kxfan_ui_pagination-jump-input:focus { border-color: var(--kxfan-color-primary); }
.kxfan_ui_pagination-total { font-size: var(--kxfan-font-size-sm); color: var(--kxfan-color-text-light); margin-left: 12px; }

/* ==================== Switch 开关样式 ==================== */
.kxfan_ui_switch {
    display: inline-flex; align-items: center;
    width: 48px; height: 26px; border-radius: 13px;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer; transition: all var(--kxfan-transition-base);
    position: relative; outline: none; vertical-align: middle;
}
.kxfan_ui_switch-checked { background: var(--kxfan-color-primary); }
.kxfan_ui_switch-handle {
    position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all var(--kxfan-transition-bounce);
    display: flex; align-items: center; justify-content: center;
}
.kxfan_ui_switch-checked .kxfan_ui_switch-handle { transform: translateX(22px); }
.kxfan_ui_switch-disabled { opacity: 0.5; cursor: not-allowed; }
.kxfan_ui_switch-loading .kxfan_ui_switch-handle { transform: translateX(22px); }
.kxfan_ui_switch-loading-icon { font-size: 11px; color: var(--kxfan-color-primary); }
.kxfan_ui_switch-text { font-size: 10px; line-height: 1; color: inherit; position: absolute; }
.kxfan_ui_switch-checked .kxfan_ui_switch-text { left: 4px; color: #fff; }
.kxfan_ui_switch:not(.kxfan_ui_switch-checked) .kxfan_ui_switch-text { right: 4px; }

.kxfan_ui_switch-sm { width: 38px; height: 20px; border-radius: 10px; }
.kxfan_ui_switch-sm .kxfan_ui_switch-handle { width: 16px; height: 16px; }
.kxfan_ui_switch-sm.kxfan_ui_switch-checked .kxfan_ui_switch-handle { transform: translateX(18px); }
.kxfan_ui_switch-sm.kxfan_ui_switch-loading .kxfan_ui_switch-handle { transform: translateX(18px); }

/* ==================== 响应式适配 ==================== */
@media screen and (max-width: 1024px) {
    .kxfan_ui_modal-wrapper { width: 85% !important; max-width: 85vw; }
    .kxfan_ui_drawer-wrapper { width: 75% !important; max-width: 75vw; }
    .kxfan_ui_iframe-wrapper { width: 92% !important; max-width: 92vw; }
}

@media screen and (max-width: 768px) {
    .kxfan_ui_modal-wrapper { width: 94% !important; max-width: 94vw; }
    .kxfan_ui_overlay { background: rgba(0, 0, 0, 0.75); }
    .kxfan_ui_drawer-wrapper { width: 85% !important; max-width: 85vw; }
    .kxfan_ui_modal-header, .kxfan_ui_drawer-header, .kxfan_ui_page-header { padding: 12px 16px; }
    .kxfan_ui_modal-body { padding: 16px; }
    .kxfan_ui_modal-footer, .kxfan_ui_iframe-footer, .kxfan_ui_page-footer { padding: 12px 16px; }
    .kxfan_ui_notification { min-width: unset; max-width: calc(100vw - 40px); }
    .kxfan_ui_iframe-wrapper { width: 96% !important; max-width: 96vw; height: 85vh !important; }
    .kxfan_ui_toast { left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%) scale(0.9); }
    .kxfan_ui_toast.active { transform: translate(-50%, -50%) scale(1); }
}

@media screen and (max-width: 480px) {
    .kxfan_ui_modal-wrapper { width: 98% !important; max-width: 98vw; border-radius: var(--kxfan-radius); }
    .kxfan_ui_modal-header, .kxfan_ui_drawer-header, .kxfan_ui_page-header { padding: 10px 14px; }
    .kxfan_ui_modal-body { padding: 14px; }
    .kxfan_ui_btn { padding: 9px 16px; font-size: 13px; }
    .kxfan_ui_confirm-icon { width: 54px; height: 54px; font-size: 24px; }
    .kxfan_ui_empty { padding: 40px 16px; }
    .kxfan_ui_empty-image { width: 120px; height: 120px; }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .kxfan_ui_modal-wrapper, .kxfan_ui_drawer-wrapper,
    .kxfan_ui_iframe-wrapper, .kxfan_ui_page-wrapper { border: 2px solid var(--kxfan-color-text); }
    .kxfan_ui_btn { border: 2px solid currentColor; }
    .kxfan_ui_toast, .kxfan_ui_tip { border: 1px solid var(--kxfan-color-text); }
}

/* 打印模式隐藏 */
@media print {
    .kxfan_ui_overlay, .kxfan_ui_modal, .kxfan_ui_drawer,
    .kxfan_ui_loading, .kxfan_ui_toast, .kxfan_ui_notification,
    .kxfan_ui_tip, .kxfan_ui_page, .kxfan_ui_iframe-wrapper {
        display: none !important;
    }
}

/* ==================== Neumorphism 项目卡片增强样式 ==================== */

/* ==================== Hero 区域左右布局优化 ==================== */

/* ==================== 🎯 仪表盘式 Hero 欢迎区（新增）==================== */

/* 仪表盘 Hero 容器 */
.kxfan_neu_dashboard_hero {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 24px;
    padding: 40px 48px;
    margin-bottom: 32px;
    overflow: hidden;
    box-shadow:
        0 10px 40px rgba(102, 126, 234, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 装饰性背景元素 */
.kxfan_neu_dashboard_hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: kxfan_dashboard_glow 8s ease-in-out infinite;
}

@keyframes kxfan_dashboard_glow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* 欢迎区主容器 - 左右布局 */
.kxfan_neu_dashboard_welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

/* ========== 左侧：欢迎文字 ========== */
.kxfan_neu_welcome_text {
    flex: 1;
    min-width: 0;
}

/* 主标题 - 大号 + 粗体 + 白色 */
.kxfan_neu_welcome_text h1 {
    margin: 0 0 12px 0;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 副标题 */
.kxfan_neu_welcome_text p {
    margin: 0 0 16px 0;
    font-size: clamp(14px, 1.5vw, 17px);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 520px;
}

/* 时间显示 */
.kxfan_neu_datetime {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.3s ease;
}

.kxfan_neu_datetime:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kxfan_neu_datetime i {
    font-size: 15px;
    opacity: 0.9;
}

/* ========== 右侧：头像区域 ========== */
.kxfan_neu_welcome_avatar {
    position: relative;
    flex-shrink: 0;
}

/* 头像图片 */
.kxfan_neu_avatar_img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 0 0 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 头像占位符（无头像时显示首字母） */
.kxfan_neu_avatar_placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.kxfan_neu_avatar_img:hover {
    transform: scale(1.08) rotate(-5deg);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.3),
        0 0 0 8px rgba(255, 255, 255, 0.2);
}

/* 在线状态指示器 */
.kxfan_neu_status_dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    z-index: 2;
}

/* 在线状态 - 绿色 + 脉冲动画 */
.kxfan_neu_status_dot--online {
    background: #10b981;
    animation: kxfan_pulse_online 2s ease-in-out infinite;
}

@keyframes kxfan_pulse_online {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

/* 右侧区域容器（头像 OR 按钮组） */
.kxfan_neu_welcome_right {
    flex-shrink: 0;
}

/* ==================== 🎯 Hero 专用按钮（全新设计）==================== */

/* Hero 按钮基础 - 统一尺寸和间距 */
.kxfan_neu_dashboard_actions--inline .kxfan_neu_btn,
.kxfan_neu_dashboard_actions .kxfan_neu_btn {
    width: 52px;
    height: 52px;
    border-radius: 14px;           /* 圆角矩形（更现代） */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 6px;                   /* 水平间距 */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 移除 ripple 效果（保持干净） */
.kxfan_neu_dashboard_actions--inline .kxfan_neu_btn_ripple,
.kxfan_neu_dashboard_actions .kxfan_neu_btn_ripple {
    display: none !important;
}







/* 按钮图标通用样式（已迁移至 kxfan_admin.css） */

/* kxfanUI.css 中 Hero 按钮样式已全部迁移至 kxfan_admin.css 第十六层 */

.kxfan_neu_dashboard_actions--inline {
    margin-top: 0;
    padding: 10px 14px;                 /* 紧凑内边距 */
    border-top: none;
    border-radius: 18px;                /* 圆角 */
    background: rgba(255, 255, 255, 0.08); /* 微妙背景 */
    backdrop-filter: blur(12px);         /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(12px);
    justify-content: flex-end;
    gap: 10px;                          /* 紧凑间距 */
    display: inline-flex;               /* 不占满宽度 */
}
.kxfan_neu_dashboard_actions {
    display: flex;
    gap: 16px;                     /* 按钮间距：12→16（更舒适） */
    justify-content: flex-end;
    margin-top: 32px;               /* 顶部间距：28→32 */
    padding: 20px 24px;             /* 内边距：增加呼吸空间 */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
    border-radius: 0 0 24px 24px;    /* 底部圆角与 Hero 容器呼应 */
    background: rgba(0, 0, 0, 0.05); /* 微妙背景区分操作区 */
}

/* 操作按钮 - 半透明白色（纯净版 + 无下划线） */
.kxfan_neu_dashboard_actions .kxfan_neu_btn--primary {
    background: rgba(255, 255, 255, 0.92);
    color: #667eea;
    border-color: rgba(255, 255, 255, 0.7);
    text-decoration: none !important;        /* 移除链接下划线 */
    border-bottom: none !important;           /* 移除底部边框 */
}

.kxfan_neu_dashboard_actions .kxfan_neu_btn--primary:hover {
    background: #ffffff;
    transform: scale(1.08);  /* 纯缩放，无位移 */
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.25); /* 柔和紫色阴影 */
    text-decoration: none !important;
}

.kxfan_neu_dashboard_actions .kxfan_neu_btn--secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    text-decoration: none !important;
    border-bottom: none !important;
}

.kxfan_neu_dashboard_actions .kxfan_neu_btn--secondary:hover {
    background: rgba(255, 255, 255, 0.92);
    color: #667eea;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.25);
    text-decoration: none !important;
}

/* ========== 响应式适配 ========== */
@media screen and (max-width: 768px) {
    .kxfan_neu_dashboard_hero {
        padding: 28px 24px;
        border-radius: 18px;
        margin-bottom: 24px;
    }

    .kxfan_neu_dashboard_welcome {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .kxfan_neu_welcome_text p {
        max-width: 100%;
    }

    .kxfan_neu_welcome_avatar {
        order: -1; /* 移动端头像在上方 */
    }

    .kxfan_neu_avatar_img {
        width: 72px;
        height: 72px;
    }

    .kxfan_neu_dashboard_actions {
        justify-content: center;
        margin-top: 20px;
        padding-top: 20px;
    }
}

@media screen and (max-width: 480px) {
    .kxfan_neu_dashboard_hero {
        padding: 24px 18px;
    }

    .kxfan_neu_welcome_text h1 {
        font-size: 24px;
    }

    .kxfan_neu_welcome_text p {
        font-size: 14px;
    }

    .kxfan_neu_datetime {
        font-size: 13px;
        padding: 6px 12px;
    }

    .kxfan_neu_avatar_img {
        width: 64px;
        height: 64px;
    }
}

/* Hero 内容容器 - 强制左右分栏（覆盖默认样式） */
.kxfan_neu_hero_content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* 左侧：标题区域 */
.kxfan_neu_hero_main {
    flex: 1 1 auto;
    min-width: 0;
}

/* 右侧：操作按钮组 - 强制靠右 */
.kxfan_neu_hero_actions {
    display: flex !important;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto; /* 不伸缩，保持原始尺寸 */
    margin-left: auto; /* 强制推到右侧 */
}

/* 纯图标按钮样式 - 圆形 + 大图标 + 舒适间距 + 无下划线 */
.kxfan_neu_btn--icon {
    width: 56px !important;        /* 稍微增大：52→56 */
    height: 56px !important;
    padding: 10px !important;      /* 内边距：图标不贴边 */
    border-radius: 50% !important; /* 圆形 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    margin: 4px;                  /* 外边距：避免按钮间黏连 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡 */
    text-decoration: none !important;        /* 移除链接下划线 */
    border-bottom: none !important;           /* 移除底部边框线 */
    box-shadow: none !important;             /* 移除默认阴影 */
}

/* Hero 胶囊图标按钮（覆盖圆形为药丸形） */
.kxfan_hero_btn--capsule {
    width: auto !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 18px !important;
    border-radius: 22px !important;         /* 胶囊/药丸形 */
    margin: 0 6px !important;                /* 水平间距 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.kxfan_hero_btn--capsule i {
    font-size: 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

.kxfan_neu_btn--icon i {
    font-size: 20px;
    margin: 0 !important; /* 移除图标右边距 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none !important;        /* 图标也无下划线 */
}

/* 隐藏 span 文案（安全措施） */
.kxfan_neu_btn--icon span {
    display: none !important;
}

/* Hover 效果：纯净弹性缩放（无位移） */
.kxfan_neu_btn--icon:hover {
    transform: scale(1.1);  /* 纯放大，无移动 */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Tooltip 样式（通过 title 属性原生实现，这里增强视觉效果） */
.kxfan_neu_btn--icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1000;
    animation: kxfan_tooltip_fadeIn 0.2s ease-out;
}

@keyframes kxfan_tooltip_fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 标题优化 - 去掉方块背景，使用柔和文字阴影 */
.kxfan_neu_hero_title {
    position: relative;
    margin: 0 0 16px 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* 标题文字 - 渐变填充 + 柔和阴影 */
.kxfan_neu_hero_title_text {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.95) 25%,
        #ffffff 50%,
        rgba(255, 255, 255, 0.95) 75%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kxfan_shimmer 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15))
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}

/* 柔和扫光动画 - 替代僵硬的方块扫光 */
@keyframes kxfan_shimmer {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 200% center;
    }
}

/* 副标题优化 */
.kxfan_neu_hero_subtitle {
    margin: 0;
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.6;
    opacity: 0.9;
    max-width: 600px;
}

/* 响应式：移动端改为上下堆叠 */
@media screen and (max-width: 768px) {
    .kxfan_neu_hero_content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px;
    }

    .kxfan_neu_hero_actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0; /* 移动端不需要强制靠右 */
    }

    .kxfan_neu_btn--icon {
        width: 48px !important;
        height: 48px !important;
    }

    .kxfan_hero_btn--capsule {
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 14px !important;
        border-radius: 19px !important;
    }

    .kxfan_hero_btn--capsule i {
        font-size: 14px !important;
    }
}

/* 项目图标容器基础样式 */
.kxfan_neu_project_icon_wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kxfan_neu_project_card:hover .kxfan_neu_project_icon_wrap {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 渐变主题类 - 替代内联 style */
.kxfan_gradient--indigo { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.kxfan_gradient--pink { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.kxfan_gradient--cyan { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.kxfan_gradient--amber { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.kxfan_gradient--default { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

/* 卡片头部信息区布局 */
.kxfan_neu_card_header_info {
    flex: 1;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 项目标签系统 */
.kxfan_neu_project_tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* 标签基础样式 */
.kxfan_tag {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

/* 标签颜色变体 */
.kxfan_tag--success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.kxfan_tag--secondary {
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.3);
}
.kxfan_tag--primary {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.kxfan_tag--info {
    background: rgba(14, 165, 233, 0.15);
    color: #0369a1;
    border: 1px solid rgba(14, 165, 233, 0.3);
}
.kxfan_tag--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.kxfan_tag--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* 卡片操作按钮组 */
.kxfan_neu_card_actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* 禁用态卡片样式 */
.kxfan_neu_project_card--disabled {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(50%);
}

.kxfan_neu_project_card--disabled:hover {
    transform: none;
}

/* 高级搜索面板 */
.kxfan_neu_search_advanced {
    margin-top: 20px;
    padding: 20px;
    border-top: 1px dashed var(--kxfan-color-border-light);
    animation: kxfan_slideDown 0.3s ease-out;
}

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

.kxfan_neu_advanced_filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* 标签过滤组 */
.kxfan_tag_filter_group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* 弹窗警告框增强 */
.kxfan_neu_modal_warning_box {
    background: rgba(254, 243, 199, 0.5);
    border-left: 4px solid #f59e0b;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.kxfan_neu_modal_warning_icon {
    font-size: 20px;
    color: #f59e0b;
    margin-top: 2px;
}

.kxfan_neu_modal_warning_content {
    flex: 1;
}

.kxfan_neu_modal_warning_content strong {
    display: block;
    margin-bottom: 8px;
    color: #92400e;
}

/* 删除确认输入框 */
.kxfan_neu_modal_confirm_input {
    margin-top: 20px;
    padding: 16px;
    background: var(--kxfan-color-bg-light);
    border-radius: 8px;
}

/* Mini Stat 内容结构优化 */
.kxfan_neu_mini_stat_content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kxfan_neu_mini_stat_value {
    font-weight: 700;
    font-size: 15px;
    color: var(--kxfan-color-text);
}

/* ══════════════════════════════════════════════
 * CSP 合规：CSS 变量驱动规则（替代 jQuery .css()）
 * kxfanUI.js 通过 setProperty() 设置这些变量
 * ══════════════════════════════════════════════ */

/* Loading 遮罩背景 */
.kxfan_ui_loading-shade {
    background: var(--shade-bg, rgba(0, 0, 0, 0.3)) !important;
}

/* Drawer 宽度 */
.kxfan_ui_drawer-wrapper {
    width: var(--drawer-width);
}

/* Progress 进度条 */
.kxfan_ui_progress {
    height: var(--progress-height, 8px) !important;
}
.kxfan_ui_progress-bar {
    width: var(--progress-bar-width) !important;
    background: var(--progress-bar-color, var(--kxfan-primary, #6366f1)) !important;
}

/* Notification 进度条过渡时长 */
.kxfan_ui_notification-progress {
    transition-duration: var(--notif-duration, 3000ms) !important;
}

/* Badge 目标定位（替代 .css('position','relative')） */
.kxfan_ui_badge-target {
    position: relative !important;
}

/* Skeleton 骨架屏宽度 */
[data-skeleton-width] {
    width: var(--skeleton-width) !important;
}

/* Tooltip 定位（运行时位置计算） */
.kxfan_ui_tooltip,
.kxfan_tip {
    left: var(--tip-left, 0) !important;
    top: var(--tip-top, 0) !important;
}

/* Timeline 时间轴圆点颜色 */
.kxfan_ui_timeline-dot {
    border-color: var(--dot-color) !important;
    background: var(--dot-color) !important;
}

/* Popover 气泡卡片定位与宽度 */
.kxfan_ui_popover {
    left: var(--popover-left, 0) !important;
    top: var(--popover-top, 0) !important;
    width: var(--popover-width);
}

/* Modal 堆叠 z-index（多弹窗叠加时）
 * JS 通过 style.zIndex 直接设置数值（优先级最高）
 * 此处 var(--modal-z-index) 仅作为回退兜底 */
.kxfan_ui_overlay[id^="kxfan_modal_"] {
    z-index: var(--modal-z-index, var(--kxfan-z-overlay));
}

.kxfan_ui_modal[id^="kxfan_modal_"] {
    z-index: var(--modal-z-index, var(--kxfan-z-modal));
}