/* ============================================
 * 管理后台 + 代理后台样式
 * 布局：顶部导航 + 主内容
 * 风格：扁平、紧凑、浅色 + 白卡片
 * ============================================ */

:root {
    --primary: #2b3a55;
    --primary-hover: #1e293b;
    --accent: #3b82f6;
    --text: #1f2937;
    --text-soft: #64748b;
    --text-muted: #94a3b8;
    --line: #e6eaf0;
    --line-soft: #eef1f6;
    --bg: #f5f7fb;
    --card: #ffffff;
    --surface: #ffffff;
    --transition: 0s;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.admin-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* ============================================
 * 布局：顶部导航 + 主内容（不再有侧栏）
 * ============================================ */
.admin-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.admin-main {
    flex: 1;
    width: 100%;
    background: var(--bg);
}

/* ============================================
 * 顶部导航条
 * 结构：外框全宽（背景/底边铺满屏幕）+ 内部内容通过 padding 与 admin-content 严格对齐
 * ============================================ */
.admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding-left: max(20px, calc((100% - 1400px) / 2 + 20px));
    padding-right: max(20px, calc((100% - 1400px) / 2 + 20px));
    height: 52px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.admin-logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
}

.admin-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.admin-logo-img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
}

.admin-logo-text {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

.admin-topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
}

.admin-topnav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.admin-topnav-item:hover {
    background: #f1f5f9;
    color: var(--text);
}

.admin-topnav-item.active {
    background: var(--primary);
    color: #fff;
}

.admin-topnav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.admin-topnav-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================
 * 顶栏右侧（hitokoto + 用户菜单）
 * ============================================ */
.admin-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-hitokoto {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.hitokoto-icon { flex-shrink: 0; opacity: 0.6; }
.hitokoto-text { display: inline-block; }

.admin-user-menu { position: relative; }

.admin-user-info {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.admin-user-info:hover {
    background: #f8fafc;
    border-color: var(--line);
}

.admin-user-avatar {
    border-radius: 50%;
    overflow: hidden;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: var(--primary);
}

.admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-account {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.admin-user-chevron {
    color: var(--text-muted);
}

.admin-agent-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.balance-item {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    background: #f1f5f9;
    color: var(--text-soft);
}

.balance-money { background: #ecfdf5; color: #047857; }
.balance-discount { background: #fffbeb; color: #b45309; }

.admin-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
    min-width: 170px;
    padding: 4px;
    display: none;
    z-index: 1000;
}

.admin-user-dropdown.show { display: block; }

.admin-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.admin-dropdown-item:hover {
    background: #f1f5f9;
    color: var(--text);
}

.admin-dropdown-item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.admin-dropdown-divider {
    height: 1px;
    background: var(--line);
    margin: 4px 8px;
}

.admin-dropdown-logout { color: var(--danger); }
.admin-dropdown-logout:hover { background: #fef2f2; color: #b91c1c; }

/* ============================================
 * 主内容区
 * ============================================ */
.admin-content {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 14px;
}

/* ============================================
 * 卡片
 * ============================================ */
.admin-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.admin-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}

.admin-table-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

/* ============================================
 * 表单
 * ============================================ */
.admin-content .form-group,
.admin-modal .form-group {
    margin-bottom: 12px;
}

.admin-content .form-group label,
.admin-modal .form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
}

.admin-content .form-group input,
.admin-content .form-group textarea,
.admin-content .form-group select,
.admin-modal .form-group input,
.admin-modal .form-group textarea,
.admin-modal .form-group select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 13px;
    background-color: #fff;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.admin-content .form-group input:focus,
.admin-content .form-group textarea:focus,
.admin-content .form-group select:focus,
.admin-modal .form-group input:focus,
.admin-modal .form-group textarea:focus,
.admin-modal .form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 58, 85, 0.08);
}

.admin-content .form-group select,
.admin-modal .form-group select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}

.admin-content .form-group input::placeholder,
.admin-content .form-group textarea::placeholder,
.admin-modal .form-group input::placeholder,
.admin-modal .form-group textarea::placeholder {
    color: var(--text-muted);
}

/* ============================================
 * 按钮
 * ============================================ */
.admin-content .btn,
.admin-modal .btn {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #fff;
    color: var(--text-soft);
    line-height: 1.4;
    white-space: nowrap;
}

.admin-content .btn:disabled,
.admin-modal .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.admin-content .btn-primary,
.admin-modal .btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.admin-content .btn-primary:hover:not(:disabled),
.admin-modal .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.admin-content .btn-secondary,
.admin-modal .btn-secondary {
    background: #fff;
    color: var(--text-soft);
    border-color: var(--line);
}

.admin-content .btn-secondary:hover:not(:disabled),
.admin-modal .btn-secondary:hover:not(:disabled) {
    background: #f8fafc;
    color: var(--text);
    border-color: #cbd5e1;
}

.admin-content .btn-danger,
.admin-modal .btn-danger {
    background: #fff;
    color: var(--danger);
    border-color: #fecaca;
}

.admin-content .btn-danger:hover:not(:disabled),
.admin-modal .btn-danger:hover:not(:disabled) {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.admin-content .btn-warning,
.admin-modal .btn-warning {
    background: #fff;
    color: var(--warning);
    border-color: #fde68a;
}

.admin-content .btn-warning:hover:not(:disabled),
.admin-modal .btn-warning:hover:not(:disabled) {
    background: #fffbeb;
    color: #b45309;
    border-color: #fcd34d;
}

/* ============================================
 * 表格
 * ============================================ */
.admin-content .admin-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.admin-content .admin-table thead th {
    background: #f8fafc;
    padding: 9px 14px;
    text-align: left;
    font-size: 12px;
    color: var(--text-soft);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--line);
}

.admin-content .admin-table tbody tr {
    transition: background 0.15s;
}

.admin-content .admin-table tbody tr:hover {
    background: #f8fafc;
}

.admin-content .admin-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
    vertical-align: middle;
}

.admin-content .admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-content .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-content .admin-table tbody td > * {
    vertical-align: middle;
}

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

.admin-stat-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.admin-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.admin-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================
 * Dashboard hero（首页概览的渐变块——可选用）
 * ============================================ */
.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 16px;
}

.dashboard-hero::before,
.dashboard-hero::after {
    display: none !important;
}

.hero-left { position: relative; z-index: 1; }

.hero-greeting {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.hero-avatar {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--primary);
    border: none;
}

.hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.hero-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.hero-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-soft);
}

.hero-stat-pill svg { width: 14px; height: 14px; color: var(--text-muted); }
.hero-stat-pill strong { color: var(--text); font-weight: 600; }

/* 快捷入口 */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.quick-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}

.quick-card:hover {
    border-color: var(--primary);
    background: #f8fafc;
}

.quick-card-left {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}

.quick-card-left svg { width: 18px; height: 18px; }

.quick-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.quick-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================
 * 弹窗
 * ============================================ */
.admin-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.admin-modal {
    background: #fff;
    border-radius: 8px;
    width: 420px;
    max-width: 92vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.admin-modal-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.admin-modal-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.admin-modal-form {
    padding: 16px 18px;
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: #f8fafc;
}

/* 旧的 admin-modal（无遮罩的）兼容 */
.admin-modal {
    background: #fff;
    border-radius: 8px;
}

.admin-modal-form .form-group { margin-bottom: 12px; }
.admin-modal-form .form-group:last-child { margin-bottom: 0; }

/* ============================================
 * Toast
 * ============================================ */
.admin-toast {
    position: fixed;
    top: 70px;
    right: 20px;
    padding: 8px 14px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.admin-toast.success { background: var(--success); }
.admin-toast.error { background: var(--danger); }

/* ============================================
 * 工具栏 / 过滤栏
 * ============================================ */
.admin-toolbar,
.admin-account-filter-row,
.admin-filter-row,
.card-type-filter-row,
.card-type-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
}

.admin-account-filter-input,
.admin-account-filter-select,
.admin-toolbar input[type="text"],
.card-type-filter-row input,
.card-type-filter-row select {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    min-width: 160px;
}

.admin-account-filter-select,
.card-type-filter-row select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}

.admin-account-filter-input:focus,
.admin-toolbar input[type="text"]:focus,
.card-type-filter-row input:focus,
.card-type-filter-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 58, 85, 0.08);
}

/* ============================================
 * 标签 / 徽章
 * ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
    background: #f1f5f9;
    color: var(--text-soft);
}
.badge-success { background: #ecfdf5; color: #047857; }
.badge-primary { background: #eff6ff; color: #1d4ed8; }
.badge-warning { background: #fffbeb; color: #b45309; }
.badge-danger { background: #fef2f2; color: #b91c1c; }

.btn-sm { padding: 4px 10px !important; font-size: 12px !important; border-radius: 4px !important; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
}

.status-active { background: #ecfdf5; color: #047857; }
.status-expired { background: #fef2f2; color: #b91c1c; }
.status-permanent { background: #eff6ff; color: #1d4ed8; }

.online-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-soft);
}
.online-status .online-dot,
.online-status .offline-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.online-status.online { color: var(--success); }
.online-status.online .online-dot { background: var(--success); }
.online-status.offline { color: var(--text-muted); }
.online-status.offline .offline-dot { background: #cbd5e1; }

/* ============================================
 * 分页
 * ============================================ */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
    flex-wrap: wrap;
    background: #f8fafc;
}

/* ============================================
 * 空状态
 * ============================================ */
.empty-row {
    padding: 36px 16px !important;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================
 * 响应式
 * ============================================ */
@media (max-width: 960px) {
    .admin-logo-text { display: none; }
    .admin-hitokoto { max-width: 200px; }
}

@media (max-width: 720px) {
    .admin-topbar {
        padding-left: max(14px, calc((100% - 1400px) / 2 + 14px));
        padding-right: max(14px, calc((100% - 1400px) / 2 + 14px));
        gap: 10px;
        height: auto;
        min-height: 52px;
        flex-wrap: wrap;
    }
    .admin-topnav { order: 3; width: 100%; padding: 6px 0; border-top: 1px solid var(--line); }
    .admin-topnav-item { font-size: 12px; padding: 5px 10px; }
    .admin-header { padding: 6px 10px; flex-wrap: wrap; }
    .admin-hitokoto { display: none; }
    .admin-user-account { display: none; }
    .admin-content { padding: 14px; }
}

@media (max-width: 480px) {
    .admin-topbar {
        padding-left: max(10px, calc((100% - 1400px) / 2 + 10px));
        padding-right: max(10px, calc((100% - 1400px) / 2 + 10px));
    }
    .admin-content { padding: 10px; }
    .admin-stats-grid { grid-template-columns: 1fr; }
    .dashboard-hero { flex-direction: column; align-items: stretch; }
}

/* ============================================
 * 通用覆盖：去掉所有页面内联"花里胡哨"样式
 * - 渐变背景 → 纯白/纯色
 * - 圆角统一 6-8px
 * - 删除装饰图案与动画
 * - 紧凑排版
 * ============================================ */

/* 全局抑制：所有可能出现的渐变背景 */
.admin-page,
.admin-content,
.admin-card,
.admin-modal,
.dashboard-hero,
.dashboard-section,
.dashboard-container,
.quick-card,
.section-card,
.section-header,
.stat-card,
.hero-stat-pill,
.admin-toolbar,
.admin-table-wrap,
.admin-stat-item,
.admin-tab-content,
.admin-tab-btn,
.admin-modal-header,
.admin-modal-actions,
.admin-modal-form,
.hero-avatar,
.hero-btn-row,
.quick-card-left,
.quick-grid,
.stat-breakdown,
.stat-main {
    background-image: none !important;
    animation: none !important;
}

/* 渐变背景直接清掉（覆盖之前可能的 background） */
.dashboard-hero,
.quick-card,
.section-card,
.stat-card,
.hero-stat-pill {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
}

/* 阴影全部去掉（太花里胡哨） */
.admin-page,
.admin-card,
.admin-modal,
.dashboard-hero,
.dashboard-section,
.quick-card,
.section-card,
.stat-card,
.admin-table-wrap,
.admin-modal-header,
.admin-modal-actions,
.hero-stat-pill,
.quick-card:hover,
.stat-card:hover {
    box-shadow: none !important;
}

/* 悬停位移/缩放动画去掉 */
.quick-card,
.quick-card:hover,
.stat-card,
.stat-card:hover,
.admin-table tbody tr,
.admin-table tbody tr:hover,
.admin-card,
.admin-card:hover,
.admin-btn,
.admin-btn:hover {
    transform: none !important;
    transition: none !important;
}

/* Hover 背景色简化 */
.quick-card:hover { background: #f8fafc !important; border-color: var(--primary) !important; }
.stat-card:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; }

/* 通用容器 */
.admin-content { padding: 16px 20px !important; max-width: 1400px; }
.dashboard-container { max-width: 1400px; margin: 0 auto; }
.dashboard-section { margin-bottom: 16px; }
.dashboard-section:last-child { margin-bottom: 0; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0; border: none; background: none; }
.section-header h2 { font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 !important; padding: 0 !important; border: none !important; }
.section-header-line { display: none !important; }

/* Dashboard hero：渐变 → 白卡紧凑 */
.dashboard-hero {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    box-shadow: none !important;
}
.dashboard-hero::before,
.dashboard-hero::after { display: none !important; }

.hero-left { position: relative; z-index: 1; }
.hero-greeting { display: flex; align-items: center; gap: 12px; margin-bottom: 0 !important; }
.hero-avatar { width: 40px !important; height: 40px !important; border-radius: 6px !important; overflow: hidden; flex-shrink: 0; border: none !important; }
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-title { font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important; margin: 0 !important; }
.hero-subtitle { font-size: 12px !important; color: var(--text-muted) !important; margin: 2px 0 0 !important; }
.hero-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-stat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: #f8fafc !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    color: var(--text-soft) !important;
    box-shadow: none !important;
}
.hero-stat-pill svg { width: 12px !important; height: 12px !important; color: var(--text-muted) !important; opacity: 0.7 !important; }
.hero-stat-pill strong { color: var(--text); font-weight: 600; }

/* 快捷入口卡片 */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.quick-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transform: none !important;
}
.quick-card:hover { background: #f8fafc !important; border-color: var(--primary) !important; transform: none !important; }
.quick-card-left {
    width: 32px !important; height: 32px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    color: var(--primary) !important;
}
.quick-card-left svg { width: 16px !important; height: 16px !important; }
.quick-card-title { font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; }
.quick-card-desc { font-size: 11.5px !important; color: var(--text-muted) !important; margin-top: 2px !important; }
.quick-card-arrow { display: none !important; }

/* 统计卡片 */
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
.stat-card::before { display: none !important; }
.stat-card:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; transform: none !important; box-shadow: none !important; }
.stat-card-icon {
    width: 32px !important; height: 32px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-soft) !important;
}
.stat-card-value { font-size: 20px !important; font-weight: 700 !important; color: var(--text) !important; }
.stat-card-label { font-size: 12px !important; color: var(--text-muted) !important; }

/* 通用 .admin-card */
.admin-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}
.admin-card h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 0 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: none !important;
}

/* Tab 切换 */
.admin-content-tabs,
.admin-tabs {
    display: flex !important;
    gap: 2px !important;
    border-bottom: 1px solid var(--line) !important;
    margin-bottom: 14px !important;
    background: none !important;
}
.admin-tab-btn,
.admin-tab {
    padding: 7px 14px !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: var(--text-soft) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.admin-tab-btn:hover,
.admin-tab:hover { color: var(--text) !important; background: transparent !important; transform: none !important; }
.admin-tab-btn.active,
.admin-tab.active { color: var(--primary) !important; border-bottom-color: var(--primary) !important; background: transparent !important; box-shadow: none !important; }

/* 表格 */
.admin-table {
    border-collapse: collapse !important;
    width: 100% !important;
    background: #fff !important;
    font-size: 13px !important;
}
.admin-table thead th {
    background: #f8fafc !important;
    background-image: none !important;
    padding: 9px 14px !important;
    text-align: left !important;
    font-size: 12px !important;
    color: var(--text-soft) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-bottom: 1px solid var(--line) !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.admin-table tbody tr { transition: none !important; }
.admin-table tbody tr:hover { background: #f8fafc !important; }
.admin-table tbody td {
    padding: 9px 14px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    color: var(--text) !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    background: transparent !important;
}
.admin-table tbody tr:last-child td { border-bottom: none; }

/* 表单 */
.admin-content .form-group,
.admin-modal .form-group { margin-bottom: 12px !important; }
.admin-content .form-group label,
.admin-modal .form-group label {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-soft) !important;
    background: none !important;
}
.admin-content .form-group input,
.admin-content .form-group textarea,
.admin-content .form-group select,
.admin-modal .form-group input,
.admin-modal .form-group textarea,
.admin-modal .form-group select {
    width: 100% !important;
    padding: 7px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--text) !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-sizing: border-box !important;
}
.admin-content .form-group input:focus,
.admin-content .form-group textarea:focus,
.admin-content .form-group select:focus,
.admin-modal .form-group input:focus,
.admin-modal .form-group textarea:focus,
.admin-modal .form-group select:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(43, 58, 85, 0.08) !important;
}
.admin-content .form-group input::placeholder,
.admin-content .form-group textarea::placeholder,
.admin-modal .form-group input::placeholder,
.admin-modal .form-group textarea::placeholder { color: var(--text-muted) !important; }

/* 按钮 */
.admin-content .btn,
.admin-modal .btn,
.admin-btn {
    padding: 6px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--text-soft) !important;
    box-shadow: none !important;
    transition: all 0.18s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.admin-content .btn:hover,
.admin-modal .btn:hover,
.admin-btn:hover { background: #f8fafc !important; color: var(--text) !important; border-color: #cbd5e1 !important; transform: none !important; box-shadow: none !important; }
.admin-content .btn-primary,
.admin-modal .btn-primary {
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.admin-content .btn-primary:hover,
.admin-modal .btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: #fff !important; transform: none !important; }
.admin-content .btn-secondary,
.admin-modal .btn-secondary { background: #fff !important; color: var(--text-soft) !important; }
.admin-content .btn-success,
.admin-modal .btn-success { background: #10b981 !important; background-image: none !important; color: #fff !important; border-color: #059669 !important; }
.admin-content .btn-success:hover,
.admin-modal .btn-success:hover { background: #059669 !important; border-color: #047857 !important; color: #fff !important; transform: none !important; box-shadow: none !important; }
.admin-content .btn-danger,
.admin-modal .btn-danger { background: #fff !important; color: var(--danger) !important; border-color: #fecaca !important; }
.admin-content .btn-danger:hover,
.admin-modal .btn-danger:hover { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; }
.admin-content .btn-warning,
.admin-modal .btn-warning { background: #fff !important; color: var(--warning) !important; border-color: #fde68a !important; }
.admin-content .btn-warning:hover,
.admin-modal .btn-warning:hover { background: #fffbeb !important; color: #b45309 !important; border-color: #fcd34d !important; }

/* 弹窗 */
.admin-modal {
    background: #fff !important;
    background-image: none !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.admin-modal-header {
    padding: 12px 18px !important;
    background: #f8fafc !important;
    background-image: none !important;
    border-bottom: 1px solid var(--line) !important;
}
.admin-modal-header h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 !important;
}
.admin-modal-form { padding: 14px 18px !important; background: #fff !important; }
.admin-modal-actions {
    padding: 10px 18px !important;
    background: #f8fafc !important;
    background-image: none !important;
    border-top: 1px solid var(--line) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* 工具栏/过滤栏 */
.admin-toolbar,
.card-type-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

/* 标签/徽章 */
.badge,
.status-badge,
.status-pill,
.tag,
.label-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    color: var(--text-soft) !important;
    border: none !important;
    box-shadow: none !important;
}
.badge-success { background: #ecfdf5 !important; color: #047857 !important; }
.badge-primary { background: #eff6ff !important; color: #1d4ed8 !important; }
.badge-warning { background: #fffbeb !important; color: #b45309 !important; }
.badge-danger { background: #fef2f2 !important; color: #b91c1c !important; }
.badge-info { background: #f0f9ff !important; color: #0369a1 !important; }

/* 页面标题 */
.admin-page-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* 空状态 */
.empty-row,
.empty-state {
    padding: 36px 16px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    background: none !important;
}

/* Toast */
.admin-toast {
    position: fixed !important;
    top: 70px !important;
    right: 20px !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 13px !important;
    z-index: 9999 !important;
    background-image: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}
.admin-toast.success { background: var(--success) !important; }
.admin-toast.error { background: var(--danger) !important; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); }

/* 强制 body 简洁底色 */
body.admin-page { background-color: var(--bg) !important; }

/* 隐藏无关装饰元素 */
.dashboard-hero .hero-emoji,
.stat-card-sparkle,
.quick-card-badge,
.section-card-decoration,
.hero-decoration,
.bg-blur,
.bg-glow {
    display: none !important;
}

/* 紧凑表格行高 */
.admin-table tbody td { line-height: 1.5 !important; }

/* 按钮组 */
.actions,
.btn-group {
    display: inline-flex !important;
    gap: 4px !important;
    align-items: center !important;
}
.admin-topbar-user {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-topbar-user .admin-user-menu { position: relative; }
.admin-topbar-user .admin-user-info {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 3px;
    border-radius: 4px;
    background: transparent;
    transition: background 0.18s;
    border: 1px solid transparent;
}
.admin-topbar-user .admin-user-info:hover {
    background: #f1f5f9;
    border-color: var(--line);
}
.admin-topbar-user .admin-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--primary);
}
.admin-topbar-user .admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-topbar-user .admin-user-account {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}
.admin-topbar-user .admin-user-chevron { color: var(--text-muted); }
.admin-topbar-user .admin-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    min-width: 160px;
    padding: 4px;
    display: none;
    z-index: 1000;
}
.admin-topbar-user .admin-user-dropdown.show { display: block; }
.admin-topbar-user .admin-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}
.admin-topbar-user .admin-dropdown-item:hover { background: #f1f5f9; color: var(--text); }
.admin-topbar-user .admin-dropdown-item svg { width: 14px; height: 14px; opacity: 0.6; }
.admin-topbar-user .admin-dropdown-divider { height: 1px; background: var(--line); margin: 4px 6px; }
.admin-topbar-user .admin-dropdown-logout { color: var(--danger); }
.admin-topbar-user .admin-dropdown-logout:hover { background: #fef2f2; color: #b91c1c; }
.admin-topbar-user .admin-agent-balance {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
}
.admin-topbar-user .balance-item {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    background: #f1f5f9;
    color: var(--text-soft);
}
.admin-topbar-user .balance-money { background: #ecfdf5; color: #047857; }
.admin-topbar-user .balance-discount { background: #fffbeb; color: #b45309; }
@media (max-width: 720px) {
    .admin-topbar-user .admin-user-account { display: none; }
    .admin-topbar-user .admin-agent-balance { display: none; }
}

/* ============================================
 * 子表统一规则（修复 admin-table-users / -agents / -cards / -zone-logs 等所有子类）
 * 这些表之前在旧 admin.css 里有 nth-child 宽度规则，
 * 重写后丢失，导致列宽混乱。
 * 这里强制统一应用通用 admin-table 样式。
 * ============================================ */
.admin-content .admin-table[class*="admin-table-"] thead th,
.admin-content .admin-table[class*="admin-table-"] tbody td {
    padding: 9px 14px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    background: transparent !important;
}
.admin-content .admin-table[class*="admin-table-"] thead th {
    background: #f8fafc !important;
    color: var(--text-soft) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}
.admin-content .admin-table[class*="admin-table-"] tbody tr { transition: none !important; }
.admin-content .admin-table[class*="admin-table-"] tbody tr:hover { background: #f8fafc !important; }
.admin-content .admin-table[class*="admin-table-"] tbody td {
    color: var(--text) !important;
    border-bottom: 1px solid var(--line-soft) !important;
}
.admin-content .admin-table[class*="admin-table-"] tbody tr:last-child td { border-bottom: none !important; }
.admin-content .admin-table[class*="admin-table-"] th,
.admin-content .admin-table[class*="admin-table-"] td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 单元格中的彩色徽标/金额 样式统一 */
.admin-content .admin-table .price-badge,
.admin-content .admin-table .days-badge,
.admin-content .admin-table .expire-badge,
.admin-content .admin-table .user-status,
.admin-content .admin-table .status-badge,
.admin-content .admin-table .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    background: #f1f5f9 !important;
    color: var(--text-soft) !important;
}

/* cell-id 等小标识列：左对齐紧凑 */
.admin-content .admin-table .cell-id {
    font-family: 'Menlo','Consolas','SFMono-Regular',monospace !important;
    font-size: 12.5px !important;
    color: var(--text-soft) !important;
}

/* 表格内的小徽标颜色 */
.admin-content .admin-table .expire-active { background: #ecfdf5 !important; color: #047857 !important; }
.admin-content .admin-table .expire-warning { background: #fffbeb !important; color: #b45309 !important; }
.admin-content .admin-table .expire-expired { background: #fef2f2 !important; color: #b91c1c !important; }
.admin-content .admin-table .expire-permanent { background: #eff6ff !important; color: #1d4ed8 !important; }
.admin-content .admin-table .status-active { background: #ecfdf5 !important; color: #047857 !important; }
.admin-content .admin-table .status-banned { background: #fef2f2 !important; color: #b91c1c !important; }
.admin-content .admin-table .status-permanent { background: #eff6ff !important; color: #1d4ed8 !important; }
.admin-content .admin-table .online-status { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; color: var(--text-soft) !important; }

/* 操作列里的按钮紧凑 */
.admin-content .admin-table .actions,
.admin-content .admin-table .btn-group {
    display: inline-flex !important;
    gap: 4px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* ============================================
 * Tab 关键修复：默认隐藏非激活 tab
 * （这是 admin.css 重写时漏掉的规则，导致多个 tab-content 同时显示）
 * ============================================ */
.admin-content .admin-tab-content,
.admin-content .admin-tab-panel,
.admin-content > .admin-tabs > .admin-tab-content {
    display: none !important;
}
.admin-content .admin-tab-content.active,
.admin-content .admin-tab-panel.active,
.admin-content > .admin-tabs > .admin-tab-content.active {
    display: block !important;
}

/* ============================================
 * 表格关键修复：table-layout: fixed + 通用列宽
 * （之前表格无 width 导致列宽按内容自动拉伸 → 视觉混乱）
 * ============================================ */
.admin-content .admin-table,
.admin-content .admin-table[class*=admin-table-] {
    table-layout: auto !important;
    width: 100% !important;
}

/* 表头默认行为：内容过长省略 */
.admin-content .admin-table th,
.admin-content .admin-table td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    vertical-align: middle !important;
    min-width: 60px !important;
}

/* 列宽建议 */
.admin-content .admin-table th input[type=checkbox],
.admin-content .admin-table td input[type=checkbox] {
    width: 14px !important;
    height: 14px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}
.admin-content .admin-table th:first-child,
.admin-content .admin-table td:first-child {
    padding-left: 14px !important;
    min-width: 40px !important;
}
.admin-content .admin-table th:last-child,
.admin-content .admin-table td:last-child {
    padding-right: 14px !important;
    min-width: 220px !important;
}
.admin-content .admin-table .actions,
.admin-content .admin-table .btn-group {
    white-space: nowrap !important;
}
.admin-content .admin-table .badge,
.admin-content .admin-table .status-badge,
.admin-content .admin-table .expire-badge {
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================
 * 翻页按钮完整样式（修复 .btn-page / .pagination-left / .pagination-right）
 * ===================================================== */
.admin-pagination {
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.admin-pagination .pagination-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    font-size: 12px !important;
    color: var(--text-soft) !important;
}
.admin-pagination .pagination-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}
.admin-pagination .pagination-select {
    padding: 4px 24px 4px 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    background: #fff !important;
    color: var(--text) !important;
    height: 28px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 10px !important;
}
.admin-pagination .btn-page,
.admin-pagination .btn-page-num {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--text-soft) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
    box-shadow: none !important;
}
.admin-pagination .btn-page:hover:not(:disabled),
.admin-pagination .btn-page-num:hover:not(:disabled) {
    background: #f1f5f9 !important;
    color: var(--text) !important;
    border-color: #cbd5e1 !important;
}
.admin-pagination .btn-page:disabled,
.admin-pagination .btn-page-num:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
}
.admin-pagination .btn-page.active,
.admin-pagination .btn-page-num.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.admin-pagination .btn-page.active:hover,
.admin-pagination .btn-page-num.active:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}
.admin-pagination .btn-page-num[data-page] {
    cursor: pointer !important;
}

/* 翻页信息文字 */
.admin-pagination .pagination-info {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-left: 4px !important;
    white-space: nowrap !important;
}

/* ============================================
 * 登录页：完全对齐 F:\8.AI编写\xz.qfcc.cc\1\admin\login.html
 * - 隐藏左分栏，右侧居中卡片
 * - 360px 卡片，深色渐变背景
 * ============================================ */
.login-page {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.login-page::before, .login-page::after { display: none !important; }
@keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.8; } }

/* 登录容器：360px 卡片 */
.login-container {
    display: block !important;
    max-width: 360px !important;
    width: 100% !important;
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    padding: 28px 30px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 隐藏左侧分栏：参考文件没有左侧 */
.login-container .login-left,
.login-page .login-left {
    display: none !important;
}

/* 右侧：占满容器 */
.login-right {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    flex: none !important;
    width: 100% !important;
}
.login-form-header {
    text-align: center !important;
    margin-bottom: 20px !important;
}
.login-form-header h1,
.login-form-header h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 4px !important;
    text-align: center !important;
}
.login-form-header p {
    color: #94a3b8 !important;
    font-size: 12px !important;
    margin: 0 !important;
    text-align: center !important;
}

/* 表单 */
.login-form .form-group,
.form-group {
    margin-bottom: 12px !important;
}
.login-form .form-group label,
.form-group label {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
}
.login-form input,
.login-form select,
.login-form textarea,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100% !important;
    padding: 7px 10px !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    background: #fff !important;
    color: #1f2937 !important;
    font-family: inherit !important;
    transition: all 0.18s !important;
    box-sizing: border-box !important;
}
.login-form input:focus,
.form-group input:focus {
    outline: none !important;
    border-color: #2b3a55 !important;
    box-shadow: 0 0 0 3px rgba(43, 58, 85, 0.08) !important;
}

/* 登录按钮：占满 */
.btn-login,
.login-form button.btn-primary,
.login-form button[type=submit] {
    width: 100% !important;
    padding: 8px 16px !important;
    background: #2b3a55 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.18s !important;
    margin-top: 6px !important;
    box-shadow: none !important;
}
.btn-login:hover,
.login-form button.btn-primary:hover {
    background: #1e293b !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 链接 / 分割线 */
.login-divider {
    margin: 18px 0 !important;
    color: #94a3b8 !important;
}
.login-divider span { font-size: 11px !important; }
.login-divider::before, .login-divider::after { background: #e6eaf0 !important; }

/* 错误信息 */
.login-error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
}

/* ============================================
 * 全局统一：admin/index.html  ds-* 类 → 后台风格
 * ============================================ */
.ds-page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    padding: 16px 20px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    flex-wrap: wrap !important;
}
.ds-page-head h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 !important;
}
.ds-crumbs {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
}
.ds-page-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.ds-date {
    font-size: 12px !important;
    color: var(--text-soft) !important;
    padding: 4px 10px !important;
    background: #f8fafc !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
}
.ds-user-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 10px 3px 3px !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
}
.ds-avatar-sm {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: var(--primary) !important;
    flex-shrink: 0 !important;
}
.ds-avatar-sm img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.ds-user-chip strong {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
}

/* ds-section 与 section-title */
.ds-section {
    margin-bottom: 16px !important;
}
.ds-section:last-child {
    margin-bottom: 0 !important;
}
.ds-section-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ds-sub {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
}

/* 快捷入口：ds-quick-grid / ds-quick-card → 对齐 quick-card */
.ds-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}
.ds-quick-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 0.15s, background 0.15s !important;
}
.ds-quick-card:hover {
    border-color: var(--primary) !important;
    background: #f8fafc !important;
    transform: none !important;
    box-shadow: none !important;
}
.ds-quick-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--primary) !important;
}
.ds-quick-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.ds-quick-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
.ds-quick-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.ds-quick-desc {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

/* 统计卡片：ds-stats / ds-stat-card */
.ds-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}
.ds-stat-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
.ds-stat-card::before { display: none !important; }
.ds-stat-card:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: none !important;
    box-shadow: none !important;
}
.ds-stat-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.2 !important;
}
.ds-stat-label {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
}
.ds-stat-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
}
.ds-stat-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    color: var(--text-soft) !important;
}
.ds-stat-meta-item strong {
    color: var(--text) !important;
    font-weight: 600 !important;
}
.ds-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.ds-dot-green { background: #10b981 !important; }
.ds-dot-red { background: #ef4444 !important; }
.ds-dot-blue { background: #3b82f6 !important; }
.ds-dot-slate { background: #64748b !important; }
.ds-dot-amber { background: #f59e0b !important; }
.ds-dot-purple { background: #8b5cf6 !important; }

/* 状态明细 3 栏：ds-detail-grid / ds-info-card */
.ds-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}
.ds-info-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
}
.ds-info-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line-soft) !important;
}
.ds-info-card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.ds-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ds-info-list li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    font-size: 12.5px !important;
    border-bottom: 1px dashed var(--line-soft) !important;
}
.ds-info-list li:last-child { border-bottom: none !important; }
.ds-label { color: var(--text-soft) !important; }
.ds-value {
    color: var(--text) !important;
    font-weight: 600 !important;
    font-family: 'Menlo','Consolas','SFMono-Regular',monospace !important;
}

/* ============================================
 * agent 代理后台：action-card 彩色卡 → 统一后台白卡
 * ============================================ */
.actions-section { margin-bottom: 16px !important; }
.actions-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 10px !important;
}
.action-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 0.15s, background 0.15s !important;
    position: relative !important;
}
.action-card:hover {
    border-color: var(--primary) !important;
    background: #f8fafc !important;
    transform: none !important;
    box-shadow: none !important;
}
.action-card.blue,
.action-card.green,
.action-card.red,
.action-card.purple,
.action-card.amber {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.action-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--primary) !important;
}
.action-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
}
.action-icon.blue, .action-icon.green,
.action-icon.red, .action-icon.purple,
.action-icon.amber {
    background: #f1f5f9 !important;
    color: var(--primary) !important;
    background-image: none !important;
}
.action-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.action-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.action-desc {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.action-arrow { display: none !important; }

/* agent 首页文章列表 */
.articles-section { margin-bottom: 0 !important; }
.articles-section .section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.articles-section .section-header h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.articles-section .section-icon {
    display: none !important;
}
.section-header-line { display: none !important; }
.article-list {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.article-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    transition: background 0.15s !important;
}
.article-item:last-child { border-bottom: none !important; }
.article-item:hover { background: #f8fafc !important; }
.article-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
}
.article-title {
    font-size: 13px !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.article-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: #f1f5f9 !important;
    color: var(--text-soft) !important;
    flex-shrink: 0 !important;
}
.article-badge.top { background: #fffbeb !important; color: #b45309 !important; }
.article-badge.category { background: #eff6ff !important; color: #1d4ed8 !important; }
.article-meta {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.article-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.article-date svg { width: 12px !important; height: 12px !important; }
.empty-articles {
    padding: 24px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

/* agent 模态弹窗统一 */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
}
.modal-content {
    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    width: 420px !important;
    max-width: 92vw !important;
    overflow: hidden !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
}
.modal-header {
    padding: 12px 18px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--line) !important;
}
.modal-header h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 !important;
}
.modal-body { padding: 14px 18px !important; }
.modal-footer {
    padding: 10px 18px !important;
    background: #f8fafc !important;
    border-top: 1px solid var(--line) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}
.recharge-result { display: none; margin-top: 12px !important; }
.recharge-success-box {
    padding: 12px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 6px !important;
    text-align: center !important;
}
.recharge-success-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #047857 !important;
    margin-bottom: 4px !important;
}
.recharge-success-amount {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #059669 !important;
}
.recharge-success-balance {
    font-size: 12px !important;
    color: #047857 !important;
    margin-top: 4px !important;
}

/* ============================================
 * changelog / update-log 更新日志 → 后台风格
 * ============================================ */
body.changelog-page,
body.update-log-page,
.changelog-body,
.update-log-body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif !important;
}
.changelog-body .header,
.update-log-body .header {
    background: #fff !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 16px 20px !important;
    text-align: left !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.changelog-body .header h1,
.update-log-body .header h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 auto !important;
    max-width: 800px !important;
    text-align: left !important;
    letter-spacing: 0 !important;
}
.changelog-body .header p,
.update-log-body .header p {
    display: none !important;
}
.changelog-body .main-container,
.update-log-body .main-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}
.changelog-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.version-list {
    position: relative !important;
    padding: 16px 20px 16px 48px !important;
    max-height: none !important;
    overflow: visible !important;
}
.timeline-line {
    position: absolute !important;
    left: 20px !important;
    top: 24px !important;
    bottom: 24px !important;
    width: 2px !important;
    background: var(--line) !important;
    background-image: none !important;
    border-radius: 1px !important;
}
.version-item {
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.version-item:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.version-item + .version-item {
    border-top: 1px dashed var(--line-soft) !important;
    padding-top: 16px !important;
    margin-top: 0 !important;
}
.version-item:hover {
    background: none !important;
    border-top-color: var(--line-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}
.timeline-dot {
    position: absolute !important;
    left: -34px !important;
    top: 4px !important;
    width: 10px !important;
    height: 10px !important;
    background: #fff !important;
    background-image: none !important;
    border: 2px solid var(--line) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
}
.version-item:hover .timeline-dot {
    border-color: var(--primary) !important;
    transform: none !important;
}
.version-item:first-child .timeline-dot {
    left: -35px !important;
    top: 3px !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--primary) !important;
    background-image: none !important;
    border: 2px solid var(--primary) !important;
    box-shadow: none !important;
}
.version-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}
.version-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    color: var(--text-soft) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: none !important;
}
.version-tag svg {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.7 !important;
}
.version-item:first-child .version-tag {
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
}
.version-item:first-child .version-tag svg {
    opacity: 1 !important;
}
.version-item:hover .version-tag {
    background: #f1f5f9 !important;
    background-image: none !important;
}
.version-item:first-child:hover .version-tag {
    background: var(--primary-hover) !important;
    background-image: none !important;
}
.version-date {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.version-content {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: var(--text) !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    background: #f8fafc !important;
    background-image: none !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    border: 1px solid var(--line-soft) !important;
}
.version-item:first-child .version-content {
    background: #f8fafc !important;
    background-image: none !important;
    border-color: var(--line-soft) !important;
}
.changelog-body .footer,
.update-log-body .footer {
    background: #fff !important;
    border-top: 1px solid var(--line) !important;
    padding: 16px 20px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
}
.changelog-body .footer a,
.update-log-body .footer a {
    color: var(--primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.changelog-body .footer a:hover,
.update-log-body .footer a:hover {
    color: var(--primary-hover) !important;
}
.empty-state {
    padding: 48px 20px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
}
.empty-state .icon {
    font-size: 36px !important;
    margin-bottom: 12px !important;
    opacity: 0.5 !important;
}
.empty-state p {
    font-size: 13px !important;
    color: var(--text-muted) !important;
}

/* ============================================
 * articles/list 文章中心 → 后台风格
 * ============================================ */
body.articles-page {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif !important;
}
body.articles-page::before,
body.articles-page::after,
body.articles-page .bg-pattern {
    display: none !important;
}
body.articles-page nav#mainNav {
    position: sticky !important;
    top: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
    z-index: 100 !important;
}
body.articles-page nav.scrolled { box-shadow: none !important; }
body.articles-page .nav-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: 52px !important;
}
body.articles-page .logo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    color: var(--text) !important;
}
body.articles-page .logo-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.articles-page .logo-img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    object-fit: contain !important;
}
body.articles-page .logo-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}
body.articles-page .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body.articles-page .nav-links a {
    color: var(--text-soft) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
body.articles-page .nav-links a:hover {
    background: #f1f5f9 !important;
    color: var(--text) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--line) !important;
}
body.articles-page .nav-links .nav-btn {
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--primary) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
body.articles-page .nav-links .nav-btn:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: none !important;
    box-shadow: none !important;
}
body.articles-page .nav-links .nav-btn-outline {
    padding: 6px 12px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    color: var(--text-soft) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
body.articles-page .nav-links .nav-btn-outline:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: #f8fafc !important;
}
body.articles-page .nav-links .nav-btn-outline[style*="border-color: var(--primary)"] {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
body.articles-page .mobile-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
}
body.articles-page .mobile-toggle svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--text) !important;
}

body.articles-page .page-hero {
    margin-top: 0 !important;
    padding: 20px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
    position: static !important;
    overflow: visible !important;
}
body.articles-page .page-hero::before,
body.articles-page .page-hero::after { display: none !important; }
body.articles-page .page-hero .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: static !important;
}
body.articles-page .page-hero h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 0 4px !important;
    letter-spacing: 0 !important;
}
body.articles-page .page-hero p {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    margin: 0 !important;
}
body.articles-page .page-hero-stats {
    display: flex !important;
    gap: 10px !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
}
body.articles-page .hero-stat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    background: #f8fafc !important;
    background-image: none !important;
    backdrop-filter: none !important;
    border-radius: 4px !important;
    border: 1px solid var(--line) !important;
    color: var(--text-soft) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
body.articles-page .hero-stat strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

body.articles-page .container:not(.nav-content > .container):not(.page-hero > .container) {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}
body.articles-page .articles-layout {
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    gap: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.articles-page .category-tabs {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
body.articles-page .category-tab {
    padding: 5px 12px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    color: var(--text-soft) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: none !important;
    box-shadow: none !important;
}
body.articles-page .category-tab:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    transform: none !important;
}
body.articles-page .category-tab.active {
    background: var(--primary) !important;
    background-image: none !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.articles-page .articles-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
body.articles-page .article-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    position: relative !important;
}
body.articles-page .article-card::before,
body.articles-page .article-card::after { display: none !important; }
body.articles-page .article-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--primary) !important;
    background: #f8fafc !important;
}
body.articles-page .article-card-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}
body.articles-page .article-card-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    flex: 1 !important;
    line-height: 1.5 !important;
    transition: none !important;
}
body.articles-page .article-card:hover .article-card-title {
    color: var(--primary) !important;
}
body.articles-page .article-card-summary {
    color: var(--text-soft) !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
body.articles-page .article-card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
}
body.articles-page .article-card-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body.articles-page .sidebar {
    position: sticky !important;
    top: 72px !important;
}
body.articles-page .sidebar-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}
body.articles-page .sidebar-card h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 0 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body.articles-page .sidebar-categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
body.articles-page .sidebar-category {
    padding: 7px 10px !important;
    border-radius: 4px !important;
    color: var(--text-soft) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    transition: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    background-image: none !important;
}
body.articles-page .sidebar-category:hover {
    background: #f8fafc !important;
    color: var(--primary) !important;
}
body.articles-page .sidebar-category.active {
    background: #f1f5f9 !important;
    background-image: none !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

body.articles-page .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}
body.articles-page .pagination a,
body.articles-page .pagination span {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--text-soft) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
body.articles-page .pagination a:hover {
    border-color: #cbd5e1 !important;
    color: var(--text) !important;
    background: #f8fafc !important;
}
body.articles-page .pagination .active {
    background: var(--primary) !important;
    background-image: none !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.articles-page .pagination .disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
}

body.articles-page .empty-state {
    padding: 48px 20px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
}
body.articles-page .empty-state-icon {
    font-size: 36px !important;
    margin-bottom: 12px !important;
    opacity: 0.5 !important;
}
body.articles-page .empty-state p {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    color: var(--text-soft) !important;
}
body.articles-page .empty-state .empty-hint {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

body.articles-page footer {
    padding: 16px 20px !important;
    background: #fff !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 20px !important;
}
body.articles-page .footer-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    text-align: center !important;
}
body.articles-page .footer-copyright {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

@media (max-width: 768px) {
    body.articles-page .articles-layout { grid-template-columns: 1fr !important; }
    body.articles-page .sidebar { position: static !important; }
    body.articles-page .nav-links { display: none !important; }
    body.articles-page .mobile-toggle { display: block !important; }
    body.articles-page .nav-links.open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        padding: 10px 20px !important;
        border-bottom: 1px solid var(--line) !important;
        box-shadow: none !important;
        gap: 4px !important;
    }
    body.articles-page .article-card { padding: 12px 14px !important; }
    body.articles-page .article-card-title { font-size: 13.5px !important; }
}

/* ============================================
 * ads/list 广告列表 / error 错误页 → 后台风格
 * ============================================ */
body.ads-page {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif !important;
    min-height: 100vh !important;
    padding: 20px !important;
}
body.ads-page .ads-list {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
body.ads-page .ad-item {
    background: #fff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid var(--line-soft) !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.15s !important;
    box-shadow: none !important;
}
body.ads-page .ad-item:last-child { border-bottom: none !important; }
body.ads-page .ad-item:hover {
    border-color: transparent !important;
    border-bottom-color: var(--line-soft) !important;
    box-shadow: none !important;
    background: #f8fafc !important;
}
body.ads-page .ad-content {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--text) !important;
}
body.ads-page .empty {
    padding: 48px 20px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}
@media (max-width: 600px) {
    body.ads-page { padding: 12px !important; }
    body.ads-page .ad-item { padding: 10px 14px !important; }
}

body.error-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    margin: 0 !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    padding: 20px !important;
}
body.error-page .error-container {
    text-align: center !important;
    padding: 32px 40px !important;
    background: #fff !important;
    background-image: none !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    max-width: 420px !important;
    width: 100% !important;
}
body.error-page h1 {
    color: var(--primary) !important;
    margin-bottom: 16px !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}
body.error-page p {
    color: var(--text-soft) !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
}
body.error-page a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    background: var(--primary) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1px solid var(--primary) !important;
    transition: none !important;
}
body.error-page a:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    text-decoration: none !important;
    color: #fff !important;
}

/* ============================================
 * articles/detail 文章详情页 → 后台风格
 * ============================================ */
body.articles-page .article-hero {
    margin-top: 0 !important;
    padding: 20px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-top: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    overflow: visible !important;
}
body.articles-page .article-hero::before,
body.articles-page .article-hero::after { display: none !important; }
body.articles-page .article-hero .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: static !important;
}
body.articles-page .article-hero-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
}
body.articles-page .article-hero-breadcrumb a {
    color: var(--text-soft) !important;
    text-decoration: none !important;
}
body.articles-page .article-hero-breadcrumb a:hover { color: var(--primary) !important; }
body.articles-page .article-hero-breadcrumb span { color: var(--text-muted) !important; }
body.articles-page .article-hero-breadcrumb .current { color: var(--text) !important; }
body.articles-page .article-hero-badges {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}
body.articles-page .article-hero-badges .hero-badge {
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background-image: none !important;
    box-shadow: none !important;
}
body.articles-page .article-hero-badges .hero-badge.top {
    background: #fffbeb !important;
    color: #b45309 !important;
}
body.articles-page .article-hero-badges .hero-badge.category {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}
body.articles-page .article-hero .article-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    letter-spacing: 0 !important;
}
body.articles-page .article-hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
}
body.articles-page .article-hero-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
body.articles-page main {
    padding: 20px 0 0 !important;
}
body.articles-page .article-layout {
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    gap: 16px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px 20px !important;
}
body.articles-page .article-main {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    box-shadow: none !important;
}
body.articles-page .article-cover {
    margin-bottom: 20px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: 1px solid var(--line-soft) !important;
}
body.articles-page .article-cover img { width: 100% !important; height: auto !important; display: block !important; }
body.articles-page .article-content {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: var(--text) !important;
}
body.articles-page .article-content h1,
body.articles-page .article-content h2,
body.articles-page .article-content h3 {
    margin: 22px 0 12px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.4 !important;
}
body.articles-page .article-content h1 {
    font-size: 18px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line-soft) !important;
}
body.articles-page .article-content h2 { font-size: 16px !important; }
body.articles-page .article-content h3 { font-size: 14.5px !important; }
body.articles-page .article-content p { margin-bottom: 12px !important; color: var(--text) !important; }
body.articles-page .article-content ul,
body.articles-page .article-content ol {
    margin-bottom: 12px !important;
    padding-left: 22px !important;
    color: var(--text) !important;
}
body.articles-page .article-content li { margin-bottom: 6px !important; line-height: 1.7 !important; }
body.articles-page .article-content code {
    background: #f1f5f9 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Menlo','Consolas','SFMono-Regular',monospace !important;
    font-size: 12.5px !important;
    color: #be123c !important;
    background-image: none !important;
}
body.articles-page .article-content pre {
    background: #1e293b !important;
    background-image: none !important;
    color: #e2e8f0 !important;
    padding: 16px !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
}
body.articles-page .article-content pre code {
    background: transparent !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 12.5px !important;
}
body.articles-page .article-content blockquote {
    border-left: 3px solid var(--primary) !important;
    padding: 10px 14px !important;
    margin: 12px 0 !important;
    color: var(--text-soft) !important;
    background: #f8fafc !important;
    border-radius: 0 4px 4px 0 !important;
    background-image: none !important;
}
body.articles-page .article-content img {
    max-width: 100% !important;
    border-radius: 4px !important;
    margin: 6px 0 !important;
    box-shadow: none !important;
}
body.articles-page .article-content a {
    color: var(--primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(43, 58, 85, 0.2) !important;
    transition: none !important;
}
body.articles-page .article-content a:hover {
    border-color: var(--primary) !important;
}
body.articles-page .article-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
}
body.articles-page .article-content th,
body.articles-page .article-content td {
    padding: 8px 12px !important;
    border: 1px solid var(--line) !important;
    text-align: left !important;
}
body.articles-page .article-content th {
    background: #f8fafc !important;
    font-weight: 600 !important;
    color: var(--text-soft) !important;
}
body.articles-page .article-footer {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--line-soft) !important;
}
body.articles-page .article-nav {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
body.articles-page .article-nav a {
    padding: 8px 14px !important;
    background: #f8fafc !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    color: var(--text-soft) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    transition: none !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
body.articles-page .article-nav a:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: #f8fafc !important;
    transform: none !important;
    box-shadow: none !important;
}
body.articles-page .related-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
body.articles-page .related-item {
    padding: 10px 12px !important;
    background: #f8fafc !important;
    background-image: none !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: none !important;
    border: 1px solid var(--line-soft) !important;
    box-shadow: none !important;
}
body.articles-page .related-item:hover {
    background: #f1f5f9 !important;
    border-color: var(--primary) !important;
}
body.articles-page .related-item-title {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    margin-bottom: 4px !important;
    line-height: 1.5 !important;
}
body.articles-page .related-item:hover .related-item-title { color: var(--primary) !important; }
body.articles-page .related-item-meta {
    font-size: 11.5px !important;
    color: var(--text-muted) !important;
}
@media (max-width: 768px) {
    body.articles-page .article-layout { grid-template-columns: 1fr !important; }
    body.articles-page .article-main { padding: 16px 18px !important; }
    body.articles-page .article-hero .article-title { font-size: 16px !important; }
    body.articles-page .article-hero-meta { gap: 10px !important; font-size: 12px !important; }
    body.articles-page .article-content { font-size: 13.5px !important; }
}

/* ============================================
 * Admin Dashboard 专用精简样式（扁平、无装饰）
 * ============================================ */

/* 页面头：标题 + 日期 / 当前账号信息 */
.ds-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ds-page-head h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}
.ds-crumbs {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.ds-page-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ds-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: #f8fafc;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    font-size: 12px;
    color: var(--text-soft);
}
.ds-user-chip strong {
    color: var(--text);
    font-weight: 600;
}
.ds-avatar-sm {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}
.ds-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-date {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* 数据模块分隔区 */
.ds-section {
    margin-bottom: 14px;
}
.ds-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.ds-section-title .ds-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 6px;
}

/* 统计 4 列小卡 */
.ds-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.ds-stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    transition: background var(--transition), border-color var(--transition);
}
.ds-stat-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.ds-stat-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
}
.ds-stat-label {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}
.ds-stat-meta {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-soft);
    flex-wrap: wrap;
}
.ds-stat-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ds-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ds-dot-green { background: #22c55e; }
.ds-dot-red { background: #ef4444; }
.ds-dot-blue { background: #3b82f6; }
.ds-dot-amber { background: #f59e0b; }
.ds-dot-purple { background: #8b5cf6; }
.ds-dot-slate { background: #94a3b8; }
.ds-stat-meta strong {
    color: var(--text);
    font-weight: 600;
}

/* 快捷入口 4 列网格 */
.ds-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.ds-quick-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: all var(--transition);
}
.ds-quick-card:hover {
    background: #f8fafc;
    border-color: var(--primary);
}
.ds-quick-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}
.ds-quick-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ds-quick-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.ds-quick-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.ds-quick-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 明细信息两栏 grid */
.ds-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ds-info-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}
.ds-info-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.ds-info-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.ds-info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-soft);
    padding: 4px 0;
    border-bottom: 1px dashed var(--line-soft);
}
.ds-info-list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.ds-info-list .ds-label {
    color: var(--text-muted);
    font-weight: 400;
}
.ds-info-list .ds-value {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 响应式 */
@media (max-width: 1024px) {
    .ds-stats { grid-template-columns: repeat(2, 1fr); }
    .ds-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .ds-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ds-page-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .ds-page-meta { width: 100%; justify-content: space-between; }
    .ds-info-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .ds-stats { grid-template-columns: 1fr; }
    .ds-quick-grid { grid-template-columns: 1fr; }
    .ds-info-list { grid-template-columns: 1fr; }
    .ds-info-list li:last-child:nth-child(odd) { grid-column: 1; }
}

/* ============================================
 * 表格样式统一（最终标准，覆盖所有之前的混乱补丁）
 * ============================================ */

/* 1. 单元格内容统一：去除"非状态类"徽章的彩色背景，
 *    让账号/标题/QQ/邮箱/数量/日期等普通内容不再乱包彩色小色块
 *    ——只保留真正的状态类需要彩色区分
 */
.admin-content .admin-table .price-badge,
.admin-content .admin-table .days-badge,
.admin-content .admin-table .expire-badge,
.admin-content .admin-table .expire-info,
.admin-content .admin-table .table-date-badge,
.admin-content .admin-table .cdk-code,
.admin-content .admin-table .badge:not(.badge-success):not(.badge-primary):not(.badge-warning):not(.badge-danger):not(.badge-info),
.admin-content .admin-table .days-badge .days-text,
.admin-content .admin-table .price-badge .price-text,
.admin-content .admin-table .expire-badge span,
.admin-content .admin-table .table-date-badge span {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-soft) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    vertical-align: baseline !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 2. 主要文本（账号/标题/分类名/代码等）：黑色正常字重，
 *    统一用 badge-success/badge-primary 包的这些内容回归纯文本样式
 */
.admin-content .admin-table .badge-success strong,
.admin-content .admin-table .badge-primary strong,
.admin-content .admin-table .badge-success,
.admin-content .admin-table .badge-primary {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    vertical-align: baseline !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.admin-content .admin-table .badge-success strong,
.admin-content .admin-table .badge-primary strong {
    font-weight: 600 !important;
}

/* 3. 状态类必须保留彩色区分（badge-* / status-* / expire-* 真正用于状态显示的） */
.admin-content .admin-table .badge-warning,
.admin-content .admin-table .badge-danger,
.admin-content .admin-table .badge-info {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.admin-content .admin-table .badge-warning { background: #fffbeb !important; color: #b45309 !important; }
.admin-content .admin-table .badge-danger  { background: #fef2f2 !important; color: #b91c1c !important; }
.admin-content .admin-table .badge-info    { background: #f0f9ff !important; color: #0369a1 !important; }

/* 4. 用户状态 / 过期状态 / 状态小徽章统一风格 */
.admin-content .admin-table .user-status,
.admin-content .admin-table .status-badge,
.admin-content .admin-table .expire-badge.expire-active,
.admin-content .admin-table .expire-badge.expire-warning,
.admin-content .admin-table .expire-badge.expire-expired,
.admin-content .admin-table .expire-badge.expire-permanent,
.admin-content .admin-table .status-active,
.admin-content .admin-table .status-banned,
.admin-content .admin-table .status-expired,
.admin-content .admin-table .status-permanent {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.admin-content .admin-table .expire-active,
.admin-content .admin-table .status-active    { background: #ecfdf5 !important; color: #047857 !important; }
.admin-content .admin-table .expire-warning,
.admin-content .admin-table .status-warning   { background: #fffbeb !important; color: #b45309 !important; }
.admin-content .admin-table .expire-expired,
.admin-content .admin-table .status-expired,
.admin-content .admin-table .status-banned    { background: #fef2f2 !important; color: #b91c1c !important; }
.admin-content .admin-table .expire-permanent,
.admin-content .admin-table .status-permanent { background: #eff6ff !important; color: #1d4ed8 !important; }

/* 5. 在线状态小圆点统一 */
.admin-content .admin-table .online-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: var(--text-soft) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
.admin-content .admin-table .online-status.online { color: var(--success) !important; }
.admin-content .admin-table .online-status.online .online-dot   { background: var(--success) !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; display: inline-block !important; }
.admin-content .admin-table .online-status.offline .offline-dot { background: #cbd5e1 !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; display: inline-block !important; }

/* 6. cell-id 列：紧凑等宽字体 */
.admin-content .admin-table .cell-id {
    display: inline !important;
    font-family: 'Menlo','Consolas','SFMono-Regular',monospace !important;
    font-size: 12.5px !important;
    color: var(--text-soft) !important;
    background: none !important;
    padding: 0 !important;
}

/* 7. 操作列按钮统一（.ct-actions / .actions / .btn-group 完全对齐） */
.admin-content .admin-table .ct-actions,
.admin-content .admin-table .actions,
.admin-content .admin-table .btn-group {
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.admin-content .admin-table .ct-actions .btn,
.admin-content .admin-table .actions .btn,
.admin-content .admin-table .btn-group .btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 26px !important;
}
.admin-content .admin-table .ct-actions .btn.btn-sm,
.admin-content .admin-table .actions .btn.btn-sm,
.admin-content .admin-table .btn-group .btn.btn-sm {
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    min-height: 24px !important;
}

/* 8. 空状态行统一（.card-log-empty-state 等）） */
.admin-content .admin-table .card-log-empty-state,
.admin-content .admin-table .empty-state {
    background: none !important;
}
.admin-content .admin-table .card-log-empty,
.admin-content .admin-table .card-log-empty-state span,
.admin-content .admin-table .empty-state span,
.admin-content .admin-table .empty-state {
    display: block !important;
    padding: 36px 16px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    background: none !important;
    border: none !important;
}

/* ==============================
   Agent 页面专有类扁平风格映射
   ============================== */

/* 1. Agent 首页 - 顶部欢迎 Hero 区 */
.dashboard-hero {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
}
.hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.hero-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-soft);
}
.hero-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-soft);
}
.hero-stat-pill strong {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

/* 2. Agent 首页 - 快捷操作区 */
.actions-section {
    margin-bottom: 20px;
}
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.action-card:hover {
    border-color: var(--primary);
}
.action-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}
.action-icon.blue   { background: #3b82f6; }
.action-icon.green  { background: #10b981; }
.action-icon.red    { background: #ef4444; }
.action-icon.purple { background: #8b5cf6; }
.action-icon.amber  { background: #f59e0b; }
.action-icon svg {
    width: 20px;
    height: 20px;
}
.action-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.action-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.action-desc {
    font-size: 12px;
    color: var(--text-soft);
    margin: 0;
}
.action-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}
.action-arrow svg {
    width: 18px;
    height: 18px;
}

/* 3. Agent 首页 - 公告文章区 */
.articles-section {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 16px 20px;
}
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}
.section-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.section-icon svg {
    width: 16px;
    height: 16px;
}
.section-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.section-header-line {
    flex: 0 0 auto;
}
.article-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.article-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    gap: 12px;
}
.article-item:last-child {
    border-bottom: none;
}
.article-item:hover .article-title {
    color: var(--primary);
}
.article-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.article-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}
.article-badge.top {
    background: #fef2f2;
    color: #b91c1c;
}
.article-badge.category {
    background: #f1f5f9;
    color: #475569;
}
.article-title {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}
.article-meta {
    flex-shrink: 0;
}
.article-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.article-date svg {
    width: 13px;
    height: 13px;
}
.empty-articles {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* 4. 模态框（充值弹窗等） */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-content {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.modal-body {
    padding: 20px;
    flex: 1;
}
.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* 4.1 模态框扩展样式（用于 cards 生成卡密等内联模态框） */
.modal-overlay-inline {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-content-large {
    max-width: 520px;
    width: 100%;
}
.modal-header-with-close {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
}
.modal-title-text {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s ease;
}
.modal-close-btn:hover {
    color: var(--text-primary);
}
.modal-footer-centered {
    justify-content: center;
    padding: 12px 16px;
}
.modal-footer-three {
    gap: 10px;
}

/* 4.2 过滤器窄输入框（ID、分区ID等） */
.filter-input-narrow {
    min-width: 100px;
}

/* 4.3 表单下拉选择 */
.form-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 32px;
}

/* 4.4 费用预览（生成卡密） */
.cost-preview {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 4px;
}
.cost-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}
.cost-title svg {
    color: var(--primary);
}
.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}
.cost-row span:first-child {
    color: var(--text-soft);
}
.cost-row span:last-child {
    color: var(--text-primary);
    font-weight: 500;
    font-family: 'Menlo', 'Consolas', 'SFMono-Regular', monospace;
}
.cost-row:last-child {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light);
}
.cost-row:last-child span:last-child {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

/* 4.5 结果卡密输出区 */
.result-summary {
    margin: 0 0 12px 0;
    padding: 10px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 13px;
    color: #065f46;
    text-align: center;
}
.result-summary-strong {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}
.result-codes {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    max-height: 260px;
    overflow: auto;
}
.result-codes pre {
    margin: 0;
    padding: 12px 14px;
    font-family: 'Menlo', 'Consolas', 'SFMono-Regular', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* 5. Agent 个人资料页 */
.profile-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile-hero {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 24px;
    display: flex;
    gap: 28px;
    align-items: stretch;
    flex-wrap: wrap;
}
.profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 140px;
}
.profile-avatar-wrapper {
    padding: 4px;
    border: 1px solid var(--border-light);
    border-radius: 50%;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-name {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}
.profile-info {
    flex: 1;
    min-width: 280px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.profile-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 6px;
}
.profile-info-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-soft);
    flex-shrink: 0;
}
.info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.info-label {
    font-size: 11.5px;
    color: var(--text-muted);
}
.info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}

/* 6. 个人资料 - 设置卡片 */
.profile-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}
.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}
.profile-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.profile-card-title svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
}
.profile-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #f1f5f9;
    color: var(--text-soft);
    border-radius: 4px;
    font-size: 11.5px;
}
.profile-card-body {
    padding: 20px;
}

/* 7. 表单组统一（Agent 专有） */
.form-group {
    margin-bottom: 16px;
}
.form-group:last-child {
    margin-bottom: 0;
}
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.form-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.form-input:focus {
    border-color: var(--primary);
}
.form-hint {
    margin-top: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.form-hint-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.form-submit-btn {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.form-submit-btn svg {
    width: 16px;
    height: 16px;
}

/* 8. Toast 提示 */
.toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 2000;
    min-width: 200px;
    max-width: calc(100vw - 40px);
}
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.toast svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.toast.success {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}
.toast.success svg {
    color: #16a34a;
}
.toast.error {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}
.toast.error svg {
    color: #dc2626;
}

/* 9. 余额变动类型与金额标签 */
.change-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.change-type.increase {
    background: #ecfdf5;
    color: #047857;
}
.change-type.decrease {
    background: #fef2f2;
    color: #b91c1c;
}
.change-amount {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Menlo', 'Consolas', 'SFMono-Regular', monospace;
}
.change-amount.positive {
    color: #047857;
}
.change-amount.negative {
    color: #b91c1c;
}

/* 10. 充值结果提示块 */
.recharge-result {
    display: none;
    margin-top: 16px;
}
.recharge-success-box {
    background: #ecfdf5;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
}
.recharge-success-title {
    color: #166534;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.recharge-success-amount {
    color: #166534;
    font-size: 24px;
    font-weight: 700;
}
.recharge-success-balance {
    color: var(--text-soft);
    font-size: 13px;
    margin-top: 8px;
}

/* 11. Agent 页面响应式适配 */
@media (max-width: 720px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
    .hero-right {
        width: 100%;
    }
    .hero-stat-pill {
        flex: 1;
        justify-content: center;
    }
    .profile-hero {
        padding: 16px;
        gap: 18px;
    }
    .profile-left {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        min-width: 0;
    }
    .profile-info {
        min-width: 0;
    }
    .actions-grid {
        grid-template-columns: 1fr 1fr;
    }
    .action-card {
        padding: 12px 14px;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    .action-icon {
        width: 36px;
        height: 36px;
    }
    .action-icon svg {
        width: 18px;
        height: 18px;
    }
    .article-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .modal-footer {
        padding: 12px 16px;
    }
}
@media (max-width: 480px) {
    .actions-grid {
        grid-template-columns: 1fr;
    }
    .action-card {
        flex-direction: row;
        align-items: center;
    }
    .hero-avatar {
        width: 48px;
        height: 48px;
    }
    .hero-title {
        font-size: 16px;
    }
    .profile-avatar {
        width: 64px;
        height: 64px;
    }
}

/* ================= 全局：移除所有表格 ID 列徽章效果 ================= */
/* 覆盖 admin 所有页面内联样式中的 .cell-id 药丸徽章 */
.admin-container .admin-content .admin-table .cell-id,
.admin-content .admin-table .cell-id,
[class*="admin-table-"] .cell-id {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    letter-spacing: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: inherit !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    position: static !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: inherit !important;
    justify-content: normal !important;
    align-items: normal !important;
    align-content: normal !important;
}
.admin-container .admin-content .admin-table .cell-id::before,
.admin-container .admin-content .admin-table .cell-id::after,
.admin-content .admin-table .cell-id::before,
.admin-content .admin-table .cell-id::after,
[class*="admin-table-"] .cell-id::before,
[class*="admin-table-"] .cell-id::after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}