/* ============================================================
 * 短信分销平台 - 分销系统独立样式表 (daili.css)
 * 设计风格：企业级后台管理系统
 * 配色方案：
 *   主色 #1a73e8（标准蓝）
 *   成功 #28a745、警告 #ffc107、危险 #dc3545
 *   信息 #17a2b8
 *   深色背景 #1f2937、#111827
 * 参考：传统 Laravel/ThinkPHP 后台风格
 * ============================================================ */

:root {
    --dl-primary: #1677ff;
    --dl-primary-hover: #0958d9;
    --dl-primary-light: #e6f4ff;
    --dl-primary-dark: #003eb3;
    --dl-secondary: #666;
    --dl-accent: #fa8c16;

    --dl-success: #52c41a;
    --dl-success-light: #f6ffed;
    --dl-warning: #faad14;
    --dl-warning-light: #fffbe6;
    --dl-danger: #ff4d4f;
    --dl-danger-light: #fff2f0;
    --dl-info: #1890ff;
    --dl-info-light: #e6f7ff;

    --dl-bg-dark: #001529;
    --dl-bg-dark-2: #002140;
    --dl-bg-dark-3: #1f3a5c;
    --dl-bg-page: #f0f2f5;
    --dl-bg-card: #ffffff;

    --dl-text-primary: #1f1f1f;
    --dl-text-regular: #333;
    --dl-text-secondary: #666;
    --dl-text-placeholder: #999;
    --dl-text-light: #d9d9d9;
    --dl-text-white: #ffffff;

    --dl-border: #d9d9d9;
    --dl-border-light: #f0f0f0;
    --dl-border-dark: #434343;

    --dl-radius-sm: 2px;
    --dl-radius-md: 2px;
    --dl-radius-lg: 2px;
    --dl-radius-xl: 2px;
    --dl-radius-full: 9999px;

    --dl-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.03);
    --dl-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.06);
    --dl-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.08);
    --dl-shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.10);
    --dl-shadow-primary: 0 2px 6px rgba(22, 119, 255, 0.25);

    --dl-bg: #f5f5f5;

    --dl-gradient-primary: #1677ff;
    --dl-gradient-success: #52c41a;
    --dl-gradient-warning: #faad14;
    --dl-gradient-accent: #fa8c16;
    --dl-gradient-dark: #001529;

    --dl-header-height: 48px;
    --dl-sidebar-width: 200px;
    --dl-transition: border-color .12s, background-color .12s, color .12s;
}

.dl-body,
body.dl-body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    font-size: 14px;
    color: var(--dl-text-primary);
    background: var(--dl-bg-page);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
 * 页面级横向溢出兜底（全局）：
 *   任何页面都不允许出现浏览器底部横向滚动条。
 *   横向滚动条会叠加在页面内容（尤其是代码块）上，形成
 *   "横向条遮挡代码"的问题。此规则在 html/body 两层生效，
 *   内部表格/代码区域仍可独立横向滚动（.dl-table-wrap 等），
 *   不影响 position: sticky/fixed 的正常定位。
 * ============================================================ */
html,
body {
    overflow-x: hidden;
}

.dl-body * { box-sizing: border-box; }

.dl-body input::placeholder,
.dl-body textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--dl-text-placeholder) !important;
    opacity: 1 !important;
}
.dl-body input::-webkit-input-placeholder,
.dl-body textarea::-webkit-input-placeholder {
    color: var(--dl-text-placeholder) !important;
}
.dl-body input::-moz-placeholder,
.dl-body textarea::-moz-placeholder {
    color: var(--dl-text-placeholder) !important;
    opacity: 1 !important;
}

.dl-body pre {
    background: #0a1929 !important;
    color: #e8eaf6 !important;
    padding: 14px 18px !important;
    border-radius: var(--dl-radius-md) !important;
    overflow-x: hidden !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 10px 0 !important;
    border: none !important;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
}
.dl-body pre code {
    color: #e8eaf6 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 13px !important;
}
.dl-body pre code .hljs-keyword,
.dl-body pre code .hljs-string,
.dl-body pre code .hljs-number,
.dl-body pre code .hljs-comment {
    color: #e8eaf6 !important;
}

.dl-body code {
    font-family: Consolas, Monaco, 'Courier New', monospace;
}

.dl-btn,
.dl-btn-primary,
.dl-btn-outline,
.dl-btn-success,
.dl-btn-danger,
.dl-btn-warning {
    font-family: inherit !important;
}

.dl-body .dl-card {
    background: #fff;
    color: var(--dl-text-primary);
    border: 1px solid var(--dl-border-light);
    border-radius: var(--dl-radius-lg);
    box-shadow: var(--dl-shadow-sm);
}
.dl-body .dl-card > * {
    color: inherit;
}

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

.dl-body img { max-width: 100%; display: block; }

.dl-body ::-webkit-scrollbar { width: 6px; height: 6px; }
.dl-body ::-webkit-scrollbar-track { background: transparent; }
.dl-body ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dl-body ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ====== 布局 ====== */
.dl-layout {
    display: flex;
    min-height: 100vh;
    background: var(--dl-bg-page);
}

/* ====== 顶部栏 ====== */
.dl-header {
    height: var(--dl-header-height);
    background: #fff;
    border-bottom: 1px solid var(--dl-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
}

.dl-header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dl-text-primary);
}

.dl-header-logo .logo-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--dl-radius-sm);
    background: var(--dl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}

.dl-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dl-header-action {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--dl-text-regular);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--dl-radius-sm);
}
.dl-header-action:hover { background: var(--dl-primary-light); color: var(--dl-primary); }

.dl-header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border-radius: var(--dl-radius-full);
    background: var(--dl-border-light);
    cursor: pointer;
}
.dl-header-user:hover { background: var(--dl-primary-light); }

.dl-header-user .avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--dl-radius-full);
    background: var(--dl-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}
.dl-header-user .user-name { font-size: 13px; font-weight: 500; }

/* ====== 侧边栏 ====== */
.dl-sidebar {
    width: var(--dl-sidebar-width);
    background: var(--dl-bg-dark);
    position: fixed;
    top: var(--dl-header-height);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 150;
}

.dl-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.dl-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

.dl-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.dl-menu-group {
    padding: 10px 18px 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.dl-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 13px;
    position: relative;
    border-left: 2px solid transparent;
}
.dl-menu-item .menu-icon {
    width: 16px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
}
.dl-menu-item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.dl-menu-item.active {
    background: var(--dl-bg-dark-2);
    color: #fff;
    border-left-color: var(--dl-primary);
    font-weight: 500;
}
.dl-menu-item.active > span,
.dl-menu-item.active > div,
.dl-menu-item.active span,
.dl-menu-item.active div,
.dl-menu-item.active code {
    color: #fff !important;
    opacity: 1 !important;
}
.dl-menu-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--dl-primary);
}
.dl-menu-item .menu-badge {
    margin-left: auto;
    background: var(--dl-danger);
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--dl-radius-full);
    line-height: 1.4;
}

.dl-plugin-item {
    display: block;
    padding: 12px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--dl-border-light);
    margin-bottom: 6px;
    color: var(--dl-text-primary);
    text-decoration: none;
    transition: var(--dl-transition);
    background: #fff;
}
.dl-plugin-item:hover {
    background: var(--dl-primary-light);
    border-color: var(--dl-primary);
    color: var(--dl-primary);
}
.dl-plugin-active {
    background: var(--dl-primary-light);
    border-color: var(--dl-primary);
    color: var(--dl-primary);
}
.dl-plugin-active span,
.dl-plugin-active div,
.dl-plugin-active code {
    color: var(--dl-primary);
}

/* ====== 主内容区 ====== */
.dl-content {
    flex: 1;
    margin-left: var(--dl-sidebar-width);
    margin-top: var(--dl-header-height);
    padding: 20px;
    min-width: 0;
}

/* ====== 页面标题 ====== */
.dl-page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dl-text-primary);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dl-border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-page-title .title-bar {
    width: 3px;
    height: 16px;
    background: var(--dl-primary);
}
.dl-page-title .title-sub {
    font-size: 13px;
    color: var(--dl-text-secondary);
    font-weight: 400;
}

/* ====== 工具栏 ====== */
.dl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.dl-toolbar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dl-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.dl-toolbar-search { position: relative; width: 220px; }
.dl-toolbar-search input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius-md);
    font-size: 13px;
    background: #fff;
    outline: none;
}
.dl-toolbar-search input:focus { border-color: var(--dl-primary); }
.dl-toolbar-search .search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dl-text-placeholder);
    font-size: 14px;
}

/* ====== 卡片 ====== */
.dl-card {
    background: var(--dl-bg-card);
    border-radius: var(--dl-radius-lg);
    border: 1px solid var(--dl-border-light);
    margin-bottom: 16px;
}
.dl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dl-border-light);
}
.dl-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dl-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-card-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--dl-primary);
}
.dl-card-body { padding: 20px; }
.dl-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--dl-border-light);
    background: var(--dl-bg-page);
    border-radius: 0 0 var(--dl-radius-lg) var(--dl-radius-lg);
}

/* ====== 表格 ====== */
.dl-table-wrap { overflow-x: auto; }
.dl-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
}
.dl-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--dl-text-regular);
    background: #f8f9fa;
    white-space: nowrap;
    border-bottom: 2px solid var(--dl-border);
    font-size: 12px;
}
.dl-table td {
    padding: 10px 12px;
    color: var(--dl-text-regular);
    border-bottom: 1px solid var(--dl-border-light);
    vertical-align: middle;
}
.dl-table tbody tr:hover { background: #f8f9fa; }
.dl-table tbody tr:last-child td { border-bottom: none; }
.dl-table .table-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.dl-table .table-thumb {
    width: 32px; height: 32px;
    border-radius: var(--dl-radius-md);
    object-fit: cover;
    background: var(--dl-border-light);
}

/* ====== 表单 ====== */
.dl-form-group { margin-bottom: 16px; }
.dl-form-label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dl-text-primary);
}
.dl-form-label .required { color: var(--dl-danger); margin-left: 2px; }

.dl-form-input,
.dl-form-select,
.dl-form-textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius-md);
    font-size: 13px;
    color: var(--dl-text-primary);
    background: #fff;
    outline: none;
    font-family: inherit;
}
.dl-form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.dl-form-input:focus,
.dl-form-select:focus,
.dl-form-textarea:focus { border-color: var(--dl-primary); }

.dl-form-input::placeholder,
.dl-form-textarea::placeholder { color: var(--dl-text-placeholder); }

.dl-form-input:disabled,
.dl-form-select:disabled {
    background: var(--dl-border-light);
    cursor: not-allowed;
    color: var(--dl-text-secondary);
}
.dl-form-hint { font-size: 12px; color: var(--dl-text-secondary); margin-top: 4px; }
.dl-form-hint.dl-form-hint-error { color: var(--dl-danger); }
.dl-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.dl-form-row .dl-form-group { flex: 1; min-width: 180px; }
.dl-form-inline { display: flex; align-items: center; gap: 8px; }

/* ====== 按钮 ====== */
.dl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 16px !important;
    border: 1px solid var(--dl-border) !important;
    border-radius: var(--dl-radius-md) !important;
    background: #fff !important;
    color: var(--dl-text-regular) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
.dl-btn:hover { color: var(--dl-primary) !important; border-color: var(--dl-primary) !important; }
.dl-btn:active { transform: translateY(0) !important; }

.dl-btn-primary {
    background: var(--dl-primary) !important;
    color: #fff !important;
    border-color: var(--dl-primary) !important;
}
.dl-btn-primary:hover {
    background: var(--dl-primary-hover) !important;
    border-color: var(--dl-primary-hover) !important;
    color: #fff !important;
}

.dl-btn-success {
    background: var(--dl-success) !important;
    color: #fff !important;
    border-color: var(--dl-success) !important;
}
.dl-btn-success:hover { background: #1e7e34 !important; border-color: #1e7e34 !important; color: #fff !important; }

.dl-btn-danger {
    background: var(--dl-danger) !important;
    color: #fff !important;
    border-color: var(--dl-danger) !important;
}
.dl-btn-danger:hover { background: #c82333 !important; border-color: #c82333 !important; color: #fff !important; }

.dl-btn-warning {
    background: var(--dl-warning) !important;
    color: #212529 !important;
    border-color: var(--dl-warning) !important;
}
.dl-btn-warning:hover { background: #e0a800 !important; border-color: #e0a800 !important; color: #212529 !important; }

.dl-btn-outline {
    background: #fff !important;
    border-color: var(--dl-primary) !important;
    color: var(--dl-primary) !important;
}
.dl-btn-outline:hover { background: var(--dl-primary) !important; color: #fff !important; }

.dl-btn-sm { padding: 4px 10px !important; font-size: 12px !important; }
.dl-btn-lg { padding: 10px 22px !important; font-size: 15px !important; }
.dl-btn-block { display: flex !important; width: 100% !important; }

.dl-btn[disabled],
.dl-btn.is-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ====== 标签/状态 ====== */
.dl-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: var(--dl-radius-sm);
    font-size: 12px;
    font-weight: 500;
    background: var(--dl-border-light);
    color: var(--dl-text-secondary);
    line-height: 1.6;
}
.dl-tag-success { background: var(--dl-success-light); color: var(--dl-success); }
.dl-tag-danger { background: var(--dl-danger-light); color: var(--dl-danger); }
.dl-tag-warning { background: var(--dl-warning-light); color: #856404; }
.dl-tag-info { background: var(--dl-info-light); color: var(--dl-info); }
.dl-tag-primary { background: var(--dl-primary-light); color: var(--dl-primary); }

.dl-tag .dot {
    width: 6px; height: 6px;
    border-radius: var(--dl-radius-full);
    background: currentColor;
}

/* ====== 统计卡片 ====== */
.dl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

/* 两栏并排布局（手机端降为单栏） */
.dl-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .dl-split-grid { grid-template-columns: 1fr; gap: 16px; }
}
.dl-stat-card {
    background: #fff;
    border-radius: var(--dl-radius-lg);
    padding: 16px 18px;
    border: 1px solid var(--dl-border-light);
    display: flex;
    align-items: center;
    gap: 14px;
}
.dl-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--dl-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dl-primary);
    font-size: 20px;
    flex-shrink: 0;
    background: var(--dl-primary-light);
}
.dl-stat-icon.icon-success { background: var(--dl-success-light); color: var(--dl-success); }
.dl-stat-icon.icon-warning { background: var(--dl-warning-light); color: #856404; }
.dl-stat-icon.icon-danger { background: var(--dl-danger-light); color: var(--dl-danger); }
.dl-stat-icon.icon-accent { background: #fff7e6; color: var(--dl-accent); }
.dl-stat-info { flex: 1; }
.dl-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--dl-text-primary);
    line-height: 1.2;
}
.dl-stat-label { font-size: 12px; color: var(--dl-text-secondary); margin-top: 3px; }
.dl-stat-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; margin-top: 4px; }
.dl-stat-trend.up { color: var(--dl-success); }
.dl-stat-trend.down { color: var(--dl-danger); }

/* ====== 弹窗/模态 ====== */
.dl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.dl-modal {
    background: #fff;
    border-radius: var(--dl-radius-lg);
    box-shadow: var(--dl-shadow-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dl-modal.dl-modal-lg { max-width: 720px; }
.dl-modal.dl-modal-sm { max-width: 360px; }

.dl-modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--dl-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dl-modal-title { font-size: 15px; font-weight: 600; margin: 0; }
.dl-modal-close {
    width: 26px; height: 26px;
    border: none; background: transparent;
    color: var(--dl-text-secondary);
    font-size: 18px; cursor: pointer;
    border-radius: var(--dl-radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.dl-modal-close:hover { background: var(--dl-border-light); color: var(--dl-danger); }
.dl-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.dl-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--dl-border-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--dl-bg-page);
}

/* ====== 空状态 ====== */
.dl-empty { padding: 50px 20px; text-align: center; color: var(--dl-text-secondary); }
.dl-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: var(--dl-radius-full);
    background: var(--dl-primary-light);
    color: var(--dl-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
}
.dl-empty-text { font-size: 13px; color: var(--dl-text-secondary); margin-bottom: 14px; }
.dl-empty-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

/* ====== 分页 ====== */
.dl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 0 4px;
    flex-wrap: wrap;
}
.dl-pagination-item {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--dl-border);
    background: #fff;
    color: var(--dl-text-regular);
    border-radius: var(--dl-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    user-select: none;
}
.dl-pagination-item:hover { color: var(--dl-primary); border-color: var(--dl-primary); }
.dl-pagination-item.active {
    background: var(--dl-primary);
    color: #fff;
    border-color: var(--dl-primary);
}
.dl-pagination-item.disabled { color: var(--dl-text-placeholder); cursor: not-allowed; pointer-events: none; }

.dl-pagination-jump { display: inline-flex; align-items: center; gap: 5px; color: var(--dl-text-secondary); font-size: 13px; }
.dl-pagination-jump input {
    width: 48px; height: 32px; padding: 0 6px;
    text-align: center;
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius-md);
    outline: none; font-size: 13px;
}
.dl-pagination-jump input:focus { border-color: var(--dl-primary); }

/* ====== 标签页 ====== */
.dl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--dl-border); margin-bottom: 16px; }
.dl-tab {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--dl-text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.dl-tab:hover { color: var(--dl-primary); }
.dl-tab.active { color: var(--dl-primary); border-bottom-color: var(--dl-primary); font-weight: 600; }
.dl-tab .tab-count {
    margin-left: 5px; font-size: 11px; padding: 0 5px;
    border-radius: var(--dl-radius-full);
    background: var(--dl-border-light); color: var(--dl-text-secondary);
}
.dl-tab.active .tab-count { background: var(--dl-primary-light); color: var(--dl-primary); }

/* ====== 登录/注册页 ====== */
.dl-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dl-bg-dark-2);
    position: relative;
    overflow: hidden;
    padding: 20px;
}
.dl-auth-card {
    background: #fff;
    border-radius: var(--dl-radius-lg);
    box-shadow: var(--dl-shadow-xl);
    width: 100%;
    max-width: 400px;
    padding: 32px 28px;
}
.dl-auth-logo { text-align: center; margin-bottom: 24px; }
.dl-auth-logo .logo-icon {
    width: 48px; height: 48px;
    border-radius: var(--dl-radius-md);
    background: var(--dl-primary);
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px;
}
.dl-auth-logo h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.dl-auth-logo p { color: var(--dl-text-secondary); font-size: 12px; margin: 0; }
.dl-auth-tabs {
    display: flex;
    background: var(--dl-border-light);
    border-radius: var(--dl-radius-md);
    padding: 3px;
    margin-bottom: 20px;
}
.dl-auth-tab {
    flex: 1; text-align: center;
    padding: 8px;
    border-radius: var(--dl-radius-sm);
    cursor: pointer; font-size: 13px;
    color: var(--dl-text-secondary); font-weight: 500;
}
.dl-auth-tab.active { background: #fff; color: var(--dl-primary); }
.dl-auth-footer { text-align: center; margin-top: 18px; font-size: 12px; color: var(--dl-text-secondary); }

/* ====== 前台导航 ====== */
.dl-front-header {
    background: #fff;
    border-bottom: 1px solid var(--dl-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.dl-front-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dl-front-logo {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 600;
}
.dl-front-logo .logo-icon {
    width: 32px; height: 32px;
    border-radius: var(--dl-radius-md);
    background: var(--dl-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.dl-front-nav { display: flex; gap: 2px; align-items: center; }
.dl-front-nav-item {
    padding: 6px 14px;
    color: var(--dl-text-regular);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--dl-radius-md);
    cursor: pointer;
}
.dl-front-nav-item:hover { color: var(--dl-primary); background: var(--dl-primary-light); }
.dl-front-nav-item.active { color: var(--dl-primary); background: var(--dl-primary-light); font-weight: 600; }
.dl-front-content { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; }

/* 前台横幅 */
.dl-front-hero {
    background: linear-gradient(135deg, #001529 0%, #003a70 100%);
    border-radius: var(--dl-radius-lg);
    padding: 56px 32px;
    color: #fff;
    text-align: center;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.1);
}
.dl-front-hero h1 { font-size: 36px !important; font-weight: 800 !important; margin: 0 0 14px !important; color: #fff !important; letter-spacing: 2px !important; text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
.dl-front-hero p { font-size: 17px !important; opacity: 0.95 !important; margin: 0 auto 24px !important; color: #fff !important; line-height: 1.8 !important; max-width: 680px; }

.dl-section-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--dl-text-primary) !important;
    margin: 32px 0 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--dl-primary) !important;
    display: block !important;
    line-height: 1.4 !important;
}
.dl-front-hero .dl-btn {
    font-weight: 600;
}
.dl-front-hero .dl-btn:hover { background: var(--dl-primary-hover); color: #fff; }

/* ====== 前台商品卡片 ====== */
.dl-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.dl-product-card {
    background: #fff;
    border-radius: var(--dl-radius-lg);
    border: 1px solid var(--dl-border-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dl-product-card:hover { border-color: var(--dl-primary); }

.dl-product-header {
    padding: 14px 20px 10px;
    background: #fafafa;
    color: var(--dl-text-primary);
    border-bottom: 2px solid var(--dl-primary);
}
.dl-product-header.success { border-bottom-color: var(--dl-success); }
.dl-product-header.accent { border-bottom-color: var(--dl-accent); }
.dl-product-header.warning { border-bottom-color: var(--dl-warning); }
.dl-product-name { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.dl-product-desc { font-size: 12px; opacity: 0.85; }
.dl-product-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.dl-product-price { font-size: 24px; font-weight: 700; color: var(--dl-danger); line-height: 1; margin-bottom: 3px; }
.dl-product-price small { font-size: 13px; color: var(--dl-text-secondary); font-weight: 400; }
.dl-product-price-unit { font-size: 12px; color: var(--dl-text-secondary); margin-bottom: 14px; }

.dl-product-features { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; }
.dl-product-features li {
    padding: 3px 0;
    color: var(--dl-text-regular);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dl-product-features li::before {
    content: '✓';
    color: var(--dl-success);
    font-weight: 700;
    font-size: 12px;
}
.dl-product-footer { padding: 0 20px 20px; }
.dl-product-footer .dl-btn { width: 100%; }

/* ====== 提示信息 ====== */
.dl-alert {
    padding: 10px 14px;
    border-radius: var(--dl-radius-md);
    margin-bottom: 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}
.dl-alert-info { background: var(--dl-info-light); color: var(--dl-info); border-color: #bee5eb; }
.dl-alert-success { background: var(--dl-success-light); color: var(--dl-success); border-color: #c3e6cb; }
.dl-alert-warning { background: var(--dl-warning-light); color: #856404; border-color: #ffeeba; }
.dl-alert-danger { background: var(--dl-danger-light); color: var(--dl-danger); border-color: #f5c6cb; }

/* ====== 进度条 ====== */
.dl-progress {
    width: 100%; height: 6px;
    background: var(--dl-border-light);
    border-radius: var(--dl-radius-full);
    overflow: hidden;
}
.dl-progress-bar { height: 100%; background: var(--dl-primary); border-radius: var(--dl-radius-full); transition: width 0.3s ease; }
.dl-progress-bar.success { background: var(--dl-success); }
.dl-progress-bar.warning { background: var(--dl-warning); }
.dl-progress-bar.danger { background: var(--dl-danger); }

/* ====== 面包屑 ====== */
.dl-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--dl-text-secondary);
    margin-bottom: 14px;
}
.dl-breadcrumb a { color: var(--dl-text-secondary); }
.dl-breadcrumb a:hover { color: var(--dl-primary); }
.dl-breadcrumb .separator { color: var(--dl-text-placeholder); }
.dl-breadcrumb .current { color: var(--dl-text-primary); font-weight: 500; }

/* ====== 用户信息卡（前台个人中心）====== */
.dl-user-banner {
    background: var(--dl-primary);
    border-radius: var(--dl-radius-lg);
    padding: 22px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.dl-user-banner .avatar {
    width: 60px; height: 60px;
    border-radius: var(--dl-radius-full);
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.dl-user-banner .name { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.dl-user-banner .meta { font-size: 12px; opacity: 0.9; }
.dl-user-banner .balance { margin-left: auto; text-align: right; }
.dl-user-banner .balance-num { font-size: 22px; font-weight: 700; }
.dl-user-banner .balance-label { font-size: 11px; opacity: 0.85; }

/* ====== 动画 ====== */
@keyframes dlSpin { to { transform: rotate(360deg); } }

.dl-loading {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--dl-border);
    border-top-color: var(--dl-primary);
    border-radius: var(--dl-radius-full);
    animation: dlSpin 0.7s linear infinite;
}
.dl-loading.dl-loading-lg { width: 28px; height: 28px; border-width: 3px; }
.dl-loading-wrap { text-align: center; padding: 50px 20px; color: var(--dl-text-secondary); font-size: 13px; }
.dl-loading-wrap .dl-loading { margin-bottom: 10px; }

/* ====== 响应式（手机 / 平板 / PC 三端自适应） ====== */

/* ====== 通用遮罩层（后台侧边栏 / 前台导航抽屉共用） ====== */
.dl-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 160;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.dl-mask.is-show { opacity: 1; visibility: visible; }

/* ====== 后台汉堡按钮 ====== */
.dl-menu-toggle {
    display: none;
    width: 34px; height: 34px;
    border: none; background: transparent;
    color: var(--dl-text-regular);
    font-size: 18px; cursor: pointer;
    border-radius: var(--dl-radius-md);
    align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.dl-menu-toggle:hover { background: var(--dl-primary-light); color: var(--dl-primary); }

/* ====== 前台汉堡按钮 / 抽屉关闭按钮 ====== */
.dl-front-nav-toggle {
    display: none;
    width: 34px; height: 34px;
    border: 1px solid var(--dl-border);
    background: transparent;
    color: var(--dl-text-regular);
    font-size: 18px; cursor: pointer;
    border-radius: var(--dl-radius-md);
    align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.dl-front-nav-toggle:hover { border-color: var(--dl-primary); color: var(--dl-primary); background: var(--dl-primary-light); }
.dl-front-nav-close {
    display: none;
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    border: none; background: transparent;
    color: var(--dl-text-secondary);
    font-size: 16px; cursor: pointer;
    border-radius: var(--dl-radius-md);
    align-items: center; justify-content: center;
    line-height: 1;
    padding: 0;
    z-index: 2;
}
.dl-front-nav-close:hover { background: var(--dl-primary-light); color: var(--dl-primary); }

/* ====== 手机端（< 769px） ====== */
@media (max-width: 768px) {
    /* 后台：侧边栏转为抽屉 + 遮罩 */
    .dl-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: none;
        z-index: 180;
    }
    .dl-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
    }
    .dl-content { margin-left: 0; padding: 14px; }
    .dl-header { padding: 0 12px; }
    .dl-header-logo .logo-text { font-size: 14px; }
    .dl-header-user .user-name { display: none; }
    .dl-menu-toggle { display: inline-flex; }
    /* 后台遮罩层级低于顶栏（顶栏汉堡仍可点击收起） */
    .dl-sidebar-mask { z-index: 170; }

    /* 前台：导航转为右侧抽屉 + 遮罩 */
    .dl-front-header-inner { padding: 0 12px; height: 54px; }
    .dl-front-logo { font-size: 14px; gap: 6px; }
    .dl-front-logo .logo-icon { width: 28px; height: 28px; font-size: 14px; }
    .dl-front-nav-toggle { display: inline-flex; }
    /* 手机端头部空间有限：隐藏用户昵称 */
    .dl-front-user .user-name { display: none; }
    .dl-front-user { padding: 5px; }
    .dl-front-nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 260px;
        max-width: 80vw;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--dl-bg-card);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        padding: 54px 12px 16px;
        z-index: 190;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .dl-front-nav.is-open { transform: translateX(0); }
    .dl-front-nav .dl-front-nav-item {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: var(--dl-radius-md);
    }
    .dl-front-nav-close { display: inline-flex; }

    /* 前台内容与头部 */
    .dl-front-content { padding: 16px 12px 40px; }
    .dl-page-title { font-size: 16px; }
    .dl-section-title { font-size: 18px; }

    /* 工具栏 / 表单 */
    .dl-toolbar { flex-direction: column; align-items: stretch; }
    .dl-toolbar-left, .dl-toolbar-right { width: 100%; }
    .dl-toolbar-search { width: 100%; }
    .dl-form-row { flex-direction: column; }
    .dl-form-row .dl-form-group { min-width: 0; }

    /* 统计卡片 / 商品卡片（2 列铺开） */
    .dl-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dl-stat-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dl-product-grid { grid-template-columns: 1fr; }
    .dl-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dl-feature-card { padding: 20px 14px; }
    .dl-feature-card .icon { width: 44px; height: 44px; font-size: 20px; }

    /* 表格：容器横向滚动 */
    .dl-table-wrap {
        margin: 0 -14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dl-table-wrap .dl-table { min-width: 580px; }

    /* 首页横幅 */
    .dl-front-hero { padding: 28px 18px; }
    .dl-front-hero h1 { font-size: 20px; }
    .dl-front-hero p { font-size: 13px; }

    /* 用户横幅 */
    .dl-user-banner { flex-direction: column; text-align: center; }
    .dl-user-banner .balance { margin-left: 0; text-align: center; }

    /* 弹窗 / 标签页 */
    .dl-modal { max-width: 100%; max-height: 100%; border-radius: 0; }
    .dl-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .dl-tab { white-space: nowrap; }

    /* layui 弹窗手机端自适应 */
    .layui-layer { max-width: calc(100vw - 24px) !important; }
    .layui-layer-page .layui-layer-content { max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ====== 超小屏（< 480px）单列展示 ====== */
@media (max-width: 480px) {
    .dl-stats { grid-template-columns: 1fr; }
    .dl-stat-row { grid-template-columns: 1fr; }
    .dl-feature-grid { grid-template-columns: 1fr; }
    .dl-front-nav { width: 240px; }
}

/* ====== 平板端（769px - 1024px）中间态 ====== */
@media (max-width: 1024px) and (min-width: 769px) {
    .dl-product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .dl-stats { grid-template-columns: repeat(2, 1fr); }
    .dl-stat-row { grid-template-columns: repeat(2, 1fr); }
    .dl-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .dl-content { padding: 16px; }
    .dl-front-content { padding: 20px 16px 44px; }
    .dl-header { padding: 0 16px; }
    .dl-front-header-inner { padding: 0 16px; }
}

/* ====== 工具类 ====== */
.dl-text-center { text-align: center; }
.dl-text-right { text-align: right; }
.dl-text-left { text-align: left; }
.dl-mt-0 { margin-top: 0 !important; }
.dl-mt-8 { margin-top: 8px; }
.dl-mt-16 { margin-top: 16px; }
.dl-mb-0 { margin-bottom: 0 !important; }
.dl-mb-8 { margin-bottom: 8px; }
.dl-mb-16 { margin-bottom: 16px; }
.dl-mb-24 { margin-bottom: 24px; }
.dl-flex { display: flex; }
.dl-flex-center { display: flex; align-items: center; justify-content: center; }
.dl-flex-between { display: flex; align-items: center; justify-content: space-between; }
.dl-gap-8 { gap: 8px; }
.dl-gap-12 { gap: 12px; }
.dl-gap-16 { gap: 16px; }
.dl-text-primary { color: var(--dl-primary); }
.dl-text-success { color: var(--dl-success); }
.dl-text-warning { color: #856404; }
.dl-text-danger { color: var(--dl-danger); }
.dl-text-muted { color: var(--dl-text-secondary); }
.dl-font-bold { font-weight: 700; }
.dl-font-semibold { font-weight: 600; }
.dl-w-full { width: 100%; }
.dl-hidden { display: none !important; }

.dl-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: var(--dl-border-light);
    padding: 1px 5px;
    border-radius: var(--dl-radius-sm);
    font-size: 12px;
}

dl, dt, dd { margin: 0; }

/* ====== 全局文字对比度修复 ====== */
.dl-body h1, .dl-body h2, .dl-body h3, .dl-body h4 {
    color: var(--dl-text-primary) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}
.dl-body p {
    color: var(--dl-text-regular) !important;
    line-height: 1.7 !important;
}
.dl-body .dl-card h1,
.dl-body .dl-card h2,
.dl-body .dl-card h3,
.dl-body .dl-card h4 {
    color: var(--dl-text-primary) !important;
}
.dl-body .dl-card[style*="dark"] h1,
.dl-body .dl-card[style*="dark"] h2,
.dl-body .dl-card[style*="dark"] h3,
.dl-body .dl-card[style*="dark"] h4,
.dl-body .dl-card[style*="dark"] p {
    color: #fff !important;
}
.dl-body .dl-card[style*="#001529"] h1,
.dl-body .dl-card[style*="#001529"] h2,
.dl-body .dl-card[style*="#001529"] h3,
.dl-body .dl-card[style*="#001529"] h4 {
    color: #fff !important;
}
.dl-body .dl-card[style*="#001529"] p {
    color: rgba(255,255,255,0.92) !important;
}
.dl-body .dl-card[style*="#1677ff"] h1,
.dl-body .dl-card[style*="#1677ff"] h2,
.dl-body .dl-card[style*="#1677ff"] h3,
.dl-body .dl-card[style*="#1677ff"] h4 {
    color: #fff !important;
}
.dl-body .dl-card[style*="#1677ff"] p {
    color: rgba(255,255,255,0.92) !important;
}

/* 修复 layui 可能覆盖的文字颜色 */
.layui-layer-page h1, .layui-layer-page h2, .layui-layer-page h3 {
    color: var(--dl-text-primary) !important;
}
.layui-layer-setwin .layui-layer-title {
    color: var(--dl-text-primary) !important;
    font-weight: 600 !important;
}

/* 修复 layui table 文字颜色 */
.dl-body .layui-table td,
.dl-body .layui-table th {
    color: var(--dl-text-regular) !important;
}

/* 修复 layui 表单文字 */
.dl-body .layui-form-label {
    color: var(--dl-text-regular) !important;
}
.dl-body .layui-input,
.dl-body .layui-textarea {
    color: var(--dl-text-primary) !important;
}

/* 修复 layui 弹出层文字 */
.dl-body .layui-layer-content {
    color: var(--dl-text-regular) !important;
}

/* 修复 dl-code 行内代码可见性 */
.dl-code {
    color: #c7254e !important;
    background: #f9f2f4 !important;
    font-weight: 500 !important;
}

/* 修复深色背景卡片内的所有文字 */
.dl-bg-dark-card {
    background: var(--dl-bg-dark) !important;
    color: #fff !important;
}
.dl-bg-dark-card * {
    color: inherit;
}
.dl-bg-dark-card h1,
.dl-bg-dark-card h2,
.dl-bg-dark-card h3,
.dl-bg-dark-card h4 {
    color: #fff !important;
}
.dl-bg-dark-card p {
    color: rgba(255,255,255,0.92) !important;
}

/* 修复支付插件选择区的 code 标签可见性 */
.dl-plugin-item code {
    color: var(--dl-primary) !important;
    background: var(--dl-primary-light) !important;
    padding: 1px 6px !important;
    border-radius: var(--dl-radius-sm) !important;
    font-size: 12px !important;
    font-family: Consolas, Monaco, monospace !important;
}

/* 修复 hero 区域的按钮可见性 */
.dl-front-hero .dl-btn {
    font-weight: 600;
    transition: var(--dl-transition);
}
.dl-front-hero .dl-btn-primary {
    background: var(--dl-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.35) !important;
}
.dl-front-hero .dl-btn-primary:hover {
    background: var(--dl-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.5) !important;
}
.dl-front-hero .dl-btn:not(.dl-btn-primary) {
    background: #fff !important;
    color: #001529 !important;
    border: 1px solid #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.dl-front-hero .dl-btn:not(.dl-btn-primary):hover {
    background: #e6f4ff !important;
    color: #001529 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 修复 hero 区域副标题对比度 */
.dl-front-hero p {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

/* 修复 hero 区域 h1 标题对比度 */
.dl-front-hero h1 {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 修复前台商品卡片按钮 */
.dl-product-card .dl-btn-primary {
    background: var(--dl-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(22, 119, 255, 0.3) !important;
}
.dl-product-card .dl-btn-primary:hover {
    background: var(--dl-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(22, 119, 255, 0.45) !important;
}

/* 修复 shop 页面商品卡片价格和文字可见性 */
.dl-product-card h3 {
    color: var(--dl-text-primary) !important;
    font-weight: 700 !important;
}
.dl-product-card p {
    color: var(--dl-text-secondary) !important;
}
.dl-product-card .dl-text-danger {
    color: var(--dl-danger) !important;
}

/* 修复支付插件选项可见性 */
.pay-option {
    cursor: pointer;
    text-align: center;
    padding: 20px 24px;
    border: 2px solid var(--dl-border);
    border-radius: var(--dl-radius-md);
    transition: all 0.2s;
    flex: 1;
    min-width: 120px;
    max-width: 160px;
    background: #fff;
}
.pay-option:hover {
    border-color: var(--dl-primary);
    background: var(--dl-primary-light);
}
.pay-option .pay-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dl-primary-light);
    color: var(--dl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 8px;
}
.pay-option .pay-name {
    font-size: 13px;
    color: var(--dl-text-primary);
    font-weight: 500;
}
.pay-option .pay-recommend {
    font-size: 11px;
    color: var(--dl-primary);
    margin-top: 2px;
    font-weight: 500;
}

/* 修复订单表格按钮可见性 */
.dl-table .dl-btn-primary {
    background: var(--dl-primary) !important;
    color: #fff !important;
    border-color: var(--dl-primary) !important;
}
.dl-table .dl-btn-primary:hover {
    background: var(--dl-primary-hover) !important;
    border-color: var(--dl-primary-hover) !important;
}

/* 修复标签页文字对比度 */
.dl-tabs .dl-tab {
    color: var(--dl-text-secondary) !important;
    font-weight: 500 !important;
}
.dl-tabs .dl-tab.active {
    color: var(--dl-primary) !important;
    font-weight: 600 !important;
    border-bottom-color: var(--dl-primary) !important;
}

/* 确保 section title 在任何背景下可见 */
.dl-section-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 修复 header 文字 */
.dl-front-header,
.dl-front-header a,
.dl-front-header .dl-nav-btn-login,
.dl-front-header .dl-nav-btn-register {
    transition: all 0.2s ease;
}
.dl-front-header .dl-nav-btn-login {
    background: #fff !important;
    color: var(--dl-primary) !important;
    border: 1.5px solid var(--dl-primary) !important;
    font-weight: 600 !important;
}
.dl-front-header .dl-nav-btn-login:hover {
    background: var(--dl-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25) !important;
}
.dl-front-header .dl-nav-btn-register {
    background: var(--dl-primary) !important;
    color: #fff !important;
    border: 1.5px solid var(--dl-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(22, 119, 255, 0.2);
}
.dl-front-header .dl-nav-btn-register:hover {
    background: var(--dl-primary-hover) !important;
    border-color: var(--dl-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.35) !important;
}
.dl-front-header .dl-nav a {
    color: var(--dl-text-primary) !important;
}
.dl-front-header .dl-nav a:hover {
    color: var(--dl-primary) !important;
}
.dl-front-header .dl-nav a.dl-active {
    color: var(--dl-primary) !important;
    font-weight: 600 !important;
}

/* 修复后台 sidebar 菜单文字 */
.dl-sidebar .dl-menu-item {
    color: #c5d0de !important;
}
.dl-sidebar .dl-menu-item:hover {
    color: #fff !important;
    background: rgba(22, 119, 255, 0.15) !important;
}
.dl-sidebar .dl-menu-item.active {
    color: #fff !important;
    background: var(--dl-primary) !important;
}
.dl-sidebar .dl-menu-item .dl-menu-icon {
    color: inherit !important;
}

/* 确保所有按钮文字清晰可见 */
.dl-btn,
.dl-btn-sm,
.dl-btn-lg,
.dl-btn-block {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* 修复输入框和选择框的 placeholder 颜色 */
.dl-body input::placeholder,
.dl-body textarea::placeholder,
.dl-body input::-webkit-input-placeholder,
.dl-body textarea::-webkit-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* 修复 textarea 在深色卡片中的代码显示 */
.dl-body textarea.dl-code-input {
    background: #0a1929 !important;
    color: #f0f4ff !important;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
}

/* 确保 pre/code 在任何地方都有对比度 */
/* 注意：块级样式（背景/内边距/边框/圆角/外边距）只能作用于 pre 本身。
   若同时作用于内联 code，其跨行时每一行都会被单独绘制边框，
   呈现"每一行一个文本框"的错乱效果，因此 pre code 单独恢复为透明无边框。 */
.dl-body pre,
.dl-body .dl-api-doc pre {
    color: #f0f4ff !important;
    background: #0a1929 !important;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
    line-height: 1.75 !important;
    font-size: 13px !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    margin: 10px 0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    tab-size: 4 !important;
    /* 强制换行：禁用横向滚动条，长代码自动折行 */
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    overflow-x: hidden !important;
}
/* pre 内 code：保持内联、透明、无边框，由外层 pre 统一绘制代码块外观 */
.dl-body pre code,
.dl-body .dl-api-doc pre code {
    display: inline !important;
    color: #f0f4ff !important;
    background: transparent !important;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
    line-height: 1.75 !important;
    font-size: 13px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    tab-size: 4 !important;
    /* 继承 pre 的换行策略，避免横向溢出 */
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}
/* API 文档代码框：自动换行，保证长代码不被横向遮挡 */
.dl-api-doc pre,
.dl-body .dl-api-doc pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* API 文档表格单元格：长内容自动换行，避免撑破表格造成横向遮挡 */
.dl-api-doc table th,
.dl-api-doc table td {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}
/* 代码框右上角复制按钮 */
.dl-api-doc .dl-code-wrap { margin: 10px 0; }
.dl-api-doc .dl-code-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #10233a !important;
    padding: 5px 8px !important;
    border-radius: 6px 6px 0 0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: none !important;
}
.dl-api-doc .dl-code-wrap pre {
    margin: 0 !important;
    border-radius: 0 0 6px 6px !important;
    border-top: none !important;
}
.dl-api-doc .dl-code-copy {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px !important;
    padding: 2px 12px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    cursor: pointer !important;
    transition: background .2s !important;
}
.dl-api-doc .dl-code-copy:hover { background: rgba(255,255,255,0.25) !important; }

/* 行内 code（非 pre 内的）保持浅色背景 */
.dl-body code,
.dl-body .dl-api-doc code {
    background: #f0f5ff !important;
    color: #1677ff !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    font-family: Consolas, Monaco, monospace !important;
}
.dl-body pre code {
    background: transparent !important;
    color: #f0f4ff !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* layui pre/code reset */
.layui-util pre,
.layui-util pre code {
    color: #f0f4ff !important;
    background: #0a1929 !important;
}

/* 修复 layui select 文字颜色 */
.dl-body .layui-select,
.dl-body .layui-select-title input {
    color: var(--dl-text-primary) !important;
}

/* 修复分页文字 */
.dl-body .layui-laypage {
    color: var(--dl-text-secondary) !important;
}
.dl-body .layui-laypage a,
.dl-body .layui-laypage span {
    color: var(--dl-text-regular) !important;
}

/* 修复后台表格操作按钮 */
.dl-body .layui-table .layui-table-cos a {
    color: var(--dl-primary) !important;
}

/* 确保所有 dl-modal 内容区域文字可见 */
.dl-modal-content {
    color: var(--dl-text-regular) !important;
}

/* 修复统计卡片文字 */
.dl-stat-card .dl-stat-value {
    color: var(--dl-primary) !important;
    font-weight: 700 !important;
}
.dl-stat-card .dl-stat-label {
    color: var(--dl-text-secondary) !important;
}

/* 修复用户信息横幅 */
.dl-user-banner .balance {
    color: var(--dl-primary) !important;
    font-weight: 700 !important;
}
.dl-user-banner .label {
    color: var(--dl-text-secondary) !important;
}

/* ============================================================
 * 深色模式（前台深浅色切换）
 *
 * 切换原理：
 *   - 页面渲染前由内联脚本读取 localStorage('dl-theme')，
 *     命中 'dark' 时给 <html> 添加 .dl-dark 类（避免闪烁）；
 *   - 点击导航栏切换按钮可随时切换，选择结果记忆在 localStorage；
 *   - 本作用域统一覆盖 --dl-* 主题变量，并针对少量硬编码白底
 *     的前台区域（导航头/卡片/表格/登录框等）做定向适配。
 * ============================================================ */
html.dl-dark {
    --dl-bg-page: #111418;
    --dl-bg-card: #1c2128;
    --dl-bg: #161b22;
    --dl-text-primary: #e6edf3;
    --dl-text-regular: #d0d7de;
    --dl-text-secondary: #9aa5b1;
    --dl-text-placeholder: #6e7681;
    --dl-text-light: #484f58;
    --dl-border: #3a4149;
    --dl-border-light: #262c33;
    --dl-border-dark: #555c66;
    --dl-primary-light: #12233f;
    --dl-success-light: #14261c;
    --dl-warning-light: #2b2413;
    --dl-danger-light: #2b1d20;
    --dl-info-light: #12263a;
    --dl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --dl-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.45);
    --dl-shadow-lg: 0 3px 8px rgba(0, 0, 0, 0.5);
    --dl-shadow-xl: 0 6px 16px rgba(0, 0, 0, 0.55);
    --dl-shadow-primary: 0 2px 8px rgba(22, 119, 255, 0.35);
}

/* 深色模式下将硬编码白底的关键前台区域切换为主题卡片色 */
html.dl-dark .dl-front-header,
html.dl-dark .dl-front-user-dropdown,
html.dl-dark .dl-feature-card,
html.dl-dark .dl-body .dl-card,
html.dl-dark .dl-card,
html.dl-dark .dl-stat-card,
html.dl-dark .dl-api-key-box,
html.dl-dark .dl-table,
html.dl-dark .dl-auth-card,
html.dl-dark .dl-auth-input,
html.dl-dark .dl-auth-tab.active,
html.dl-dark .dl-api-doc table {
    background: var(--dl-bg-card);
}
html.dl-dark .dl-front-header .dl-nav-btn-login {
    background: var(--dl-bg-card) !important;
}
html.dl-dark .dl-table tbody tr:hover {
    background: #262c33;
}

/* 深色模式下 layui 常用组件适配 */
html.dl-dark .layui-card,
html.dl-dark .layui-panel,
html.dl-dark .layui-input,
html.dl-dark .layui-textarea,
html.dl-dark .layui-select {
    background-color: var(--dl-bg-card);
    color: var(--dl-text-primary);
}
html.dl-dark .layui-table {
    color: var(--dl-text-primary);
}
html.dl-dark .layui-table th,
html.dl-dark .layui-table td {
    background-color: var(--dl-bg-card);
}
html.dl-dark .layui-table-view {
    background-color: var(--dl-bg-card);
}
html.dl-dark .layui-laypage a,
html.dl-dark .layui-laypage span {
    background-color: var(--dl-bg-card) !important;
    color: var(--dl-text-regular) !important;
}