/* ============================================================
   DXTool（大雄工具）设计系统（参考 Code Times 设计规范）
   主色 #5B6BD9 ｜ 渐变 #7c5bd8 ｜ 背景 #f9fafb
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* 色板 */
    --primary: #5B6BD9;
    --primary-dark: #4a58bc;
    --primary-light: #8b96e8;
    --gradient: linear-gradient(90deg, #5B6BD9, #7c5bd8);
    --gradient-bg: linear-gradient(135deg, #eef0fc 0%, #f6f1fd 55%, #f4eefd 100%);
    --text-title: #111827;
    --text-body: #374151;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --bg: #f9fafb;
    --bg-card: #ffffff;
    --bg-subtle: #f3f4f6;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --tag-bg: #eef0fe;
    --success: #52c41a;
    --warning: #faad14;
    --danger: #ef4444;

    /* 字号 */
    --fs-body: 14px;
    --fs-section: 20px;
    --fs-page: 24px;
    --fs-hero: 32px;

    /* 圆角 */
    --radius-card: 12px;
    --radius-btn: 8px;
    --radius-tag: 6px;
    --radius-pill: 999px;
}

/* 防止整站横向滑动：优先用 clip，它不创建滚动容器，避免破坏 position:sticky（文章目录依赖）；
   旧浏览器不支持 clip 时回退到 hidden */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text-title);
    font-size: var(--fs-body);
    line-height: 1.6;
}

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

/* ===== 原型标注面板（非设计部分） ===== */
.annotation {
    position: fixed; top: 0; right: 0; width: 300px; height: 100vh;
    background: #fffbe6; border-left: 2px solid #ffe58f;
    padding: 16px; overflow-y: auto; font-size: 13px; line-height: 1.8; z-index: 999;
}
.annotation h3 { font-size: 14px; color: #d48806; margin-bottom: 12px; border-bottom: 1px solid #ffe58f; padding-bottom: 8px; }
.annotation h4 { font-size: 13px; color: #333; margin: 14px 0 6px; }
.annotation p, .annotation li { color: #666; }
.annotation ul { padding-left: 18px; }
.annotation code { background: #f0f0f0; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.annotation .tag { display: inline-block; background: var(--primary); color: #fff; font-size: 11px; padding: 0 6px; border-radius: 3px; margin-right: 4px; }
.annotation .tag.new { background: var(--success); }
.annotation .tag.change { background: #fa8c16; }
.annotation .tag.fix { background: #ff4d4f; }
.annotation .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; border: 1px solid rgba(0,0,0,.08); }

/* ===== 布局 ===== */
.page { margin-right: 300px; min-height: 100vh; display: flex; flex-direction: column; }
/* 注意：container 上不要加 overflow-x:hidden，它会让内部的 position:sticky 失效
   （文章页右侧目录依赖 sticky），且会静默裁掉溢出内容掩盖真实布局问题 */
.container { max-width: 1024px; margin: 0 auto; padding: 0 16px; width: 100%; }
main { flex: 1; }

/* ===== 顶部导航 ===== */
.nav {
    position: sticky; top: 0; z-index: 50; height: 64px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.nav-inner { max-width: 1024px; margin: 0 auto; padding: 0 16px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 8px; }
.logo {
    width: 28px; height: 28px; border-radius: 8px; background: var(--gradient);
    color: #fff; font-size: 12px; letter-spacing: -0.3px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 18px; font-weight: 700; }
.nav-links { display: flex; gap: 24px; font-size: 14px; font-weight: 500; color: var(--text-body); align-items: center; }
.nav-links a { transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--primary); }
.nav-links a.active { color: var(--primary); font-weight: 700; }
.nav-login-btn {
    padding: 7px 20px; border-radius: var(--radius-btn); background: var(--gradient);
    color: #fff !important; font-weight: 600; font-size: 13px;
    box-shadow: 0 2px 8px rgba(91,107,217,.25); transition: all .2s;
}
.nav-login-btn:hover { box-shadow: 0 4px 14px rgba(91,107,217,.45); transform: translateY(-1px); }
.nav-toggle {
    display: none; /* 桌面端隐藏，≤768px 显示 */
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    width: 40px; height: 40px; padding: 0; border: none; background: transparent; cursor: pointer;
}
.nav-toggle-bar {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text-title); transition: transform .25s, opacity .25s;
}

/* ===== 按钮 ===== */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px; border-radius: var(--radius-btn); background: var(--gradient);
    color: #fff; font-size: 14px; font-weight: 500; border: none; cursor: pointer;
    transition: all .2s;
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(91,107,217,.35); transform: translateY(-1px); }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px; border-radius: var(--radius-btn); background: #fff;
    color: var(--text-body); font-size: 14px; border: 1px solid var(--border);
    cursor: pointer; transition: all .2s;
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 7px 18px; font-size: 13px; }

/* ===== 卡片 ===== */
.card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-card); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card.hoverable:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,24,39,.08); }

/* ===== Tag ===== */
.tag-purple { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: var(--tag-bg); color: var(--primary); font-size: 12px; }
.tag-green { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: #f6ffed; color: var(--success); font-size: 12px; border: 1px solid #b7eb8f; }
.tag-hot   { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: #fff7e6; color: #d4380d; font-size: 12px; border: 1px solid #ffd591; white-space: nowrap; }
.tag-gray { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: #fafafa; color: var(--text-muted); font-size: 12px; border: 1px solid var(--border); }

/* ===== 页头 ===== */
.page-head { background: #fff; border-bottom: 1px solid var(--border-light); padding: 32px 0 28px; }
.page-head h1 { font-size: var(--fs-page); font-weight: 700; }
.page-head .sub { margin-top: 8px; font-size: 14px; color: var(--text-secondary); }

/* ===== 分类 Tab（胶囊） ===== */
.tab-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.tab-chip {
    display: inline-flex; align-items: center; padding: 7px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: #fff; font-size: 13px; color: var(--text-body);
    transition: all .15s; cursor: pointer;
}
.tab-chip:hover { border-color: var(--primary); color: var(--primary); }
.tab-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; }

/* ===== 工具卡片 ===== */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.tool-card {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card);
    padding: 22px; display: flex; flex-direction: column; align-items: flex-start;
    transition: all .25s; cursor: pointer;
}
.tool-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 20px rgba(91,107,217,.12); transform: translateY(-2px); }
.tool-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 14px; }
.tool-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; font-weight: 600;
}
.tool-icon.blue { background: #5B6BD9; }
.tool-icon.purple { background: #722ed1; }
.tool-icon.cyan { background: #13c2c2; }
.tool-icon.green { background: #52c41a; }
.tool-icon.orange { background: #fa8c16; }
.tool-icon.red { background: #f5222d; }
.tool-icon.magenta { background: #eb2f96; }
.tool-icon.geekblue { background: #2f54eb; }
.tool-icon.gray { background: #bfbfbf; }
.tool-name { font-size: 16px; font-weight: 600; color: var(--text-title); margin-bottom: 6px; }
.tool-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 18px; min-height: 44px; }
.tool-footer { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.tool-foot-note { font-size: 12px; color: var(--text-muted); }

/* ===== Hero ===== */
.hero {
    position: relative; overflow: hidden; background: var(--gradient-bg);
    text-align: center; padding: 64px 16px 80px;
}
.hero::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(91,107,217,.08); top: -160px; right: -80px; }
.hero::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(124,91,216,.07); bottom: -120px; left: -60px; }
.hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero h1 { font-size: var(--fs-hero); font-weight: 700; color: var(--text-title); }
.hero .sub { margin-top: 12px; font-size: 16px; color: var(--text-secondary); line-height: 1.8; }
.hero-cta { margin-top: 28px; display: flex; justify-content: center; gap: 12px; }
.hero-search {
    margin: 28px auto 0; max-width: 520px; display: flex;
    background: #fff; border-radius: var(--radius-pill); overflow: hidden;
    box-shadow: 0 4px 20px rgba(91,107,217,.12); border: 1px solid var(--border);
}
.hero-search input {
    flex: 1; border: none; outline: none; padding: 13px 22px; font-size: 14px;
}
.hero-search button {
    border: none; background: var(--gradient); color: #fff; padding: 0 28px;
    font-size: 14px; font-weight: 500; cursor: pointer;
}

/* ===== 统计条 ===== */
.stats { margin-top: -32px; position: relative; z-index: 5; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.stat { padding: 20px 16px; text-align: center; display: block; text-decoration: none; }
.stat-num { font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-label { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
/* 副标（如「31 个分类」）：字号更小、不换行，保证三张卡视觉高度一致 */
.stat-sub { margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--text-muted); white-space: nowrap; }

/* ===== 区块 ===== */
.section { margin-top: 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.section-head h2 { font-size: var(--fs-section); font-weight: 600; }
.more { font-size: 13px; color: var(--primary); }
.more:hover { text-decoration: underline; }

/* ===== 文章卡片 ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 20px; }
.doc-card { display: block; padding: 20px; }
.doc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,24,39,.08); }
/* 卡片封面：负 margin 抵消 padding，贴到卡片边缘并保留圆角 */
.doc-cover {
    margin: -20px -20px 14px; border-radius: 11px 11px 0 0; overflow: hidden;
    background: var(--bg-subtle); aspect-ratio: 1200 / 630;
}
.doc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-title { font-size: 16px; font-weight: 600; line-height: 1.5; }
.doc-summary { margin-top: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.doc-meta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.doc-date { font-size: 12px; color: var(--text-muted); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 胶囊 chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.chip {
    display: inline-flex; align-items: center; padding: 8px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: #fff; font-size: 14px; color: var(--text-body);
    transition: all .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); background: var(--tag-bg); }

/* ===== 页脚 ===== */
.footer { background: var(--bg-subtle); border-top: 1px solid var(--border); margin-top: 48px; }
.footer-inner {
    max-width: 1024px; margin: 0 auto; padding: 24px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary);
}
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--primary); }
/* 备案行：ICP 与公安备案同行展示，窄屏自动换行不溢出 */
.footer-icp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center; }
.footer-icp a { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.footer-icp a:hover { color: var(--primary); }
/* 公安备案图标：与文字同行，窄屏随整条链接换行，不单独掉到文字外 */
.footer-icp-icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.footer-icp-sep { color: var(--text-secondary); opacity: .55; }

/* ===== 登录/注册（左右分栏） ===== */
.auth-page { display: flex; min-height: 100vh; }
.auth-brand {
    width: 45%; min-height: 100vh; background: linear-gradient(135deg, #5B6BD9 0%, #7c5bd8 100%);
    color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative; overflow: hidden;
}
.auth-brand::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(255,255,255,.05); top: -210px; right: -210px; }
.auth-brand::after { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,.07); bottom: -96px; left: -96px; }
.auth-brand-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; z-index: 2; }
.auth-brand-logo .icon {
    width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: bold;
}
.auth-brand-logo .name { font-size: 28px; font-weight: 600; letter-spacing: 1px; }
.auth-brand-slogan { font-size: 15px; opacity: .82; margin-bottom: 60px; z-index: 2; }
.auth-brand-points { z-index: 2; font-size: 14px; line-height: 2.6; opacity: .92; }
.auth-brand-points div { display: flex; align-items: center; gap: 12px; }
.auth-brand-points .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.auth-form-side { flex: 1; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px 64px; }
.auth-form-box { max-width: 380px; width: 100%; margin: 0 auto; }
.auth-title { font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 8px; }
.auth-sub { font-size: 14px; color: #8c8c8c; margin-bottom: 32px; }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; font-size: 14px; color: #262626; margin-bottom: 6px; }
.auth-field label .req { color: var(--danger); margin-right: 4px; }
.auth-input {
    width: 100%; height: 42px; border: 1px solid #d9d9d9; border-radius: 7px;
    padding: 0 12px; font-size: 14px; transition: all .2s;
}
.auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,107,217,.13); }
.auth-btn-main {
    width: 100%; height: 44px; border: none; border-radius: 7px; background: var(--primary);
    color: #fff; font-size: 15px; cursor: pointer; transition: background .2s;
}
.auth-btn-main:hover { background: #7485e3; }
.auth-form-foot { text-align: center; margin-top: 24px; font-size: 14px; color: #8c8c8c; }
.auth-link { color: var(--primary); }
.auth-link:hover { text-decoration: underline; }

/* ===== 表单通用 ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-btn); font-size: 14px; font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,107,217,.13);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .grid-4, .grid-3, .tool-grid { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .hero h1 { font-size: 24px; }

    /* 移动端导航：汉堡按钮 */
    .nav-toggle { display: inline-flex; }
    .nav.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* 移动端导航：右侧滑出抽屉
       fixed 相对视口定位，不再依赖 .nav 的宽度，避免页面横向溢出 / 父级宽度异常时错位；
       同时移动端去掉 .nav 的 backdrop-filter（它会创建 fixed 包含块，导致抽屉定位基准错乱） */
    .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
    .nav-links {
        position: fixed; top: 64px; left: auto; right: 0;
        height: auto; max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        width: min(78vw, 300px); flex-direction: column; align-items: stretch;
        gap: 2px; background: #fff; padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0;
        box-shadow: -8px 0 24px rgba(15,23,42,.10);
        transform: translateX(105%); transition: transform .28s ease;
        overflow-y: auto; z-index: 60;
    }
    .nav.open .nav-links { transform: translateX(0); }
    .nav-links a { padding: 12px 14px; border-radius: 8px; font-size: 15px; white-space: normal; }
    .nav-links a:hover { background: var(--bg-subtle); }
    .nav-links a.active { background: var(--tag-bg); }
    .nav-login-btn { margin-top: 10px; text-align: center; padding: 12px 20px; }
    .nav-login-btn:hover { background: var(--gradient); box-shadow: 0 2px 8px rgba(91,107,217,.25); transform: none; }

    /* 移动端页脚：链接换行居中 */
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
}

/* 抽屉打开时锁定页面滚动 + 半透明遮罩 */
@media (max-width: 768px) {
    body.menu-open { overflow: hidden; }
    body.menu-open::before {
        content: ''; position: fixed; inset: 0; z-index: 40;
        background: rgba(15, 23, 42, .45);
    }
}

/* ===== 小屏微调（≤480px） ===== */
@media (max-width: 480px) {
    .hero { padding: 44px 16px 64px; }
    .hero h1 { font-size: 22px; }
    .hero-search button { padding: 0 18px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stats { margin-top: -20px; }
    .stat { padding: 14px 12px; }
    .stat-num { font-size: 20px; }
    .stat-label { font-size: 12px; }
    .stat-sub { font-size: 10.5px; }
    .section-head h2 { font-size: 17px; }
}

/* ============================================================
   管理后台布局（参考 Code Times PR 系列：深色侧边栏）
   ============================================================ */
/* overflow-x: clip 而非 hidden：避免创建滚动容器导致内部 position:sticky 失效 */
.admin-layout { min-height: 100vh; background: #f0f2f5; overflow-x: clip; }
.admin-header {
    height: 64px; background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; position: sticky; top: 0; z-index: 10;
}
/* 注意：前台品牌图标也用 .logo 类（28×28 渐变方块），此处需重置，避免后台 header 被渲染成紫色色带 */
.admin-header .logo {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    width: auto; height: auto; border-radius: 0; background: none;
    color: inherit; font-size: inherit; letter-spacing: normal; font-weight: inherit;
}
.admin-header .logo-icon {
    width: 32px; height: 32px; background: #001529; color: #fff; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold;
    flex-shrink: 0;
}
.admin-header .logo-text {
    font-size: 18px; font-weight: 600; color: #262626;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-header .admin-user { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #595959; font-size: 14px; flex-shrink: 0; }
.admin-header .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
/* 移动端侧栏开关（桌面隐藏） */
.admin-sider-toggle {
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-right: 10px; border: 1px solid #e5e7eb;
    border-radius: 6px; background: #fff; color: #262626; font-size: 17px; cursor: pointer;
}
.admin-sider-toggle:hover { border-color: var(--primary); color: var(--primary); }
.admin-sider-mask { display: none; }
/* 左侧深色列用 body 渐变铺满整页高度：长列表滚动时侧栏下方不再露白；
   sider 本身 sticky + 视口高度，菜单随滚动常驻可见 */
.admin-body {
    display: flex; align-items: stretch; min-height: calc(100vh - 64px);
    width: 100%; max-width: 100%;
    background: linear-gradient(to right, #001529 0, #001529 208px, #f0f2f5 208px, #f0f2f5 100%);
}
.admin-sider {
    width: 208px; height: calc(100vh - 64px); background: #001529; padding: 16px 0;
    flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto;
    position: sticky; top: 64px;
}
.admin-menu-item {
    height: 40px; line-height: 40px; padding: 0 24px; color: rgba(255,255,255,.65);
    font-size: 14px; cursor: pointer; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-menu-item:hover { color: #fff; }
.admin-menu-item.active { background: var(--primary); color: #fff; }
.admin-content { flex: 1 1 0; min-width: 0; max-width: 100%; padding: 24px; }

.admin-card { background: #fff; border-radius: 8px; padding: 20px 24px; min-width: 0; width: 100%; max-width: 100%; }
.admin-page-title { font-size: 16px; font-weight: 600; color: #262626; margin-bottom: 16px; }

/* 查询表单 */
.query-form { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.query-item label { display: block; font-size: 13px; color: #595959; margin-bottom: 6px; }
.query-input, .query-select {
    width: 180px; height: 32px; border: 1px solid #d9d9d9; border-radius: 6px;
    padding: 0 11px; font-size: 14px;
}
.query-input:focus, .query-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(91,107,217,.2); }
.query-btns { display: flex; gap: 8px; }
.admin-btn {
    height: 32px; padding: 0 15px; border-radius: 6px; font-size: 14px; cursor: pointer;
    border: 1px solid transparent; display: inline-flex; align-items: center;
    justify-content: center; text-decoration: none; white-space: nowrap;
}
.admin-btn.primary { background: var(--primary); color: #fff; }
.admin-btn.primary:hover { background: #7485e3; }
.admin-btn.default { background: #fff; border-color: #d9d9d9; color: #595959; }
.admin-btn.default:hover { border-color: var(--primary); color: var(--primary); }
.admin-btn.danger { background: #fff; border-color: #ffccc7; color: #ff4d4f; }
.admin-btn.danger:hover { background: #ff4d4f; color: #fff; }

/* 工具栏 */
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.admin-toolbar-title { font-size: 15px; font-weight: 600; color: #262626; }

/* 表格 */
/* 所有后台表格统一套滚动容器，窄屏只横向滚动表格，不撑破页面 */
.admin-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* table-layout: fixed：列宽由 th 决定，长文本可被 nowrap + ellipsis 截断，避免单元格撑高行 */
.admin-table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.admin-table thead th {
    background: #fafafa; color: #262626; font-weight: 600; text-align: left;
    padding: 10px 12px; border-bottom: 1px solid #f0f0f0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.admin-table tbody td {
    padding: 6px 12px; border-bottom: 1px solid #f0f0f0; color: #595959;
    vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-table tbody tr:hover { background: #f5f9ff; }
/* 操作列：禁止省略号裁剪按钮，按钮不压缩；列宽由 th 显式指定（2 按钮 ≥100px、3-4 按钮 ≥160px） */
.admin-table td.col-actions { white-space: nowrap; overflow: visible; text-overflow: clip; }
.admin-table td.col-actions .op-group,
.admin-table td.col-actions .op-btn,
.admin-table td.col-actions .op-link { flex-shrink: 0; }
/* 文章列表封面缩略图：有封面显示图，无封面显示弱化占位，便于批量补封面 */
.a-title-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.a-title-cell > a {
    min-width: 0; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a-cover-thumb, .a-cover-none {
    width: 40px; height: 24px; border-radius: 4px; flex-shrink: 0;
}
.a-cover-thumb { object-fit: cover; border: 1px solid #f0f0f0; }
.a-cover-none {
    background: #f0f2f5; border: 1px solid #e5e7eb; color: #b0b3ba;
    font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}
/* 无封面时按分类给弱色块，避免像加载失败 */
.a-cover-none.blue { background: #f0f5ff; border-color: #d6e4ff; color: #7f93d6; }
.a-cover-none.orange { background: #fff7e6; border-color: #ffe7ba; color: #d48806; font-size: 13px; }
.a-cover-none.red { background: #fff2f0; border-color: #ffccc7; color: #ff7875; font-size: 13px; }
.admin-tag { display: inline-block; font-size: 12px; padding: 0 7px; height: 22px; line-height: 20px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.admin-tag.blue { color: var(--primary); background: #e6f7ff; border-color: #91d5ff; }
.admin-tag.green { color: #52c41a; background: #f6ffed; border-color: #b7eb8f; }
.admin-tag.red { color: #ff4d4f; background: #fff2f0; border-color: #ffccc7; }
.admin-tag.orange { color: #fa8c16; background: #fff7e6; border-color: #ffd591; }
.admin-tag.gray { color: #8c8c8c; background: #fafafa; border-color: #e5e7eb; }
/* 分类标签弱化：避免被误认成可点击按钮 */
.admin-tag.cat { color: #8c8c8c; background: transparent; border-color: #e5e7eb; font-weight: 400; }
.op-link { color: var(--primary); cursor: pointer; margin-right: 12px; white-space: nowrap; }
.op-link:hover { color: #7485e3; }
.op-link.danger { color: #ff4d4f; }
.op-link.danger:hover { color: #ff7875; }
/* 操作按钮组 */
.op-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.op-btn {
    display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
    border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; color: #595959;
    font-size: 12.5px; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.op-btn:hover { border-color: var(--primary); color: var(--primary); }
.op-btn.danger:hover { border-color: #ff4d4f; color: #ff4d4f; background: #fff2f0; }
/* 列表状态 / 时间列禁止折行 */
.col-nowrap { white-space: nowrap; }

/* 键盘可达性 */
.admin-menu-item:focus-visible,
.op-link:focus-visible,
.op-btn:focus-visible,
.admin-switch:focus-visible,
.admin-btn:focus-visible,
.admin-page-btn:focus-visible,
.admin-sider-toggle:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
.admin-sider .admin-menu-item:focus-visible { outline-color: #fff; }

/* 后台轻提示 toast */
.dx-toast-wrap {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; align-items: center;
    gap: 8px; pointer-events: none;
}
.dx-toast {
    max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 6px;
    background: #262626; color: #fff; font-size: 13.5px; line-height: 1.5;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s;
}
.dx-toast.show { opacity: 1; transform: translateY(0); }
.dx-toast.error { background: #ff4d4f; }
.dx-toast.success { background: #52c41a; }

/* 后台分页 */
.admin-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding-top: 16px; font-size: 14px; color: #595959; flex-wrap: wrap; }
.admin-page-info { margin-right: auto; color: #8c8c8c; font-size: 13px; }
.admin-page-btn {
    min-width: 32px; height: 32px; line-height: 30px; text-align: center;
    border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; background: #fff; padding: 0 8px;
    color: #595959; text-decoration: none;
}
.admin-page-btn.active { border-color: var(--primary); color: var(--primary); background: #f5f7ff; }
/* 单页时上一页/下一页置灰但仍可见 */
.admin-page-btn.disabled { color: #bfbfbf; cursor: not-allowed; background: #f5f5f5; border-color: #e8e8e8; pointer-events: none; }
.page-ellipsis { min-width: 24px; text-align: center; color: #bfbfbf; user-select: none; }
.admin-page-size {
    height: 32px; padding: 0 8px; border: 1px solid #d9d9d9; border-radius: 6px;
    background: #fff; color: #595959; font-size: 13px; cursor: pointer; outline: none;
}
.admin-page-size:focus { border-color: var(--primary); }

/* ===== 列表页视口内自适应：筛选/统计固定，表格区可滚动，分页条吸底，整页不出现纵向滚动条 =====
   用法：在列表页的 .admin-layout 上加 class="admin-list-page"；长内容页（如文章编辑）不加。 */
.admin-list-page { height: 100vh; overflow: hidden; }
.admin-list-page .admin-body { height: calc(100vh - 64px); min-height: 0; }
.admin-list-page .admin-content {
    display: flex; flex-direction: column; height: 100%; min-height: 0; box-sizing: border-box;
}
.admin-list-page .admin-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* 卡片内除表格/分页外的子元素（标题、查询、工具栏、Tab 头）不参与收缩 */
.admin-list-page .admin-card > * { flex-shrink: 0; }
/* 普通列表页：表格容器直接作为卡片子元素，flex:1 占满剩余空间并内部滚动 */
.admin-list-page .admin-card > .admin-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* 速查页：Tab 面板作为卡片子元素，需自身也是 flex 列，内部再放查询/表格/分页 */
.admin-list-page .admin-card > [id^="tab-"] {
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
.admin-list-page .admin-card > [id^="tab-"] > * { flex-shrink: 0; }
.admin-list-page .admin-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.admin-list-page .admin-pagination { flex-shrink: 0; }
/* 表头吸顶：表格区内部滚动时表头常驻可见 */
.admin-list-page .admin-table thead th { position: sticky; top: 0; z-index: 2; }

/* 开关 */
.admin-switch {
    position: relative; width: 44px; height: 22px; background: var(--primary);
    border-radius: 11px; cursor: pointer; display: inline-block; vertical-align: middle;
    transition: background .2s; border: none;
}
.admin-switch::after {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; top: 2px; left: 24px; transition: left .2s;
}
.admin-switch.off { background: #bfbfbf; }
.admin-switch.off::after { left: 2px; }

/* ===== 后台响应式 ===== */
@media (max-width: 1024px) {
    .admin-sider { width: 176px; }
    .admin-body { background: linear-gradient(to right, #001529 0, #001529 176px, #f0f2f5 176px, #f0f2f5 100%); }
    .admin-menu-item { padding: 0 16px; }
    .admin-content { padding: 16px; }
    .admin-card { padding: 16px; }
    .admin-header { padding: 0 16px; }
    .admin-header .logo-text { font-size: 16px; }
}
@media (max-width: 768px) {
    .admin-header { padding: 0 12px; }
    .admin-header .logo { min-width: 0; flex: 1 1 auto; }
    .admin-header .logo-text { display: none; }
    .admin-sider-toggle { display: inline-flex; }
    .admin-body { display: block; width: 100%; max-width: 100%; background: #f0f2f5; }
    .admin-sider {
        display: none; position: fixed; top: 64px; bottom: 0; left: 0; width: 208px;
        min-height: 0; z-index: 20;
    }
    .admin-sider.open { display: flex; }
    .admin-sider-mask {
        display: none; position: fixed; top: 64px; right: 0; bottom: 0; left: 0;
        background: rgba(0,0,0,.35); z-index: 15;
    }
    .admin-sider-mask.show { display: block; }
    .admin-content { width: 100%; max-width: 100%; padding: 12px; }
    .admin-card { padding: 12px; }
    .admin-page-title { font-size: 15px; }
    .admin-toolbar { flex-wrap: wrap; gap: 8px; padding: 12px 0; }
    .admin-toolbar > span:last-child { margin-left: 0 !important; }
    .admin-toolbar-title { white-space: normal; word-break: break-word; }
    .admin-header .admin-user #adminUserName { display: none; }
    .admin-header .admin-user a { margin-left: 4px !important; font-size: 12px; }
    .query-form { display: block; width: 100%; max-width: 100%; }
    .query-input, .query-select { width: 100% !important; max-width: 100% !important; }
    .query-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 100%; }
    .query-row > * { flex: 1 1 100%; width: 100%; max-width: 100%; }
    .admin-table-wrap { width: 100% !important; max-width: 100% !important; }
    /* 小屏下列表页恢复自然滚动，不强制视口内自适应 */
    .admin-list-page { height: auto; min-height: 100vh; overflow: visible; }
    .admin-list-page .admin-body { height: auto; min-height: calc(100vh - 64px); }
    .admin-list-page .admin-content { height: auto; display: block; }
    .admin-list-page .admin-card { display: block; }
    .admin-list-page .admin-card > [id^="tab-"] { display: block; }
}

/* ============================================================
   工单页（前台公开站风格）
   ============================================================ */
.ticket-tabs { display: flex; gap: 8px; margin-top: 20px; border-bottom: 1px solid var(--border-light); }
.ticket-tab {
    padding: 10px 20px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s;
}
.ticket-tab:hover { color: var(--primary); }
.ticket-tab.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }

.ticket-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 24px; margin-top: 20px; }

.ticket-form-item { margin-bottom: 18px; }
.ticket-form-label { display: block; font-size: 13.5px; color: var(--text-body); margin-bottom: 8px; font-weight: 500; }
.ticket-form-label .required { color: #ff4d4f; margin-right: 2px; }
.ticket-input, .ticket-textarea, .ticket-select {
    width: 100%; border: 1px solid #d9dce5; border-radius: 10px; padding: 10px 14px;
    font-size: 14px; font-family: inherit; color: var(--text-title);
    transition: border-color .2s, box-shadow .2s;
}
.ticket-input:focus, .ticket-textarea:focus, .ticket-select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,107,217,.15);
}
.ticket-textarea { height: 140px; resize: vertical; line-height: 1.7; }
.ticket-form-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* 工单状态标签 */
.tk-status { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 6px; border: 1px solid; }
.tk-pending { color: #fa8c16; background: #fff7e6; border-color: #ffd591; }
.tk-processing { color: var(--primary); background: var(--tag-bg); border-color: #c5cbf2; }
.tk-resolved { color: #52c41a; background: #f6ffed; border-color: #b7eb8f; }
.tk-closed { color: #8c8c8c; background: #fafafa; border-color: var(--border); }

/* 工单列表行 */
.tk-row { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--border-light); }
.tk-row:last-child { border-bottom: none; }
.tk-main { flex: 1; min-width: 0; }
.tk-title { font-size: 14.5px; font-weight: 600; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.tk-op { flex-shrink: 0; font-size: 13px; color: var(--primary); font-weight: 500; cursor: pointer; }
.tk-op:hover { text-decoration: underline; }