/* ==========================================================================
   Tony's Blog — Apple-like Flat Design Layer (v4 布局 + v5 设计系统)
   --------------------------------------------------------------------------
   来源：用户上传的 main.optimized.css（v5 合并版）中的设计系统层。
   用法：置于 main.css 之后加载；删除 <link> 即完全回退，原 main.css 一字未改。
   ==========================================================================

   Tony's Blog — Design System Layer (v5)
   --------------------------------------------------------------------------
   继承 v4 的布局、色彩、圆角、扁平化规则（完全保留，未改动任何布局数值）。
   v5 的唯一任务：建立全站统一的【字体系统 + 字号阶梯】。

   v4 的问题（已修）：
     · 字号散落 20+ 个值（main.css 7 个 + 优化层 16 个），含 11.5/12.5/13.5/
       15.5/17.5 等半像素值，非模数体系
     · 字体栈不统一：main.css 用 "Helvetica Neue" 打头（缺 -apple-system），
       layui.css 里分页箭头硬编码 font-family: Sim sun（宋体）
     · 每个断点各自手写字号，无统一来源，改一处要改多处，必然漂移

   v5 的做法：
     · 8 组设计令牌（字体族 / 字号 / 字重 / 行高 / 字距）成为唯一来源
     · 字号阶梯 9 级（11/12/13/14/15/17/20/25/30），全为整数、按 1.07~1.25
       递进比例排布 —— 小字区密集（UI 次级信息需微妙层级），大字区拉开
     · 响应式不再逐元素改字号，而是在断点内重定义 --fs-* 变量，全站自动跟随
     · 字体族强制统一到 var(--ap-font)，还原 layui-icon 图标字体

   范围：纯视觉层。不改 HTML 结构、不改链接/脚本/事件、不改业务逻辑
   用法：置于 main.css 之后；整段删除即完全回退
   ========================================================================== */

/* ==========================================================================
   0. 设计令牌 —— 全站唯一数值来源
   ========================================================================== */
:root {
    /* ——— 0.1 字体族 ——— */
    /* 顺序逻辑：系统 UI 字体打头，让中英文走同一套字体，避免混排基线错位。
       -apple-system/BlinkMacSystemFont → macOS/iOS 用 SF Pro + 苹方
       HarmonyOS Sans / Source Han / Noto → 鸿蒙 / 思源 / 安卓
       Microsoft YaHei UI → Windows 中文（UI 版比普通雅黑更清晰） */
    --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
               "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    /* 等宽：代码块/行内代码专用，不继承正文字体 */
    --ap-font-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas,
                    "Liberation Mono", "Courier New", monospace;

    /* ——— 0.2 字号阶梯（9 级，全站唯一的 9 个字号）———
       递进比例：1.09 / 1.08 / 1.08 / 1.07 / 1.13 / 1.12 / 1.26 / 1.25
       规律：小字区密集（视觉对 1px 差异敏感），大字区拉开（需明显跨度）
       注：--fs-xl 定在 19px 是实测临界值 —— 20px 会让列表标题折行、
           卡片高度 140→174px、全页多出 109px，与"紧凑"目标冲突 */
    --fs-2xs: 11px;   /* L1 微字：计数徽章（阅读量 n） */
    --fs-xs:  12px;   /* L2 脚注：页脚版权、分页、列表序号 */
    --fs-sm:  13px;   /* L3 辅助：meta 行、标签云、侧栏列表 */
    --fs-base:14px;   /* L4 强调正文：卡片摘要、导航、按钮 */
    --fs-md:  15px;   /* L5 正文：文章段落（长文基准） */
    --fs-lg:  17px;   /* L6 小标题：文章 h3、移动端卡片标题 */
    --fs-xl:  19px;   /* L7 标题：卡片标题、面板标题、文章 h2 */
    --fs-2xl: 24px;   /* L8 大标题：文章 h1、移动端 Banner */
    --fs-3xl: 30px;   /* L9 主标题：Banner 主标题（桌面） */

    /* ——— 0.3 字重（3 级，剔除 700）———
       700 在中文下笔画会糊，苹果体系也止于 600 */
    --fw-normal: 400; /* 正文、导航、meta、摘要、版权 */
    --fw-medium: 500; /* 链接强调、按钮、计数徽章 */
    --fw-semi:   600; /* 全部标题、面板标题、当前页码 */

    /* ——— 0.4 行高（4 级，与字号成对使用）——— */
    --lh-tight: 1.28;  /* 大标题（25px+） */
    --lh-snug:  1.4;   /* 卡片标题、面板标题 */
    --lh-base:  1.6;   /* UI 正文、meta、摘要、列表 */
    --lh-relax: 1.75;  /* 长文正文（阅读场景需更松） */

    /* ——— 0.5 字距（4 级）———
       中文是等宽方块字，负字距幅度须远小于西文，否则字会粘连 */
    --ls-tight:  -0.015em; /* 大标题 */
    --ls-snug:   -0.008em; /* 卡片标题 */
    --ls-normal:  0;       /* 正文 */
    --ls-wide:    0.02em;  /* 小字、全大写西文 */

    /* ——— 0.6 品牌与文字色 ——— */
    --ap-blue: #0071e3;          /* 科技蓝：强调色（回退原色仅改这一行 → #01aaed） */
    --ap-blue-hover: #0077ed;
    --ap-blue-deep: #0058b0;
    --ap-blue-tint: #eaf3ff;
    --ap-ink: #1d1d1f;
    --ap-ink-2: #424245;
    --ap-gray: #6e6e73;
    --ap-gray-2: #86868b;
    --ap-gray-3: #a1a1a6;

    /* ——— 0.7 线：扁平化后由"描边"承担分区职责 ——— */
    --ap-line: #d2d2d7;          /* 结构性发丝线（头/脚） */
    --ap-line-soft: #ececf0;     /* 卡片内部分隔线 */
    --ap-border: #e6e6eb;        /* 卡片描边：扁平设计的关键 */

    /* ——— 0.8 面 ——— */
    --ap-canvas: #f5f5f7;
    --ap-surface: #ffffff;
    --ap-surface-2: #fafafc;
    --ap-fill: #f2f2f5;          /* 扁平填充：标签、序号底 */

    /* ——— 0.9 圆角体系 ——— */
    --ap-r-xl: 14px;
    --ap-r-card: 10px;
    --ap-r-lg: 8px;
    --ap-r-md: 6px;
    --ap-r-pill: 980px;

    /* ——— 0.10 阴影：扁平化 = 几乎不用 ——— */
    --ap-sd-hover: 0 1px 3px rgba(0, 0, 0, .05);

    /* ——— 0.11 动效 ——— */
    --ap-ease: cubic-bezier(.28, .72, .28, 1);
    --ap-dur: .24s;
}

/* ==========================================================================
   1. 字体族统一 —— 全站唯一入口
   ========================================================================== */

/* 1.1 根节点：所有元素默认继承 */
html { font-family: var(--ap-font); }
body { font-family: var(--ap-font); }

/* 1.2 表单控件不继承 font-family，必须显式声明（浏览器默认 UI 字体） */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* 1.3 覆盖 layui 自行声明的字体，防止局部回落到 Helvetica/Arial 无中文的回退链 */
.layui-card, .layui-card-header, .layui-card-body,
.layui-btn, .layui-form, .layui-form-label, .layui-form-item,
.layui-input, .layui-textarea, .layui-select,
.layui-nav, .layui-nav-item, .layui-nav-item a,
.layui-laypage, .layui-laypage a, .layui-laypage span, .layui-laypage em,
.layui-table, .layui-table th, .layui-table td,
.layui-badge, .layui-badge-rim, .layui-badge-dot {
    font-family: var(--ap-font);
}

/* 1.4 修复 main.css 的字体栈（英文体打头、缺 -apple-system、缺系统中文优选项） */
.header, .content, .banner, .footer-wrap, .markdown-body,
.tony-article-content, .tony-right-panel, .tony-comment {
    font-family: var(--ap-font) !important;
}

/* 1.5 修复 layui 分页箭头硬编码的 font-family: Sim sun（宋体）
       —— 同时把 16px 收到阶梯内的 L2，与分页其余文字同级 */
.layui-laypage-prev em, .layui-laypage-next em {
    font-family: var(--ap-font) !important;
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-medium) !important;
}

/* 1.6 图标字体必须在最后还原（否则被 1.3 的覆盖规则误伤） */
.layui-icon, .layui-icon-prev, .layui-icon-next,
[class^="layui-icon-"], [class*=" layui-icon-"] {
    font-family: layui-icon !important;
}

/* 1.7 图标字号统一 —— layui 给 .layui-icon 的默认值是 16px，会越过阶梯。
       图标不是文字，不需要独立字号，改为跟随所在语境的字号（1em）。
       特例：需要比正文小一号的图标（如标题尾部图标）由各章节显式指定。 */
i.layui-icon, i[class*="layui-icon"] { font-size: 1em; }

/* 1.8 第三方评论插件（畅言）字体与字号统一 ——
       插件自带 Microsoft YaHei / Impact 字体与 20px / 9px 等阶梯外字号，
       与全站体系冲突。统一策略：整体字体归 --ap-font、字号归 L4（--fs-base）；
       仅"评论计数数字"用 L7（--fs-xl）保留强调。
       说明：这是第三方插件的可控边界 —— 其内部更细的文字层级交由插件自身，
       本层只保证字体族与字号落在设计令牌集合内。 */
#SOHU_MAIN, #SOHU_MAIN *:not([class*="icon"]):not([class*="Icon"]) {
    font-family: var(--ap-font) !important;
}
#SOHU_MAIN, #SOHU_MAIN * { font-size: var(--fs-base) !important; }
#SOHU_MAIN [class*="count-num"] {
    font-size: var(--fs-xl) !important;
    font-weight: var(--fw-semi) !important;
    font-variant-numeric: tabular-nums;
}

/* 1.7 等宽字体独立成栈，不继承正文 */
code, kbd, samp, pre, .markdown-body code, .markdown-body pre {
    font-family: var(--ap-font-mono);
}

/* ==========================================================================
   2. 全局排版基线
   ========================================================================== */
body {
    background: var(--ap-canvas);
    color: var(--ap-ink);
    font-size: var(--fs-md);
    font-weight: var(--fw-normal);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { text-decoration: none; }
a:hover { color: var(--ap-blue-hover); }

::selection { background: rgba(0, 113, 227, .16); color: var(--ap-blue-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ap-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .16);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .28); background-clip: content-box; }

/* ==========================================================================
   3. 顶部导航 —— 高度 54px
   ========================================================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    height: 54px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--ap-border);
}
.header h1.logo { margin: 0 26px 0 0; font-size: 0; line-height: 0; }
/* Logo 为白底彩色位图：multiply 让白底融入页头，消除白色方块 */
.tony-blog-logo {
    height: 30px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
}

.header .nav { margin-left: 0; display: flex; align-items: center; }
/* 导航：L4（14px）/ 400 / 行高与容器等高（54px，垂直居中手段） */
.header .nav a {
    position: relative;
    margin: 0 20px 0 0;
    padding: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: 54px;
    color: var(--ap-ink);
    opacity: .84;
    transition: color var(--ap-dur) var(--ap-ease), opacity var(--ap-dur) var(--ap-ease);
}
.header .nav a:hover { color: var(--ap-blue); opacity: 1; }
.header .nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--ap-blue);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ap-dur) var(--ap-ease);
}
.header .nav a:hover::after { transform: scaleX(1); }

.menu-btn { padding: 10px 0; }
.menu, .menu:before, .menu:after {
    width: 19px; height: 1.6px;
    background: var(--ap-ink);
    border-radius: 2px;
}

/* ==========================================================================
   4. Banner —— 高度 172px
   ========================================================================== */
.banner {
    min-height: 172px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(180deg, rgba(10, 14, 22, .50) 0%, rgba(10, 14, 22, .64) 100%),
        url("/default/images/banner.jpg");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}
.banner .text-inner { text-align: center; }
/* Banner 主标题：L9（30px）/ 600 / 紧行高 / 大字距收紧 */
.banner .title {
    margin: 0;
    padding: 0 20px;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
    text-wrap: balance;
}
/* 短蓝条：扁平实心，无光晕 */
.banner .title::after {
    content: "";
    display: block;
    width: 32px; height: 3px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: var(--ap-blue);
}

/* ——— 遗留选择器字号归位 ———
   main.css 中这 3 处字号不在阶梯内，当前页未渲染但其他模板会用到，
   先归入阶梯，避免换页后重新出现散落值 */
.banner .tony-article-cate,
.banner .tony-article-tag { font-size: var(--fs-sm); font-weight: var(--fw-normal); }
.tony-banner-cate { font-size: var(--fs-base); font-weight: var(--fw-normal); }
.new-icon { font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: 1; }

/* ==========================================================================
   5. main 区
   ========================================================================== */
.content {
    max-width: 1180px;
    margin: 18px auto 4px;
}
.list-item .item { margin-bottom: 10px; }

/* ==========================================================================
   6. 文章卡片 —— 扁平：1px 描边 + 纯白面
   ========================================================================== */
.item-cont {
    position: relative;
    padding: 18px 20px 17px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-r-card);
    background: var(--ap-surface);
    box-shadow: none;
    transition: border-color var(--ap-dur) var(--ap-ease),
                box-shadow var(--ap-dur) var(--ap-ease);
}
.item-cont:hover {
    border-color: #cfe0f5;
    box-shadow: var(--ap-sd-hover);
}

/* 卡片标题：L7（20px）/ 600 —— 与文章 h2 同级，全站标题层级一致 */
.item-cont h3 {
    margin: 0 0 7px;
    font-size: var(--fs-xl);
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    text-wrap: balance;
}
.item-cont a h3 { color: var(--ap-ink); transition: color var(--ap-dur) var(--ap-ease); }
.item-cont a:hover h3 { color: var(--ap-blue); }
.item-cont h3 .layui-icon-release {
    font-size: var(--fs-base);
    margin-left: 6px;
    color: var(--ap-blue);
    opacity: .55;
    transition: opacity var(--ap-dur) var(--ap-ease);
}
.item-cont:hover h3 .layui-icon-release { opacity: 1; }

/* ——— meta 行：L3（13px）/ 400 —— 去方框化，等宽数字 ——— */
.item-cont > p:first-of-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 8px;
    padding: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    line-height: var(--lh-base);
    color: var(--ap-gray-2);
    font-variant-numeric: tabular-nums;
}
.item-cont > p:first-of-type > span { display: inline-flex; align-items: center; }
.item-cont > p:first-of-type > span + span::before {
    content: "·";
    margin: 0 7px;
    color: #c7c7cc;
    font-weight: var(--fw-semi);
}
.item-cont .layui-badge-rim,
.item-cont .layui-badge {
    height: auto;
    line-height: inherit;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--ap-gray-2) !important;
    box-shadow: none;
}
.item-cont .layui-badge-rim a {
    color: var(--ap-blue);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    transition: color var(--ap-dur) var(--ap-ease);
}
.item-cont .layui-badge-rim a:hover { color: var(--ap-blue-hover); text-decoration: underline; text-underline-offset: 2px; }
/* 阅读量补一个单位（纯 CSS 装饰文案，删除该规则即消失） */
.item-cont > p:first-of-type > span:last-child::after {
    content: " 次阅读";
    margin-left: 1px;
}

/* 摘要：L4（14px）—— 比正文（L5）小一级，作为列表页次级信息 */
.item-cont p {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-normal);
    color: var(--ap-gray);
}
.item-cont > p:nth-of-type(2) { margin-top: 0; }

/* ==========================================================================
   7. 侧栏面板
   ========================================================================== */
.tony-right-panel {
    margin-bottom: 10px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-r-card);
    background: var(--ap-surface);
    box-shadow: none;
    overflow: hidden;
    transition: border-color var(--ap-dur) var(--ap-ease), box-shadow var(--ap-dur) var(--ap-ease);
}
.tony-right-panel:hover { border-color: #cfe0f5; box-shadow: var(--ap-sd-hover); }

/* 面板标题：L4（14px）/ 600 —— 比卡片标题小一级，体现层级差 */
.tony-right-panel .layui-card-header {
    height: auto;
    line-height: var(--lh-snug);
    padding: 11px 14px 10px;
    border-bottom: 1px solid var(--ap-line-soft);
    background: var(--ap-surface-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-snug);
    color: var(--ap-ink);
}
.tony-right-panel .layui-card-header::before { content: none; }
.tony-right-panel .layui-card-body { padding: 12px 14px 13px; }

/* 作者卡片 */
.author-avatar {
    width: 68px; height: 68px;
    margin: 2px auto 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
    transition: border-color var(--ap-dur) var(--ap-ease);
}
.author-avatar:hover { border-color: var(--ap-blue-tint); }
.icon-github { display: inline-block; margin-bottom: 6px; }
/* 作者信息：L3（13px） */
.tony-link {
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.8;
}

/* 标签云：L3（13px）小药丸 */
.tony-article-tags { line-height: 1; }
.tony-article-tags .layui-badge-rim {
    display: inline-block;
    margin: 3px 5px 3px 0;
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    letter-spacing: var(--ls-wide);
    border: 0 !important;
    border-radius: var(--ap-r-pill);
    background: var(--ap-fill) !important;
    color: var(--ap-ink-2) !important;
    transition: background var(--ap-dur) var(--ap-ease), color var(--ap-dur) var(--ap-ease);
}
.tony-article-tags .layui-badge-rim a { color: var(--ap-ink-2); transition: color var(--ap-dur) var(--ap-ease); }
.tony-article-tags .layui-badge-rim:hover { background: var(--ap-blue) !important; }
.tony-article-tags .layui-badge-rim:hover a { color: #fff; }

/* 热门文章：L3（13px）+ 序号 + 发丝分隔 */
.tony-hot-articles { counter-reset: ap-hot; }
.tony-hot-articles li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    border-bottom: 1px solid var(--ap-line-soft);
}
.tony-hot-articles li:last-child { border-bottom: 0; padding-bottom: 0; }
/* 序号：L2（12px）等宽数字 */
.tony-hot-articles li::before {
    counter-increment: ap-hot;
    content: counter(ap-hot, decimal-leading-zero);
    flex: 0 0 19px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    color: var(--ap-gray-3);
    transition: color var(--ap-dur) var(--ap-ease);
}
.tony-hot-articles li:nth-child(-n+3)::before { color: var(--ap-blue); }
.tony-hot-articles li a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ap-ink-2);
    transition: color var(--ap-dur) var(--ap-ease);
}
.tony-hot-articles li:hover a { color: var(--ap-blue); }
.tony-hot-articles li .layui-badge { flex: 0 0 auto; }
/* 计数徽章：L1（11px）—— 全站最小字号，仅用于纯数字标记 */
.tony-hot-articles li .layui-bg-cyan {
    background: var(--ap-blue-tint) !important;
    color: var(--ap-blue) !important;
    border-radius: var(--ap-r-pill);
    padding: 0 7px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
}

/* 二维码 */
.tony-right-panel .layui-card-body img:not(.author-avatar) {
    display: block;
    width: 100%;
    max-width: 136px;
    margin: 0 auto;
    border-radius: var(--ap-r-lg);
}

/* ==========================================================================
   8. 分页 —— L2（12px）/ 等宽数字
   ========================================================================== */
#tonyPage { margin: 18px 0 0; }
.layui-laypage { font-family: var(--ap-font); }
.layui-laypage a, .layui-laypage span {
    height: 29px;
    line-height: 29px;
    min-width: 29px;
    margin: 0 2px !important;
    padding: 0 8px;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-r-md) !important;
    background: #fff;
    color: var(--ap-ink-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    font-variant-numeric: tabular-nums;
    transition: background var(--ap-dur) var(--ap-ease),
                color var(--ap-dur) var(--ap-ease),
                border-color var(--ap-dur) var(--ap-ease);
}
.layui-laypage a:hover {
    background: var(--ap-blue-tint);
    border-color: #bcd9f7 !important;
    color: var(--ap-blue);
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background: var(--ap-blue) !important;
    border-radius: var(--ap-r-md);
}
.layui-laypage .layui-laypage-curr em { color: #fff; font-weight: var(--fw-semi); }
/* 分页箭头图标：显式给 L4（14px），比分页文字（L2=12px）大一档才视觉平衡 */
.layui-laypage .layui-icon { font-size: var(--fs-base); }

/* ==========================================================================
   9. 页脚 —— L2（12px）
   ========================================================================== */
.footer-wrap {
    margin-top: 20px;
    padding: 16px 0 22px;
    border-top: 1px solid var(--ap-line);
    background: transparent;
}
.tony-copyright {
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    line-height: 1.85;
    color: var(--ap-gray-3);
}
.tony-copyright a { color: var(--ap-gray-3); transition: color var(--ap-dur) var(--ap-ease); }
.tony-copyright a:hover { color: var(--ap-blue); }
.tony-copyright strong a { color: var(--ap-gray); }
/* UA 默认给 <strong> 的 bold(700) 不在字重体系内，收敛到 500（内联强调） */
.tony-copyright strong, .tony-copyright b { font-weight: var(--fw-medium); }
.tony-copyright strong a { font-weight: var(--fw-medium); }

/* ==========================================================================
   10. 文章详情页 —— 长文排版（唯一使用 L5 正文与 --lh-relax 的场景）
   ========================================================================== */
.tony-article-content .item-box {
    padding: 22px 26px 24px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-r-xl);
    background: var(--ap-surface);
    box-shadow: none;
}
/* 正文：L5（15px）/ --lh-relax（1.75）—— 长文阅读需比 UI 更松的行高 */
.markdown-body {
    font-size: var(--fs-md);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relax);
    color: var(--ap-ink-2);
    letter-spacing: var(--ls-normal);
}
/* 长文四级标题：h1→L8、h2→L7、h3→L6、h4→L5(靠字重与间距区分) */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: var(--ap-ink);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-snug);
}
.markdown-body h1 { font-size: var(--fs-2xl); margin: 1.2em 0 .5em; letter-spacing: var(--ls-tight); }
.markdown-body h2 { font-size: var(--fs-xl);  margin: 1.4em 0 .5em; }
.markdown-body h3 { font-size: var(--fs-lg);  margin: 1.3em 0 .45em; }
.markdown-body h4 { font-size: var(--fs-md);  margin: 1.2em 0 .4em; }
.markdown-body p { margin: .85em 0; }
.markdown-body a { color: var(--ap-blue); }
.markdown-body a:hover { text-decoration: underline; text-underline-offset: 2px; }
.markdown-body img { border-radius: var(--ap-r-lg); }
.markdown-body blockquote {
    margin: 1.1em 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--ap-blue);
    color: var(--ap-gray);
    background: transparent;
}
/* 代码块：等宽栈 + L3（13px）—— 代码字号通常比正文小一级 */
.markdown-body pre {
    padding: 13px 15px;
    border: 1px solid var(--ap-line-soft);
    border-radius: var(--ap-r-lg);
    background: #f6f6f8;
    font-size: var(--fs-sm);
    line-height: 1.62;
}
.markdown-body code { border-radius: 4px; font-size: .92em; }
.markdown-body hr { border: 0; border-top: 1px solid var(--ap-line); margin: 1.8em 0; }
.markdown-body table { border-color: var(--ap-line-soft); font-size: var(--fs-base); }
.markdown-body th { background: var(--ap-surface-2); color: var(--ap-ink); font-weight: var(--fw-semi); }

/* 评论区容器：第三方评论插件（畅言）只能美化外层 */
.tony-comment {
    padding: 16px 18px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-r-card);
    background: var(--ap-surface);
    box-shadow: none;
}
.tony-comment #SOHUCS { min-height: 34px; }

/* ==========================================================================
   11. 表单 / 按钮 / 表格 —— 使用 L4（14px）
   ========================================================================== */
.layui-btn {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    border-radius: var(--ap-r-md);
    transition: background-color var(--ap-dur) var(--ap-ease),
                border-color var(--ap-dur) var(--ap-ease) !important;
}
.layui-btn:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
.layui-btn:active { transform: none; filter: brightness(.96); }

.layui-input, .layui-textarea, .layui-select {
    font-size: var(--fs-base);
    border-color: var(--ap-border);
    border-radius: var(--ap-r-md);
    transition: border-color var(--ap-dur) var(--ap-ease), box-shadow var(--ap-dur) var(--ap-ease) !important;
}
.layui-input:focus, .layui-textarea:focus {
    border-color: var(--ap-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .10) !important;
}

.layui-table { border-radius: var(--ap-r-lg); font-size: var(--fs-base); }
.layui-table th { font-weight: var(--fw-semi); }
.layui-table tbody tr:hover { background-color: #f7faff !important; }

/* 收敛原样式里"过于跳"的效果 */
.markdown-body img:hover { transform: none; box-shadow: none; }
.tony-hot-articles li a:hover { padding-left: 0; }

/* ==========================================================================
   12. 响应式 —— 重定义字号令牌，全站自动跟随（不再逐元素改字号）
   ========================================================================== */
/* 平板 / 紧凑档：整体降 1~2 级，比例关系保持不变 */
@media (max-width: 992px) {
    :root {
        --fs-2xs: 11px;
        --fs-xs:  12px;
        --fs-sm:  13px;
        --fs-base:13px;
        --fs-md:  15px;
        --fs-lg:  16px;
        --fs-xl:  18px;
        --fs-2xl: 22px;
        --fs-3xl: 25px;
    }
    .banner { min-height: 152px; }
    .item-cont { padding: 16px 18px 15px; }
    .tony-article-content .item-box { padding: 20px 20px 22px; }
}

/* 移动端：在紧凑档基础上再收一级极小字。
   注：L6/L7 在 390px 下合并为 16px —— 16px 是卡片标题的折行临界值
   （17px 会让列表标题由 2 行变 3 行、全页多出约 100px）。L6 用于文章页、
   L7 用于列表页，二者不同屏，合并不产生同屏层级冲突。 */
@media (max-width: 768px) {
    :root {
        --fs-2xs: 10px;
        --fs-xs:  11px;
        --fs-sm:  12px;
        --fs-base:13px;
        --fs-md:  15px;
        --fs-lg:  16px;
        --fs-xl:  16px;
        --fs-2xl: 20px;
        --fs-3xl: 24px;
    }

    /* 页头两行：首行 徽标 + 汉堡，次行 导航条 */
    .header {
        height: auto;
        padding: 7px 12px 0;
        flex-wrap: wrap;
        align-items: center;
    }
    .header h1.logo { order: 1; margin: 0 auto 0 0; }
    .header .menu-btn { order: 2; display: block; padding: 4px 0 4px 8px; }
    .header .nav { display: none; }
    .header .layui-nav.header-down-nav {
        order: 3;
        display: block;
        width: 100%;
        margin: 5px 0 0;
        padding: 2px 0 7px;
        background: transparent;
        border-top: 1px solid var(--ap-line-soft);
    }
    .header .layui-nav.header-down-nav li { display: inline-block; }
    .header .layui-nav.header-down-nav li a {
        padding: 0 13px 0 0;
        font-size: var(--fs-sm);
        line-height: 1.9;
        color: var(--ap-gray);
        background: transparent;
    }
    .header .layui-nav.header-down-nav li a:hover { color: var(--ap-blue); }
    .tony-blog-logo { height: 26px; }

    .banner { min-height: 122px; }
    .banner .title { padding: 0 16px; }
    .banner .title::after { margin-top: 8px; width: 26px; height: 2px; }

    /* main 与卡片：内边距 13px、间距 8px、圆角 8px */
    .content { margin: 10px auto 2px; }
    .list-item .item { margin-bottom: 8px; }

    .item-cont { padding: 13px 13px 12px; border-radius: var(--ap-r-lg); }
    .item-cont h3 { margin-bottom: 5px; }
    .item-cont > p:first-of-type {
        margin-bottom: 6px;
        column-gap: 9px;
        row-gap: 2px;
    }
    /* 小屏 meta 易折行：去掉「·」改用间距，避免行首出现孤立的点 */
    .item-cont > p:first-of-type > span + span::before { content: none; }

    /* 侧栏 */
    .tony-right-panel { margin-bottom: 8px; border-radius: var(--ap-r-lg); }
    .tony-right-panel .layui-card-header { padding: 9px 12px 8px; }
    .tony-right-panel .layui-card-body { padding: 10px 12px 11px; }
    .tony-article-tags .layui-badge-rim {
        margin: 3px 4px 3px 0; padding: 0 9px;
        height: 23px; line-height: 23px;
    }
    .tony-hot-articles li { padding: 6px 0; gap: 8px; }
    .author-avatar { width: 60px; height: 60px; margin: 0 auto 6px; }

    /* 文章页 */
    .tony-article-content .item-box { padding: 16px 14px 18px; border-radius: var(--ap-r-card); }
    .tony-comment { padding: 13px 12px; border-radius: var(--ap-r-lg); }

    #tonyPage { margin-top: 14px; }
    .layui-laypage a, .layui-laypage span {
        height: 27px; line-height: 27px; min-width: 27px; padding: 0 7px;
    }
    .footer-wrap { margin-top: 16px; padding: 13px 0 18px; }
}

/* ==========================================================================
   13. 动效降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   14. v5 适配层 —— 与工作区 main.css（复刻 + 评审增强层）的衔接
   ========================================================================== */

/* 14.0 主色统一：增强层的 --tony-primary 由 #01aaed 归入本层 #0071e3 */
:root {
    --tony-primary: #0071e3;
    --tony-primary-dark: #0058b0;
}

/* 14.1 meta 行：v5 用「·」分隔，取消评审层的 flex gap 防止双重间距 */
.item-cont > p.tony-item-meta { column-gap: 0; row-gap: 3px; }

/* 14.2 热文榜：保留 HTML 序号徽章（tony-hot-rank），禁用 v5 伪元素序号 */
.tony-hot-articles li::before { content: none; }
.tony-hot-articles li { gap: 8px; align-items: flex-start; }
.tony-hot-views {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: var(--fs-2xs);
    color: var(--ap-gray-3);
    font-variant-numeric: tabular-nums;
}

/* 14.3 new 徽章：保持药丸徽章形态（v5 将 line-height 收为 1 会破坏垂直居中） */
.item-cont .new-icon { height: 20px; line-height: 20px; padding: 0 9px; border-radius: var(--ap-r-pill); }

/* 14.4 已移除：移动导航折叠与展开态排版由 ui-tidy.css 2.7 接管 */

/* 14.5 扁平化收尾：抵消增强层残余的位移/缩放 hover（扁平设计反馈不靠位移） */
.tony-right-panel:hover,
.author-avatar:hover,
.tony-tag-list a:hover,
.layui-laypage a:hover { transform: none; }
.author-avatar:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, .10); }

/* 14.6 已移除：幽灵面板隐藏由 ui-tidy.css 2.1 接管（多一层 :not(:has(table))） */

/* 15 节已移除：分页/meta 灰阶/热门序号/徽章/作者面板色值令牌化
   由 ui-tidy.css 第 1 节（1.1-1.5）完整接管 */

/* 16 节（精简）：仅保留视图 layui-icon 方案专属的规则，
   其余 P2 项（汉堡/标签云/铅笔图标/Logo/移动导航项/断档限宽）
   由 ui-tidy.css 2.4-2.8、2.10 接管 */

/* P0-3 banner 副标题：glyphicon 在 layui 站无字体（视图中已替换为 layui-icon），
   此处统一图标颜色与间距 */
.banner .tony-article-cate .layui-icon,
.banner .tony-article-tag .layui-icon {
    margin-right: 5px;
    color: rgba(255, 255, 255, .78);
}
.banner .tony-article-cate .layui-icon-list { margin-left: 10px; }