@charset "UTF-8";
/**
 * article-templates.css
 * ---------------------------------------------------------------------------
 * 教程 / 问答 / 资讯 / 产品 四类文章模板的共用设计层。
 *
 * 设计目标（与四个模板的 PHP 结构一一对应）：
 *   1. 一套间距、圆角、字号、行高的令牌，四模板共用，保证版面节奏一致；
 *   2. 「卡片 + 区块标题 + 正文」是同一种组件，只换强调色；
 *   3. 所有强调色来自 --art-accent，模板差异只体现在 Hero（头图区）形态；
 *   4. 断点统一：1100 / 960 / 768 / 600 / 420，间距按 32→28→22→18→16 递减。
 *
 * 令牌命名：--art-*（art = article）。模板类只负责覆盖 --art-accent 系列。
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   1. 令牌与四套主题色
   ========================================================================== */
.art-doc {
    /* 间距 */
    --art-gap: 18px;            /* 卡片之间的垂直间距 */
    --art-pad-x: 32px;          /* 卡片左右内边距 */
    --art-pad-y: 26px;          /* 卡片上下内边距 */
    --art-gutter: 24px;         /* 双栏（目录+正文）之间的间距 */

    /* 目录栏宽度。宽屏时目录会移到正文栏左侧的留白里（见第 6 节），
       这时宽度由 JS 按留白实际大小写回，这里只是兜底值。 */
    --art-toc-w: 264px;

    /* 外置目录与正文栏之间的间距。留白本来就紧张，比并排时的
       --art-gutter 更小；JS 也读这个值算可用的留白宽度。 */
    --art-rail-gap: 20px;

    /* 吸顶目录距离视口顶部的距离。登录后顶部还有 32px 的管理条，
       不让开的话目录头会被压在管理条下面（见下方 body.admin-bar 覆盖）。 */
    --art-toc-top: 20px;

    /* 形状 */
    --art-radius: 14px;
    --art-radius-sm: 10px;
    --art-radius-pill: 999px;

    /* 文字 */
    --art-fs-body: 16px;
    --art-lh-body: 1.95;
    --art-fs-h2: 21px;
    --art-fs-h3: 18px;
    --art-text: #333b45;
    --art-text-strong: #16181c;
    --art-text-muted: #8590a6;
    --art-text-faint: #a6afba;

    /* 表面 */
    --art-card: #fff;
    --art-soft: #f6f8fa;
    --art-line: #eef1f5;
    --art-line-strong: #e3e8ef;
    --art-shadow: 0 4px 20px rgba(16, 24, 40, .055);
    --art-shadow-hover: 0 10px 26px rgba(16, 24, 40, .1);

    /* 强调色（默认灰蓝，模板覆盖） */
    --art-accent: #4a7db3;
    --art-accent-2: #6aa3d8;
    --art-accent-ink: #2f5d8a;
    --art-accent-soft: #f0f5fa;
    --art-accent-line: rgba(74, 125, 179, .28);

    /* 实心面（按钮、图标底、渐变头图）单独一套色：
       夜间模式下文字用的 --art-accent 会调亮以便阅读，
       但实心面必须保持足够深的底色，白字才看得清。 */
    --art-solid: #4a7db3;
    --art-solid-2: #6aa3d8;
}

/* 教程：沉稳墨绿，偏「文档 / 手册」 */
.art-tut {
    --art-accent: #0f9d76;
    --art-accent-2: #2ec4a0;
    --art-accent-ink: #0b6b51;
    --art-accent-soft: #eefaf6;
    --art-accent-line: rgba(15, 157, 118, .28);
    --art-solid: #0f9d76;
    --art-solid-2: #2ec4a0;
}

/* 问答：明快科技蓝，偏「对话流」 */
.art-answer {
    --art-accent: #2b7cff;
    --art-accent-2: #5b9bff;
    --art-accent-ink: #175199;
    --art-accent-soft: #eef4ff;
    --art-accent-line: rgba(43, 124, 255, .28);
    --art-solid: #2b7cff;
    --art-solid-2: #5b9bff;
}

/* 资讯：克制的靛青，偏「报刊」 */
.art-news {
    --art-accent: #2f6fae;
    --art-accent-2: #5a95cd;
    --art-accent-ink: #204f80;
    --art-accent-soft: #f0f5fa;
    --art-accent-line: rgba(47, 111, 174, .28);
    --art-solid: #2f6fae;
    --art-solid-2: #5a95cd;
}

/* 产品：正红 + 暖橙，偏「电商」 */
.art-prod {
    --art-accent: #d92b2b;
    --art-accent-2: #ff6a3d;
    --art-accent-ink: #a81c1c;
    --art-accent-soft: #fff3f3;
    --art-accent-line: rgba(217, 43, 43, .26);
    --art-solid: #d92b2b;
    --art-solid-2: #ff6a3d;
}

/* ==========================================================================
   2. 骨架：面包屑 / 卡片流 / 双栏
   ========================================================================== */
.art-doc .bread {
    margin: 0 10px 12px;
}

.art-doc .art-doc-article {
    display: block;
}

/* 卡片纵向流（正文之后的所有区块都走这个容器，保证间距一致） */
.art-doc-flow {
    display: flex;
    flex-direction: column;
    gap: var(--art-gap);
    min-width: 0;
}

/* 双栏：左目录 + 右内容（教程 / 资讯共用） */
.art-doc-split {
    position: relative;      /* 目录浮动到左侧留白时的定位基准 */
    display: flex;
    align-items: flex-start;
    gap: var(--art-gutter);
}

.art-doc-split > .art-doc-flow {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * 两个子项都要能收缩到容器宽度以内。
 * 目录里是不换行的长标题（横向溢出交给列表自己滚），如果这里不限制
 * min-width，长标题会把 flex 项撑宽，进而把整个分栏和正文一起顶出屏幕。
 */
.art-doc-split > .art-doc-toc-rail,
.art-doc-split > .art-doc-toc,
.art-doc-split > .art-doc-flow {
    min-width: 0;
}

/* ==========================================================================
   3. 卡片与区块标题
   ========================================================================== */
.art-doc-card {
    position: relative;
    background: var(--art-card);
    border-radius: var(--art-radius);
    box-shadow: var(--art-shadow);
    padding: var(--art-pad-y) var(--art-pad-x);
}

/* 无内边距卡片：内容自己贴边（如产品图廊、相关推荐网格） */
.art-doc-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--art-line);
}

.art-doc-sec-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--art-text-strong);
    line-height: 1.4;
}

.art-doc-sec-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--art-text-faint);
    margin-left: auto;
    text-align: right;
}

/* 轻量标题：只有左侧色条，用于「相关推荐 / 声明」等次级区块 */
.art-doc-sec-title--bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--art-text-strong);
    padding-left: 11px;
    margin-bottom: 16px;
    position: relative;
}

.art-doc-sec-title--bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--art-accent);
}

.art-doc-sec-title--bar .be {
    color: var(--art-accent);
}

/* ==========================================================================
   4. Hero（标题区）共用件
   ========================================================================== */
.art-doc-hero {
    margin-bottom: var(--art-gap);
}

.art-doc-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--art-accent);
}

.art-doc-kicker > .be {
    font-size: 15px;
}

.art-doc-kicker-sep {
    width: 1px;
    height: 12px;
    background: currentColor;
    opacity: .3;
}

.art-doc-kicker-cat {
    font-weight: 400;
    color: var(--art-text-muted);
}

.art-doc-kicker-cat a {
    color: inherit;
}

.art-doc-kicker-cat a:hover {
    color: var(--art-accent);
}

.art-doc-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--art-text-strong);
    margin: 0 0 14px;
    word-break: break-word;
}

/* 标题内的前缀/后缀胶囊不许撑破行高 */
.art-doc-title .ceo-single-tese {
    vertical-align: middle;
}

.art-doc-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--art-text-muted);
}

.art-doc-meta-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    background: var(--art-soft);
}

.art-doc-meta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.art-doc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.art-doc-meta-item .be {
    font-size: 13px;
    opacity: .85;
}

.art-doc-meta-author {
    color: var(--art-text);
    font-weight: 600;
}

.art-doc-meta-author a {
    color: inherit;
}

/* ==========================================================================
   5. 正文排版（四模板统一）
   ========================================================================== */
.art-doc-body {
    font-size: var(--art-fs-body);
    line-height: var(--art-lh-body);
    color: var(--art-text);
    word-break: break-word;
    /* .single-content 自带 20px 0 30px，卡片已经有内边距，再叠一层会多出空档 */
    margin: 0;
}

/*
 * 与主题 .single-content 老排版的冲突收回。
 *
 * 四个模板的正文容器现在统一带 .single-content（教程/问答此前没有），目的是让
 * 短代码（[tabs] / 代码块 / 表格 / 图集）命中 css/shortcodes.css 那套现代样式。
 * 不带这个类时，[tabs] 会退回 style.css 里的老规则 `.tab-group{margin:10px -20px}`
 * ——负外边距在博客全宽版式里是「出血」效果，但塞进卡片就变成溢出：
 * 实测 360px 宽时 tab-group 左 -4px、右 364px，比视口还宽 8px。
 *
 * 代价是老排版也跟着进来了，下面逐条收回。
 */

/* 老规则给 h2/h3 各插了一条竖线装饰（::before / ::after），与设计层的
   左边框 + 小方块叠加后会变成「双竖线」。 */
.art-doc-body h2::before,
.art-doc-body h3::after,
.art-doc-body .single-content h2::before,
.art-doc-body .single-content h3::after {
    display: none;
}

/* h3 的负外边距是 !important 级（20px -5px），必须同级压回去，
   否则卡片里每一级小节标题都会左右各顶出 5px。 */
.art-doc-body h3,
.art-doc-body .single-content h3 {
    margin: 26px 0 12px !important;
    padding-left: 16px;
}

/* 短代码块一律按内容宽度排布，不做出血（双保险：老规则的 -20px 是 0,1,0，
   这里 0,3,0 稳压；.single-content .tab-group 的 24px 0 也一并归一） */
.art-doc .art-doc-body .tab-group,
.art-doc .art-doc-body .tab-group > section.active,
.art-doc .art-doc-body .tab-group > section {
    margin-left: 0;
    margin-right: 0;
}

.art-doc-body > *:first-child {
    margin-top: 0 !important;
}

.art-doc-body > *:last-child {
    margin-bottom: 0 !important;
}

/* 标题层级：h2 = 章节（左色条 + 上间距），h3 = 小节（小方块），h4 = 强调 */
.art-doc-body h2,
.art-doc-body h3,
.art-doc-body h4 {
    color: var(--art-text-strong);
    font-weight: 700;
    scroll-margin-top: 90px;
}

.art-doc-body h2 {
    position: relative;
    font-size: var(--art-fs-h2);
    line-height: 1.55;
    margin: 34px 0 16px;
    padding: 2px 0 2px 14px;
    border-left: 4px solid var(--art-accent);
}

.art-doc-body h3 {
    position: relative;
    font-size: var(--art-fs-h3);
    line-height: 1.6;
    margin: 26px 0 12px;
    padding-left: 16px;
}

.art-doc-body h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--art-accent);
    opacity: .85;
}

.art-doc-body h4 {
    font-size: 16px;
    margin: 20px 0 10px;
}

/* 覆盖 style.css 里 .single-content h2 的强样式（存在时） */
.art-doc-body.single-content h2,
.art-doc-body.single-content h3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0;
}

.art-doc-body h2 p,
.art-doc-body h3 p {
    color: inherit;
    font-weight: inherit;
}

.art-doc-body p {
    margin: 0 0 18px;
}

.art-doc-body a {
    color: var(--art-accent-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--art-accent-line);
    transition: color .2s ease, border-color .2s ease;
}

.art-doc-body a:hover {
    color: var(--art-accent);
    border-bottom-color: var(--art-accent);
}

/* 主题全局给 p a 加的 4px 荧光条在正文卡片里太抢眼，这里收掉 */
.art-doc-body p a::after {
    display: none !important;
}

.art-doc-body strong,
.art-doc-body b {
    color: var(--art-text-strong);
    font-weight: 700;
}

.art-doc-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: var(--art-radius-sm);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}

.art-doc-body figure {
    margin: 20px 0;
    max-width: 100%;
}

.art-doc-body figure img {
    margin: 0 auto;
}

.art-doc-body figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--art-text-faint);
    text-align: center;
}

.art-doc-body blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    background: var(--art-accent-soft);
    border-left: 3px solid var(--art-accent);
    border-radius: 0 var(--art-radius-sm) var(--art-radius-sm) 0;
    color: var(--art-accent-ink);
    font-size: 15px;
}

.art-doc-body blockquote p:last-child {
    margin-bottom: 0;
}

.art-doc-body ul,
.art-doc-body ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.art-doc-body li {
    margin: 8px 0;
}

.art-doc-body ul > li::marker {
    color: var(--art-accent);
}

.art-doc-body ol > li::marker {
    color: var(--art-accent);
    font-weight: 700;
}

.art-doc-body pre {
    margin: 20px 0;
    padding: 16px 18px;
    background: #1b2420;
    color: #d9fff0;
    border-radius: var(--art-radius-sm);
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.75;
    -webkit-overflow-scrolling: touch;
}

.art-doc-body pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.art-doc-body code {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: .92em;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--art-soft);
    color: var(--art-accent-ink);
    white-space: pre-wrap;
}

.art-doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14.5px;
}

.art-doc-body th,
.art-doc-body td {
    padding: 11px 14px;
    border: 1px solid var(--art-line-strong);
    text-align: left;
    vertical-align: top;
}

.art-doc-body th {
    background: var(--art-soft);
    color: var(--art-text-strong);
    font-weight: 700;
}

/* 宽表在窄屏可横向滑动，不撑破版面 */
.art-doc-body .wp-block-table,
.art-doc-body .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.art-doc-body hr {
    height: 0;
    margin: 26px 0;
    border: none;
    border-top: 1px dashed var(--art-line-strong);
}

/* ==========================================================================
   6. 目录（教程 / 资讯共用吸顶栏）
   --------------------------------------------------------------------------
   目录由「外壳 + 卡片」两层组成：

   .art-doc-toc-rail  外层只负责位置和行程：撑满正文栏的整个高度，
                      内部 sticky 才有地方“走”（sticky 的可移动范围
                      受包含块高度限制，高度不够就贴不住）。
   .art-doc-toc       内层卡片负责吸顶和外观：滚动时固定在视口顶部，
                      自身高度受视口限制，超出部分在列表内独立滚动（纵向），
                      长标题不截断、允许横向滚动查看（横向溢出）。

   桌面宽屏时外壳会被 JS 打上 has-toc-float 改成绝对定位，浮到正文栏
   左侧的页面留白里 —— 目录还在，正文却不再被它挤窄。留白不够时保持
   原来的并排布局（见第 14 节断点）。
   ========================================================================== */
.art-doc-toc-rail {
    position: relative;
    flex: 0 0 var(--art-toc-w, 264px);
    width: var(--art-toc-w, 264px);
    /* 撑满正文高度：不给满高度，内层 sticky 没有可移动范围 */
    align-self: stretch;
}

.art-doc-toc {
    position: sticky;
    top: var(--art-toc-top, 20px);
    width: 100%;
    /* dvh 让移动端地址栏收缩时目录不会顶出屏幕；不支持的浏览器用 vh 兜底 */
    max-height: calc(100vh - var(--art-toc-top, 20px) - 24px);
    max-height: calc(100dvh - var(--art-toc-top, 20px) - 24px);
    display: flex;
    flex-direction: column;
    background: var(--art-card);
    border-radius: var(--art-radius);
    box-shadow: var(--art-shadow);
    padding: 18px 14px 14px;
    border-top: 3px solid var(--art-accent);
    /* 目录是独立浮层，不要被父容器裁切 */
    overflow: visible;
    z-index: 2;
}

/*
 * 浮动形态：目录移到正文栏左侧的页面留白里。
 * 外壳绝对定位后不再是 flex 项，正文（.art-doc-flow）自动拿回整栏宽度；
 * 外壳仍撑满正文高度，内层 sticky 照旧整篇跟随。
 * 具体宽度由 JS 按留白大小写进 --art-toc-w，不会顶出视口。
 */
.art-doc-split.has-toc-float > .art-doc-toc-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(0px - var(--art-toc-w, 264px) - var(--art-rail-gap, 20px));
    width: var(--art-toc-w, 264px);
    flex: none;
}

/* 登录后的管理条会挡住吸顶目录的头部，按管理条高度下移 */
body.admin-bar .art-doc {
    --art-toc-top: 52px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .art-doc {
        --art-toc-top: 66px;
    }
}

/*
 * 资讯模板的目录：顶部折叠卡形态。
 * 教程是左侧吸顶栏（和正文并排），资讯是单栏长文，目录放顶部更省空间，
 * 所以取消吸顶、拿满整宽，列表自己限高滚动，长文也不会把目录撑成一整屏。
 */
.art-doc-toc--inline {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    margin-bottom: var(--art-gap);
}

.art-doc-toc--inline .art-doc-toc-list {
    max-height: 210px;
}

.art-doc-toc--inline .art-doc-toc-foot {
    margin-top: 10px;
}

.art-doc-toc-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--art-text-strong);
    padding: 0 4px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--art-line);
}

.art-doc-toc-head .be {
    color: var(--art-accent);
    font-size: 15px;
}

.art-doc-toc-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--art-accent);
    background: var(--art-accent-soft);
    padding: 1px 8px;
    border-radius: var(--art-radius-pill);
}

.art-doc-toc-toggle {
    flex-shrink: 0;
    /* 触控热区不小于 32px：整条标题虽然也可点，但键盘/读屏用户落点在这个
       <button> 上，24px 在移动端偏小 */
    width: 32px;
    height: 32px;
    margin-right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--art-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, transform .25s ease, color .2s ease;
}

.art-doc-toc-toggle:hover {
    background: var(--art-accent-soft);
    color: var(--art-accent);
}

.art-doc-toc-toggle .be {
    font-size: 12px;
    transition: transform .25s ease;
}

.art-doc-toc.is-collapsed .art-doc-toc-toggle .be {
    transform: rotate(-90deg);
}

.art-doc-toc.is-collapsed .art-doc-toc-list,
.art-doc-toc.is-collapsed .art-doc-toc-foot {
    display: none;
}

.art-doc-toc-list {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    /* 双向滚动：纵向翻章节，横向看被截断的长标题 */
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
    margin: 0;
    padding: 0 2px 0 0;
    scrollbar-width: thin;
}

.art-doc-toc-list::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.art-doc-toc-list::-webkit-scrollbar-thumb {
    background: var(--art-accent-line);
    border-radius: 3px;
}

.art-doc-toc-list::-webkit-scrollbar-thumb:hover {
    background: var(--art-accent);
}

.art-doc-toc-list li {
    list-style: none;
    margin: 0;
}

.art-doc-toc-group {
    margin-bottom: 2px;
}

.art-doc-toc-h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    /* 标题本身按内容撑宽、溢出到列表的横向滚动区；h2 自身保持一整行，
       这样右侧折叠箭头能固定贴在目录右边缘，不会被长标题顶出去。 */
    position: relative;
    width: 100%;
    transition: background .2s ease;
}

.art-doc-toc-h2:hover {
    background: var(--art-accent-soft);
}

.art-doc-toc-num {
    flex-shrink: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--art-accent);
    letter-spacing: .02em;
}

.art-doc-toc-h2 > a {
    /* 不收缩、不裁切：长标题撑开宽度由列表横向滚动承接；
       右侧留出箭头的位置 */
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    width: max-content;
    padding-right: 26px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--art-text);
    white-space: nowrap;
    transition: color .2s ease;
}

.art-doc-toc-h2:hover > a,
.art-doc-toc-h2.is-current > a {
    color: var(--art-accent);
}

.art-doc-toc-caret {
    flex-shrink: 0;
    /* 固定在章条右边缘：长标题横向溢出时箭头仍然可见、可点 */
    position: absolute;
    right: 6px;
    top: 50%;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--art-text-faint);
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    transition: transform .25s ease, color .2s ease;
}

.art-doc-toc-caret .be {
    font-size: 10px;
}

.art-doc-toc-group.is-open .art-doc-toc-caret {
    transform: rotate(90deg);
    color: var(--art-accent);
}

.art-doc-toc-sub {
    display: none;
    list-style: none;
    margin: 0;
    padding: 2px 0 4px 12px;
}

.art-doc-toc-group.is-open > .art-doc-toc-sub {
    display: block;
}

.art-doc-toc-h3 > a {
    display: block;
    position: relative;
    /* 小节标题通常比章标题长，允许折行、完整显示；
       章标题保持单行，超长时由列表横向滚动承接。 */
    width: auto;
    min-width: 100%;
    padding: 5px 8px 5px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--art-text-muted);
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
}

.art-doc-toc-h3 > a::before {
    content: "";
    position: absolute;
    left: 4px;
    /* 多行标题时圆点对齐第一行，而不是整块垂直居中 */
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--art-line-strong);
}

.art-doc-toc-h3 > a:hover,
.art-doc-toc-h3 > a.is-current {
    background: var(--art-accent-soft);
    color: var(--art-accent);
}

.art-doc-toc-h3 > a.is-current::before {
    background: var(--art-accent);
}

.art-doc-toc-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--art-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.art-doc-toc-foot-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--art-text-muted);
}

.art-doc-toc-foot-item .be {
    color: var(--art-accent);
    font-size: 12px;
}

/* 目录在原生的 <details> 之外额外提供「移动端折叠条」 */
/* ==========================================================================
   7. 列表 / 相关推荐
   ========================================================================== */
.art-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.art-doc-list li {
    margin: 0;
}

/* 变体 A：两列纯文字（教程） */
.art-doc-list--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 26px;
}

.art-doc-list--two a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--art-text);
    transition: color .2s ease;
}

.art-doc-list--two a .be {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 11px;
    color: var(--art-line-strong);
    transition: color .2s ease, transform .2s ease;
}

.art-doc-list--two a:hover {
    color: var(--art-accent);
}

.art-doc-list--two a:hover .be {
    color: var(--art-accent);
    transform: translateX(3px);
}

/* 变体 B：序号 + 标题 + 右侧计数（问答） */
.art-doc-list--rank li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--art-radius-sm);
    transition: background .2s ease;
}

.art-doc-list--rank li + li {
    margin-top: 2px;
}

.art-doc-list--rank li:hover {
    background: var(--art-accent-soft);
}

.art-doc-list--rank .art-doc-rank {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: Georgia, serif;
    color: var(--art-accent);
    background: var(--art-accent-soft);
}

.art-doc-list--rank a {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    color: var(--art-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s ease;
}

.art-doc-list--rank li:hover a {
    color: var(--art-accent);
}

.art-doc-list--rank .art-doc-rank-meta {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--art-text-faint);
}

/* 变体 C：缩略图卡片（资讯 / 产品） */
.art-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.art-doc-card-item {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: var(--art-card);
    border: 1px solid var(--art-line);
    border-radius: 12px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.art-doc-card-item:hover {
    border-color: var(--art-accent-line);
    box-shadow: var(--art-shadow-hover);
    transform: translateY(-2px);
}

.art-doc-thumb {
    position: relative;
    flex-shrink: 0;
    width: 92px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--art-soft);
}

.art-doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.art-doc-card-item:hover .art-doc-thumb img {
    transform: scale(1.06);
}

.art-doc-thumb-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, var(--art-solid), var(--art-solid-2));
    border-top-right-radius: 6px;
}

.art-doc-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.art-doc-item-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--art-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}

.art-doc-card-item:hover .art-doc-item-title {
    color: var(--art-accent);
}

.art-doc-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--art-text-faint);
}

.art-doc-item-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.art-doc-item-tag {
    align-self: flex-start;
    font-size: 11px;
    line-height: 1.6;
    padding: 0 8px;
    border-radius: var(--art-radius-pill);
    color: var(--art-accent);
    background: var(--art-accent-soft);
}

/* ==========================================================================
   8. 标签 / 声明 / 翻页 / 分享
   ========================================================================== */
.art-doc-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--art-text-muted);
}

.art-doc-tags-label {
    color: var(--art-text-faint);
}

.art-doc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--art-accent-ink);
    background: var(--art-accent-soft);
    border-radius: var(--art-radius-pill);
    transition: background .2s ease, color .2s ease;
}

.art-doc-tag:hover {
    color: #fff;
    background: var(--art-solid);
}

.art-doc-tag .be {
    font-size: 11px;
}

.art-doc-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--art-text-muted);
    background: var(--art-soft);
    border: 1px dashed var(--art-line-strong);
    border-radius: var(--art-radius-sm);
}

.art-doc-notice .be {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--art-accent);
    font-size: 14px;
}

/*
 * 辅助栏：分类 / 最后更新 / 点赞·收藏·分享
 *
 * 结构来自 isdo_single_cat() + templates/social.php：
 *   .single-cat-tag            ← style.css 里是 display:flex + padding:20px 20px 0，不换行
 *     .single-cat / .single-replace(float:right) / .clear
 *     ul.social.social-v2 > li.social-item   ← 每项固定约 80px，flex:0 0 auto 不收缩
 *
 * 主题原本把它贴在全宽正文底部，空间够用；装进卡片后 360 / 414px 下三者挤在一行，
 * 分享列表被推到右边界外 5~7px（实测 right:365 / 419，视口只有 360 / 414）。
 * 这里改成可换行 + 胶囊按钮，窄屏整行铺开。
 */
.art-doc-foot {
    display: block;
}

.art-doc-foot .single-cat-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    width: 100%;
    padding: 0;
    border-top: none;
    background: none;
}

.art-doc-foot .single-cat-tag .single-cat {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.art-doc-foot .single-cat-tag .single-replace {
    float: none;
    margin: 0;
    color: var(--art-text-muted);
    font-size: 13px;
}

.art-doc-foot .single-cat-tag .clear {
    display: none;
}

.art-doc-foot .social,
.art-doc-foot .social-v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.art-doc-foot .social-item {
    display: block;
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    line-height: inherit;
}

/*
 * 注意：胶囊外观由 templates/social.php 里的 .social-v2-link 负责。
 * 这里如果再给 .social-item 上边框 + 圆角，就会变成「胶囊套胶囊」
 * （360px 截图里那圈淡粉色外框就是它）。
 */
.art-doc-foot .social-v2-link {
    min-height: 32px;
}

@media screen and (max-width: 768px) {
    .art-doc-foot .social,
    .art-doc-foot .social-v2 {
        width: 100%;
        margin-left: 0;
    }

    .art-doc-foot .social-item {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ==========================================================================
   9. 步骤条（教程）
   ========================================================================== */
.art-doc-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px var(--art-accent-line);
}

/* ==========================================================================
   10. 资讯：导读
   ========================================================================== */
.art-news-hero {
    text-align: center;
    padding: 32px var(--art-pad-x) 24px;
    border-bottom: 1px solid var(--art-line);
}

.art-news-hero .art-doc-title {
    font-size: 28px;
    line-height: 1.45;
}

.art-news-hero .art-doc-meta {
    justify-content: center;
}

.art-news-hero .art-doc-kicker {
    justify-content: center;
    margin-bottom: 14px;
}

.art-news-lead {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    margin-bottom: var(--art-gap);
    background: var(--art-soft);
    border-radius: var(--art-radius-sm);
    border-left: 3px solid var(--art-accent);
}

.art-news-lead-tag {
    flex-shrink: 0;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.9;
    color: #fff;
    background: var(--art-solid);
    border-radius: 4px;
}

.art-news-lead p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--art-text-muted);
}

/* ==========================================================================
   11. 问答：问题卡 + 回答流
   ========================================================================== */
.art-answer-question {
    background: var(--art-card);
    border-radius: var(--art-radius);
    box-shadow: var(--art-shadow);
    padding: var(--art-pad-y) var(--art-pad-x);
    margin-bottom: var(--art-gap);
}

.art-answer-question-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.art-answer-qicon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(135deg, var(--art-solid), var(--art-solid-2));
    box-shadow: 0 6px 16px var(--art-accent-line);
}

.art-answer-qtitle {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--art-text-strong);
}

.art-answer-qactions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.art-doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 22px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.art-doc-btn-primary {
    color: #fff;
    background: var(--art-solid);
    border-color: var(--art-solid);
}

.art-doc-btn-primary:hover {
    color: #fff;
    background: var(--art-solid-2);
    border-color: var(--art-solid-2);
}

.art-doc-btn-ghost {
    color: var(--art-accent);
    background: transparent;
    border-color: var(--art-accent-line);
}

.art-doc-btn-ghost:hover {
    background: var(--art-accent-soft);
    border-color: var(--art-accent);
}

/* 回答主体：窄屏把左侧竖排改为横向一行 */
.art-answer-item {
    display: flex;
    gap: 18px;
}

.art-answer-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 48px;
}

.art-answer-side-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--art-soft);
    border: 1px solid var(--art-line);
}

.art-answer-side-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.art-answer-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 100%;
    padding: 6px 0;
    border: none;
    border-radius: 9px;
    background: var(--art-accent-soft);
    color: var(--art-accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.art-answer-vote:hover {
    background: var(--art-accent-line);
}

.art-answer-vote.is-done {
    color: #fff;
    background: var(--art-solid);
}

.art-answer-vote .be {
    font-size: 15px;
}

.art-answer-vote-num {
    font-size: 12px;
    line-height: 1.2;
}

.art-answer-main {
    flex: 1 1 auto;
    min-width: 0;
}

.art-answer-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--art-text-muted);
}

.art-answer-author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--art-text-strong);
}

.art-answer-author-name a {
    color: inherit;
}

.art-answer-author-name a:hover {
    color: var(--art-accent);
}

.art-answer-badge {
    font-size: 11px;
    line-height: 1.7;
    padding: 0 8px;
    border-radius: var(--art-radius-pill);
    color: var(--art-accent);
    background: var(--art-accent-soft);
}

.art-answer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--art-line);
}

.art-answer-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--art-text-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color .2s ease;
}

.art-answer-act:hover,
.art-answer-act.is-done {
    color: var(--art-accent);
}

.art-answer-act .be {
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   11.9 问答：回答列表（评论区改造）
   --------------------------------------------------------------------------
   条目骨架复用作者回答卡的 .art-answer-item，所以这里只处理「列表容器」层
   的差异。必须清掉主题给 .comment-list li 的旧版样式：白底 + 20px 内边距 +
   段落 70px 左缩进，那是给 float 头像布局写的，套到 flex 结构上会全部错位。
   -------------------------------------------------------------------------- */

/* 顺序：回答列表在上，写回答表单在下 */
.art-answer .art-doc-comments #comments {
    display: flex;
    flex-direction: column;
}

.art-answer .art-doc-comments #comments > * {
    order: 3;
}

.art-answer .art-doc-comments #comments > .comment-list {
    order: 1;
}

.art-answer .art-doc-comments #comments > #respond {
    order: 2;
    margin-top: 26px;
    margin-bottom: 0;
    padding-top: 24px;
    border-top: 1px solid var(--art-line);
}

/* ---------- 单条回答 ---------- */
.art-answer .comment-list li.art-qa-row {
    position: static;
    background: none;
    padding: 24px 0;
    border: 0;
    border-top: 1px solid var(--art-line);
    border-radius: 0;
    box-shadow: none;
}

.art-answer .comment-list li.art-qa-row:first-of-type {
    border-top: 0;
    padding-top: 4px;
}

.art-answer .comment-list li.art-qa-row p {
    padding-left: 0;
}

.art-answer .comment-list .art-qa-time {
    color: var(--art-text-faint);
}

/* 楼层号推到右侧，和作者名分列两端 */
.art-answer .comment-list .art-qa-floor {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--art-accent);
    opacity: .7;
}

/* 正文：作者回答与访客回答共用同一套 .art-doc-body 排版，这里只补段落首尾间距 */
.art-answer .art-answer-body > *:first-child {
    margin-top: 0;
}

.art-answer .art-answer-body > *:last-child {
    margin-bottom: 0;
}

/* 操作行里的「回复回答」沿用主题的单条评论链接，改造成 .art-answer-act 的观感 */
.art-answer .comment-list .reply {
    /* 主题给 .reply 加了灰底 + 内边距，那是给旧版评论条用的，这里要干净的图标按钮 */
    background: none;
    padding: 0;
    margin-right: 0;
}

.art-answer .comment-list .comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    font-size: 13px;
    color: var(--art-text-muted);
    background: none;
    border: 0;
}

.art-answer .comment-list .comment-reply-link:hover {
    color: var(--art-accent);
}

.art-answer .comment-list .comment-reply-link .be {
    font-size: 14px;
}

/* ---------- 精选 ---------- */
.art-answer .comment-list li.art-qa-row.is-featured {
    margin: 8px 0;
    padding: 20px 18px;
    background: var(--art-accent-soft);
    border-top-color: transparent;
    border-radius: 10px;
    box-shadow: inset 3px 0 0 var(--art-accent);
}

.art-answer .comment-list li.art-qa-row.is-featured:first-of-type {
    padding-top: 20px;
}

.art-answer-badge--featured {
    color: #fff;
    background: var(--art-solid);
}

.art-answer-badge--featured .be {
    font-size: 10px;
    margin-right: 3px;
}

/* 切换精选时锁住按钮，避免连点发两次请求 */
.art-qa-feature.is-busy {
    opacity: .5;
    pointer-events: none;
}

/* ---------- 子回复 ---------- */
.art-answer .comment-list .children {
    margin: 6px 0 0;
    padding-left: 22px;
    border-left: 2px solid var(--art-line);
}

.art-answer .comment-list .children li.art-qa-row {
    padding: 18px 0;
}

/* 窄屏：只有头像，不必像作者回答卡那样竖排，保持头像左、内容右更省高度 */
@media screen and (max-width: 782px) {
    .art-answer .comment-list .art-answer-item {
        flex-direction: row;
        gap: 12px;
    }

    .art-answer .comment-list .art-answer-side {
        flex-direction: column;
        align-items: center;
        width: 38px;
        gap: 0;
    }

    .art-answer .comment-list .art-answer-side-avatar {
        width: 38px;
        height: 38px;
    }

    .art-answer .comment-list .art-answer-author {
        margin-bottom: 10px;
        gap: 6px;
    }

    .art-answer .comment-list .art-answer-actions {
        margin-top: 14px;
        padding-top: 12px;
        justify-content: flex-start;
    }

    .art-answer .comment-list .children {
        padding-left: 12px;
    }
}


/* ==========================================================================
   12. 产品：图廊 / 价格 / 规格 / Tabs
   ========================================================================== */
.art-prod-top {
    display: flex;
    gap: 30px;
    background: var(--art-card);
    border-radius: var(--art-radius);
    box-shadow: var(--art-shadow);
    padding: var(--art-pad-y) var(--art-pad-x);
    margin-bottom: var(--art-gap);
}

.art-prod-gallery {
    flex: 0 0 320px;
    max-width: 320px;
    min-width: 0;
}

.art-prod-gallery-main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--art-line);
    background: var(--art-soft);
    aspect-ratio: 4 / 3;
}

.art-prod-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.art-prod-gallery-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: var(--art-line-strong);
}

.art-prod-gallery-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--art-accent);
    background: var(--art-accent-soft);
    border-radius: 6px;
    text-align: center;
}

.art-prod-info {
    flex: 1 1 auto;
    min-width: 0;
}

.art-prod-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--art-accent);
}

.art-prod-kicker-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--art-line);
}

.art-prod-kicker-cat {
    font-weight: 400;
    color: var(--art-text-muted);
}

.art-prod-kicker-cat a {
    color: inherit;
}

.art-prod-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--art-text-strong);
    margin: 0 0 12px;
}

/* 评分：底层空心星 + 上层实心星按百分比裁切，支持小数 */
.art-prod-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--art-text-muted);
}

.art-prod-stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
}

.art-prod-stars-track {
    display: block;
    color: var(--art-line-strong);
}

.art-prod-stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ff9500;
}

.art-prod-rating-num {
    font-weight: 700;
    color: #ff9500;
}

.art-prod-price-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: var(--art-radius-sm);
    background: linear-gradient(135deg, var(--art-accent-soft), var(--art-soft));
}

.art-prod-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--art-accent);
}

.art-prod-price-symbol {
    font-size: 18px;
    font-weight: 700;
}

.art-prod-price-num {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.art-prod-price-note {
    font-size: 12px;
    color: var(--art-text-faint);
}

.art-prod-actions {
    display: flex;
    gap: 12px;
}

.art-prod-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--art-radius-sm);
    border: 1px solid transparent;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.art-prod-btn-primary {
    color: var(--art-accent);
    background: #fff;
    border-color: var(--art-accent);
}

.art-prod-btn-primary:hover {
    background: var(--art-accent-soft);
}

.art-prod-btn-warn {
    color: #fff;
    background: linear-gradient(135deg, var(--art-solid), var(--art-solid-2));
    box-shadow: 0 6px 16px var(--art-accent-line);
}

.art-prod-btn-warn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--art-accent-line);
}

/* 详情 Tabs */
.art-prod-tabs {
    display: flex;
    gap: 4px;
    margin: calc(var(--art-pad-y) * -1) calc(var(--art-pad-x) * -1) 22px;
    padding: 0 var(--art-pad-x);
    border-bottom: 1px solid var(--art-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.art-prod-tabs::-webkit-scrollbar {
    display: none;
}

.art-prod-tab {
    position: relative;
    flex-shrink: 0;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--art-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .2s ease;
    white-space: nowrap;
}

.art-prod-tab:hover {
    color: var(--art-accent);
}

.art-prod-tab::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--art-accent);
    transform: scaleX(0);
    transition: transform .25s ease;
}

.art-prod-tab.is-active {
    color: var(--art-accent);
}

.art-prod-tab.is-active::after {
    transform: scaleX(1);
}

.art-prod-tab-count {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--art-text-faint);
}

.art-prod-panel {
    display: none;
}

.art-prod-panel.is-active {
    display: block;
}

/* 规格表 */
.art-prod-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.art-prod-spec-table th,
.art-prod-spec-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--art-line);
}

.art-prod-spec-table th {
    width: 150px;
    color: var(--art-text-muted);
    font-weight: 400;
    background: var(--art-soft);
    white-space: nowrap;
}

.art-prod-spec-table td {
    color: var(--art-text);
}

.art-prod-spec-table tr:last-child th,
.art-prod-spec-table tr:last-child td {
    border-bottom: none;
}

/* 空状态（评价为空的兜底） */
.art-doc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 16px;
    text-align: center;
    color: var(--art-text-faint);
}

.art-doc-empty .be {
    font-size: 40px;
    color: var(--art-line-strong);
}

.art-doc-empty p {
    margin: 0;
    font-size: 14px;
}

/* 评论区外壳：与卡片同一视觉重量 */
.art-doc-comments {
    margin-top: var(--art-gap);
}

.art-doc-comments .comment-respond,
.art-doc-comments #respond {
    margin-top: 0;
}

/* 问答模板把评论区收进了卡片流（紧贴「回答」卡）。
   .art-doc-flow 本身有 gap，再叠一层上外边距会变成双倍间距，
   所以这里只清零，卡片底色 / 圆角 / 内边距仍由 .art-doc-comments 提供。 */
.art-doc-flow > .art-doc-comments {
    margin-top: 0;
}

/* 广告位 / 投稿框 / 版权框在卡片流里统一上下留白 */
.art-doc-flow > .ad-single,
.art-doc-flow > .tougao,
.art-doc-flow > .copyright,
.art-doc-flow > .isdo-today {
    margin: 0;
}

/* ==========================================================================
   13. 交互状态与可访问性
   ========================================================================== */
.art-doc button,
.art-doc-card-item,
.art-doc-tag,
.art-doc-btn,
.art-prod-tab,
.art-doc-toc-toggle,
.art-doc-toc-caret {
    -webkit-tap-highlight-color: transparent;
}

.art-doc a:focus-visible,
.art-doc button:focus-visible {
    outline: 2px solid var(--art-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .art-doc *,
    .art-doc *::before,
    .art-doc *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */

/* 大屏：内容区变宽时加一点内边距，避免行长过长 */
@media screen and (min-width: 1400px) {
    .art-doc {
        --art-pad-x: 36px;
        --art-pad-y: 30px;
    }

    .art-doc-split {
        --art-gutter: 28px;
    }

    .art-doc-toc-rail {
        flex-basis: 276px;
    }
}

/* 窄桌面 / 平板横屏：目录开始挤压正文，先缩内边距 */
@media screen and (max-width: 1100px) {
    .art-doc {
        --art-pad-x: 26px;
        --art-pad-y: 24px;
        --art-gutter: 20px;
    }

    .art-doc-toc-rail {
        flex-basis: 236px;
    }

    .art-prod-gallery {
        flex-basis: 280px;
        max-width: 280px;
    }
}

/* 平板竖屏：目录由侧栏变为顶部折叠面板；产品图文上下堆叠 */
@media screen and (max-width: 960px) {
    .art-doc-split {
        flex-direction: column;
        /* 单列时必须 stretch：flex-start 会让子项按内容宽度排，
           正文里的表格/代码块一宽就把整栏顶出屏幕。 */
        align-items: stretch;
        gap: var(--art-gap);
    }

    /* 单列时目录回到正文上方，占满整宽，取消浮动和吸顶 */
    .art-doc-split.has-toc-float > .art-doc-toc-rail,
    .art-doc-split > .art-doc-toc-rail {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        flex-basis: auto;
        width: 100%;
        align-self: auto;
    }

    .art-doc-toc {
        position: static;
        width: 100%;
        max-height: none;
        padding: 14px 14px 12px;
    }

    .art-doc-toc-list {
        max-height: 46vh;
        overflow: auto;
    }

    .art-prod-top {
        flex-direction: column;
        gap: 20px;
    }

    .art-prod-gallery {
        flex-basis: auto;
        max-width: 100%;
    }

    .art-prod-gallery-main {
        max-width: 460px;
        margin: 0 auto;
    }

    .art-prod-gallery-tip {
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 手机横屏 / 大屏手机 */
@media screen and (max-width: 768px) {
    .art-doc {
        --art-pad-x: 18px;
        --art-pad-y: 20px;
        --art-gap: 14px;
        --art-fs-body: 15.5px;
        --art-lh-body: 1.9;
        --art-fs-h2: 19px;
        --art-fs-h3: 17px;
        --art-radius: 12px;
    }

    .art-doc-title,
    .art-answer-qtitle {
        font-size: 21px;
    }

    .art-news-hero {
        padding: 24px var(--art-pad-x) 18px;
        text-align: left;
    }

    .art-news-hero .art-doc-title {
        font-size: 22px;
    }

    .art-news-hero .art-doc-kicker,
    .art-news-hero .art-doc-meta {
        justify-content: flex-start;
    }

    .art-doc-body h2 {
        margin-top: 28px;
    }

    .art-doc-body img {
        margin: 16px auto;
        border-radius: 8px;
    }

    .art-doc-body pre {
        padding: 13px 14px;
        font-size: 12.5px;
        border-radius: 8px;
    }

    .art-doc-list--two,
    .art-doc-grid {
        grid-template-columns: 1fr;
    }

    .art-doc-list--two {
        gap: 0;
    }

    .art-doc-sec-sub {
        display: none;
    }

    /* 问答：左侧竖排改为横向「头像 + 赞同」一行，正文拿回整行宽度 */
    .art-answer-item {
        flex-direction: column;
        gap: 12px;
    }

    .art-answer-side {
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .art-answer-side-avatar {
        width: 38px;
        height: 38px;
    }

    .art-answer-vote {
        flex-direction: row;
        width: auto;
        padding: 5px 14px;
        gap: 5px;
        border-radius: var(--art-radius-pill);
    }

    .art-answer-actions {
        gap: 16px;
        justify-content: space-between;
    }

    .art-answer-qactions {
        gap: 8px;
    }

    .art-doc-btn {
        padding: 8px 16px;
        font-size: 13.5px;
    }

    /* 产品 */
    .art-prod-title {
        font-size: 20px;
    }

    .art-prod-price-num {
        font-size: 29px;
    }

    .art-prod-actions {
        gap: 10px;
    }

    .art-prod-btn {
        font-size: 14px;
        min-height: 42px;
    }

    .art-prod-spec-table th {
        width: 104px;
        padding: 10px 12px;
    }

    .art-prod-spec-table td {
        padding: 10px 12px;
    }

    .art-prod-tabs {
        margin-bottom: 16px;
    }

    .art-prod-tab {
        padding: 12px 14px;
        font-size: 14px;
    }

    /* 相关推荐卡片缩略图同步缩小 */
    .art-doc-thumb {
        width: 78px;
        height: 58px;
    }

    /* 步骤条：竖排，箭头改为向下 */
    .art-doc-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .art-doc-step {
        width: 100%;
    }

    .art-doc-step-arrow {
        align-self: center;
        transform: rotate(90deg);
    }

    .art-doc-foot {
        gap: 10px;
    }
}

/* 小屏手机 */
@media screen and (max-width: 460px) {
    .art-doc {
        --art-pad-x: 14px;
        --art-pad-y: 18px;
        --art-fs-body: 15px;
    }

    /*
     * 产品页现在有 4 个标签（详情 / 规格 / 评价 / 提问）。
     * 原来靠 overflow-x 横滚，360px 下第 4 个要划一下才看得见，
     * 而且「有几条评价、几条提问」这种数字恰恰是最该一眼看到的。
     * 窄屏改成 2×2 网格，四个都在首屏。
     */
    .art-prod-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        overflow: visible;
    }

    .art-prod-tab {
        justify-content: center;
        padding: 11px 6px;
        font-size: 13.5px;
        border-bottom: 1px solid var(--art-line);
    }

    /* 网格版式里「下划线」会落在格子中间，改成底色高亮 */
    .art-prod-tab::after {
        display: none;
    }

    .art-prod-tab.is-active {
        color: var(--art-accent);
        background: var(--art-accent-soft);
        box-shadow: inset 0 -2px 0 var(--art-accent);
    }

    /* 最后一行不再画分隔线（容器本身已有一条） */
    .art-prod-tab:nth-last-child(-n+2) {
        border-bottom-color: transparent;
    }

    .art-doc-title {
        font-size: 19px;
    }

    .art-news-hero .art-doc-title {
        font-size: 20px;
    }

    .art-doc-meta {
        font-size: 12px;
        gap: 5px 10px;
    }

    /* 手机上标题区元信息只留「作者 · 日期 · 阅读」，浏览量等次要项收起 */
    .art-doc-meta-item--minor {
        display: none;
    }

    .art-doc-hero {
        margin-bottom: 12px;
    }

    .art-answer-qicon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .art-answer-qtitle {
        font-size: 18px;
    }

    .art-answer-qactions .art-doc-btn {
        flex: 1 1 0;
        padding: 9px 0;
    }

    .art-prod-btn {
        flex: 1 1 100%;
    }

    .art-prod-price-num {
        font-size: 26px;
    }

    .art-doc-item-title {
        font-size: 13.5px;
        -webkit-line-clamp: 2;
    }

    .art-doc-thumb {
        width: 68px;
        height: 52px;
    }

    .art-doc-notice {
        font-size: 12.5px;
        padding: 11px 13px;
    }

    /* 目录在手机上默认折叠为一条按钮，避免首屏全是目录 */
    .art-doc-toc.is-mobile-collapsed .art-doc-toc-list,
    .art-doc-toc.is-mobile-collapsed .art-doc-toc-foot {
        display: none;
    }

    .art-doc-toc-mobile {
        display: flex;
    }
}

/* ==========================================================================
   15. 夜间模式
   ========================================================================== */
.night .art-doc {
    --art-card: #25282d;
    --art-soft: #2a2d33;
    --art-line: rgba(255, 255, 255, .07);
    --art-line-strong: rgba(255, 255, 255, .13);
    --art-text: #b3bac2;
    --art-text-strong: #d8dde3;
    --art-text-muted: #828a92;
    --art-text-faint: #6a7280;
    --art-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    --art-shadow-hover: 0 10px 26px rgba(0, 0, 0, .42);
}

.night .art-doc.art-tut {
    --art-accent: #2f9c7c;
    --art-accent-2: #46b795;
    --art-accent-ink: #7fd3b8;
    --art-accent-soft: rgba(47, 156, 124, .16);
    --art-accent-line: rgba(47, 156, 124, .34);
    --art-solid: #16795e;
    --art-solid-2: #1e9375;
}

.night .art-doc.art-answer {
    --art-accent: #5b8fe0;
    --art-accent-2: #7aa9f0;
    --art-accent-ink: #9dc0f5;
    --art-accent-soft: rgba(91, 143, 224, .16);
    --art-accent-line: rgba(91, 143, 224, .34);
    --art-solid: #2b6fd0;
    --art-solid-2: #3d85e6;
}

.night .art-doc.art-news {
    --art-accent: #6b9bcb;
    --art-accent-2: #8ab4dd;
    --art-accent-ink: #a6c6e4;
    --art-accent-soft: rgba(107, 155, 203, .16);
    --art-accent-line: rgba(107, 155, 203, .34);
    --art-solid: #2b5f94;
    --art-solid-2: #3a76b3;
}

.night .art-doc.art-prod {
    --art-accent: #e05555;
    --art-accent-2: #f5794f;
    --art-accent-ink: #f39a9a;
    --art-accent-soft: rgba(224, 85, 85, .16);
    --art-accent-line: rgba(224, 85, 85, .34);
    --art-solid: #b32d2d;
    --art-solid-2: #cc4a32;
}

.night .art-prod-price {
    color: var(--art-accent);
}

.night .art-doc-body pre {
    background: #1a1e22;
    color: #cfe9df;
    border: 1px solid var(--art-line);
}

.night .art-doc-body code {
    background: rgba(255, 255, 255, .07);
    color: var(--art-accent-ink);
}

.night .art-doc-body th {
    background: var(--art-soft);
}

.night .art-doc-body blockquote {
    color: var(--art-accent-ink);
}

.night .art-doc-thumb,
.night .art-answer-side-avatar,
.night .art-prod-gallery-main,
.night .art-doc-meta-avatar {
    background: var(--art-soft);
}

.night .art-doc-card-item:hover {
    background: #2c2f35;
}

/* ==========================================================================
   16. Hero 变体：墨色头图（教程）
   ========================================================================== */
.art-doc-hero--ink {
    position: relative;
    overflow: hidden;
    border-radius: var(--art-radius);
    box-shadow: 0 6px 24px var(--art-accent-line);
    background: linear-gradient(135deg, var(--art-accent) 0%, var(--art-accent-2) 100%);
    margin-bottom: var(--art-gap);
}

.art-doc-hero--ink::before,
.art-doc-hero--ink::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.art-doc-hero--ink::before {
    width: 240px;
    height: 240px;
    right: -60px;
    top: -80px;
}

.art-doc-hero--ink::after {
    width: 160px;
    height: 160px;
    right: 90px;
    bottom: -80px;
    background: rgba(255, 255, 255, .06);
}

.art-doc-hero--ink .art-doc-hero-inner {
    position: relative;
    z-index: 1;
    padding: 28px var(--art-pad-x) 26px;
}

.art-doc-hero--ink .art-doc-kicker,
.art-doc-hero--ink .art-doc-title,
.art-doc-hero--ink .art-doc-meta {
    color: #fff;
}

.art-doc-hero--ink .art-doc-kicker-cat a,
.art-doc-hero--ink .art-doc-kicker-cat {
    color: rgba(255, 255, 255, .72);
}

.art-doc-hero--ink .art-doc-kicker-cat a:hover {
    color: #fff;
}

.art-doc-hero--ink .art-doc-meta {
    color: rgba(255, 255, 255, .85);
}

.art-doc-hero--ink .art-doc-meta-author a {
    color: #fff;
}

.art-doc-hero--ink .art-doc-meta-avatar {
    border: 2px solid rgba(255, 255, 255, .45);
}

/* 标题里的前缀/后缀胶囊在深色底上要收敛一点 */
.art-doc-hero--ink .ceo-tese-tuijian {
    box-shadow: none;
}

/* ==========================================================================
   17. 概览指标条（教程「本教程概览」）
   ========================================================================== */
.art-doc-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--art-line);
    border-radius: var(--art-radius);
    overflow: hidden;
    box-shadow: var(--art-shadow);
    margin-bottom: var(--art-gap);
}

.art-doc-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: var(--art-card);
    min-width: 0;
}

.art-doc-metric-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 14px;
    color: var(--art-accent);
    background: var(--art-accent-soft);
}

.art-doc-metric-body {
    min-width: 0;
}

.art-doc-metric-label {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: var(--art-text-faint);
}

.art-doc-metric-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--art-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (max-width: 960px) {
    .art-doc-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 460px) {
    .art-doc-metric {
        padding: 12px 14px;
        gap: 8px;
    }

    .art-doc-metric-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .art-doc-metric-value {
        font-size: 13px;
    }
}

/* 目录为空的兜底文案 */
/* 产品：评分数值旁的评价入口 */
.art-prod-rating-count {
    font-size: 12px;
    color: var(--art-text-muted);
    border-bottom: none;
}

.art-prod-rating-count:hover {
    color: var(--art-accent);
    border-bottom: none;
}

/* 产品：评价页顶部的综合分 */
.art-prod-review-summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--art-line);
}

.art-prod-review-score {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #ff9500;
}

.art-prod-review-label {
    font-size: 12px;
    color: var(--art-text-faint);
}

.art-prod-review-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--art-text-muted);
}

/* 新的汇总版式里，条数在大分那一列的下面，左对齐；上面那条 margin-left:auto
   是给旧的「一行平铺」版式留的，放在纵向列里会把自己推到右边去 */
.art-prod-review-score-box .art-prod-review-count {
    margin-left: 0;
}

/* 评论区嵌在标签面板里时，不要再叠一层外边距 */
.art-prod-panel .art-doc-comments {
    margin-top: 0;
}

/* 详情标签下方的面板不要额外留白 */
.art-prod-panel > .entry-content {
    margin: 0;
}

/* 资讯导读：位于居中版式里，但正文必须左对齐，否则每行末尾参差不齐 */
.art-news-hero .art-news-lead {
    margin: var(--art-gap) 0 0;
    text-align: left;
}

.art-news-hero .art-news-lead p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 手机版标题区改为左对齐后，导读与元信息保持同样对齐 */
@media screen and (max-width: 768px) {
    .art-news-hero .art-news-lead {
        margin-top: 14px;
    }
}

/* 「面议」这类非数字价格不该用 34px 的数字排版 */
.art-prod-price-num.is-text {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
}

/* 评论区：独立页脚卡片（产品页嵌在标签面板里时由上面的规则重置掉） */
.art-doc-comments {
    background: var(--art-card);
    border-radius: var(--art-radius);
    box-shadow: var(--art-shadow);
    padding: var(--art-pad-y) var(--art-pad-x);
    margin-top: var(--art-gap);
}

.art-prod-panel .art-doc-comments {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* 评论区标题与卡片间距 */
.art-doc-comments .comment-respond h3,
.art-doc-comments .comment-reply-title {
    margin-top: 0;
}

/* 缩略图为空时给个图标，避免一片灰块 */
.art-doc-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--art-line-strong);
    font-size: 22px;
}

@media screen and (max-width: 768px) {
    .art-doc-comments {
        margin-top: var(--art-gap);
    }
}

/* ==========================================================================
   28. 产品评价体系（评分星星 / 类型切换 / 评分分布 / 商品提问）
   --------------------------------------------------------------------------
   数据层见 includes/functions/function-product-review.php：
   isdo_review_rating / isdo_review_type 存在 comment meta 上，
   综合评分由真实评价聚合，不再是文章字段里手填的一个数。
   ========================================================================== */

/* ---- 头部星级：尺寸变体 ---- */
/* ---- 评论表单：评价 / 提问 + 打分 ---- */
.isdo-review-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--art-line);
    border-radius: var(--art-radius-sm);
    background: var(--art-soft);
}

.isdo-review-type {
    display: inline-flex;
    gap: 6px;
    padding: 3px;
    border-radius: var(--art-radius-pill);
    background: var(--art-card);
    border: 1px solid var(--art-line);
}

.isdo-review-type-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 5px 14px;
    border-radius: var(--art-radius-pill);
    font-size: 13px;
    color: var(--art-text-muted);
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.isdo-review-type-item input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.isdo-review-type-item .be {
    font-size: 12px;
}

.isdo-review-type-item.is-on {
    color: #fff;
    background: var(--art-solid);
}

.isdo-review-type-item input:focus-visible + .be,
.isdo-review-type-item input:focus-visible ~ .be {
    outline: 2px solid var(--art-accent);
    outline-offset: 2px;
}

/* ---- 星级打分 ---- */
.isdo-rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.isdo-rate-label {
    font-size: 13px;
    color: var(--art-text-muted);
}

.isdo-rate-stars {
    display: inline-flex;
    gap: 2px;
}

.isdo-rate-star {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
    color: var(--art-line-strong);
    font-size: 20px;
    line-height: 1;
    transition: color .18s ease, transform .18s ease;
}

.isdo-rate-star input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.isdo-rate-star:hover {
    transform: scale(1.12);
}

.isdo-rate-star.is-on {
    color: #ff9500;
}

.isdo-rate-star input:focus-visible + .be {
    outline: 2px solid var(--art-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.isdo-rate-hint {
    font-size: 12px;
    color: var(--art-text-faint);
}

/* ---- 评论里的星级徽标 ---- */
.isdo-review-badge {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    padding: 1px 8px 1px 6px;
    border-radius: var(--art-radius-pill);
    background: rgba(255, 149, 0, .12);
    vertical-align: middle;
}

.isdo-review-badge .art-prod-stars {
    color: #ff9500;
}

/* ---- 评价汇总：左边大分，右边分布条 ---- */
.art-prod-review-summary {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--art-line);
}

.art-prod-review-summary--plain {
    display: block;
}

.art-prod-review-score-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 150px;
}

.art-prod-review-dist {
    flex: 1 1 240px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.art-prod-review-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--art-text-muted);
}

.art-prod-review-row-label {
    flex: 0 0 34px;
    white-space: nowrap;
}

.art-prod-review-bar {
    position: relative;
    flex: 1 1 auto;
    height: 7px;
    border-radius: 4px;
    background: var(--art-line);
    overflow: hidden;
}

.art-prod-review-bar > i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #ff9500;
    transition: width .4s ease;
}

.art-prod-review-row-num {
    flex: 0 0 26px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- 商品提问 ---- */
.art-prod-questions {
    padding: 4px 0 0;
}

.art-prod-question-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.art-prod-question {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--art-line);
}

.art-prod-question:last-child {
    border-bottom: none;
}

.art-prod-question-avatar img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.art-prod-question-main {
    flex: 1 1 auto;
    min-width: 0;
}

.art-prod-question-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--art-text-faint);
}

.art-prod-question-meta b {
    color: var(--art-text-strong);
    font-size: 13px;
}

.art-prod-question-text {
    font-size: 14px;
    line-height: 1.75;
    color: var(--art-text);
    word-break: break-word;
}

.art-prod-ask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media screen and (max-width: 560px) {
    .isdo-review-fields {
        gap: 10px;
    }

    .isdo-review-type {
        width: 100%;
    }

    .isdo-review-type-item {
        flex: 1 1 0;
        justify-content: center;
    }

    .art-prod-review-summary {
        gap: 16px;
    }

    .art-prod-review-score-box {
        min-width: 0;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
    }

    .art-prod-review-dist {
        min-width: 100%;
    }
}

/* ---- 夜间 ---- */
.night .isdo-review-fields {
    background: var(--art-soft);
    border-color: var(--art-line);
}

.night .isdo-review-type {
    background: var(--art-card);
}

.night .isdo-rate-star {
    color: #4a4f57;
}

.night .isdo-rate-star.is-on {
    color: #ffb340;
}

.night .isdo-review-badge {
    background: rgba(255, 179, 64, .16);
}

.night .art-prod-review-score {
    color: #ffb340;
}

.night .art-prod-review-bar > i {
    background: #ffb340;
}