/* =====================================================================
   B29 · 工具站 UI 重设计 v5「暖纸编辑部」设计基座
   ---------------------------------------------------------------------
   · 全新色板（暖纸底 + 高辨识点缀色）、全新字体层级（1.25 模块比例）、
     全新版式骨架（大序号 / 细分隔 / 顶部彩条），与 v4 冷蓝灰体系彻底区分；
   · 所有选择器限定在 .b29 容器内，绝不外溢到任何线上已有页面；
   · 主题由导航栏 #themeToggle 控制（localStorage.theme: auto/light/dark），
     本文件只负责变量翻转，auto 模式由布局内联脚本跟随系统；
   · 图形全部用 CSS / inline SVG 绘制，零图片请求、零网络字体、零第三方 JS；
   · 静态资源统一经 cdn_asset() 输出，配 SITE_CDN_URL 即整体切 CDN。
   ===================================================================== */

.b29 {
    /* 色板：每页 CSS 覆盖 --b29-accent / --b29-tint / --b29-bg 等形成 19 套独立视觉 */
    --b29-bg: #f6f4ef;
    --b29-bg-2: #efebe2;
    --b29-surface: #ffffff;
    --b29-surface-2: #faf8f3;
    --b29-ink: #1b1e24;
    --b29-sub: #4c5260;
    --b29-muted: #838a97;
    --b29-line: #e3ded3;
    --b29-line-strong: #cfc8b9;
    --b29-accent: #b3452f;
    --b29-accent-2: #2c6d63;
    --b29-tint: #fbeae5;
    --b29-on-accent: #ffffff;
    --b29-ok: #25765a;
    --b29-ok-tint: #e5f2ea;
    --b29-warn: #9a6810;
    --b29-warn-tint: #fbf0d8;
    --b29-danger: #b3313b;
    --b29-danger-tint: #fbe6e7;

    /* 字体层级：正文 16.5 / 行距 1.85，五级标题，中文优先 */
    --b29-font: "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
    --b29-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
    --b29-xs: 12.5px;
    --b29-sm: 14px;
    --b29-base: 16.5px;
    --b29-md: 18.5px;
    --b29-lg: 23px;
    --b29-xl: 30px;
    --b29-hero: clamp(32px, 5vw, 52px);
    --b29-lh: 1.85;
    --b29-lh-tight: 1.28;
    --b29-radius: 20px;
    --b29-radius-sm: 12px;
    --b29-shadow: 0 2px 4px rgba(27, 30, 36, .03), 0 14px 36px rgba(27, 30, 36, .06);
    --b29-shadow-lift: 0 20px 48px rgba(27, 30, 36, .13);
    --b29-maxw: 1120px;
    --b29-gap: 20px;

    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px 72px;
    background:
        radial-gradient(900px 380px at 88% -120px, var(--b29-tint), transparent 72%),
        var(--b29-bg);
    color: var(--b29-ink);
    font-family: var(--b29-font);
    font-size: var(--b29-base);
    line-height: var(--b29-lh);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
    overflow-x: clip;
}
.b29 *, .b29 *::before, .b29 *::after { box-sizing: border-box; }
.b29 > * { max-width: 100%; }
.b29 p { margin: 0 0 15px; line-height: var(--b29-lh); }
.b29 p:last-child { margin-bottom: 0; }
.b29 b, .b29 strong { font-weight: 750; color: var(--b29-ink); }
.b29 a { color: var(--b29-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.b29 a:hover { opacity: .78; }
.b29 h1, .b29 h2, .b29 h3, .b29 h4 { margin: 0; font-weight: 800; line-height: var(--b29-lh-tight); letter-spacing: -.025em; }
.b29 h2 { font-size: var(--b29-lg); }
.b29 h3 { font-size: var(--b29-md); }
.b29 h4 { font-size: var(--b29-base); }
.b29 small { font-size: var(--b29-xs); }
.b29 ul, .b29 ol { margin: 0 0 15px; padding-left: 22px; }
.b29 li { margin-bottom: 7px; }
.b29 li::marker { color: var(--b29-accent); font-weight: 800; }
.b29 :focus-visible { outline: 3px solid var(--b29-accent); outline-offset: 3px; border-radius: 5px; }
.b29 [hidden] { display: none !important; }

/* ---------- 容器与首屏 ---------- */
.b29-inner { max-width: var(--b29-maxw); margin: 0 auto; }
.b29-topline { height: 5px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, var(--b29-accent), var(--b29-accent-2)); max-width: var(--b29-maxw); margin: 0 auto 0; }
.b29-hero { padding: 42px 0 26px; }
.b29-eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
    font-size: var(--b29-xs); font-weight: 800; letter-spacing: .16em;
    color: var(--b29-accent); text-transform: uppercase;
}
.b29-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--b29-accent); }
.b29-hero h1 { font-size: var(--b29-hero); letter-spacing: -.045em; margin-bottom: 14px; }
.b29-hero h1 em { font-style: normal; color: var(--b29-accent); }
.b29-lead { font-size: var(--b29-md); line-height: 1.75; color: var(--b29-sub); max-width: 790px; margin: 0 0 18px; }
.b29-lead b { color: var(--b29-ink); }
.b29-kicker { font-size: var(--b29-sm); color: var(--b29-muted); }
.b29-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: var(--b29-sm); color: var(--b29-muted); }
.b29-hero-meta b { color: var(--b29-accent); font-size: var(--b29-md); }

/* 首屏醒目警示条：安全类工具突出「先做什么」 */
.b29-alert {
    display: flex; gap: 13px; align-items: flex-start; margin: 0 0 22px;
    padding: 15px 18px; border-radius: var(--b29-radius-sm);
    background: var(--b29-danger-tint); border: 1.5px solid var(--b29-danger);
    color: var(--b29-danger); font-size: var(--b29-sm); line-height: 1.75;
}
.b29-alert::before { content: "!"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--b29-danger); color: #fff; font-weight: 800; display: grid; place-items: center; }
.b29-alert b { color: inherit; }

/* ---------- 区块骨架：大序号 + 细分隔 ---------- */
.b29-sec { margin-top: 44px; }
.b29-sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--b29-line-strong); }
.b29-sec-head .idx { font-family: var(--b29-mono); font-size: var(--b29-xs); font-weight: 700; color: var(--b29-accent); letter-spacing: .1em; white-space: nowrap; }
.b29-sec-head h2 { flex: 1 1 auto; }
.b29-sec-head .note { font-size: var(--b29-sm); color: var(--b29-muted); }
.b29-sec-lead { font-size: var(--b29-base); color: var(--b29-sub); max-width: 860px; margin: -6px 0 20px; }

.b29-panel {
    background: var(--b29-surface); border: 1px solid var(--b29-line);
    border-radius: var(--b29-radius); box-shadow: var(--b29-shadow);
    padding: 26px; margin-bottom: var(--b29-gap);
}
.b29-panel--flat { box-shadow: none; background: var(--b29-surface-2); }
.b29-panel--tint { background: var(--b29-tint); border-color: transparent; box-shadow: none; }
.b29-panel-title { display: flex; align-items: center; gap: 10px; font-size: var(--b29-md); font-weight: 800; margin-bottom: 7px; }
.b29-panel-sub { font-size: var(--b29-sm); color: var(--b29-muted); margin-bottom: 20px; }
.b29-grid { display: grid; gap: var(--b29-gap); grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.b29-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b29-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b29-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b29-split { display: grid; gap: var(--b29-gap); grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; }
.b29-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 表单控件 ---------- */
.b29-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.b29-field > label, .b29-label { font-size: var(--b29-sm); font-weight: 750; color: var(--b29-sub); }
.b29-field .hint { font-size: var(--b29-xs); color: var(--b29-muted); font-weight: 400; line-height: 1.6; }
.b29-input, .b29-select, .b29-textarea {
    width: 100%; min-width: 0; padding: 11px 14px;
    font-family: inherit; font-size: var(--b29-base); line-height: 1.55;
    color: var(--b29-ink); background: var(--b29-surface);
    border: 1.5px solid var(--b29-line-strong); border-radius: var(--b29-radius-sm);
    transition: border-color .18s, box-shadow .18s;
}
.b29-textarea { min-height: 124px; resize: vertical; font-family: var(--b29-mono); font-size: var(--b29-sm); line-height: 1.75; }
.b29-input:hover, .b29-select:hover, .b29-textarea:hover { border-color: var(--b29-accent); }
.b29-input:focus, .b29-select:focus, .b29-textarea:focus { outline: none; border-color: var(--b29-accent); box-shadow: 0 0 0 4px var(--b29-tint); }
.b29-input[aria-invalid="true"], .b29-textarea[aria-invalid="true"] { border-color: var(--b29-danger); background: var(--b29-danger-tint); }
.b29-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.b29-row > .b29-field { flex: 1 1 180px; }
.b29-checks, .b29-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.b29-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 15px; font-size: var(--b29-sm);
    border: 1.5px solid var(--b29-line-strong); border-radius: 999px; background: var(--b29-surface); color: var(--b29-sub); user-select: none; transition: all .16s; }
.b29-chip:hover { border-color: var(--b29-accent); color: var(--b29-accent); }
.b29-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.b29-chip input:checked + span { color: var(--b29-accent); font-weight: 750; }
.b29-chip:has(input:checked) { border-color: var(--b29-accent); background: var(--b29-tint); }
.b29-chip input:focus-visible + span { outline: 2px solid var(--b29-accent); outline-offset: 4px; }
.b29-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; min-height: 46px; cursor: pointer;
    font-family: inherit; font-size: var(--b29-base); font-weight: 750;
    color: var(--b29-on-accent); background: var(--b29-accent);
    border: 1.5px solid var(--b29-accent); border-radius: var(--b29-radius-sm);
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.b29-btn:hover { transform: translateY(-2px); box-shadow: var(--b29-shadow-lift); filter: brightness(1.06); }
.b29-btn:active { transform: translateY(0); }
.b29-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.b29-btn--ghost { color: var(--b29-accent); background: transparent; }
.b29-btn--soft { color: var(--b29-ink); background: var(--b29-surface-2); border-color: var(--b29-line-strong); }
.b29-btn--sm { padding: 8px 15px; min-height: 38px; font-size: var(--b29-sm); }
.b29-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; }

/* ---------- 结果 / 提示 / 徽章 ---------- */
.b29-result { margin-top: 22px; padding: 22px; border-radius: var(--b29-radius); border: 1.5px dashed var(--b29-line-strong); background: var(--b29-surface-2); }
.b29-result-title { font-size: var(--b29-md); font-weight: 800; margin-bottom: 14px; }
.b29-note { font-size: var(--b29-sm); color: var(--b29-sub); background: var(--b29-tint); border-left: 4px solid var(--b29-accent); padding: 12px 15px; border-radius: 0 10px 10px 0; margin: 15px 0; line-height: 1.8; }
.b29-note--warn { background: var(--b29-warn-tint); border-left-color: var(--b29-warn); }
.b29-note--danger { background: var(--b29-danger-tint); border-left-color: var(--b29-danger); }
.b29-note--ok { background: var(--b29-ok-tint); border-left-color: var(--b29-ok); }
.b29-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--b29-xs); font-weight: 800; background: var(--b29-tint); color: var(--b29-accent); }
.b29-badge--ok { background: var(--b29-ok-tint); color: var(--b29-ok); }
.b29-badge--warn { background: var(--b29-warn-tint); color: var(--b29-warn); }
.b29-badge--danger { background: var(--b29-danger-tint); color: var(--b29-danger); }
.b29-kv { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: var(--b29-sm); }
.b29-kv b { color: var(--b29-accent); }
.b29-err { color: var(--b29-danger); font-size: var(--b29-sm); font-weight: 750; min-height: 20px; margin-top: 9px; }
.b29-muted { color: var(--b29-muted); }
.b29-mono { font-family: var(--b29-mono); font-size: var(--b29-sm); }
.b29-divider { height: 1px; background: var(--b29-line); margin: 22px 0; border: 0; }
.b29-num { font-family: var(--b29-mono); font-weight: 800; color: var(--b29-accent); }

/* ---------- 表格 ---------- */
.b29-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--b29-line); border-radius: var(--b29-radius-sm); background: var(--b29-surface); }
.b29-table { width: 100%; border-collapse: collapse; font-size: var(--b29-sm); min-width: 500px; }
.b29-table th, .b29-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--b29-line); vertical-align: top; line-height: 1.7; }
.b29-table th { background: var(--b29-surface-2); font-weight: 800; color: var(--b29-sub); white-space: nowrap; }
.b29-table tbody tr:last-child td { border-bottom: 0; }
.b29-table tbody tr:hover { background: var(--b29-tint); }
.b29-table tr.is-bad td { background: var(--b29-danger-tint); color: var(--b29-danger); }
.b29-table tr.is-good td:first-child { border-left: 3px solid var(--b29-ok); }
.b29-table caption { caption-side: bottom; padding: 10px 13px; font-size: var(--b29-xs); color: var(--b29-muted); text-align: left; line-height: 1.7; }

/* ---------- 结果弹窗：display:none，仅用户完成操作后由 B29.modal.open 触发 ---------- */
.b29-modal { position: fixed; inset: 0; z-index: 10020; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(14, 17, 22, .62); backdrop-filter: blur(3px); }
.b29-modal.is-open { display: flex; }
.b29-modal-box { width: min(600px, 100%); max-height: 84vh; overflow: auto; background: var(--b29-surface); color: var(--b29-ink);
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); padding: 28px; }
.b29-modal-box h3 { font-size: var(--b29-lg); margin-bottom: 12px; }
.b29-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- 阅读排版：关键词加粗、分段、行距 ---------- */
.b29-prose { font-size: var(--b29-base); line-height: 1.95; color: var(--b29-sub); }
.b29-prose p { margin-bottom: 16px; }
.b29-prose b, .b29-prose strong { color: var(--b29-ink); }
.b29-prose h3 { margin: 22px 0 10px; color: var(--b29-ink); }
.b29-prose ul { padding-left: 21px; }

/* ---------- 深色：导航 #themeToggle 三态；本文件仅翻变量 ---------- */
:root[data-theme="dark"] .b29 {
    --b29-bg: #101319;
    --b29-bg-2: #171b23;
    --b29-surface: #1a1f28;
    --b29-surface-2: #212733;
    --b29-ink: #edf0f4;
    --b29-sub: #b9c1cd;
    --b29-muted: #8b95a5;
    --b29-line: #2d3542;
    --b29-line-strong: #3b4554;
    --b29-tint: #2a2320;
    --b29-ok-tint: #163027;
    --b29-warn-tint: #332916;
    --b29-danger-tint: #352025;
    --b29-ok: #6fd3a8;
    --b29-warn: #efc274;
    --b29-danger: #ff929b;
    --b29-shadow: 0 14px 36px rgba(0, 0, 0, .4);
    --b29-shadow-lift: 0 22px 52px rgba(0, 0, 0, .58);
    color-scheme: dark;
}
:root[data-theme="dark"] .b29 .b29-input,
:root[data-theme="dark"] .b29 .b29-select,
:root[data-theme="dark"] .b29 .b29-textarea { background: #141922; }
:root[data-theme="dark"] .b29 .b29-modal-box { background: #1d232d; }
:root[data-theme="dark"] .b29 .b29-alert { background: #3a2025; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .b29-split, .b29-split--even, .b29-grid--4, .b29-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .b29-panel { padding: 20px; }
}
@media (max-width: 560px) {
    .b29 { padding: 0 15px 52px; --b29-gap: 14px; --b29-radius: 15px; }
    .b29-hero { padding: 28px 0 20px; }
    .b29-hero h1 { font-size: clamp(27px, 8.4vw, 36px); }
    .b29-lead { font-size: var(--b29-base); }
    .b29-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .b29-row > .b29-field { flex-basis: 100%; }
    .b29-btn { width: 100%; }
    .b29-actions .b29-btn { flex: 1 1 100%; }
    .b29-panel { padding: 17px; }
    .b29-modal-box { padding: 20px; }
    .b29-sec { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .b29 *, .b29 *::before, .b29 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 公共推荐卡与底部套件由 layouts 渲染在 .b29 容器之外，
   因此用 body.has-b29-page（common.js 打标，另备 :has 兼容）把窄屏兜底
   严格限定在本批 19 页，绝不改动任何线上已有页面的表现。 */
@media (max-width: 640px) {
    body.has-b29-page .tool-rec,
    body:has(.b29) .tool-rec {
        width: auto !important; max-width: calc(100vw - 24px) !important;
        margin-left: 12px !important; margin-right: 12px !important;
        box-sizing: border-box;
    }
    body.has-b29-page .tool-rec-grid,
    body:has(.b29) .tool-rec-grid { grid-template-columns: minmax(0, 1fr) !important; }
    body.has-b29-page .tool-rec-item,
    body:has(.b29) .tool-rec-item {
        min-width: 0 !important; width: 100% !important; max-width: 100% !important;
        box-sizing: border-box;
    }
    body.has-b29-page .tool-rec-body,
    body.has-b29-page .tool-rec-body b,
    body.has-b29-page .tool-rec-body small,
    body:has(.b29) .tool-rec-body,
    body:has(.b29) .tool-rec-body b,
    body:has(.b29) .tool-rec-body small {
        min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal;
    }
    .b29 .tskb-card { overflow-x: auto; }
    .b29 .tskb-legend { min-width: 0; width: 100%; table-layout: fixed; }
    .b29 .tskb-legend th, .b29 .tskb-legend td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
    .b29 .tskb-tabs { flex-wrap: wrap; }
    /* 表格在窄屏容器内横向滚动，不把页面撑宽 */
    .b29 .b29-table-wrap { max-width: 100%; }
}