/* ============================================================================
   candywebV2 —— 设计系统
   ----------------------------------------------------------------------------
   全站配色只有一个出口：<html data-theme="X" data-mode="light|dark"> 上的
   CSS 变量。组件一律只写 var(--c-*)，绝不写死颜色，这样加一套风格 =
   只加一个变量块，不用碰任何组件代码。

   变量契约（每个主题块都必须给全，check.js 会校验）：
     --c-bg / --c-bg-2      页面底色（body 背景是这两色的渐变）
     --c-surface            卡片面      --c-surface-2  卡片内层、输入框
     --c-border             边框        --c-text       正文
     --c-dim                次要文字    --c-accent     主色
     --c-accent-2           副色        --c-accent-ink 主色底上的字色
     --c-shadow             阴影        --c-glow       光晕 rgba
     --c-pattern            背景图案（background-image 值，可为 none）
     --c-pattern-size       图案尺寸    --c-pattern-op 图案透明度
     --c-radius             圆角        --c-font       字体栈
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 基础
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    min-height: 100vh;
    /* 必须建自己的层叠上下文，否则下面 ::before / ::after 的负 z-index
       会被 body 自身的背景盖住（负 z-index 在无层叠上下文时跑到背景之后）。 */
    position: relative;
    z-index: 0;
    font-family: var(--c-font);
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-text);
    background-color: var(--c-bg);
    background-image: linear-gradient(160deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    transition: background-color .5s ease, color .5s ease;
}

/* 背景图案：单独一层，便于动画而不影响内容
   z-index 用 -1 且 body 本身不建层叠上下文，故必须给 body 一个背景，
   否则这一层会被 body 背景盖住。 */
body::before {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: -2;
    pointer-events: none;
    background-image: var(--c-pattern);
    background-size: var(--c-pattern-size);
    opacity: var(--c-pattern-op);
    animation: patternDrift 90s linear infinite;
}
@keyframes patternDrift {
    from { background-position: 0 0; }
    to   { background-position: 600px 600px; }
}

/* 主题光晕：随主色缓慢呼吸，给画面一点"活气" */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46vw 46vw at 12% 8%,  var(--c-glow), transparent 70%),
        radial-gradient(38vw 38vw at 88% 82%, var(--c-glow), transparent 70%);
    animation: glowBreathe 14s ease-in-out infinite alternate;
}
@keyframes glowBreathe {
    from { opacity: .45; transform: scale(1); }
    to   { opacity: .95; transform: scale(1.12); }
}

img { max-width: 100%; height: auto; display: block; border-style: none; }
a { color: var(--c-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent-2); }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .6em; font-weight: 700; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 2em 0; }

::selection { background: var(--c-accent); color: var(--c-accent-ink); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

/* 无障碍：仅屏幕阅读器可见 */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   2. 布局骨架
   --------------------------------------------------------------------------- */
.wrap { width: min(1240px, 100% - 2.5rem); margin-inline: auto; }

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; padding-block: 2.5rem 4rem; }

/* ---------------------------------------------------------------------------
   3. 顶栏
   --------------------------------------------------------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 60;
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    background: color-mix(in srgb, var(--c-bg) 78%, transparent);
    border-bottom: 1px solid var(--c-border);
}
.topbar__inner {
    display: flex; align-items: center; gap: 1.25rem;
    min-height: 62px;
}
.brand {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1.2rem; font-weight: 800; letter-spacing: .02em;
    color: var(--c-text); flex: 0 0 auto;
}
.brand:hover { color: var(--c-accent); }
.brand__dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    box-shadow: 0 0 12px var(--c-glow);
    animation: dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse { 50% { transform: scale(1.35); } }

.nav { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.nav a {
    padding: .45rem .8rem; border-radius: calc(var(--c-radius) * .7);
    color: var(--c-dim); font-size: .93rem; font-weight: 500;
    position: relative;
}
.nav a:hover { color: var(--c-text); background: var(--c-surface); }
.nav a.is-active { color: var(--c-accent); }
.nav a.is-active::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .18rem;
    height: 2px; border-radius: 2px; background: var(--c-accent);
}

/* 风格切换器 */
.switcher { position: relative; flex: 0 0 auto; }
.switcher__btn {
    display: flex; align-items: center; gap: .4rem;
    padding: .45rem .75rem; cursor: pointer;
    font: inherit; font-size: .9rem; color: var(--c-text);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 999px;
}
.switcher__btn:hover { border-color: var(--c-accent); }
.switcher__swatch {
    width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    box-shadow: 0 0 8px var(--c-glow);
}
.switcher__panel {
    position: absolute; right: 0; top: calc(100% + .6rem);
    width: 262px; padding: 1rem;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--c-radius); box-shadow: var(--c-shadow);
    display: none; z-index: 70;
}
.switcher.is-open .switcher__panel { display: block; animation: popIn .18s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } }

.switcher__label {
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-dim); margin: .1rem 0 .55rem;
}
.switcher__themes {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem;
    margin-bottom: 1rem;
}
.theme-chip {
    cursor: pointer; padding: .45rem .2rem .4rem; text-align: center;
    font: inherit; font-size: .74rem; color: var(--c-dim);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: calc(var(--c-radius) * .6);
    transition: transform .18s, border-color .18s, color .18s;
}
.theme-chip:hover { transform: translateY(-2px); color: var(--c-text); }
.theme-chip[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent); }
.theme-chip__dot {
    display: block; width: 100%; height: 20px; border-radius: 6px;
    margin-bottom: .3rem; background: var(--chip, linear-gradient(135deg, #888, #555));
}
.switcher__modes { display: flex; gap: .45rem; }
.switcher__modes button {
    flex: 1; cursor: pointer; padding: .45rem; font: inherit; font-size: .82rem;
    color: var(--c-dim); background: var(--c-surface-2);
    border: 1px solid var(--c-border); border-radius: calc(var(--c-radius) * .6);
}
.switcher__modes button[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    border: 1px solid var(--c-border); border-radius: calc(var(--c-radius) * 1.6);
    background: var(--c-surface);
    margin-bottom: 2.5rem;
    min-height: 320px;
    display: flex; align-items: flex-end;
    isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: -1; }
.hero__slide {
    position: absolute; inset: 0; opacity: 0;
    background-size: cover; background-position: center;
    transition: opacity 1.4s ease;
    transform: scale(1.06);
    animation: kenburns 18s ease-in-out infinite alternate;
}
.hero__slide.is-on { opacity: 1; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* 没有图片时的主题渐变底：永远好看，不依赖外链 */
.hero__fallback {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60% 90% at 18% 12%, var(--c-glow), transparent 65%),
        linear-gradient(135deg, var(--c-bg-2), var(--c-surface) 55%, var(--c-bg-2));
}
/* 保证文字在任何壁纸上都可读 */
.hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg,
        color-mix(in srgb, var(--c-bg) 92%, transparent) 0%,
        color-mix(in srgb, var(--c-bg) 55%, transparent) 45%,
        transparent 100%);
}
.hero__body { padding: 2.25rem 2.5rem; width: 100%; }
.hero__eyebrow {
    display: inline-block; font-size: .76rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--c-accent);
    padding: .22rem .7rem; margin-bottom: .8rem;
    border: 1px solid var(--c-accent); border-radius: 999px;
    background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}
.hero__title {
    font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 900;
    letter-spacing: .01em; margin-bottom: .35rem;
    background: linear-gradient(120deg, var(--c-text) 20%, var(--c-accent) 55%, var(--c-accent-2) 90%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero__tagline { color: var(--c-dim); font-size: 1rem; margin-bottom: 1.1rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .85rem; color: var(--c-dim); }
.hero__stats b { color: var(--c-accent); font-size: 1.05rem; }

.hero__dots { position: absolute; right: 1.4rem; bottom: 1.4rem; display: flex; gap: .4rem; z-index: 2; }
.hero__dots button {
    width: 9px; height: 9px; padding: 0; cursor: pointer; border: 0;
    border-radius: 50%; background: var(--c-border);
}
.hero__dots button[aria-current="true"] { background: var(--c-accent); width: 22px; border-radius: 5px; }

/* ---------------------------------------------------------------------------
   5. 通用板块头
   --------------------------------------------------------------------------- */
.sec-head {
    display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
    margin: 0 0 1.3rem;
}
.sec-head h2 {
    margin: 0; font-size: 1.4rem; position: relative; padding-left: .9rem;
}
.sec-head h2::before {
    content: ""; position: absolute; left: 0; top: .22em; bottom: .22em;
    width: 4px; border-radius: 3px;
    background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2));
}
.sec-head .sec-head__more { margin-inline-start: auto; font-size: .88rem; }

/* ---------------------------------------------------------------------------
   6. 文章卡片
   --------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.35rem; }

.card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--c-radius); box-shadow: var(--c-shadow);
    transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s;
}
.card:hover {
    transform: translateY(-6px);
    border-color: var(--c-accent);
    box-shadow: 0 14px 40px -12px var(--c-glow), var(--c-shadow);
}
.card__cover {
    aspect-ratio: 16 / 9; overflow: hidden; position: relative;
    background: linear-gradient(135deg, var(--c-bg-2), var(--c-surface-2));
}
.card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__cover img { transform: scale(1.07); }
.card__cover--none::after {
    content: ""; position: absolute; inset: 0;
    background-image: var(--c-pattern); background-size: var(--c-pattern-size);
    opacity: .6;
}
.card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__meta { display: flex; gap: .7rem; font-size: .76rem; color: var(--c-dim); margin-bottom: .5rem; }
.card__meta span { display: inline-flex; align-items: center; gap: .25rem; }
.card__title { font-size: 1.1rem; margin-bottom: .45rem; }
.card__title a { color: var(--c-text); }
.card__title a:hover { color: var(--c-accent); }
.card__desc {
    color: var(--c-dim); font-size: .9rem; margin: 0 0 1rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
    font-size: .72rem; padding: .16rem .6rem; border-radius: 999px;
    color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
}

/* ---------------------------------------------------------------------------
   7. 文章正文
   --------------------------------------------------------------------------- */
.article { max-width: 780px; margin-inline: auto; }
.article__head { margin-bottom: 2rem; text-align: center; }
.article__title { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: .6rem; }
.article__meta { color: var(--c-dim); font-size: .85rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.prose { font-size: 1rem; }
.prose h2 { margin-top: 2.2em; padding-bottom: .3em; border-bottom: 1px solid var(--c-border); }
.prose h3 { margin-top: 1.8em; }
.prose img { border-radius: var(--c-radius); margin: 1.5em auto; box-shadow: var(--c-shadow); }
.prose blockquote {
    margin: 1.5em 0; padding: .9em 1.2em; color: var(--c-dim);
    border-left: 3px solid var(--c-accent);
    background: var(--c-surface); border-radius: 0 var(--c-radius) var(--c-radius) 0;
}
.prose code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .88em; padding: .12em .42em; border-radius: 5px;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
}
.prose pre {
    padding: 1.1rem 1.25rem; overflow-x: auto; border-radius: var(--c-radius);
    background: var(--c-surface-2) !important; border: 1px solid var(--c-border);
    line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: .86rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .92rem; }
.prose th, .prose td { padding: .6em .8em; border: 1px solid var(--c-border); text-align: left; }
.prose th { background: var(--c-surface-2); }
.prose ul, .prose ol { padding-left: 1.4em; }

/* 文章上下篇 */
.article__nav {
    display: flex; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem;
    border-top: 1px solid var(--c-border);
}
.article__nav a {
    flex: 1; padding: .85rem 1rem; font-size: .9rem;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--c-radius); color: var(--c-text);
}
.article__nav a:hover { border-color: var(--c-accent); }
.article__nav a span { display: block; font-size: .74rem; color: var(--c-dim); margin-bottom: .2rem; }
.article__nav a:last-child { text-align: right; }

/* ---------------------------------------------------------------------------
   8. 书签墙
   --------------------------------------------------------------------------- */
.bm-tools {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    margin-bottom: 1.5rem;
}
.bm-search {
    flex: 1 1 260px; min-width: 0;
    padding: .65rem 1rem; font: inherit; font-size: .92rem; color: var(--c-text);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 999px; outline: none;
}
.bm-search:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-glow); }
.bm-count { font-size: .84rem; color: var(--c-dim); }

.bm-cat { margin-bottom: 2.4rem; scroll-margin-top: 84px; }
.bm-cat__head {
    display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
}
.bm-cat__head h3 { margin: 0; font-size: 1.15rem; }
.bm-cat__head .bm-cat__n {
    font-size: .74rem; color: var(--c-dim); padding: .1rem .5rem;
    border: 1px solid var(--c-border); border-radius: 999px;
}
.bm-cat__head .bm-cat__ico { color: var(--c-accent); }

.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: .8rem; }
.bm {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .85rem; overflow: hidden;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--c-radius); color: var(--c-text);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.bm:hover {
    transform: translateY(-3px); border-color: var(--c-accent);
    box-shadow: 0 10px 26px -14px var(--c-glow);
}
.bm__logo {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
}
.bm__logo img { width: 22px; height: 22px; object-fit: contain; }
.bm__text { min-width: 0; }
.bm__name {
    font-size: .9rem; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.bm__desc {
    font-size: .76rem; color: var(--c-dim); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.bm[hidden] { display: none; }
.bm-cat[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   9. 相册 / 壁纸墙
   --------------------------------------------------------------------------- */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.gal {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: var(--c-radius); border: 1px solid var(--c-border);
    background: var(--c-surface); cursor: zoom-in;
}
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gal:hover img { transform: scale(1.06); }
.gal--none {
    background:
        radial-gradient(70% 70% at 30% 20%, var(--c-glow), transparent 60%),
        linear-gradient(135deg, var(--c-bg-2), var(--c-surface-2));
}
.gal--none::after {
    content: ""; position: absolute; inset: 0;
    background-image: var(--c-pattern); background-size: var(--c-pattern-size);
    opacity: .8;
}
.gal__cap {
    position: absolute; inset: auto 0 0 0; padding: 1.4rem .9rem .7rem;
    font-size: .84rem; color: #fff;
    background: linear-gradient(0deg, rgba(0,0,0,.78), transparent);
}
.gal[hidden] { display: none; }

/* 灯箱 */
.lightbox {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center; padding: 4vmin;
    background: color-mix(in srgb, var(--c-bg) 88%, #000);
    backdrop-filter: blur(10px);
}
.lightbox.is-open { display: flex; animation: popIn .2s; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--c-radius); box-shadow: var(--c-shadow); }
.lightbox__close {
    position: absolute; top: 1.2rem; right: 1.4rem; cursor: pointer;
    width: 40px; height: 40px; font-size: 1.3rem; line-height: 1;
    color: var(--c-text); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   10. 页脚
   --------------------------------------------------------------------------- */
.site-foot {
    margin-top: auto; padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--c-border);
    color: var(--c-dim); font-size: .85rem;
}
.site-foot__inner { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; }
.site-foot__inner .sp { margin-inline-start: auto; }

/* ---------------------------------------------------------------------------
   11. 滚动渐显 / 悬浮粒子画布 / 光标光晕
   --------------------------------------------------------------------------- */
/* 渐进增强：只有 JS 真的跑起来（html 上加了 .js）才会先把内容藏起来做渐显。
   没 JS / JS 被拦 / IntersectionObserver 不触发时，内容默认就是可见的 —— 永不白屏。

   注意用 translate 而不是 transform：卡片自己的 :hover 用的是 transform，
   如果这里也用 transform，.reveal.is-in 的优先级会压掉 .card:hover，悬浮上抬就失效。
   两者是不同的 CSS 属性，各管各的，互不打架。 */
html.js .reveal {
    opacity: 0; translate: 0 22px;
    transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.3,1),
                transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s;
}
html.js .reveal.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 1; translate: none; }
    body::before, body::after, .hero__slide { animation: none !important; }
}

#fx-particles {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
/* 内容层要盖在粒子之上 */
.site { position: relative; z-index: 2; }

#fx-cursor {
    position: fixed; z-index: 3; pointer-events: none;
    width: 340px; height: 340px; margin: -170px 0 0 -170px;
    border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, var(--c-glow), transparent 68%);
    transition: opacity .4s;
    will-change: transform;
}
@media (hover: none), (prefers-reduced-motion: reduce) { #fx-cursor { display: none; } }

/* ---------------------------------------------------------------------------
   12. 空态 / 分页
   --------------------------------------------------------------------------- */
.empty {
    text-align: center; padding: 4rem 1rem; color: var(--c-dim);
    border: 1px dashed var(--c-border); border-radius: var(--c-radius);
}
.pager { display: flex; gap: .5rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span {
    padding: .45rem .85rem; font-size: .88rem;
    border: 1px solid var(--c-border); border-radius: calc(var(--c-radius) * .7);
    color: var(--c-text); background: var(--c-surface);
}
.pager a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pager .is-current { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   13. 响应式
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .wrap { width: min(1240px, 100% - 1.6rem); }
    .nav { gap: 0; }
    .nav a { padding: .4rem .5rem; font-size: .86rem; }
    .nav a.is-active::after { left: .5rem; right: .5rem; }
    .hero__body { padding: 1.5rem 1.35rem; }
    .hero { min-height: 260px; }
    .cards { grid-template-columns: 1fr; }
    .switcher__panel { width: min(262px, calc(100vw - 2rem)); }
    .article__nav { flex-direction: column; }
    .article__nav a:last-child { text-align: left; }
}
@media (max-width: 560px) {
    .brand span.brand__name { display: none; }
    .bm-grid { grid-template-columns: 1fr 1fr; }
    .bm__desc { display: none; }
}