:root {

    --bg: #ffffff;
    --bg-alt: #f5f7fa;
    --text: #1d1d1f;
    --text-secondary: #6e6e73;
    --border: #dfe3e8;

    --primary: #007aff;
    --primary-hover: #0066d6;
    --primary-soft: #e8f2ff;
    --accent: #32ade6;
    --card-bg: #ffffff;
    --shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --radius: 14px;
    --radius-sm: 10px;
    /* 更新日志类型色（徽章：新功能/优化/修复/安全，浅色底 + 深色字） */

    --type-feature: #0066d6;      --type-feature-soft: #e8f2ff;
    --type-improvement: #178a44;  --type-improvement-soft: #e9f8ef;
    --type-fix: #c26200;          --type-fix-soft: #fff3e0;
    --type-security: #d70015;     --type-security-soft: #ffebeb;

    --danger: #d70015;

    --gradient: linear-gradient(135deg, #007aff 0%, #32ade6 100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1117;
        --bg-alt: #10161d;
        --text: #e6edf3;
        --text-secondary: #9198a1;
        --border: #2a3138;

        --primary: #0a84ff;
        --primary-hover: #409cff;
        --primary-soft: #0c2a4d;
        --accent: #64d2ff;
        --card-bg: #141a21;
        --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
        --gradient: linear-gradient(135deg, #0066d6 0%, #2e9fdb 100%);

        --type-feature: #7fbcff;      --type-feature-soft: #0c2a4d;
        --type-improvement: #6ee7b7;  --type-improvement-soft: #0d2b22;
        --type-fix: #fcd34d;          --type-fix-soft: #2d2010;
        --type-security: #fca5a5;     --type-security-soft: #2d1212;
        --danger: #ff453a;
    }

    .hero-shot img, .app-shot img { border: 1px solid var(--border); }
}

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

html { scroll-behavior: smooth; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

.btn {
    display: inline-block; padding: 10px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: all 0.18s ease;
}
.btn-lg { padding: 13px 30px; font-size: 15px; border-radius: 12px; }
.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

.btn-light { background: #fff; color: #0066d6; }
.btn-light:hover { transform: translateY(-1px); }
.btn-outline-light { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 15px; height: 64px; }
.logo {
    font-size: 21px; font-weight: 700; color: var(--text);
    text-decoration: none; display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
}
.logo-mark {
    width: 30px; height: 30px; border-radius: 8px; background: var(--gradient);
    color: #fff; font-size: 16px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.logo-accent { color: var(--primary); }
.nav { display: flex; gap: 26px; flex: 1; }
/* 主导航链接：与用户名触发区同规格的圆角悬停背景（注意：不要用 IDE 旧缓冲覆盖本段） */
/* white-space:nowrap 防止窄屏下导航项文字被逐字折行（配合 .nav 的 overflow-x 横向滚动） */
.nav a { color: #3d3d3d; text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: 8px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.nav a:hover { color: var(--primary); background: #f3f4f6; }

/* ===== 移动端汉堡导航开关 =====
 桌面端整体隐藏；≤900px 由媒体查询启用（按钮显示、.nav 变为下拉面板）。
 开关为纯 CSS checkbox（无 JS 依赖），JS 仅做"点击外部收起"增强。 */
.hdr-nav-toggle { display: none; }
.hdr-nav-btn {
    display: none;              /* 桌面端隐藏，≤900px 显示 */
    align-items: center; justify-content: center;
    width: 38px; height: 38px;  /* 固定尺寸保证点击热区（移动端可达性） */
    border-radius: 8px; color: #3d3d3d; cursor: pointer;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}
.hdr-nav-btn:hover { color: var(--primary); background: #f3f4f6; }

.header-search-btn {
    border: none; background: transparent; color: #3d3d3d;
    cursor: pointer; padding: 7px; display: inline-flex; flex: none;
    border-radius: 8px; transition: color 0.15s, background 0.15s;
}
.header-search-btn:hover { color: var(--primary); background: #f3f4f6; }

.search-mask {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    display: flex; justify-content: center; align-items: flex-start;
    padding: 96px 16px 0;
}

.search-mask[hidden] { display: none; }

.search-panel {
    width: 100%; max-width: 640px;
    background: var(--bg); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.search-panel-form {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border-bottom: 1px solid var(--border);
}
.search-panel-field { position: relative; flex: 1; }
.search-panel-field svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); pointer-events: none;
}
.search-panel-field input {
    width: 100%; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text); outline: none;
    font-size: 15px; padding: 10px 12px 10px 38px;
    transition: border-color 0.15s;
}
.search-panel-field input:focus { border-color: var(--primary); }
.search-panel-field input::placeholder { color: var(--text-secondary); }

.search-panel-foot {
    display: flex; justify-content: flex-end; gap: 16px;
    padding: 10px 16px; font-size: 12px; color: var(--text-secondary);
}
.search-panel-foot kbd {
    font-family: inherit; font-size: 11px;
    border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
    padding: 1px 5px; background: var(--bg);
}

.hero { padding: 88px 0 64px; overflow: hidden; }
.hero-inner {
    display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center;
}
.hero-badge {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 13px; font-weight: 500; margin-bottom: 20px;
}
.hero-title { font-size: 52px; line-height: 1.2; letter-spacing: 1px; margin-bottom: 20px; }
.hero-sub { color: var(--text-secondary); font-size: 16px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-shot img {
    width: 100%; border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
}
.hero-shot:hover img { transform: translateY(-4px); }

.section { padding: 84px 0; }
.section-alt { background: var(--bg-alt); }
.section-eyebrow {
    text-align: center; color: var(--primary); font-weight: 600;
    font-size: 14px; letter-spacing: 2px; margin-bottom: 8px;
}
.section-title { font-size: 32px; text-align: center; margin-bottom: 20px; }
.section-desc { color: var(--text-secondary); text-align: center; margin-bottom: 40px; }

.rss-link {
    color: var(--text-secondary); font-size: 13px; margin-left: 8px;
    text-decoration: none; border-bottom: 1px dashed currentColor; padding-bottom: 1px;
}
.rss-link:hover { color: var(--primary); }
.section-more { margin-top: 36px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}
.feature-icon {
    width: 52px; height: 52px; border-radius: 12px; background: var(--primary-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); margin-bottom: 16px;
}
.feature-icon svg { display: block; }
.feature-card h3 { font-size: 17px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-secondary); }

.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.app-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; text-decoration: none;
    color: var(--text); box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; flex-direction: column;
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.app-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.app-icon {
    padding: 40px 0 0; display: flex; justify-content: center;
}
.app-icon img {
    width: 160px; height: 160px; object-fit: cover; border-radius: 20px;
}
.app-info { padding: 18px 20px 22px; }
.app-tag {
    display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); margin-bottom: 8px;
}
.app-info h3 { font-size: 16px; margin-bottom: 4px; }
.app-info p { font-size: 13px; color: var(--text-secondary); }

.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.advantage-card {
    text-align: center; padding: 36px 24px;
    border: 1px dashed var(--border); border-radius: var(--radius);
}
.advantage-num {
    font-size: 56px; font-weight: 800; line-height: 1;
    background: var(--gradient); -webkit-background-clip: text;
    background-clip: text; color: transparent; margin-bottom: 12px;
}
.advantage-card h3 { font-size: 16px; margin-bottom: 8px; }
.advantage-card p { font-size: 13px; color: var(--text-secondary); }

.deploy-flow {
    display: flex; align-items: stretch; gap: 14px;
    max-width: 860px; margin: 0 auto;
}
.deploy-flow-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px 20px; text-align: center;
    text-decoration: none; color: var(--text); box-shadow: var(--shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.deploy-flow-step:hover { transform: translateY(-4px); border-color: var(--primary); }

.deploy-flow-num {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 700; margin-bottom: 12px;
}
.deploy-flow-step h3 { font-size: 16px; margin-bottom: 6px; }
.deploy-flow-step p { font-size: 13px; color: var(--text-secondary); }

.deploy-flow-arrow {
    flex: none; align-self: center; width: 26px; height: 2px;
    background: var(--border); position: relative;
}
.deploy-flow-arrow::after {
    content: ''; position: absolute; right: -1px; top: -4px;
    border-left: 7px solid var(--border);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

.deploy-flow-tip {
    text-align: center; margin-top: 22px;
    font-size: 13.5px; color: var(--text-secondary);
}
.deploy-flow-tip a { color: var(--primary); text-decoration: none; }
.deploy-flow-tip a:hover { text-decoration: underline; }

@media (max-width: 720px) {

    .deploy-flow { flex-direction: column; }
    .deploy-flow-arrow {
        width: 2px; height: 22px; margin: 0 auto;
    }
    .deploy-flow-arrow::after {
        right: -4px; top: auto; bottom: -1px;
        border-left: 5px solid transparent; border-right: 5px solid transparent;
        border-top: 7px solid var(--border); border-bottom: none;
    }
}

.dl-hero { padding: 72px 0 8px; }
.req-chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.req-chip {
    padding: 5px 16px; border-radius: 999px; font-size: 13px;
    background: var(--primary-soft); color: var(--primary); font-weight: 500;
}
.dl-main { padding-top: 48px; }
.dl-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 36px; max-width: 760px; margin: 0 auto;
}
.dl-card-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.dl-version-wrap { display: flex; align-items: center; gap: 10px; }
.dl-version { font-size: 30px; font-weight: 800; }
.dl-badge {
    padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--gradient); color: #fff;
}
.dl-date { color: var(--text-secondary); font-size: 13px; }
.dl-meta {
    display: flex; gap: 20px; flex-wrap: wrap;
    color: var(--text-secondary); font-size: 13px; margin-bottom: 24px;
}
.dl-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.dl-sha {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px;
}
.dl-sha-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.dl-sha code {
    font-size: 12px; word-break: break-all; flex: 1;
    font-family: Consolas, Monaco, monospace;
}
.dl-copy {
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
    border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer;
    flex-shrink: 0;
}
.dl-copy:hover { border-color: var(--primary); color: var(--primary); }
.dl-empty { padding: 40px 0; }
.dl-empty h2 { margin-bottom: 10px; }
.dl-empty .btn { margin-top: 8px; }
.dl-history { max-width: 760px; margin: 0 auto; }
.dl-history-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 10px;
    background: var(--card-bg);
}
.dl-h-version { font-weight: 700; min-width: 80px; }
.dl-h-badge {
    font-size: 11px; padding: 2px 10px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
}
.dl-h-date, .dl-h-size { color: var(--text-secondary); font-size: 13px; }
.dl-history-row .btn { margin-left: auto; }
.text-link { color: var(--primary); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.cta {
    background: var(--gradient); color: #fff;
    padding: 76px 0; text-align: center;
}
.cta h2 { font-size: 30px; margin-bottom: 10px; }
.cta p { opacity: 0.9; margin-bottom: 28px; }
.cta .hero-actions { justify-content: center; }

.placeholder { padding: 90px 0; }
.placeholder-badge {
    display: inline-block; margin-top: 8px; padding: 4px 14px;
    border: 1px dashed var(--border); border-radius: 999px;
    color: var(--text-secondary); font-size: 13px;
}
.notfound-code { font-size: 76px; color: var(--primary); margin-bottom: 8px; }

.site-footer {
    background: var(--bg-alt); border-top: 1px solid var(--border);
    padding: 56px 0 28px; margin-top: 0;
}
.footer-grid {

    display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px;
    padding-bottom: 36px; border-bottom: 1px solid var(--border);
}
.footer-logo { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.footer-logo span { color: var(--primary); }
.footer-desc { font-size: 13px; color: var(--text-secondary); max-width: 280px; }
.footer-col h4 { font-size: 14px; margin-bottom: 14px; }
.footer-col a {
    display: block; color: var(--text-secondary); text-decoration: none;
    font-size: 13px; margin-bottom: 10px; transition: color 0.15s;
}
.footer-col a:hover { color: var(--primary); }
.footer-meta {
    padding-top: 22px; font-size: 12px; color: var(--text-secondary);
    /* 底部栏水平对齐：flex 两端对称布局（版权居左 / 备案号居右），垂直居中保证
 备案徽标图标与文字在同一水平线上 */
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.footer-meta a { color: var(--text-secondary); text-decoration: none; }
.footer-meta a:hover { color: var(--primary); }

.footer-beian {
    display: inline-flex; align-items: center; gap: 12px;
}
.footer-police {
    display: inline-flex; align-items: center; gap: 4px;
}
.footer-police img { display: block; }

@media (max-width: 720px) {
    .footer-meta { justify-content: center; text-align: center; }
}

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-title { font-size: 38px; }
    .feature-grid, .app-grid, .advantage-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .header-inner { gap: 10px; }

    /* ===== 移动端导航：汉堡按钮 + 下拉面板 =====
     文字导航在窄屏一行放不下（此前横向滚动条体验差且被两侧挤压），
     改为收进汉堡菜单：点击展开全宽面板，逐行列出导航项。 */
    .hdr-nav-btn { display: inline-flex; flex: none; }

    /* 面板默认收起；checkbox 勾选时展开（.site-header 为 sticky 定位，作为面板定位参照） */
    .nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 2px;
        padding: 8px 14px 14px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
        z-index: 99; /* 盖住页头下方内容即可（页头自身 z-index:100） */
    }
    .hdr-nav-toggle:checked ~ .nav { display: flex; }

    /* 面板内导航项：加大点击热区，适配触屏 */
    .nav a { padding: 11px 12px; font-size: 15px; border-radius: 8px; }

    /* 导航收进面板后失去 flex:1 撑开作用。注意 flex 中多个 auto 外边距会平分剩余空间，
     所以必须同时清掉 .header-user 原有的 margin-left:auto（基础规则在文件后方、
     同优先级会覆盖本块，故用 .header-inner 前缀提高优先级），
     让搜索按钮独吃左侧剩余空间，「搜索 + 消息 + 用户 + 汉堡」才能整体靠右成组 */
    .header-search-btn { margin-left: auto; }
    .header-inner .header-user { margin-left: 0; }

    .search-mask { padding-top: 64px; }
}
@media (max-width: 560px) {
    .hero-title { font-size: 30px; }
    .section-title { font-size: 26px; }
    .section { padding: 60px 0; }
}

.cl-latest {
    display: inline-flex; align-items: center; gap: 16px;
    margin-top: 8px; padding: 10px 18px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card-bg);
}
.cl-latest-version { font-weight: 600; color: var(--text); }
.cl-latest .btn { margin-right: -8px; } 

.cl-timeline { max-width: 760px; margin: 0 auto; }
.cl-row {
    display: flex; gap: 24px;
    padding: 18px 0; border-bottom: 1px dashed var(--border);
}
.cl-row:last-child { border-bottom: none; }
.cl-row-head {
    flex: 0 0 130px; text-align: right;
    display: flex; flex-direction: column; gap: 4px; padding-top: 2px;
}
.cl-version { font-weight: 700; font-size: 17px; color: var(--text); }
.cl-date { font-size: 13px; color: var(--text-secondary); }
.cl-row-body { flex: 1; display: flex; gap: 12px; align-items: flex-start; }
.cl-badge {
    flex: 0 0 auto; margin-top: 2px;
    font-size: 12px; font-weight: 600; line-height: 1;
    padding: 5px 10px; border-radius: 999px;
}
.cl-badge--feature    { color: var(--type-feature);     background: var(--type-feature-soft); }
.cl-badge--improvement{ color: var(--type-improvement); background: var(--type-improvement-soft); }
.cl-badge--fix        { color: var(--type-fix);         background: var(--type-fix-soft); }
.cl-badge--security   { color: var(--type-security);    background: var(--type-security-soft); }
.cl-entry-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.cl-entry-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

@media (max-width: 560px) {

    .cl-row { flex-direction: column; gap: 8px; }
    .cl-row-head { flex: none; flex-direction: row; align-items: baseline; text-align: left; gap: 10px; }
}

.docs-layout {
    display: grid; grid-template-columns: 260px 1fr; gap: 40px;
    padding-top: 40px; padding-bottom: 72px; align-items: start;
}

.docs-layout-toc { grid-template-columns: 240px 1fr 210px; }

.docs-sidebar {
    position: sticky; top: 84px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card-bg); padding: 18px 12px;
    max-height: calc(100vh - 110px); overflow-y: auto;
}
.docs-sidebar-title {
    font-weight: 700; font-size: 15px; padding: 0 10px 12px;
    border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.docs-tree-item a {
    display: block; padding: 7px 10px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none; font-size: 14px;
}
.docs-tree-item a:hover { color: var(--primary); background: var(--primary-soft); }
.docs-tree-item.depth-1 a { padding-left: 22px; }
.docs-tree-item.depth-2 a { padding-left: 34px; }
.docs-tree-item.category-item a {
    color: var(--text); font-weight: 600;
}
.docs-tree-item.doc-item.is-active a {
    color: var(--primary); background: var(--primary-soft); font-weight: 600;
}

.docs-toc {
    position: sticky; top: 84px;
    max-height: calc(100vh - 110px); overflow-y: auto;
}
.docs-toc-title {
    font-weight: 700; font-size: 13px; color: var(--text-secondary);
    text-transform: none; padding-left: 12px; margin-bottom: 8px;
}
.docs-toc-item {
    display: block; padding: 5px 12px; border-left: 2px solid var(--border);
    color: var(--text-secondary); text-decoration: none; font-size: 13px;
    line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docs-toc-item:hover { color: var(--primary); }

.docs-toc-item.lv-3, .docs-toc-item.lv-4 { padding-left: 24px; font-size: 12.5px; }

.docs-toc-item.is-current {
    color: var(--primary); font-weight: 600; border-left-color: var(--primary);
}

.docs-doc-body h2[id], .docs-doc-body h3[id], .docs-doc-body h4[id] {
    scroll-margin-top: 92px;
}

.docs-doc-head { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 24px; }
.docs-doc-title { font-size: 30px; margin-bottom: 10px; }
.docs-doc-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--text-secondary); }

.docs-doc-body { font-size: 15px; line-height: 1.8; color: var(--text); }
.docs-doc-body h1, .docs-doc-body h2, .docs-doc-body h3,
.docs-doc-body h4, .docs-doc-body h5, .docs-doc-body h6 {
    margin: 28px 0 12px; line-height: 1.4;
}
.docs-doc-body h1 { font-size: 24px; }
.docs-doc-body h2 { font-size: 20px; }
.docs-doc-body h3 { font-size: 17px; }
.docs-doc-body p { margin-bottom: 14px; }
.docs-doc-body a { color: var(--primary); }
.docs-doc-body ul, .docs-doc-body ol { margin: 0 0 14px 22px; }
.docs-doc-body li { margin-bottom: 6px; }
.docs-doc-body blockquote {
    margin: 0 0 14px; padding: 10px 16px;
    border-left: 3px solid var(--primary); background: var(--primary-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
}
.docs-doc-body pre {
    background: #0d1117; color: #e6edf3;
    padding: 16px; border-radius: var(--radius-sm);
    overflow-x: auto; margin-bottom: 16px; font-size: 13px; line-height: 1.6;
}
.docs-doc-body code {
    font-family: Consolas, Monaco, "Courier New", monospace;
}
.docs-doc-body :not(pre) > code {
    background: var(--bg-alt); color: var(--type-fix);
    padding: 2px 6px; border-radius: 6px; font-size: 13px;
}
.docs-doc-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.docs-pager {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border);
}
.docs-pager-link {
    display: flex; flex-direction: column; gap: 4px; max-width: 46%;
    padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
}
.docs-pager-link span { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.docs-pager-link:hover { border-color: var(--primary); color: var(--primary); }
.docs-pager-link.is-next { margin-left: auto; text-align: right; }
.docs-pager-link.is-disabled { opacity: 0.5; cursor: default; }

.docs-empty { padding: 60px 0; }

@media (max-width: 1200px) {

    .docs-layout-toc { grid-template-columns: 260px 1fr; }
    .docs-layout-toc .docs-toc { display: none; }
}

@media (max-width: 900px) {

    .docs-layout { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
    .docs-sidebar { position: static; max-height: none; }
    .docs-doc-title { font-size: 24px; }
    .docs-pager { flex-direction: column; }
    .docs-pager-link, .docs-pager-link.is-next { max-width: 100%; text-align: left; }

    .docs-landing-grid { grid-template-columns: 1fr; }
    .docs-landing-hero { padding: 40px 0 8px; }
    .docs-landing-title { font-size: 28px; }
}

.docs-landing-hero {
    padding: 56px 0 4px; text-align: center;
}
.docs-landing-title { font-size: 34px; margin-bottom: 14px; }
.docs-landing-desc {
    max-width: 640px; margin: 0 auto; color: var(--text-secondary);
    font-size: 15px; line-height: 1.8;
}
.docs-landing-main { padding-top: 40px; padding-bottom: 72px; }
.docs-landing-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.docs-landing-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card-bg); padding: 22px 22px 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.docs-landing-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.08);
}
.docs-landing-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.docs-landing-card-title { font-size: 18px; }
.docs-landing-card-count {
    flex: none; font-size: 12px; color: var(--primary);
    background: var(--primary-soft); border-radius: 999px; padding: 2px 10px;
}
.docs-landing-docs { list-style: none; margin: 0 0 6px; }
.docs-landing-docs li { border-bottom: 1px dashed var(--border); }
.docs-landing-docs li:last-child { border-bottom: none; }
.docs-landing-docs a {
    display: block; padding: 8px 2px; color: var(--text-secondary);
    text-decoration: none; font-size: 14px;
}
.docs-landing-docs a:hover { color: var(--primary); }
.docs-landing-more {
    font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px;
}

.docs-landing-card-btn { margin-top: auto; align-self: flex-start; }
.docs-landing-empty {
    color: var(--text-secondary); font-size: 14px; margin-bottom: 8px;
}

.mk-tabs {
    display: inline-flex; gap: 6px; margin-top: 22px;
    padding: 5px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--card-bg);
}
.mk-tab {
    padding: 7px 26px; border-radius: 999px; text-decoration: none;
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
.mk-tab:hover { color: var(--primary); }
.mk-tab.is-active { background: var(--primary); color: #fff; }

.mk-search {
    display: flex; justify-content: center; gap: 8px; margin-top: 16px;
}
.mk-search-input {
    width: 320px; max-width: 60vw; padding: 9px 14px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card-bg); color: var(--text); font-size: 14px; outline: none;
}
.mk-search-input:focus { border-color: var(--primary); }

.mk-cats {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px;
}
.mk-cat {
    padding: 6px 18px; border: 1px solid var(--border); border-radius: 999px;
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.mk-cat:hover { color: var(--primary); border-color: var(--primary); }
.mk-cat.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.mk-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mk-thumb {
    aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
    background: var(--bg-alt); border-bottom: 1px solid var(--border); overflow: hidden;
}
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mk-ph { font-size: 52px; opacity: 0.55; }

.mk-card-meta {
    display: flex; justify-content: space-between; margin-top: 12px;
    font-size: 12px; color: var(--text-secondary);
}

.mk-soon {
    display: flex; align-items: center; gap: 14px;
    margin-top: 34px; padding: 20px 24px;
    border: 1px dashed var(--primary); border-radius: var(--radius);
    background: var(--primary-soft);
}
.mk-soon-icon { font-size: 26px; }
.mk-soon h3 { font-size: 15px; margin-bottom: 4px; }
.mk-soon p { font-size: 13px; color: var(--text-secondary); }

.mk-crumb { font-size: 13px; color: var(--text-secondary); margin-bottom: 22px; }
.mk-crumb .text-link { margin-right: 6px; }
.mk-head {
    display: flex; gap: 26px; align-items: flex-start;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.mk-head-thumb {
    flex: 0 0 220px; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); background: var(--bg-alt); overflow: hidden;
}
.mk-head-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-head-thumb .mk-ph { font-size: 64px; }
.mk-head-info { flex: 1; min-width: 0; }
.mk-head-title { font-size: 26px; margin-bottom: 10px; }
.mk-head-meta { margin-bottom: 12px; }
.mk-head-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }
.mk-head-stats {
    display: flex; flex-wrap: wrap; gap: 18px;
    font-size: 13px; color: var(--text-secondary);
}

.mk-detail-body { font-size: 15px; line-height: 1.8; }
.mk-detail-body img { max-width: 100%; border-radius: var(--radius-sm); }
.mk-detail-body pre {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px 16px; overflow-x: auto; font-size: 13px;
}
.mk-detail-body code { background: var(--bg-alt); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.mk-detail-body blockquote {
    margin: 0; padding: 8px 16px; border-left: 3px solid var(--primary);
    color: var(--text-secondary); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mk-detail-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.mk-versions { display: flex; flex-direction: column; gap: 14px; }
.mk-version-row {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 16px 20px;
}
.mk-version-head {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.mk-version-num { font-weight: 700; color: var(--primary); }
.mk-version-date, .mk-version-size { font-size: 13px; color: var(--text-secondary); }
.mk-version-head .btn { margin-left: auto; }

.mk-version-soon {
    margin-left: auto; font-size: 12px; color: var(--text-secondary);
    padding: 4px 12px; border: 1px dashed var(--border); border-radius: 999px;
}
.mk-version-log {
    margin-top: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.7;
}

@media (max-width: 900px) {
    .mk-head { flex-direction: column; }
    .mk-head-thumb { flex: none; width: 100%; }
    .mk-head-title { font-size: 22px; }
}

.cm-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.cm-sort-tabs { display: inline-flex; gap: 4px; }
.cm-sort-tab {
    padding: 6px 16px; border-radius: 999px; text-decoration: none;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.cm-sort-tab:hover { color: var(--primary); }
.cm-sort-tab.is-active { background: var(--primary); color: #fff; }

.cm-post-soon {
    font-size: 13px; color: var(--text-secondary);
    padding: 7px 16px; border: 1px dashed var(--border); border-radius: 999px;
    cursor: not-allowed;
}

.cm-list { display: flex; flex-direction: column; gap: 12px; }
.cm-row {
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 16px 20px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cm-row:hover { border-color: var(--primary); box-shadow: var(--shadow); }

.cm-row-stats { display: flex; gap: 14px; flex: 0 0 auto; padding-top: 2px; }
.cm-stat { text-align: center; min-width: 44px; }
.cm-stat b { display: block; font-size: 17px; color: var(--primary); }
.cm-stat span { font-size: 11px; color: var(--text-secondary); }
.cm-row-main { flex: 1; min-width: 0; }
.cm-row-title {
    display: inline; font-size: 16px; font-weight: 600; color: var(--text);
    text-decoration: none;
}
.cm-row-title:hover { color: var(--primary); }
.cm-row-badges { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: 2px; }
.cm-row-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin-top: 8px; font-size: 12px; color: var(--text-secondary);
}

/* 个人中心列表行操作区（楼主自助管理：编辑/删除自己的问题与回复） */
.cm-row-actions {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding-top: 2px; font-size: 13px;
}
.cm-row-del { display: inline-flex; }
/* 删除按钮：弱化为文字样式，悬停转危险色（不用实心按钮，避免操作区喧宾夺主） */
.cm-row-del-btn {
    border: none; background: none; padding: 0;
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.cm-row-del-btn:hover { color: var(--danger); }

.cm-cat-chip {
    padding: 2px 10px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); font-size: 12px;
}
.cm-cat-chip:empty { display: none; }

.cm-badge {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600; line-height: 1.6;
}
.cm-badge--top { background: #e5484d; color: #fff; }
.cm-badge--featured { background: #d97706; color: #fff; }
.cm-badge--accepted { background: #1d9e55; color: #fff; }

.cm-pager {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 24px; flex-wrap: wrap; gap: 10px;
}
.cm-pager-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-pager-link {
    display: inline-block; min-width: 34px; padding: 5px 10px; text-align: center;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
}
.cm-pager-link:hover { border-color: var(--primary); color: var(--primary); }
.cm-pager-link.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cm-pager-ellipsis { color: var(--text-secondary); padding: 0 4px; }
.cm-pager-info { font-size: 13px; color: var(--text-secondary); }

.cm-q-title { font-size: 24px; margin-bottom: 12px; }
.cm-q-badges { display: inline-flex; gap: 6px; vertical-align: 4px; }
.cm-q-badges:empty { display: none; }
.cm-q-body {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 24px;
    font-size: 15px; line-height: 1.8;
}
.cm-q-body img { max-width: 100%; border-radius: var(--radius-sm); }
.cm-q-body pre {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px 16px; overflow-x: auto; font-size: 13px;
}
.cm-q-body code { background: var(--bg-alt); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.cm-q-body blockquote {
    margin: 0; padding: 8px 16px; border-left: 3px solid var(--primary);
    color: var(--text-secondary); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cm-q-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.cm-replies-title { margin-top: 34px; font-size: 20px; }
.cm-answers { display: flex; flex-direction: column; gap: 12px; }
.cm-answer {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 16px 20px;
}
.cm-answer-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 10px;
}
.cm-answer-author { font-size: 14px; }
.cm-answer-meta, .cm-answer-floor { font-size: 12px; color: var(--text-secondary); }

.cm-answer-floor { margin-left: auto; }
.cm-answer-badges:empty { display: none; }
.cm-answer-body { font-size: 14px; line-height: 1.8; color: var(--text); }
.cm-answer-body img { max-width: 100%; border-radius: var(--radius-sm); }
.cm-answer-body code { background: var(--bg-alt); padding: 2px 6px; border-radius: 6px; font-size: 13px; }

/* ---- 楼中楼回复：子回复缩进挂在父回复下 + 「回复」按钮 + 回复标记条 ---- */
/* 回复按钮（顶层次级文本按钮，不抢视觉焦点） */
.cm-answer-replybtn {
    margin-left: auto; padding: 2px 10px; font-size: 12px;
    border: 1px solid var(--border); border-radius: 999px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
}
.cm-answer-replybtn:hover { border-color: var(--primary); color: var(--primary); }
/* 有回复按钮时楼层号不再用 margin-left:auto 推到最右（按钮占最右位） */
.cm-answer-head .cm-answer-floor { margin-left: 0; }
.cm-answer-head .cm-answer-badges:not(:empty) + .cm-answer-replybtn { margin-left: auto; }
.cm-answer-head .cm-answer-badges:empty + .cm-answer-replybtn { margin-left: auto; }

/* 子回复容器：左侧竖线缩进区分层级 */
.cm-answer-children {
    margin-top: 10px; padding: 4px 0 2px 16px;
    border-left: 2px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
}
.cm-answer-child { padding: 2px 0; }
.cm-answer-child .cm-answer-head { gap: 8px; margin-bottom: 4px; }
.cm-answer-child .cm-answer-body { font-size: 13px; line-height: 1.7; }
/* 「回复 @xxx」标签（子回复头） */
.cm-reply-to { font-size: 12px; color: var(--text-secondary); }
.cm-reply-to::before { content: '↳'; margin-right: 4px; color: var(--primary); }
/* 子回复的回复按钮不推到最右（紧跟时间后面即可） */
.cm-answer-child .cm-answer-replybtn { margin-left: auto; }

/* 回复框顶部的回复标记条：提示当前正在回复谁，可 × 取消 */
.cm-replying {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 0; padding: 7px 12px;
    font-size: 13px; color: var(--text);
    background: var(--primary-soft); border-radius: var(--radius-sm);
}
/* 关键修复：display:flex 会覆盖 hidden 属性的 UA 默认 display:none，
 导致标记条在页面加载后始终可见、点 × 取消时视觉无反应（连带把 parent_id
 静默清零，回复落成顶级楼层）。必须显式声明 hidden 态优先级最高 */
.cm-replying[hidden] { display: none; }
.cm-replying b { color: var(--primary); }
.cm-replying-cancel {
    margin-left: auto; width: 20px; height: 20px; padding: 0;
    line-height: 18px; text-align: center; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, .08); color: var(--text-secondary);
    font-size: 13px; cursor: pointer;
}
.cm-replying-cancel:hover { background: rgba(0, 0, 0, .15); color: var(--text); }

.cm-reply-box {
    margin-top: 26px; padding: 22px 24px;
    border: 1px dashed var(--border); border-radius: var(--radius);
    background: var(--bg-alt);
}
.cm-reply-box h3 { font-size: 16px; margin-bottom: 6px; }
.cm-reply-box .section-desc { margin-bottom: 0; }
.cm-reply-box .btn { margin-top: 12px; }

.cm-reply-textarea {
    width: 100%; margin-top: 12px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card-bg); color: var(--text);
    font-size: 14px; font-family: inherit; line-height: 1.7;
    resize: vertical;
}
.cm-reply-textarea:focus { outline: none; border-color: var(--primary); }
.cm-reply-submit { margin-top: 12px; }

.auth-section { padding: 48px 0 72px; }
.auth-card {
    max-width: 420px; margin: 0 auto;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 36px 34px;
    box-shadow: var(--shadow);
}
.auth-card--wide { max-width: 720px; }
.auth-title { font-size: 22px; margin-bottom: 6px; }
.auth-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 22px; }

.auth-error {
    padding: 10px 14px; margin-bottom: 18px;
    border-radius: var(--radius-sm); font-size: 13px;
    background: var(--type-security-soft); color: var(--type-security);
}
/* 一次性成功/信息提示条（找回密码防枚举统一提示等，绿色调与错误条区分；
 复用更新日志 improvement 绿色变量，无新增变量） */
.auth-notice {
    padding: 10px 14px; margin-bottom: 18px;
    border-radius: var(--radius-sm); font-size: 13px;
    background: var(--type-improvement-soft); color: var(--type-improvement);
}

.auth-field { margin-bottom: 16px; }
.auth-field label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--text);
}
.auth-field input, .auth-field select, .auth-field textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text);
    font-size: 14px; font-family: inherit;
    transition: border-color 0.15s ease;
}
.auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus {
    outline: none; border-color: var(--primary);
}

.auth-field textarea { line-height: 1.7; resize: vertical; }

.auth-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--text-secondary); }

.auth-captcha-row { display: flex; align-items: center; gap: 10px; }
.auth-captcha-row input { flex: 1; }
.auth-captcha-img {
    height: 40px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); cursor: pointer;
}

.auth-submit { width: 100%; margin-top: 6px; padding: 11px 0; font-size: 15px; }

.auth-alt {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px; font-size: 13px; color: var(--text-secondary);
}
.auth-back { color: var(--text-secondary); text-decoration: none; }
.auth-back:hover { color: var(--primary); }

.profile-notice {
    padding: 10px 14px; margin-bottom: 18px;
    border-radius: var(--radius-sm); font-size: 13px;
    background: var(--type-improvement-soft); color: var(--type-improvement);
}

.profile-card {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 8px;
    padding: 16px 20px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-alt);
}
.profile-meta { display: flex; flex-direction: column; gap: 4px; }
.profile-username { font-size: 17px; font-weight: 700; }
.profile-sub { font-size: 12px; color: var(--text-secondary); }
.profile-stats { display: flex; gap: 20px; }
.profile-subtitle { font-size: 16px; margin: 24px 0 12px; }

.profile-pending { font-size: 12px; color: var(--type-fix); }
.profile-empty { font-size: 13px; color: var(--text-secondary); }

.profile-actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 8px;
}

.profile-delete-btn { background: var(--type-security-soft); color: var(--type-security); border: 1px solid var(--type-security-soft); }
.profile-delete-btn:hover { background: var(--type-security); color: #fff; }

/* 两栏网格：左栏固定宽，右栏 minmax(0,1fr) 防长内容撑破 */
.uc-layout {
    display: grid; grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px; align-items: start;
}

.uc-side {
    position: sticky; top: 24px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 10px;
    box-shadow: var(--shadow);
}

.uc-side-user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 12px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.uc-side-avatar {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.uc-side-username {
    font-size: 13px; font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.uc-side-group-label {
    padding: 10px 10px 4px; font-size: 11px; color: var(--text-secondary);
}

.uc-side-link {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 13.5px; color: var(--text); text-decoration: none;
    transition: background 0.15s ease;
}
.uc-side-link svg { flex: none; color: var(--text-secondary); }
.uc-side-link:hover { background: var(--bg-alt); }
.uc-side-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.uc-side-link.active svg { color: var(--primary); }

.uc-side-badge {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--type-security); color: #fff;
    font-size: 11px; line-height: 18px; text-align: center;
}

.dev-reject-reason {
    margin: 8px 0 2px; padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--type-security-soft); color: var(--type-security);
    font-size: 12.5px; line-height: 1.6;
}

.uc-content {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 32px 36px;
    box-shadow: var(--shadow); min-width: 0;
}

.uc-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.uc-head-avatar {
    width: 72px; height: 72px; flex: none; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.uc-head-main { flex: 1; min-width: 0; }
.uc-head-name { font-size: 20px; font-weight: 700; word-break: break-all; }
.uc-head-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

@media (max-width: 860px) {
    .uc-layout { grid-template-columns: 1fr; }
    .uc-side { position: static; }
    .uc-content { padding: 24px 20px; }
}

.admin-body { background: var(--bg-alt); }
.admin-layout { display: flex; min-height: 100vh; }
.admin-side {
    width: 210px; flex-shrink: 0; display: flex; flex-direction: column;
    background: var(--card-bg); border-right: 1px solid var(--border); padding: 20px 14px;
}
.admin-logo { font-size: 17px; font-weight: 800; text-decoration: none; color: var(--text); margin-bottom: 22px; padding: 0 8px; }
.admin-logo span { color: var(--primary); }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a {
    padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: 14px; color: var(--text); text-decoration: none;
}
.admin-nav a:hover { background: var(--bg-alt); }
.admin-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.admin-nav-group {
    margin: 14px 8px 6px; font-size: 12px; color: var(--text-secondary);
}

.admin-nav-disabled { padding: 9px 12px; font-size: 14px; color: var(--text-secondary); opacity: 0.6; }

.admin-side-foot {
    margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.admin-user { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-logout-btn {
    padding: 5px 10px; font-size: 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-secondary); cursor: pointer;
}
.admin-logout-btn:hover { color: var(--primary); border-color: var(--primary); }

.admin-main { flex: 1; padding: 28px 32px; min-width: 0; }
.admin-page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.admin-title { font-size: 20px; }
.admin-sub { font-size: 13px; color: var(--text-secondary); }
.admin-subtitle { font-size: 15px; margin: 24px 0 10px; }

.admin-notice { background: var(--type-improvement-soft); color: var(--type-improvement); }

.admin-toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.admin-search { width: 240px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
.admin-toolbar select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }

.admin-table {
    width: 100%; border-collapse: collapse; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.admin-table th, .admin-table td { padding: 10px 12px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table th { background: var(--bg-alt); color: var(--text-secondary); font-weight: 600; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-cell-title { max-width: 320px; }
.admin-cell-title a { color: var(--text); text-decoration: none; }
.admin-cell-title a:hover { color: var(--primary); }
.admin-cell-nums { white-space: nowrap; color: var(--text-secondary); }
.admin-cell-time { white-space: nowrap; color: var(--text-secondary); }

.admin-cell-ops { display: flex; gap: 6px; white-space: nowrap; }
.admin-op {
    padding: 4px 9px; font-size: 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); cursor: pointer;
}
.admin-op:hover { border-color: var(--primary); color: var(--primary); }
.admin-op-danger { color: var(--type-security); }
.admin-op-danger:hover { border-color: var(--type-security); color: var(--type-security); }
.admin-op-pass { color: #16a34a; }
.admin-op-pass:hover { border-color: #16a34a; color: #16a34a; }

.admin-report-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.admin-cell-muted { color: var(--text-secondary); }

.badge {
    display: inline-block; padding: 2px 8px; font-size: 12px;
    border-radius: 999px; background: var(--bg-alt); color: var(--text-secondary);
}
.badge-danger { background: var(--type-security-soft); color: var(--type-security); }

.admin-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.admin-pager div { display: flex; gap: 8px; }
.admin-pager-info { font-size: 12px; color: var(--text-secondary); }
.admin-empty { font-size: 13px; color: var(--text-secondary); padding: 20px 0; }

.admin-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
}
.admin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-card-stat h2 { font-size: 15px; margin-bottom: 12px; }
.admin-stat-line { font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

.dstats-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.dstats-item {
    background: var(--bg, #fff); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px 10px; text-align: center;
}
.dstats-num { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; }
.dstats-label { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

.dstats-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dstats-tabs { display: flex; gap: 4px; }
.dstats-tabs a {
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
    padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.dstats-tabs a.active { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.dstats-version-form select { padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); }

.dstats-ua { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dstats-dist-card { margin-top: 24px; }

@media (max-width: 1100px) { .dstats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .dstats-grid { grid-template-columns: repeat(2, 1fr); } }

.admin-field { margin-bottom: 18px; }
.admin-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.admin-check { display: flex !important; align-items: center; gap: 8px; font-weight: 600; }
.admin-check input { width: auto !important; }
.admin-field-hint { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }

/* ===== 用户头像（前台 header / 用户中心侧栏 / 个人中心头部 / 编辑资料页 / 后台用户管理） =====
 约定：头像图统一圆形裁切 object-fit:cover，无头像时模板回退默认人形 SVG（容器着色不变） */
.header-user-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    object-fit: cover; flex: none; display: block;
}

/* 无头像时的默认人形图标：与头像 22px 同尺寸，避免视觉忽大忽小 */
.header-user-icon {
    width: 22px; height: 22px; flex: none;
}

.uc-side-avatar img {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; display: block;
}

.uc-head-avatar img {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; display: block;
}

/* 编辑资料页「更换头像」卡片：左预览圆 + 右表单（移动端换行为上下堆叠） */
.avatar-edit-card {
    display: flex; align-items: flex-start; gap: 24px;
    padding: 20px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg);
}
.avatar-edit-preview {
    width: 88px; height: 88px; flex: none; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.avatar-edit-preview img {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; display: block;
}
.avatar-edit-form { flex: 1; min-width: 0; }
.avatar-edit-btn { margin-top: 12px; padding: 9px 22px; width: auto; }
/* 文件选择框在部分浏览器默认过窄，统一拉满宽度与 auth-input 一致 */
.avatar-edit-form input[type="file"] { width: 100%; font-size: 13px; color: var(--text-secondary); }

/* 个人中心统计卡可点击态（跳我的问题/我的回复独立页） */
a.profile-stat-link { text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
a.profile-stat-link:hover { border-color: var(--primary); transform: translateY(-2px); }

/* ===== 后台用户管理头像 =====
 列表：用户名单元格 = 小圆头像 + 用户名 同行 */
.admin-user-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.admin-user-avatar {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.admin-user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* 编辑页：当前头像预览 + 更换入口同行（移动端换行） */
.admin-avatar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-avatar-preview {
    width: 56px; height: 56px; flex: none; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.admin-avatar-preview img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }


.admin-cat-input { width: auto !important; padding: 5px 8px !important; font-size: 12px !important; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.admin-cat-slug { width: 110px !important; }
.admin-cat-sort { width: 64px !important; }
.admin-cat-form { display: flex; gap: 6px; align-items: center; }

.admin-cat-depth { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }

.admin-head-btn { margin-left: auto; align-self: center; }

.admin-input-lg {
    width: 100%; max-width: 520px; padding: 8px 12px; font-size: 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.admin-field-row { display: flex; gap: 20px; flex-wrap: wrap; }
.admin-field-row select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--card-bg); }

/* 编辑器容器：不可用 overflow:hidden——wangEditor 的表情面板/代码块语言下拉等弹层
 是绝对定位在编辑区内的，容器裁剪会把它们切掉（回复框弹层被遮问题的根因）；
 圆角改由工具栏（上圆角）与编辑区（下圆角）各自承担 */
.doc-editor-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); }
.doc-editor-wrap #doc-editor-toolbar { border-bottom: 1px solid var(--border); }
/* 问答社区编辑器（发布问题 / 回复框）：容器与工具栏通配选择器（id 不同） */
.doc-editor-wrap [id$="-toolbar"] { border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.doc-editor-wrap [id$="-editor"] { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.cm-reply-editor { margin-bottom: 12px; }

/* ---- 回复框附件图片条（社交评论式）：图片不入编辑器正文，按钮上传 + 缩略图预览 ---- */
.cm-attach-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cm-attach-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card-bg); color: var(--text); font-size: 13px; cursor: pointer;
}
.cm-attach-btn:hover { border-color: var(--primary); color: var(--primary); }
.cm-attach-hint { font-size: 12px; color: var(--text-secondary); }
.cm-attach-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cm-attach-strip:empty { display: none; }   /* 无附件时不占位 */
.cm-attach-item { position: relative; width: 72px; height: 72px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cm-attach-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-attach-del {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0;
    line-height: 16px; text-align: center; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; cursor: pointer;
}
.cm-attach-del:hover { background: rgba(0, 0, 0, .8); }

/* ---- 回复正文末尾附件图集（div.reply-attachments 由 JS 提交时拼接，
 class 经服务端 sanitizeRichHtml 白名单放行后原样入库） ---- */
.cm-answer-body .reply-attachments, .cm-q-body .reply-attachments {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.cm-answer-body .reply-attach-img, .cm-q-body .reply-attach-img {
    width: 120px; height: 120px; object-fit: cover; display: block;
    border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: zoom-in;
}
/* 编辑区 img 兜底：正文直出的图片不撑破容器（问题编辑器内联图片仍正常显示） */
.cm-answer-body img, .cm-q-body img { max-width: 100%; height: auto; }

/* ---- 附件图片灯箱：点击缩略图全屏预览（遮罩 + 大图，点击任意处/Esc 关闭） ---- */
.cm-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center;
    padding: 30px; background: rgba(0, 0, 0, .82);
    cursor: zoom-out;
}
.cm-lightbox.is-open { display: flex; }
.cm-lightbox img {
    max-width: 92vw; max-height: 92vh;
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    background: var(--card-bg);   /* 透明图垫底色 */
}
/* 编辑区最小高度：低于 300px 时 wangEditor 弹层（插链接/上传等 modal/hoverbar）定位会异常
 （官方控制台警告"Textarea height < 300px"），故两处编辑器均不低于 300px；
 420px 与下方 markdown 文本域保持一致（切换模式高度不跳变），文档/文章/应用三处编辑器统一兜底；
 问答发布页同标准；回复框精简版取 300px（满足弹层阈值的最小高度，避免控制台告警） */
#doc-editor, #detail-editor, #news-editor, #ask-editor { min-height: 420px; }
#reply-editor { min-height: 300px; }

.doc-md-editor {
    width: 100%; min-height: 420px; padding: 12px 14px; font-size: 13px; line-height: 1.7;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: Consolas, Monaco, monospace; resize: vertical; background: var(--card-bg); color: var(--text);
}

.admin-form-actions { display: flex; gap: 10px; margin-top: 22px; }

@media (max-width: 900px) {
    .admin-layout { flex-direction: column; }
    .admin-side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-nav-group, .admin-nav-disabled { display: none; }
    .admin-side-foot { margin-top: 0; border-top: 0; }
    .admin-main { padding: 18px 16px; }
    .admin-cards { grid-template-columns: 1fr; }
    .admin-cell-ops { flex-direction: column; }
}

.header-user {
    display: flex; align-items: center; gap: 12px; margin-left: auto;
}

.header-username {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 8px;
    font-size: 13px; color: #3d3d3d;
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer; user-select: none; transition: background 0.15s;
}
.header-username:hover { background: #f3f4f6; color: var(--primary); }

.header-msg-link {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 7px; border-radius: 8px; transition: background 0.15s;
}
.header-msg-link:hover { background: #f3f4f6; }

.header-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hdr-user-toggle { display: none; }

.header-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
    padding: 8px 0;
    z-index: 1000;
}
.hdr-user-toggle:checked ~ .header-dropdown { display: block; }
.header-dropdown a,
.header-dropdown button {
    display: block;
    width: 100%;
    padding: 9px 18px;
    font-size: 13px;
    color: var(--text, #111);
    text-align: left;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}
.header-dropdown a:hover,
.header-dropdown button:hover { background: #f9fafb; color: var(--primary); }

.header-msg-icon { display: block; color: #3d3d3d; transition: color 0.15s; }
.header-msg-link:hover .header-msg-icon { color: var(--primary); }

@media (max-width: 900px) {
    .cm-row { flex-direction: column; gap: 10px; }
    .cm-row-stats { gap: 20px; }
    .cm-q-title { font-size: 20px; }

    .header-username { max-width: 72px; }
    .auth-card { padding: 28px 22px; }
}

.site-notice {
    background: var(--primary-soft);
    color: var(--primary);
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
}

.mk-price { font-weight: 700; color: var(--primary); }
/* 付费应用标识：橙色高亮与免费区分（购买/支付流程后续接入） */
.mk-price-paid { color: #e67e22; }

/* 依赖应用行：详情页头部展示本应用依赖的其他应用（slug 联查名称，可点击跳详情） */
.mk-deps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
}
.mk-deps-label { color: var(--text-secondary); }
.mk-dep {
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-alt);
    color: var(--text);
    text-decoration: none;
}
a.mk-dep:hover { border-color: var(--primary); color: var(--primary); }
/* 未能匹配到上架应用的依赖 slug：弱化展示 */
.mk-dep-missing { color: var(--text-secondary); border-style: dashed; }

.mk-pay-dev-tip {
    margin: 14px 0;
    padding: 10px 12px;
    font-size: 13px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
}
/* 开发者版本表单：兼容范围双输入并排 */
.mk-range-row { display: flex; align-items: center; gap: 8px; }
.mk-range-row input { flex: 1; }

.badge-success { background: var(--type-feature-soft, #e6f7ed); color: var(--type-feature, #1a9c5d); }

.admin-radio { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 600; margin-right: 16px; }
.admin-radio input { width: auto !important; }

.header-msg-link { position: relative; display: inline-flex; align-items: center; }
.header-msg-badge {
    position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--danger, #e5484d);
    color: #fff; font-size: 11px; line-height: 16px; text-align: center;
}

.msg-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.msg-row {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
}
/*.msg-row--unread { border-left: 3px solid var(--danger, #e5484d); }*/
.msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-title { font-weight: 600; color: var(--text); }
.msg-type { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--bg-alt); color: var(--text-secondary); }
.msg-time { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.msg-content { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.6; }
.msg-actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; }
.msg-unread-dot { color: var(--danger, #e5484d); font-size: 12px; font-weight: 600; }

.msg-pref-row {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.msg-pref-row:last-child { border-bottom: none; }
.msg-pref-name { min-width: 90px; font-weight: 600; }
.msg-pref-opts { display: flex; gap: 20px; flex-wrap: wrap; }
.msg-pref-opts label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.msg-pref-opts input { width: auto !important; }

.blog-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.blog-cat {
    padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border);
    font-size: 13px; color: var(--text-secondary); background: var(--card-bg);
}
.blog-cat:hover { color: var(--primary, #007aff); border-color: var(--primary, #007aff); }
.blog-cat.is-active {
    background: var(--primary, #007aff); border-color: var(--primary, #007aff); color: #fff;
}

.blog-list { display: flex; flex-direction: column; gap: 14px; }
.blog-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 22px;
}
.blog-card-head { display: flex; align-items: center; gap: 10px; }
.blog-card-cat {
    font-size: 12px; padding: 1px 10px; border-radius: 999px;
    background: var(--bg-alt); color: var(--primary, #007aff); text-decoration: none;
}
.blog-card-date { font-size: 12px; color: var(--text-secondary); }
.blog-card-title { margin: 8px 0 6px; font-size: 19px; line-height: 1.4; }
.blog-card-title a { color: var(--text); text-decoration: none; }
.blog-card-title a:hover { color: var(--primary, #007aff); }
.blog-card-summary { margin: 0 0 10px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.blog-card-more { font-size: 13px; color: var(--primary, #007aff); text-decoration: none; }

.blog-pager-btn { margin-top: 16px; text-decoration: none; }
.blog-pager-next { margin-left: 10px; }

.blog-detail { max-width: 820px; margin: 0 auto; }
.blog-detail-title { font-size: 26px; line-height: 1.4; margin: 0 0 10px; }
.blog-detail-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--text-secondary);
    padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}

.blog-detail-body { font-size: 15px; line-height: 1.9; color: var(--text); }
.blog-detail-body h1, .blog-detail-body h2, .blog-detail-body h3 { margin: 22px 0 10px; line-height: 1.4; }
.blog-detail-body p { margin: 0 0 12px; }
.blog-detail-body pre {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px; overflow-x: auto; font-size: 13px;
}
.blog-detail-body code { background: var(--bg-alt); border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.blog-detail-body pre code { background: none; padding: 0; }
.blog-detail-body blockquote {
    margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--primary, #007aff);
    background: var(--bg-alt); color: var(--text-secondary);
}
.blog-detail-body img { max-width: 100%; }
.blog-detail-body a { color: var(--primary, #007aff); }
.blog-detail-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }

.auth-field-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.6;
}

.dev-cert-tip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.dev-cert-tip + .dev-cert-tip { margin-top: 8px; }

.dev-home-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}
.dev-home-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.dev-home-logo--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    background: var(--bg-alt);
}
.dev-home-info { flex: 1; min-width: 0; }
.dev-home-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 10px;
}
.dev-cert-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--primary);
    background: var(--bg-alt);
    border: 1px solid currentColor;
}
.dev-app-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
}
.dev-app-thumb img { width: 100%; height: 100%; object-fit: cover; }

.dev-logo-preview {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    margin: 8px 0;
    border: 1px solid var(--border);
}

.dev-agreement { font-size: 14px; line-height: 1.9; color: var(--text); }
.dev-agreement h2 { font-size: 15px; margin: 18px 0 8px; }
.dev-agreement p { margin-bottom: 6px; }

.header-auth-btn {
    background: #fff;
    color: var(--text, #111);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.header-auth-btn:hover {
    border-color: var(--primary, #007aff);
    color: var(--primary, #007aff);
    transform: none;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 14px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}
.auth-remember input[type="checkbox"] { accent-color: var(--primary, #007aff); }

.legal-article { max-width: 820px; padding-bottom: 30px; }

.legal-version-badge {
    display: inline-block; vertical-align: 3px; margin-left: 8px;
    padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 400;
    color: var(--primary); background: var(--bg-alt); border: 1px solid currentColor;
}

.auth-agree { margin: -4px 0 14px; line-height: 1.6; }

.report-details { display: inline-block; margin-top: 8px; font-size: 13px; }
.report-details summary {
    cursor: pointer; user-select: none;
    color: var(--text-secondary); list-style: none;
}
.report-details summary::-webkit-details-marker { display: none; }
/* 举报图标：Feather 风格旗子 SVG（mask 方案，颜色取 currentColor——
 悬停变色与深色模式自动跟随文字色，无需两套图标） */
.report-details summary::before {
    content: '';
    display: inline-block;
    width: 13px; height: 13px;
    margin-right: 5px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E") no-repeat center / contain;
}
.report-details summary:hover { color: var(--primary); }

.report-form {
    margin-top: 8px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px;
}
.report-form select, .report-form input[type="text"] {
    padding: 6px 8px; font-size: 13px; font-family: inherit;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text);
}
.report-form input[type="text"] { flex: 1; min-width: 140px; }

/* ============================================================
 文档/社区/博客 Markdown 代码块语法高亮（原生 JS 注入 span）
 颜色参考 GitHub 主题，通过 CSS 变量适配深色模式（自动跟随系统）
 ============================================================ */
:root {
    --hl-keyword: #cf222e;   
    --hl-string: #0a3069;    
    --hl-comment: #6e7781;   
    --hl-number: #0550ae;    
    --hl-function: #8250df;  
    --hl-variable: #953800;  
}
@media (prefers-color-scheme: dark) {
    :root {
        --hl-keyword: #ff7b72;
        --hl-string: #a5d6ff;
        --hl-comment: #8b949e;
        --hl-number: #79c0ff;
        --hl-function: #d2a8ff;
        --hl-variable: #ffa657;
    }
}

pre code .hl-keyword { color: var(--hl-keyword); }
pre code .hl-string { color: var(--hl-string); }
pre code .hl-comment { color: var(--hl-comment); font-style: italic; }
pre code .hl-number { color: var(--hl-number); }
pre code .hl-function { color: var(--hl-function); }
pre code .hl-variable { color: var(--hl-variable); }

/* 页头搜索表单：居中胶囊输入框 + 按钮，宽度限 560px 防长屏拉伸 */
.search-form {
    display: flex; align-items: center; gap: 10px;
    max-width: 560px; margin: 0 auto 8px;
}
.search-input {
    flex: 1; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text);
    padding: 11px 16px; font-size: 15px; outline: none;
    transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--primary); }

.search-group {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 14px; padding: 22px 26px; margin-bottom: 28px;
}
.search-group-title {
    font-size: 16px; font-weight: 600; color: var(--text);
    margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}

.search-group-count {
    font-size: 12px; font-weight: 500; color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: 10px; padding: 2px 10px;
}

@supports not (color: color-mix(in srgb, red 10%, blue)) {
    .search-group-count { background: #eef2ff; }
}

.search-list { display: flex; flex-direction: column; }
.search-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 4px; text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.search-item:last-child { border-bottom: none; }
.search-item-title { color: var(--text); font-size: 14px; font-weight: 600; }
.search-item:hover .search-item-title { color: var(--primary); }
.search-item-desc {
    color: var(--text-secondary); font-size: 13px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.search-empty { color: var(--text-secondary); font-size: 13px; padding: 6px 4px 2px; }

.search-blank {
    text-align: center; color: var(--text-secondary);
    padding: 48px 0; font-size: 14px;
}

.roadmap-group {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 14px; padding: 22px 26px; margin-bottom: 28px;
}

.roadmap-group-title {
    font-size: 16px; font-weight: 600; color: var(--text);
    margin-bottom: 14px; padding-left: 12px;
    display: flex; align-items: center; gap: 10px;
}
.roadmap-in-progress { border-left: 3px solid var(--primary); }
.roadmap-planned { border-left: 3px solid var(--text-secondary); }
.roadmap-done { border-left: 3px solid #16a34a; }

.roadmap-count {
    font-size: 12px; font-weight: 500; color: var(--text-secondary);
    background: var(--bg-alt); border-radius: 10px; padding: 2px 10px;
}

.roadmap-list { display: flex; flex-direction: column; }
.roadmap-item { padding: 14px 4px; border-bottom: 1px solid var(--border); }
.roadmap-item:last-child { border-bottom: none; }

.roadmap-item-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.roadmap-item-title { font-size: 14px; font-weight: 600; color: var(--text); }

.roadmap-version {
    font-size: 12px; font-weight: 500; color: var(--primary);
    border: 1px solid var(--primary); border-radius: 10px;
    padding: 1px 9px; white-space: nowrap;
}

.roadmap-item-desc {
    color: var(--text-secondary); font-size: 13px; line-height: 1.7;
    margin-top: 6px;
}

.brand-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 14px; padding: 24px 28px; margin-bottom: 28px;
}
.brand-card-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.brand-card-desc { color: var(--text-secondary); font-size: 13px; margin-bottom: 18px; }

.brand-logo-row {
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.brand-logo-item {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.brand-logo-icon {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 20px; background: var(--bg);
}

.brand-demo-mark {
    width: 64px; height: 64px; border-radius: 16px; font-size: 34px;
}
.brand-logo-label { font-size: 12px; color: var(--text-secondary); }
.brand-logo-download { margin-left: auto; flex-direction: row; }

.brand-banner {
    width: 100%; border-radius: 10px; display: block;
}

.brand-colors {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.brand-color {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
}
.brand-chip {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
}

.brand-chip-bordered { border: 1px solid var(--border); }
.brand-color-info { display: flex; flex-direction: column; gap: 2px; }
.brand-color-info strong { font-size: 13px; color: var(--text); }
.brand-color-info span {
    font-size: 12px; color: var(--text-secondary);
    font-family: Consolas, Monaco, monospace;
}

.brand-rules {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.brand-rule h3 {
    font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px;
    padding-left: 10px; border-left: 3px solid var(--primary);
}
.brand-rule p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.brand-rule p a { color: var(--primary); text-decoration: none; }
.brand-rule p a:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .brand-colors, .brand-rules { grid-template-columns: 1fr; }
    .brand-logo-download { margin-left: 0; }
}

.showcase-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

.showcase-card {
    display: flex; flex-direction: column;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.showcase-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.showcase-shot {
    aspect-ratio: 4 / 3; background: var(--bg-alt);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--border);
}
.showcase-shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.showcase-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.showcase-ph-mark { width: 56px; height: 56px; border-radius: 14px; font-size: 30px; }

.showcase-info {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px 16px;
}
.showcase-title { font-size: 15px; font-weight: 600; color: var(--text); }
.showcase-desc {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}
@media (max-width: 900px) {
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .showcase-grid { grid-template-columns: 1fr; }
}

.roadmap-join {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px 28px; margin-bottom: 32px;
    box-shadow: var(--shadow);
}
.roadmap-join-text h3 { font-size: 16px; margin-bottom: 6px; }
.roadmap-join-text p { font-size: 13px; color: var(--text-secondary); }
.roadmap-join-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }

@media (max-width: 900px) {
    .roadmap-join { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   移动端窄屏适配补齐（≤560px）
   覆盖此前未适配的新增模块：问答详情/回复框、应用详情头部、
   举报表单、附件条、页脚栏目、富文本编辑器容器等。
   断点沿用既有体系（900px 平板 / 560px 手机），规则只做收紧不改布局逻辑。
   ============================================================ */
@media (max-width: 560px) {

    /* 全局：收紧容器左右留白，给正文让出宽度 */
    .container { padding: 0 14px; }

    /* 页头：容器留白收紧；导航已收进汉堡面板（见 ≤900px 块） */
    .header-inner { padding: 0 14px; }
    .footer-grid { grid-template-columns: 1fr; }

    /* 页头（手机端）：导航已收进汉堡面板，这里只收紧行内元素间距 */
    .header-inner { gap: 6px; height: 56px; }
    .logo { font-size: 18px; gap: 6px; }
    .logo-mark { width: 26px; height: 26px; font-size: 14px; }
    .header-user { gap: 4px; }
    .header-username { max-width: 64px; padding: 5px 7px; }
    .header-user-avatar, .header-user-icon { width: 20px; height: 20px; }
    .header-msg-badge { top: -4px; right: -6px; }
    .hdr-nav-btn { width: 36px; height: 36px; }

    /* Hero / 详情页头：压缩纵向留白（移动端首屏内容优先） */
    .dl-hero { padding: 48px 0 4px; }

    /* 应用详情头部：标题再降一号，统计行间距收紧 */
    .mk-head-title { font-size: 20px; }
    .mk-head-stats { gap: 10px 14px; font-size: 12px; }

    /* 问答列表：工具栏排序 Tab 允许换行，避免与搜索框挤爆一行 */
    .cm-toolbar { flex-direction: column; align-items: stretch; }
    .cm-sort-tabs { justify-content: center; }

    /* 问答详情：回复行头部允许换行（长昵称 + 徽章 + 楼层 + 回复按钮） */
    .cm-answer-head { flex-wrap: wrap; row-gap: 4px; }
    .cm-answer-children { padding-left: 14px; }   /* 楼中楼缩进收窄 */
    .cm-q-title { font-size: 20px; }

    /* 回复框 / 表单卡片：收紧内边距 */
    .cm-reply-box { padding: 16px 14px; }
    .auth-card { padding: 24px 16px; }
    .uc-content { padding: 20px 14px; }

    /* 附件图片行：提示文案换行不挤压按钮 */
    .cm-attach-row { flex-wrap: wrap; }
    .cm-attach-hint { flex-basis: 100%; }

    /* 举报表单：窄屏改为纵向排列（select/输入框/按钮各占一行） */
    .report-form { flex-direction: column; align-items: stretch; }
    .report-form select,
    .report-form input[type="text"] { width: 100%; }

    /* 版本历史行：头部允许换行（版本号 + 日期 + 大小 + 下载按钮） */
    .mk-version-head { flex-wrap: wrap; gap: 8px; }
    .mk-version-head .btn { margin-left: 0; flex-basis: 100%; }

    /* 下载页历史版本行：窄屏允许换行（版本号+渠道+日期+大小+下载按钮挤不下一行），下载按钮独占一行靠右 */
    .dl-history-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }

    /* 富文本编辑器：工具栏按钮允许换行（wangEditor 默认单行溢出） */
    .doc-editor-wrap .w-e-toolbar { flex-wrap: wrap; }

    /* 价格与下载信息行（应用详情）：允许换行 */
    .mk-head-stats .mk-price { font-size: 13px; }
}

/* ============================================================
   超小屏适配（≤360px，如 iPhone SE 竖屏 / 折叠屏外屏）
   页头仅保留 logo + 搜索 + 用户区 + 汉堡按钮，进一步压缩字号与间距，
   登录按钮缩小尺寸保证与用户名共存一行。
   ============================================================ */
@media (max-width: 360px) {
    .logo { font-size: 16px; }
    .header-username { max-width: 54px; font-size: 12px; }
    .header-inner { gap: 4px; padding: 0 10px; }
    .container { padding: 0 10px; }
    .header-auth-btn { padding: 5px 8px; font-size: 12px; }
}