/* ========================================
   Aurora Theme - Modern Enhancement CSS
   美化订阅按钮和全站界面
   Version: 2.0 - 优雅简洁版
   ======================================== */

/* ========================================
   1. 全局 CSS 变量
   ======================================== */
:root {
    --aurora-radius-sm: 8px;
    --aurora-radius-md: 12px;
    --aurora-radius-lg: 16px;
    --aurora-radius-xl: 20px;
    --aurora-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --aurora-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --aurora-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --aurora-transition: 0.25s ease;
    --aurora-transition-slow: 0.4s ease;
}

/* 注意：原始按钮不再统一隐藏，二维码按钮由下方 .btn-alipay 规则单独处理 */

/* ========================================
   2. 订阅按钮容器优化
   ======================================== */
.subscribe-info .import-btns[data-v-e7946bd8] {
    height: auto !important;
    min-height: 180px;
    padding: 24px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.95) 100%);
    border-radius: var(--aurora-radius-lg) !important;
    box-shadow: var(--aurora-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.is-darkmode .subscribe-info .import-btns[data-v-e7946bd8] {
    background: linear-gradient(135deg, rgba(40, 44, 52, 0.98) 0%, rgba(32, 36, 44, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ========================================
   3. 按钮基础样式美化
   ======================================== */
.import-btns .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    padding: 0 20px !important;
    height: 46px !important;
    line-height: 46px !important;
    margin: 0 !important;
    border-radius: var(--aurora-radius-md) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition:
        transform var(--aurora-transition),
        box-shadow var(--aurora-transition),
        filter var(--aurora-transition) !important;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif !important;
    border: none !important;
}

/* 按钮图标优化 */
.import-btns .btn i,
.import-btns .btn .svg-icon {
    font-size: 1.3rem !important;
    margin-right: 8px !important;
    transition: transform var(--aurora-transition) !important;
}

/* ========================================
   4. 按钮悬浮动画效果 - 简洁版
   ======================================== */
.import-btns .btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
}

.import-btns .btn:hover i,
.import-btns .btn:hover .svg-icon {
    transform: scale(1.1);
}

.import-btns .btn:active {
    transform: translateY(-1px) scale(0.98);
    transition: transform 0.1s ease !important;
}

/* ========================================
   5. 各按钮渐变色优化 - 现代配色
   ======================================== */

/* 复制按钮 - 清新绿 */
.import-btns .btn-weixin {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.import-btns .btn-weixin:hover {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45) !important;
}

/* 二维码按钮 - 强制隐藏（适配 Vue scoped 样式）*/
.import-btns .btn-alipay,
.import-btns .btn-alipay:hover,
.btn-alipay,
.btn.btn-alipay,
[class*="btn-alipay"],
div.btn.btn-alipay,
.panel-body .btn-alipay,
/* Vue scoped 样式匹配 */
.btn-alipay[data-v-e7946bd8],
.btn.btn-alipay[data-v-e7946bd8],
[data-v-e7946bd8].btn-alipay,
div[data-v-e7946bd8].btn-alipay,
.import-btns [data-v-e7946bd8].btn-alipay,
/* 匹配包含 metron-qrcode 图标的按钮 */
.btn:has(.metron-qrcode),
.import-btns .btn:has(.metron-qrcode) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Clash 按钮 - 深海蓝 */
.import-btns .btn-clash,
.import-btns .btn-Clash,
.import-btns .btn-ClashR,
.import-btns .btn-clashR {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

.import-btns .btn-clash:hover,
.import-btns .btn-Clash:hover,
.import-btns .btn-ClashR:hover,
.import-btns .btn-clashR:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.45) !important;
}

/* Surge 按钮 - 紫罗兰 */
.import-btns .btn-surge,
.import-btns .btn-Surge {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35) !important;
}

.import-btns .btn-surge:hover,
.import-btns .btn-Surge:hover {
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.45) !important;
}

/* Shadowrocket 按钮 - 渐变粉蓝 */
.import-btns .btn-shadowrocket,
.import-btns .btn-Shadowrocket {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35) !important;
}

.import-btns .btn-shadowrocket:hover,
.import-btns .btn-Shadowrocket:hover {
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45) !important;
}

/* Surfboard 按钮 - 暖棕橙 */
.import-btns .btn-surfboard {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

.import-btns .btn-surfboard:hover {
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45) !important;
}

/* Quantumult X 按钮 - 深邃紫 */
.import-btns .btn-quantumultx,
.import-btns .btn-QuantumultX {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}

.import-btns .btn-quantumultx:hover,
.import-btns .btn-QuantumultX:hover {
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45) !important;
}

/* Quantumult 按钮 */
.import-btns .btn-quantumult,
.import-btns .btn-Quantumult {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
    box-shadow: 0 4px 14px rgba(55, 65, 81, 0.4) !important;
}

.import-btns .btn-quantumult:hover,
.import-btns .btn-Quantumult:hover {
    box-shadow: 0 8px 24px rgba(55, 65, 81, 0.5) !important;
}

/* SSR 按钮 */
.import-btns .btn-ssr,
.import-btns .btn-SSR {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35) !important;
}

.import-btns .btn-ssr:hover,
.import-btns .btn-SSR:hover {
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.45) !important;
}

/* V2Ray 按钮 */
.import-btns .btn-v2ray {
    background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
}

.import-btns .btn-v2ray:hover {
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.45) !important;
}

/* SS 按钮 */
.import-btns .btn-ss,
.import-btns .btn-SS {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35) !important;
}

.import-btns .btn-ss:hover,
.import-btns .btn-SS:hover {
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.45) !important;
}

/* SSTap 按钮 */
.import-btns .btn-sstap,
.import-btns .btn-SSTap {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35) !important;
}

.import-btns .btn-sstap:hover,
.import-btns .btn-SSTap:hover {
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.45) !important;
}

/* Kitsunebi 按钮 */
.import-btns .btn-kitsunebi {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important;
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.35) !important;
}

.import-btns .btn-kitsunebi:hover {
    box-shadow: 0 8px 24px rgba(251, 146, 60, 0.45) !important;
}

/* 黄色按钮 */
.import-btns .btn-yellow {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35) !important;
}

.import-btns .btn-yellow:hover {
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.45) !important;
}

/* QQ支付按钮 */
.import-btns .btn-qqpay {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

.import-btns .btn-qqpay:hover {
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45) !important;
}

/* UU云加速按钮 */
.import-btns .btn-uucloud {
    background: linear-gradient(135deg, #f472b6 0%, #db2777 100%) !important;
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.35) !important;
}

.import-btns .btn-uucloud:hover {
    box-shadow: 0 8px 24px rgba(244, 114, 182, 0.45) !important;
}

/* ========================================
   6. 整体面板美化
   ======================================== */
.panel-body.import-btns.use-shadow {
    padding: 24px !important;
    border-radius: var(--aurora-radius-lg) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.95) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: var(--aurora-shadow-sm) !important;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
}

.is-darkmode .panel-body.import-btns.use-shadow {
    background: linear-gradient(135deg, rgba(40, 44, 52, 0.98) 0%, rgba(32, 36, 44, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ========================================
   7. 响应式优化
   ======================================== */
@media screen and (max-width: 768px) {
    .import-btns .btn {
        padding: 0 16px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 0.85rem !important;
        border-radius: var(--aurora-radius-sm) !important;
    }

    .import-btns .btn i,
    .import-btns .btn .svg-icon {
        font-size: 1.1rem !important;
        margin-right: 6px !important;
    }

    .panel-body.import-btns.use-shadow,
    .subscribe-info .import-btns[data-v-e7946bd8] {
        padding: 18px !important;
        gap: 10px;
    }
}

@media screen and (max-width: 480px) {
    .import-btns .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 130px;
    }

    .panel-body.import-btns.use-shadow,
    .subscribe-info .import-btns[data-v-e7946bd8] {
        padding: 14px !important;
        gap: 8px;
    }
}

/* ========================================
   8. 通用阴影卡片美化
   ======================================== */
.use-shadow {
    border-radius: var(--aurora-radius-lg) !important;
    box-shadow: var(--aurora-shadow-sm) !important;
    transition:
        box-shadow var(--aurora-transition),
        transform var(--aurora-transition) !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.use-shadow:hover {
    box-shadow: var(--aurora-shadow-md) !important;
}

.is-darkmode .use-shadow {
    border-color: rgba(255, 255, 255, 0.06);
}

/* ========================================
   9. 订阅信息区域优化
   ======================================== */
.subscribe-info .subs-box[data-v-e7946bd8] {
    border-radius: var(--aurora-radius-lg);
}

.subscribe-info .subs-box .subs-msg .t1[data-v-e7946bd8] {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.subscribe-info .subs-box .subs-msg .t2[data-v-e7946bd8] {
    color: rgba(0, 0, 0, 0.7);
}

.is-darkmode .subscribe-info .subs-box .subs-msg .t2[data-v-e7946bd8] {
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   10. 客户端链接区域美化
   ======================================== */
.subscribe-info .client-links[data-v-e7946bd8] {
    padding: 12px;
    border-radius: var(--aurora-radius-md);
}

.subscribe-info .client-links .link-item[data-v-e7946bd8] {
    border-radius: var(--aurora-radius-sm) !important;
    transition:
        background-color var(--aurora-transition),
        transform var(--aurora-transition) !important;
}

.subscribe-info .client-links .link-item[data-v-e7946bd8]:hover {
    background-color: rgba(var(--primary-color), 0.08) !important;
    transform: translateY(-2px);
}

.subscribe-info .client-links .link-item .icon[data-v-e7946bd8] {
    transition: transform var(--aurora-transition) !important;
}

.subscribe-info .client-links .link-item:hover .icon[data-v-e7946bd8] {
    transform: scale(1.1);
}

/* ========================================
   11. Ant Design 按钮美化
   ======================================== */
.ant-btn {
    border-radius: var(--aurora-radius-sm) !important;
    transition: all var(--aurora-transition) !important;
    font-weight: 500;
}

.ant-btn:hover {
    transform: translateY(-1px);
}

.ant-btn:active {
    transform: translateY(0);
}

.ant-btn.ant-btn-primary:not(:disabled) {
    background: linear-gradient(135deg, rgba(var(--primary-color), 1) 0%, rgba(var(--primary-color), 0.85) 100%) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-color), 0.3) !important;
    border: none !important;
}

.ant-btn.ant-btn-primary:not(:disabled):hover {
    box-shadow: 0 6px 18px rgba(var(--primary-color), 0.4) !important;
}

/* ========================================
   12. 输入框美化
   ======================================== */
.ant-input {
    border-radius: var(--aurora-radius-sm) !important;
    transition: all var(--aurora-transition) !important;
}

.ant-input:focus,
.ant-input:hover {
    border-color: rgba(var(--primary-color), 0.6) !important;
}

.ant-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.1) !important;
}

.ant-input-lg {
    border-radius: var(--aurora-radius-md) !important;
}

/* ========================================
   13. 选择器美化
   ======================================== */
.ant-select-selection {
    border-radius: var(--aurora-radius-sm) !important;
    transition: all var(--aurora-transition) !important;
}

.ant-select-selection:hover {
    border-color: rgba(var(--primary-color), 0.6) !important;
}

.ant-select-focused .ant-select-selection,
.ant-select-selection:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.1) !important;
}

.ant-select-dropdown {
    border-radius: var(--aurora-radius-sm) !important;
    box-shadow: var(--aurora-shadow-lg) !important;
    overflow: hidden;
}

.ant-select-dropdown-menu-item {
    border-radius: 4px;
    margin: 2px 4px;
    transition: background-color var(--aurora-transition) !important;
}

/* ========================================
   14. 表格美化
   ======================================== */
.ant-table {
    border-radius: var(--aurora-radius-md) !important;
    overflow: hidden;
}

.ant-table-thead>tr>th {
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.is-darkmode .ant-table-thead>tr>th {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.is-darkmode .ant-table-tbody>tr>td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ant-table-tbody>tr {
    transition: background-color var(--aurora-transition) !important;
}

.ant-table-tbody>tr:hover>td {
    background-color: rgba(var(--primary-color), 0.04) !important;
}

.is-darkmode .ant-table-tbody>tr:hover>td {
    background-color: rgba(var(--primary-color), 0.1) !important;
}

/* ========================================
   15. 卡片美化
   ======================================== */
.ant-card {
    border-radius: var(--aurora-radius-lg) !important;
    box-shadow: var(--aurora-shadow-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition:
        box-shadow var(--aurora-transition),
        transform var(--aurora-transition) !important;
    overflow: hidden;
}

.ant-card:hover {
    box-shadow: var(--aurora-shadow-md) !important;
}

.ant-card-head {
    border-radius: var(--aurora-radius-lg) var(--aurora-radius-lg) 0 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.is-darkmode .ant-card {
    background: #2d3748 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.is-darkmode .ant-card-head {
    background: #374151 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================
   16. 模态框美化
   ======================================== */
.ant-modal-content {
    border-radius: var(--aurora-radius-xl) !important;
    box-shadow: var(--aurora-shadow-lg) !important;
    overflow: hidden;
}

.ant-modal-header {
    border-radius: var(--aurora-radius-xl) var(--aurora-radius-xl) 0 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.ant-modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.is-darkmode .ant-modal-content {
    background: #2d3748 !important;
}

.is-darkmode .ant-modal-header {
    background: #374151 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.is-darkmode .ant-modal-footer {
    background: #2d3748 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================
   17. 消息提示美化
   ======================================== */
.ant-message-notice-content {
    border-radius: var(--aurora-radius-md) !important;
    box-shadow: var(--aurora-shadow-lg) !important;
    padding: 12px 20px !important;
}

.ant-notification-notice {
    border-radius: var(--aurora-radius-lg) !important;
    box-shadow: var(--aurora-shadow-lg) !important;
}

/* ========================================
   18. 标签页美化
   ======================================== */
.ant-tabs-nav .ant-tabs-tab {
    border-radius: var(--aurora-radius-sm) var(--aurora-radius-sm) 0 0 !important;
    transition: all var(--aurora-transition) !important;
}

.ant-tabs-nav .ant-tabs-tab:hover {
    color: rgba(var(--primary-color), 1);
}

.ant-tabs-ink-bar {
    border-radius: 2px !important;
    height: 3px !important;
}

/* ========================================
   19. 下拉菜单美化
   ======================================== */
.ant-dropdown-menu {
    border-radius: var(--aurora-radius-md) !important;
    box-shadow: var(--aurora-shadow-lg) !important;
    padding: 6px !important;
    overflow: hidden;
}

.ant-dropdown-menu-item {
    border-radius: var(--aurora-radius-sm) !important;
    margin: 2px 0;
    transition: background-color var(--aurora-transition) !important;
}

.dropdown-menu .ant-dropdown-menu-item>a {
    border-radius: var(--aurora-radius-sm);
}

/* ========================================
   20. 进度条美化
   ======================================== */
.ant-progress-inner {
    border-radius: 20px !important;
}

.ant-progress-bg {
    border-radius: 20px !important;
    background: linear-gradient(90deg, rgba(var(--primary-color), 0.8), rgba(var(--primary-color), 1)) !important;
}

/* ========================================
   21. 开关美化
   ======================================== */
.ant-switch {
    border-radius: 20px !important;
}

.ant-switch-checked {
    background: linear-gradient(90deg, rgba(var(--primary-color), 0.9), rgba(var(--primary-color), 1)) !important;
}

/* ========================================
   22. 复选框和单选框美化
   ======================================== */
.ant-checkbox-inner {
    border-radius: 4px !important;
    transition: all var(--aurora-transition) !important;
}

.ant-radio-inner {
    transition: all var(--aurora-transition) !important;
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-checked .ant-radio-inner {
    border-color: rgba(var(--primary-color), 1) !important;
}

.ant-checkbox-checked .ant-checkbox-inner {
    background-color: rgba(var(--primary-color), 1) !important;
}

/* ========================================
   23. 警告框美化
   ======================================== */
.ant-alert {
    border-radius: var(--aurora-radius-md) !important;
}

.ant-alert-success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: #a7f3d0 !important;
}

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

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

.ant-alert-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border-color: #fca5a5 !important;
}

/* ========================================
   24. 徽标美化
   ======================================== */
.ant-badge-count {
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(245, 34, 45, 0.4) !important;
}

/* ========================================
   25. 头像美化
   ======================================== */
.ant-avatar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.ant-avatar-square {
    border-radius: var(--aurora-radius-sm) !important;
}

/* ========================================
   26. 工具提示美化
   ======================================== */
.ant-tooltip-inner {
    border-radius: var(--aurora-radius-sm) !important;
    box-shadow: var(--aurora-shadow-md) !important;
}

/* ========================================
   27. 分割线美化
   ======================================== */
.line-hr {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent) !important;
    height: 1px !important;
    border: none !important;
}

.is-darkmode .line-hr {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
}

/* ========================================
   28. 滚动条美化
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.is-darkmode ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

.is-darkmode ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4b5563, #374151);
}

.is-darkmode ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

/* ========================================
   29. 文字选择优化
   ======================================== */
::selection {
    background: rgba(var(--primary-color), 0.2);
    color: inherit;
}

::-moz-selection {
    background: rgba(var(--primary-color), 0.2);
    color: inherit;
}

/* ========================================
   30. 链接悬浮优化
   ======================================== */
.copy-link {
    transition:
        color var(--aurora-transition),
        transform var(--aurora-transition) !important;
    display: inline-flex;
    align-items: center;
}

.copy-link:hover {
    transform: scale(1.05);
}

/* ========================================
   31. 页面布局优化
   ======================================== */
#app {
    min-height: 100vh;
}

/* ========================================
   32. 加载动画优化
   ======================================== */
.spin-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ant-spin-dot-item {
    background-color: rgba(var(--primary-color), 1) !important;
}

/* ========================================
   33. 空状态美化
   ======================================== */
.ant-empty-image svg {
    opacity: 0.6;
}

.empty-tip .svg-icon {
    opacity: 0.5;
}

/* ========================================
   34. 面包屑美化
   ======================================== */
.ant-breadcrumb a {
    transition: color var(--aurora-transition) !important;
    border-radius: 4px;
    padding: 2px 4px;
}

.ant-breadcrumb a:hover {
    background-color: rgba(var(--primary-color), 0.08);
}

/* ========================================
   35. 分页器美化
   ======================================== */
.ant-pagination-item {
    border-radius: var(--aurora-radius-sm) !important;
    transition: all var(--aurora-transition) !important;
}

.ant-pagination-item:hover {
    border-color: rgba(var(--primary-color), 0.6) !important;
}

.ant-pagination-item-active {
    background: rgba(var(--primary-color), 1) !important;
    border-color: rgba(var(--primary-color), 1) !important;
}

.ant-pagination-item-active a {
    color: #fff !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    border-radius: var(--aurora-radius-sm) !important;
}

/* ========================================
   36. 表单项美化
   ======================================== */
.ant-form-item-label>label {
    font-weight: 500;
}

.ant-form-explain {
    font-size: 12px;
    margin-top: 4px;
}

/* ========================================
   37. 菜单美化
   ======================================== */
.ant-menu {
    border-radius: var(--aurora-radius-md) !important;
}

.ant-menu-item {
    border-radius: var(--aurora-radius-sm) !important;
    margin: 4px 8px !important;
    transition: all var(--aurora-transition) !important;
}

.ant-menu-item:hover {
    background-color: rgba(var(--primary-color), 0.06) !important;
}

.ant-menu-item-selected {
    background-color: rgba(var(--primary-color), 0.1) !important;
}

/* ========================================
   38. 时间线美化
   ======================================== */
.ant-timeline-item-head {
    border-width: 3px !important;
}

.ant-timeline-item-head-blue {
    border-color: rgba(var(--primary-color), 1) !important;
    background: #fff !important;
}

/* ========================================
   39. 标签美化
   ======================================== */
.ant-tag {
    border-radius: 6px !important;
    font-weight: 500;
}

/* ========================================
   40. 步骤条美化
   ======================================== */
.ant-steps-item-icon {
    border-radius: 50% !important;
    transition: all var(--aurora-transition) !important;
}

.ant-steps-item-finish .ant-steps-item-icon,
.ant-steps-item-process .ant-steps-item-icon {
    background: rgba(var(--primary-color), 1) !important;
    border-color: rgba(var(--primary-color), 1) !important;
}

/* ========================================
   41. 返回顶部美化
   ======================================== */
.ant-back-top-content {
    border-radius: 50% !important;
    box-shadow: var(--aurora-shadow-md) !important;
    background: linear-gradient(135deg, rgba(var(--primary-color), 0.9), rgba(var(--primary-color), 1)) !important;
    transition: all var(--aurora-transition) !important;
}

.ant-back-top-content:hover {
    transform: scale(1.1);
    box-shadow: var(--aurora-shadow-lg) !important;
}

/* ========================================
   42. 日历美化
   ======================================== */
.ant-fullcalendar {
    border-radius: var(--aurora-radius-lg) !important;
}

.ant-fullcalendar-value:hover {
    background: rgba(var(--primary-color), 0.1) !important;
}

/* ========================================
   43. 骨架屏美化
   ======================================== */
.ant-skeleton-content .ant-skeleton-title,
.ant-skeleton-content .ant-skeleton-paragraph>li {
    border-radius: 4px !important;
}

/* ========================================
   44. 抽屉美化
   ======================================== */
.ant-drawer-content {
    border-radius: var(--aurora-radius-xl) 0 0 var(--aurora-radius-xl) !important;
}

.ant-drawer-right .ant-drawer-content {
    border-radius: var(--aurora-radius-xl) 0 0 var(--aurora-radius-xl) !important;
}

.ant-drawer-left .ant-drawer-content {
    border-radius: 0 var(--aurora-radius-xl) var(--aurora-radius-xl) 0 !important;
}

.ant-drawer-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ========================================
   45. 折叠面板美化
   ======================================== */
.ant-collapse {
    border-radius: var(--aurora-radius-md) !important;
    overflow: hidden;
}

.ant-collapse>.ant-collapse-item {
    border-radius: 0 !important;
}

.ant-collapse>.ant-collapse-item:last-child {
    border-radius: 0 0 var(--aurora-radius-md) var(--aurora-radius-md) !important;
}

.ant-collapse>.ant-collapse-item:first-child {
    border-radius: var(--aurora-radius-md) var(--aurora-radius-md) 0 0 !important;
}

.ant-collapse-header {
    transition: background-color var(--aurora-transition) !important;
}

.ant-collapse-header:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* ========================================
   46. Popover 美化
   ======================================== */
.ant-popover-inner {
    border-radius: var(--aurora-radius-md) !important;
    box-shadow: var(--aurora-shadow-lg) !important;
}

.ant-popover-title {
    border-radius: var(--aurora-radius-md) var(--aurora-radius-md) 0 0 !important;
}

/* ========================================
   47. 上传组件美化
   ======================================== */
.ant-upload.ant-upload-drag {
    border-radius: var(--aurora-radius-lg) !important;
    transition: all var(--aurora-transition) !important;
}

.ant-upload.ant-upload-drag:hover {
    border-color: rgba(var(--primary-color), 0.6) !important;
}

.ant-upload-list-item {
    border-radius: var(--aurora-radius-sm) !important;
}

/* ========================================
   48. 树形控件美化
   ======================================== */
.ant-tree li .ant-tree-node-content-wrapper {
    border-radius: var(--aurora-radius-sm) !important;
    transition: all var(--aurora-transition) !important;
}

.ant-tree li .ant-tree-node-content-wrapper:hover {
    background-color: rgba(var(--primary-color), 0.06) !important;
}

.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: rgba(var(--primary-color), 0.15) !important;
}

/* ========================================
   49. 评分组件美化
   ======================================== */
.ant-rate-star {
    transition: transform var(--aurora-transition) !important;
}

.ant-rate-star:hover {
    transform: scale(1.2);
}

/* ========================================
   50. 全局平滑过渡
   ======================================== */
* {
    scroll-behavior: smooth;
}

a,
button,
input,
select,
textarea {
    transition:
        color var(--aurora-transition),
        background-color var(--aurora-transition),
        border-color var(--aurora-transition),
        box-shadow var(--aurora-transition);
}

/* ========================================
   51. 套餐卡片美化
   ======================================== */
.plan-card {
    border-radius: var(--aurora-radius-lg) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition:
        transform var(--aurora-transition),
        box-shadow var(--aurora-transition),
        border-color var(--aurora-transition) !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
}

.plan-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(var(--primary-color), 0.3) !important;
}

.is-darkmode .plan-card {
    background: linear-gradient(145deg, #2d3748 0%, #1f2937 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.is-darkmode .plan-card:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(var(--primary-color), 0.5) !important;
}

/* 套餐标签美化 */
.plan-card .t0 {
    border-radius: 0 0 0 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

/* 套餐标题 */
.plan-card .t1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.is-darkmode .plan-card .t1 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    color: #ffffff !important;
}

/* 套餐价格 */
.plan-card .t2 {
    font-size: 32px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-card .t2 small {
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.7;
}

/* 购买按钮美化 */
.plan-card .t3 {
    height: 48px !important;
    border-radius: var(--aurora-radius-md) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    transition:
        background var(--aurora-transition),
        transform var(--aurora-transition),
        box-shadow var(--aurora-transition) !important;
    margin-bottom: 24px !important;
}

/* 购物车图标 - 保持原样式，仅在悬浮时调整 */
.plan-card .t3:hover .cart {
    filter: brightness(0) invert(1) !important;
}

.plan-card .t3:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
}

.plan-card .t3:active {
    transform: scale(0.98);
}

/* 暗色模式下的购买按钮 */
.is-darkmode .plan-card .t3 {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
    border: 2px solid #ef4444 !important;
    color: #f87171 !important;
}

.is-darkmode .plan-card .t3:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
}

/* 套餐特性区域 */
.plan-card .t4 {
    margin-bottom: 16px !important;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.is-darkmode .plan-card .t4 {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.plan-card .t4:last-child {
    border-bottom: none;
    margin-bottom: 0 !important;
}

.plan-card .t4 .tit {
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    color: rgba(0, 0, 0, 0.8);
}

.is-darkmode .plan-card .t4 .tit {
    color: rgba(255, 255, 255, 0.9);
}

.plan-card .t4 .desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(0, 0, 0, 0.6);
}

.is-darkmode .plan-card .t4 .desc {
    color: rgba(255, 255, 255, 0.6);
}

.plan-card .t4 .tag {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-radius: 6px !important;
    padding: 2px 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.plan-card .t4 .re {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

.plan-card .t4 .bo {
    font-weight: 700 !important;
}

/* 特性图标美化 */
.plan-card .t4 .gou,
.plan-card .t4 .cha {
    width: 20px !important;
    height: 20px !important;
    top: -1px !important;
}

/* ========================================
   52. 购买订阅页面标题
   ======================================== */
.buysubs-container .buy-header .tit {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

.is-darkmode .buysubs-container .buy-header .tit {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ========================================
   53. 套餐筛选标签 - 隐藏
   ======================================== */
.buysubs-container .buy-tabs {
    display: none !important;
}

/* ========================================
   54. 订单框美化
   ======================================== */
.buysubs-container .order-box {
    border-radius: var(--aurora-radius-lg) !important;
}

.buysubs-container .order-box .tit {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.is-darkmode .buysubs-container .order-box .tit {
    color: rgba(255, 255, 255, 0.95) !important;
}

.buysubs-container .order-box .ant-radio-button-wrapper {
    border-radius: var(--aurora-radius-sm) !important;
    transition:
        background var(--aurora-transition),
        border-color var(--aurora-transition),
        box-shadow var(--aurora-transition) !important;
}

.buysubs-container .order-box .ant-radio-button-wrapper:hover {
    border-color: rgba(var(--primary-color), 0.5) !important;
}

.buysubs-container .order-box .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
    background: rgba(var(--primary-color), 0.12) !important;
    border: 2px solid rgba(var(--primary-color), 1) !important;
    box-shadow: 0 2px 8px rgba(var(--primary-color), 0.2) !important;
}

/* ========================================
   55. 订单确认区域
   ======================================== */
.buysubs-container .order-make {
    border-radius: var(--aurora-radius-lg) !important;
}

.buysubs-container .order-make .block {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.is-darkmode .buysubs-container .order-make .block {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.buysubs-container .order-make .block .f20 {
    font-weight: 700 !important;
}

.buysubs-container .order-make .btns .btn {
    border-radius: var(--aurora-radius-md) !important;
    height: 44px !important;
    font-weight: 600 !important;
    padding: 0 28px !important;
}

/* ========================================
   56. 套餐卡片响应式
   ======================================== */
@media screen and (max-width: 768px) {
    .plan-card {
        padding: 20px !important;
        border-radius: var(--aurora-radius-md) !important;
    }

    .plan-card .t1 {
        font-size: 18px !important;
    }

    .plan-card .t2 {
        font-size: 26px !important;
    }

    .plan-card .t3 {
        height: 44px !important;
    }

    .buysubs-container .buy-header .tit {
        font-size: 22px !important;
    }
}

/* ========================================
   57. 推荐套餐高亮
   ======================================== */
.plan-card:has(.t0) {
    border: 2px solid rgba(var(--primary-color), 0.3) !important;
}

.plan-card:has(.t0):hover {
    border-color: rgba(var(--primary-color), 0.6) !important;
}

/* ========================================
   58. 套餐卡片入场动画
   ======================================== */
@keyframes plan-card-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ant-col .plan-card {
    animation: plan-card-in 0.4s ease-out forwards;
}

.ant-col:nth-child(1) .plan-card {
    animation-delay: 0.05s;
}

.ant-col:nth-child(2) .plan-card {
    animation-delay: 0.1s;
}

.ant-col:nth-child(3) .plan-card {
    animation-delay: 0.15s;
}

.ant-col:nth-child(4) .plan-card {
    animation-delay: 0.2s;
}

.ant-col:nth-child(5) .plan-card {
    animation-delay: 0.25s;
}

.ant-col:nth-child(6) .plan-card {
    animation-delay: 0.3s;
}

/* ========================================
   59. 个人中心背景图美化
   ======================================== */
.profile-container .pro-bg {
    position: relative;
    height: 320px !important;
    border-radius: var(--aurora-radius-xl) !important;
    overflow: hidden;
    box-shadow: var(--aurora-shadow-md);
}

.profile-container .pro-bg img {
    display: none !important;
}

.profile-container .pro-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://api.ednovas.xyz');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.profile-container .pro-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    pointer-events: none;
}

/* 个人中心卡片美化 */
.profile-container .pro-bag {
    border-radius: var(--aurora-radius-xl) !important;
    box-shadow: var(--aurora-shadow-md) !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.is-darkmode .profile-container .pro-bag {
    background: rgba(45, 55, 72, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-container .pro-bag .rmb {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-container .pro-bag .n-button,
.profile-container .pro-bag .ant-btn {
    border-radius: var(--aurora-radius-sm) !important;
}

/* 个人中心设置卡片 */
.profile-container .ant-card {
    border-radius: var(--aurora-radius-lg) !important;
    box-shadow: var(--aurora-shadow-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
}

.is-darkmode .profile-container .ant-card {
    background: #2d3748 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.profile-container .ant-card-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.is-darkmode .profile-container .ant-card-head {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.profile-container .pro-setting .item {
    border-radius: var(--aurora-radius-sm);
    padding: 14px 12px !important;
    margin: 4px 0;
    transition: background-color var(--aurora-transition);
}

.profile-container .pro-setting .item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.is-darkmode .profile-container .pro-setting .item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.is-darkmode .profile-container .pro-setting .item {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 个人中心响应式 */
@media screen and (max-width: 768px) {
    .profile-container .pro-bg {
        height: 200px !important;
        border-radius: var(--aurora-radius-lg) !important;
    }

    .profile-container .pro-bag {
        border-radius: var(--aurora-radius-lg) !important;
    }
}

/* ========================================
   60. 订单页面美化
   ======================================== */

/* 订单列表页面 */
.order-container .data-table {
    border-radius: var(--aurora-radius-lg) !important;
    overflow: hidden;
}

/* 订单详情页面 */
.order-info {
    border-radius: var(--aurora-radius-xl) !important;
    overflow: hidden;
}

.order-info .order-main,
.order-info .order-side {
    padding: 32px !important;
}

.order-info .g-group {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: var(--aurora-radius-lg) !important;
    padding: 24px !important;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--aurora-shadow-sm);
}

.is-darkmode .order-info .g-group {
    background: linear-gradient(145deg, #2d3748 0%, #1f2937 100%);
    border-color: rgba(255, 255, 255, 0.06);
}

.order-info .g-group .header {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: #1f2937;
}

.is-darkmode .order-info .g-group .header {
    color: #f3f4f6 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.order-info .g-group .item {
    padding: 12px 0 !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.order-info .g-group .item:last-child {
    border-bottom: none;
}

.is-darkmode .order-info .g-group .item {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.order-info .g-group .tit {
    font-size: 15px !important;
    color: #6b7280 !important;
    min-width: 100px;
}

.is-darkmode .order-info .g-group .tit {
    color: rgba(255, 255, 255, 0.6) !important;
}

.order-info .g-group .value {
    font-size: 15px !important;
    font-weight: 500;
    color: #1f2937;
}

.is-darkmode .order-info .g-group .value {
    color: #f3f4f6 !important;
}

/* 订单状态标签 - 保持原样式 */

/* 取消按钮 */
.order-info .g-group .btn-cancel {
    border-radius: var(--aurora-radius-sm) !important;
    height: 40px !important;
    font-weight: 500 !important;
}

/* 支付按钮 */
.order-info .g-group .btn-payment {
    border-radius: var(--aurora-radius-md) !important;
    height: 52px !important;
    transition:
        background-color var(--aurora-transition),
        border-color var(--aurora-transition),
        transform var(--aurora-transition) !important;
}

.order-info .g-group .btn-payment:hover {
    transform: translateY(-2px);
}

.order-info .g-group .btn-payment.is-active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* 提交按钮 */
.order-info .g-btns .btn {
    border-radius: var(--aurora-radius-lg) !important;
    height: 54px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(var(--primary-color), 1) 0%, rgba(var(--primary-color), 0.85) 100%) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(var(--primary-color), 0.3) !important;
    transition:
        transform var(--aurora-transition),
        box-shadow var(--aurora-transition) !important;
}

.order-info .g-btns .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(var(--primary-color), 0.4) !important;
}

.order-info .g-btns .btn:active {
    transform: translateY(-1px);
}

/* 订单摘要卡片 - 保持原样式 */

/* 订单列表美化 */
.order-container .ant-table {
    border-radius: var(--aurora-radius-lg) !important;
}

/* 订单状态标签 */
.order-container .ant-tag {
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-weight: 500;
}

/* 订单操作按钮 */
.order-container .ant-btn-link {
    font-weight: 500;
    border-radius: var(--aurora-radius-sm) !important;
    padding: 4px 8px;
    transition: background-color var(--aurora-transition) !important;
}

.order-container .ant-btn-link:hover {
    background-color: rgba(var(--primary-color), 0.08);
}

/* ========================================
   61. 使用文档页面美化
   ======================================== */
.knowledge-container .doc-tabs .ant-tabs-nav .ant-tabs-tab {
    padding: 12px 20px !important;
    border-radius: var(--aurora-radius-sm) !important;
    margin-right: 8px !important;
    transition:
        background-color var(--aurora-transition),
        color var(--aurora-transition) !important;
}

.knowledge-container .doc-tabs .ant-tabs-nav .ant-tabs-tab:hover {
    background-color: rgba(var(--primary-color), 0.08);
}

.knowledge-container .doc-dir {
    border-radius: var(--aurora-radius-lg) !important;
}

.knowledge-container .doc-dir .ant-timeline-item {
    padding: 12px 0 !important;
    border-radius: var(--aurora-radius-sm);
    transition:
        background-color var(--aurora-transition),
        padding-left var(--aurora-transition) !important;
}

.knowledge-container .doc-dir .ant-timeline-item:hover {
    background-color: rgba(var(--primary-color), 0.06);
    padding-left: 8px !important;
}

.knowledge-container .doc-content {
    border-radius: var(--aurora-radius-lg) !important;
}

.knowledge-container .doc-content .title {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* ========================================
   62. 工单页面美化
   ======================================== */
.ticket-container .ant-table {
    border-radius: var(--aurora-radius-lg) !important;
}

.ticket-container .ant-btn {
    border-radius: var(--aurora-radius-sm) !important;
}

/* 新建工单按钮 */
.ticket-container .ant-btn-primary {
    background: linear-gradient(135deg, rgba(var(--primary-color), 1) 0%, rgba(var(--primary-color), 0.85) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(var(--primary-color), 0.25) !important;
}

.ticket-container .ant-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--primary-color), 0.35) !important;
}

/* ========================================
   63. 邀请页面美化
   ======================================== */
.invite-container .ant-card {
    border-radius: var(--aurora-radius-lg) !important;
}

.invite-container .ant-input-group .ant-input {
    border-radius: var(--aurora-radius-sm) 0 0 var(--aurora-radius-sm) !important;
}

.invite-container .ant-input-group .ant-btn {
    border-radius: 0 var(--aurora-radius-sm) var(--aurora-radius-sm) 0 !important;
}

/* ========================================
   64. 流量明细页面美化
   ======================================== */
.flow-container .chart-box,
.dashboard-container .chart-box {
    border-radius: var(--aurora-radius-lg) !important;
}

.flow-box {
    border-radius: var(--aurora-radius-lg) !important;
}

/* ========================================
   65. 订单详情响应式
   ======================================== */
@media screen and (max-width: 768px) {

    .order-info .order-main,
    .order-info .order-side {
        padding: 20px !important;
    }

    .order-info .g-group {
        padding: 18px !important;
    }

    .order-info .g-btns .btn {
        height: 48px !important;
        font-size: 15px !important;
    }
}

/* ========================================
   66. Crisp 聊天组件 - 防止 Dark Reader 双重变暗
   Crisp 已通过原生 API 启用暗色模式，
   此处阻止 Dark Reader 再次叠加暗色处理。
   ======================================== */
.crisp-client,
.crisp-client *,
#crisp-chatbox,
#crisp-chatbox * {
    --darkreader-inline-fill: initial !important;
    --darkreader-inline-stroke: initial !important;
    --darkreader-inline-color: initial !important;
    --darkreader-inline-bgcolor: initial !important;
    --darkreader-inline-bgimage: initial !important;
    --darkreader-inline-border: initial !important;
    --darkreader-inline-bordertop: initial !important;
    --darkreader-inline-borderbottom: initial !important;
    --darkreader-inline-borderleft: initial !important;
    --darkreader-inline-borderright: initial !important;
    --darkreader-inline-outline: initial !important;
    --darkreader-inline-boxshadow: initial !important;
}