:root {
    --admin-bg: #f5f1ed;
    --admin-surface: rgba(255, 253, 250, 0.97);
    --admin-surface-solid: #fffdfa;
    --admin-text: #2c2824;
    --admin-muted: #7d7066;
    --admin-line: rgba(86, 68, 54, 0.12);
    --admin-accent: #b97858;
    --admin-accent-strong: #96583b;
    --admin-accent-soft: rgba(185, 120, 88, 0.11);
    --admin-accent-hover: #a05f40;
    --admin-card: rgba(255, 255, 255, 0.92);
    --admin-card-solid: #fffdf9;
    --admin-accent-light: #d9a98f;
    --admin-ink: #2c2824;
    --admin-shadow-hover: 0 16px 48px rgba(68, 53, 35, 0.12);
    --admin-success-soft: #e5f5ed;
    --admin-danger-soft: #fbe9e7;
    --admin-warning-soft: #fff1c4;
    --admin-info-soft: rgba(61, 116, 168, 0.12);
    --admin-success-hover: #277a53;
    --admin-danger-hover: #9e3f42;
    --admin-warning-hover: #9a6310;
    --admin-success: #2f8f63;
    --admin-warning: #b97912;
    --admin-danger: #b64c50;
    --admin-info: #3d74a8;
    --admin-radius-sm: 10px;
    --admin-radius: 16px;
    --admin-radius-lg: 22px;
    --admin-shadow: 0 12px 40px rgba(70, 50, 36, 0.07);
}

body { background: var(--admin-bg); color: var(--admin-text); }

/* 兼容加载 style.css 的后台页面：统一覆盖为后台棕色主题 */
.btn-primary {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-strong));
    color: #fff;
    border-color: transparent;
}
.btn-primary:hover { filter: brightness(0.96); }
.btn-danger { background: var(--admin-danger); color: #fff; border-color: transparent; }
.btn-success { background: var(--admin-success); color: #fff; border-color: transparent; }
.btn-ghost {
    color: var(--admin-text);
    border: 1px solid var(--admin-line);
    background: transparent;
}
.btn-outline {
    color: var(--admin-accent-strong);
    border: 1px solid var(--admin-accent);
    background: transparent;
}
.btn-outline:hover { background: var(--admin-accent-soft); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
select, textarea {
    background: var(--admin-surface-solid);
    border: 1px solid var(--admin-line);
    border-radius: 10px;
    color: var(--admin-text);
}
/* ===== 开发者后台顶部导航统一规范 ===== */
.top-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    height: 64px !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: rgba(255, 253, 250, 0.92) !important;
    border-bottom: 1px solid var(--admin-line) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: none !important;
}
.top-nav a {
    color: var(--admin-muted) !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
.top-nav a:hover {
    color: var(--admin-ink) !important;
}
.top-nav .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--admin-ink) !important;
    line-height: 1 !important;
}
.top-nav .brand .logo-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-strong)) !important;
    color: #fff !important;
}
.top-nav .brand .logo-icon .ui-icon {
    width: 1em !important;
    height: 1em !important;
}
.top-nav .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.top-nav .admin-info {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--admin-ink) !important;
    white-space: nowrap !important;
}
.top-nav .role-badge {
    padding: 2px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    background: rgba(194, 139, 110, 0.12) !important;
    color: var(--admin-accent-strong) !important;
}
.top-nav .role-badge.super {
    background: rgba(212, 160, 23, 0.12) !important;
    color: var(--admin-warning) !important;
}
.layout {
    display: flex !important;
    min-height: calc(100vh - 64px) !important;
}
.main-content {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 28px 32px;
}
.sidebar {
    width: 220px !important;
    flex-shrink: 0 !important;
    padding: 16px 0 !important;
    background: var(--admin-surface-solid) !important;
    border-right: 1px solid var(--admin-line) !important;
}
.sidebar .nav-section {
    padding: 8px 20px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--admin-muted) !important;
    opacity: 0.6 !important;
}
.sidebar .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    color: var(--admin-muted) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    border-left: 3px solid transparent !important;
}
.sidebar .nav-item:hover {
    background: rgba(194, 139, 110, 0.08) !important;
    color: var(--admin-ink) !important;
}
.sidebar .nav-item.active {
    background: rgba(194, 139, 110, 0.12) !important;
    color: var(--admin-accent) !important;
    border-left-color: var(--admin-accent) !important;
    font-weight: 600 !important;
}
.sidebar .nav-item .icon {
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.top-nav .mobile-sidebar-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 20px !important;
    color: var(--admin-ink) !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-tap-highlight-color: transparent !important;
}
@media (max-width: 860px) {
    .sidebar {
        width: min(240px, 74vw) !important;
    }
    .top-nav {
        height: 56px !important;
        padding: 0 14px !important;
    }
    .top-nav .brand {
        font-size: 16px !important;
    }
    .top-nav .brand .logo-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }
    .top-nav .nav-right {
        gap: 10px !important;
    }
    .top-nav .admin-info {
        font-size: 13px !important;
    }
    .top-nav .role-badge {
        font-size: 10px !important;
        padding: 1px 8px !important;
    }
    .top-nav .mobile-sidebar-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 19px !important;
    }
}

/* 更小屏幕：进一步压缩顶部导航，避免品牌区与操作区溢出 */
@media (max-width: 480px) {
    .top-nav {
        padding: 0 12px !important;
    }
    .top-nav .brand {
        font-size: 15px !important;
    }
    .top-nav .brand .logo-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 15px !important;
    }
    .top-nav .nav-right {
        gap: 6px !important;
    }
    .top-nav .admin-info {
        font-size: 12px !important;
        gap: 6px !important;
    }
    .top-nav .role-badge {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .top-nav .admin-info {
        display: none !important;
    }
}
.sidebar { background: var(--admin-surface-solid); border-right: 1px solid var(--admin-line); }
.layout > .main-content {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}
.page-header h1 { font-size: clamp(24px, 2vw, 32px); letter-spacing: -.03em; }
.page-header p { margin-top: 6px; color: var(--admin-muted); }
.content-card { background: var(--admin-surface); border: 1px solid var(--admin-line); border-radius: var(--admin-radius); box-shadow: var(--admin-shadow); overflow: clip; }
.card-header { min-height: 58px; padding: 15px 20px; border-bottom: 1px solid var(--admin-line); }
.data-table-wrap { overflow: auto; max-height: min(68vh, 760px); }
.data-table thead { position: sticky; top: 0; z-index: 2; background: var(--admin-surface-solid); }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: var(--admin-accent-soft); }
.data-table td, .data-table th { padding: 12px 14px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--admin-line); background: rgba(255,255,255,.42); }
.admin-toolbar__summary { margin-right: auto; color: var(--admin-muted); font-size: 13px; }
.admin-toolbar select, .admin-toolbar button, .admin-toolbar input { min-height: 38px; }
.bulk-bar { display: flex; position: sticky; top: 76px; z-index: 20; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding: 12px 16px; color: #fff; background: linear-gradient(135deg, var(--admin-accent-strong), var(--admin-accent)); border-radius: var(--admin-radius); box-shadow: 0 12px 28px rgba(150,88,59,.22); }
.bulk-bar.show { display: flex; }

/* ===== 统一线条图标（用户面板，会员区除外） ===== */
.tab-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tab-button .ui-icon,
.ghost .ui-icon,
.tool-btn .ui-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.section-head .ui-icon,
.card h2 .ui-icon,
.card h3 .ui-icon,
.metric-card .ui-icon,
.bot-card-top .ui-icon,
.overview-card .ui-icon,
.stat-card .ui-icon {
    width: 18px;
    height: 18px;
    color: var(--admin-accent-strong, #96583b);
    vertical-align: -0.22em;
}
.bulk-bar .bulk-count { margin-right: auto; font-weight: 700; }
.bulk-bar button, .bulk-bar select { min-height: 36px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; }
.bulk-bar button { padding: 7px 12px; color: #fff; background: rgba(255,255,255,.12); }
.bulk-bar button:hover { background: rgba(255,255,255,.2); }
.bulk-bar .danger { background: rgba(116, 16, 25, .34); }
.selection-banner { display: none; padding: 10px 16px; text-align: center; font-size: 13px; background: #fff6db; border-bottom: 1px solid #ecd99e; }
.selection-banner.show { display: block; }
.status-tag.deleted { color: #6d5964; background: #eee7eb; }
.status-tag.flagged { color: #8b5b00; background: #fff1c4; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.user-tag { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-size: 11px; color: var(--admin-accent-strong); background: var(--admin-accent-soft); }
.skeleton-row { height: 48px; margin: 8px 14px; border-radius: 8px; background: linear-gradient(90deg,#eee7e1 25%,#faf7f4 50%,#eee7e1 75%); background-size: 200% 100%; animation: admin-shimmer 1.3s infinite; }
@keyframes admin-shimmer { to { background-position: -200% 0; } }
.task-drawer { position: fixed; inset: 0 0 0 auto; z-index: 1200; width: min(520px, 100%); padding: 22px; background: var(--admin-surface-solid); box-shadow: -16px 0 50px rgba(50,35,25,.16); transform: translateX(105%); transition: transform .22s ease; overflow-y: auto; }
.task-drawer.open { transform: translateX(0); }
.task-card { padding: 14px; margin: 10px 0; border: 1px solid var(--admin-line); border-radius: 12px; }
.task-progress { height: 7px; margin: 9px 0; border-radius: 999px; overflow: hidden; background: #eee8e3; }
.task-progress span { display:block; height:100%; background: linear-gradient(90deg,var(--admin-accent),#d79b7e); }
.profile-hero { display:grid; grid-template-columns: minmax(0,1fr) auto; gap:20px; padding:22px; }
.profile-status-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.privacy-gate { padding: 28px; text-align:center; border:1px dashed var(--admin-line); border-radius:14px; background:rgba(255,255,255,.35); }
.privacy-gate p { max-width:560px; margin:8px auto 16px; color:var(--admin-muted); }
.device-risk { color: var(--admin-warning); font-weight: 700; }

@media (max-width: 860px) {
    .admin-toolbar { align-items: stretch; }
    .admin-toolbar > * { flex: 1 1 145px; }
    .bulk-bar { top: 62px; }
    .profile-hero { grid-template-columns: 1fr; }
    .data-table thead { position: static; }
}