/* ============================================================
   MAGAZINE · 杂志极简设计系统
   墨黑 #1a1a1a · 暖纸白 #faf8f4 · 点睛红 #fb5353(点睛限定 8 处)
   所有规则 scoped 到 html.mag —— AI页(admin/error/chat) html 无 mag 类即不命中,零影响
   纯手写 CSS + CSS 变量,零构建工具,适配 Thymeleaf 热更 cp 流程
   ============================================================ */

/* ============================================================
   1. Design Tokens
   ============================================================ */
html.mag {
    --c-ink: #1a1a1a;              /* 墨黑:主标题/正文主色 */
    --c-ink-soft: #3a3a3a;         /* 长文次级正文 */
    --c-text-mute: #8a8a8a;        /* 日期/标签/辅助 */
    --c-paper: #faf8f4;            /* 暖纸白:页面底 */
    --c-paper-2: #ffffff;          /* 卡片表面 */
    --c-line: #ececec;             /* 分隔线/描边 */
    --c-line-soft: #f3f1ec;        /* 更浅分隔 */
    --c-accent: #fb5353;           /* 点睛红:唯一强调色 */
    --c-accent-2: #e04545;         /* 红 hover/active 深一档 */
    --c-accent-soft: rgba(251, 83, 83, 0.09);
    --c-code-bg: #f6f6f4;          /* 代码块底 */
    --c-code-text: #2a2a2a;
    --c-quote-bg: #f7f5f2;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC",
                 "Microsoft YaHei", "微软雅黑", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --fs-h1: clamp(40px, 5.2vw, 64px);
    --fs-h2: clamp(26px, 3vw, 34px);
    --fs-h3: 20px;
    --fs-h4: 16px;
    --fs-body: 16px;
    --fs-small: 13px;
    --fs-tiny: 12px;
    --lh-tight: 1.2;
    --lh-head: 1.35;
    --lh-body: 1.8;

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
    --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;

    --rd-card: 14px;
    --rd-pill: 999px;
    --rd-btn: 8px;

    --sh-card: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px -20px rgba(0,0,0,.22);
    --sh-card-hover: 0 2px 6px rgba(0,0,0,.06), 0 26px 50px -24px rgba(0,0,0,.30);

    --tr-fast: .2s ease;
    --tr-base: .3s cubic-bezier(.2,.7,.2,1);
    --tr-img: .7s cubic-bezier(.2,.7,.2,1);

    --z-header: 1000;
    --z-progress: 9999;
    --z-music: 9998;

    --mw-container: 1200px;
    --mw-prose: 720px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   2. Reset / Base
   ============================================================ */
html.mag body {
    background-color: var(--c-paper) !important;
    color: var(--c-ink);
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0;
}
html.mag ::selection { background: var(--c-accent); color: #fff; }
html.mag ::-moz-selection { background: var(--c-accent); color: #fff; }

html.mag a {
    color: var(--c-ink);
    transition: color var(--tr-fast);
    text-decoration: none;
}
html.mag a:hover { color: var(--c-accent); }

html.mag img { max-width: 100%; height: auto; }
html.mag .container { max-width: var(--mw-container); }

html.mag main[role="main-home-wrapper"],
html.mag main[role="main-inner-wrapper"] {
    padding-top: var(--sp-6) !important;
    padding-bottom: var(--sp-7) !important;
}

/* 网格卡片可见性安全网(取代 brand-fix.css 同名规则):
   原 Codrops .grid-lod li{opacity:0} 依赖 AnimOnScroll;移除该 JS 后必须强制可见。 */
html.mag .grid-lod li { opacity: 1 !important; }

/* ============================================================
   3. Header 顶栏(杂志风吸顶,干净克制)
   ============================================================ */
html.mag header[role="header"] {
    position: sticky !important;
    top: 0;
    z-index: var(--z-header) !important;
    background: rgba(250, 248, 244, 0.88) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-line) !important;
    box-shadow: none !important;
}
html.mag header[role="header"] .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 68px;
    padding-top: var(--sp-2) !important;
    padding-bottom: var(--sp-2) !important;
}
html.mag header[role="header"] h1 {
    margin: 0 !important;
    flex: 0 0 auto;
    line-height: 0;
}
html.mag header[role="header"] h1 a {
    display: inline-block;
    line-height: 0;
    -webkit-tap-highlight-color: transparent !important;     /* 手机端点击不冒灰块 */
}
/* 鼠标点击不出现方框(花瓣保持干净);仅键盘 Tab 才出现优雅红色焦点圈——a11y 与视觉两全 */
html.mag header[role="header"] h1 a:focus { outline: none !important; }
html.mag header[role="header"] h1 a:focus-visible {
    outline: 2px solid var(--c-accent) !important;
    outline-offset: 3px;
    border-radius: 50%;
}
html.mag header[role="header"] h1 img {
    /* logo 就是 sakura.png 一朵花瓣:去圆裁、去红描边、去白衬底,保持花瓣原貌 */
    width: 44px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: transform var(--tr-base) !important;
}
html.mag header[role="header"] h1:hover img { transform: rotate(-5deg) scale(1.05); }

/* 导航:胶囊式 */
html.mag nav[role="header-nav"] ul {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-1);
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
html.mag nav[role="header-nav"] ul > li { margin: 0 !important; }
html.mag nav[role="header-nav"] ul > li > a {
    display: inline-block;
    color: var(--c-ink-soft) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    padding: 8px 18px !important;
    margin: 0 !important;
    border-radius: var(--rd-pill);
    background: transparent;
    transition: color var(--tr-fast), background-color var(--tr-fast) !important;
}
html.mag nav[role="header-nav"] ul > li > a:hover {
    color: var(--c-accent) !important;
    background-color: var(--c-accent-soft) !important;
}
html.mag nav[role="header-nav"] ul > li.nav-active > a {
    color: #fff !important;
    background: var(--c-accent) !important;
}

/* 汉堡菜单按钮(nav.js 注入的老 Codrops 残留 #menu-button "Navigation"):
   magazine 已把导航重设计成「换行胶囊」——桌面 flex 行 / 移动 flex-wrap,
   导航链接在所有视口都直接可见、无需折叠。故该按钮纯冗余,全视口隐藏。
   nav.js 的 click 仅用于折叠 ul,ul 既永不折叠 → 隐藏按钮零副作用、无 JS error。*/
html.mag #menu-button { display: none !important; }

/* ============================================================
   4. Footer 页脚
   ============================================================ */
html.mag footer[role="footer"] {
    border-top: 1px solid var(--c-line);
    padding: var(--sp-6) var(--sp-3) var(--sp-5);
    text-align: center;
}
html.mag footer[role="footer"] nav[role="footer-nav"] ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-4);
    padding: 0;
}
html.mag footer[role="footer"] nav[role="footer-nav"] a {
    color: var(--c-ink-soft);
    font-size: var(--fs-small);
}
html.mag footer[role="footer"] ul[role="social-icons"] {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    padding: 0;
}
html.mag footer[role="footer"] ul[role="social-icons"] > li > a {
    display: inline-flex;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--c-paper-2);
    border: 1px solid var(--c-line);
    transition: transform var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
html.mag footer[role="footer"] ul[role="social-icons"] > li:hover > a {
    transform: translateY(-2px);
    color: var(--c-accent);
    border-color: var(--c-accent);
}
html.mag footer[role="footer"] .copy-right {
    color: var(--c-text-mute);
    font-size: var(--fs-small);
    margin: var(--sp-1) 0;
}
html.mag footer[role="footer"] a.copy-right:hover { color: var(--c-accent); }

/* ============================================================
   5. 卡片网格 .mag-grid / .mag-card(CSS Grid 取代 masonry)
   ============================================================ */
html.mag .mag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* li 作为 grid 单元(语义化列表),清掉浏览器/老主题残留 margin */
html.mag .mag-grid > li { margin: 0 !important; padding: 0; }
/* 首卡跨整行:span 必须落在 grid item(li)上,而非卡片本身 */
html.mag .mag-grid > li.mag-feature { grid-column: 1 / -1; }
html.mag .mag-grid--3 { grid-template-columns: repeat(3, 1fr); }
html.mag .mag-grid--gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
/* 画廊项(works-details 图片网格):1:1 cover + hover 缩放 */
html.mag .mag-grid--gallery > li { overflow: hidden; border-radius: var(--rd-card); background: var(--c-line-soft); margin: 0; }
html.mag .mag-grid--gallery img {
    display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    transition: transform var(--tr-img);
}
html.mag .mag-grid--gallery > li:hover img { transform: scale(1.06); }

html.mag .mag-card {
    display: block;
    background: var(--c-paper-2);
    border-radius: var(--rd-card);
    overflow: hidden;
    box-shadow: var(--sh-card);
    transition: transform var(--tr-base), box-shadow var(--tr-base);
    opacity: 1;
}
html.mag a.mag-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-card-hover);
    color: var(--c-ink);
}
html.mag .mag-card__media {
    position: relative;
    overflow: hidden;
    background: var(--c-line-soft);
}
html.mag .mag-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--tr-img);
}
html.mag a.mag-card:hover .mag-card__media img { transform: scale(1.05); }
html.mag .mag-card__body { padding: var(--sp-4); }
html.mag .mag-card__body h3 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-head);
    color: var(--c-ink);
}
html.mag .mag-card__body time,
html.mag .mag-card__body .mag-meta {
    display: inline-block;
    font-size: var(--fs-small);
    color: var(--c-text-mute);
    letter-spacing: .02em;
}
html.mag .mag-card__body time span { display: inline; }

/* —— 卡片作品集化:CSS counter 编号 + 类型标签 + hover 查看(纯 CSS,不改模板) —— */
html.mag .mag-grid { counter-reset: magcard; }
html.mag .mag-grid > li:not(.mag-feature) { counter-increment: magcard; }
/* 编号胶囊:普通卡叠图左上(跳过首卡 feature 的码区) */
html.mag .mag-grid > li:not(.mag-feature) .mag-card__media::before {
    content: counter(magcard, decimal-leading-zero);
    position: absolute;
    top: 12px; left: 12px;
    z-index: 3;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #fff;
    background: rgba(26, 26, 26, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 4px 9px;
    border-radius: var(--rd-pill);
    transition: background var(--tr-base);
}
/* hover:右下"查看作品 →"滑入(普通卡) */
html.mag .mag-grid > li:not(.mag-feature) .mag-card__media::after {
    content: "查看作品 →";
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 3;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--tr-base), transform var(--tr-base);
}
html.mag a.mag-card:hover .mag-card__media::after { opacity: 1; transform: translateY(0); }
html.mag a.mag-card:hover .mag-card__media::before { background: rgba(251, 83, 83, .85); }
/* 类型标签"作品":普通卡标题上方(首卡用 eyebrow,故排除 feature) */
html.mag .mag-card:not(.mag-card--feature) .mag-card__body h3::before {
    content: "作品";
    display: block;
    font-size: var(--fs-tiny);
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--c-accent);
    margin-bottom: var(--sp-2);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--c-line);
}
/* 图片 hover 微暗角(普通卡),与原有 scale 共存 */
html.mag a.mag-card .mag-card__media img { transition: transform var(--tr-img), filter var(--tr-base); }
html.mag .mag-grid > li:not(.mag-feature) a.mag-card:hover .mag-card__media img { filter: brightness(.94); }

/* —— 栏目差异化:刊头/类型/hover 文案按页面类区分(避免「作品」标签与「作品集」刊头污染博客/归档等页) —— */
/* 博客列表:刊头 + 类型「博客」+ hover「阅读全文→」 */
html.mag.mag-blog .mag-intro::before { content: "博客 · BLOG"; }
html.mag.mag-blog .mag-card .mag-card__body h3::before { content: "博客"; }
html.mag.mag-blog .mag-grid > li .mag-card__media::after { content: "阅读全文 →"; }
/* 归档 / 关于 / 联系 刊头 */
html.mag.mag-archives .mag-intro::before { content: "归档 · ARCHIVES"; }
html.mag.mag-about    .mag-intro::before { content: "关于 · ABOUT"; }
html.mag.mag-about .mag-card .mag-card__body h3::before { content: "友链"; }
html.mag.mag-about .mag-grid > li .mag-card__media::after { content: "前往访问 →"; }
html.mag.mag-contact  .mag-intro::before { content: "联系 · CONTACT"; }

/* —— 长文正文配图:圆角 + 克制阴影,提升详情页质感(blog-details / works-details 正文) —— */
html.mag .mag-prose img {
    border-radius: var(--rd-card);
    box-shadow: var(--sh-card);
    margin: var(--sp-4) auto;
    display: block;
    max-width: 100%;
    height: auto;
}

/* 首卡 / 特色卡:跨整行(由 li.mag-feature 负责)。
   重做为"杂志封面锚点":文字区在左做主角(大标题+精选标签+引导),
   小程序码降级为右侧带框二维码区——不再"一张码当封面"。 */
html.mag .mag-card--feature {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;
    height: 100%;
}
/* feature 字区:垂直居中,杂志封面般的呼吸(DOM 在 media 后,用 order 翻到左侧) */
html.mag .mag-card--feature .mag-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-6);
    order: 1;
}
/* 精选置顶标签(红短线胶囊) */
html.mag .mag-card__eyebrow {
    display: inline-block;
    width: fit-content;
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-tiny);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--c-accent);
    text-transform: uppercase;
    padding-bottom: var(--sp-1);
    border-bottom: 2px solid var(--c-accent);
}
html.mag .mag-card--feature .mag-card__body h3 {
    margin: 0;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: var(--lh-tight);
    color: var(--c-ink);
}
/* 引导文案 */
html.mag .mag-card__lead {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--c-ink-soft);
}
/* feature 图片=小程序码:完整不裁(contain),收进带描边的二维码区卡片,居中限宽留扫描安静区 */
html.mag .mag-card--feature .mag-card__media {
    background: var(--c-paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    box-sizing: border-box;
    order: 2;
}
html.mag .mag-card--feature .mag-card__media img {
    object-fit: contain;
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--rd-card);
    box-shadow: 0 4px 24px -10px rgba(0,0,0,.18);
}

/* 首页介绍区:站名 + 短线 + 副标题 + 正文 */
html.mag .mag-intro { grid-column: 1 / -1; padding: var(--sp-3) var(--sp-2) var(--sp-4); }
/* 介绍区刊头:期号小字,建立杂志封面层次(期号 → 大站名 → 副标题 → 简介) */
html.mag .mag-intro::before {
    content: "作品集 · WORKS";
    display: block;
    font-size: var(--fs-tiny);
    font-weight: 700;
    letter-spacing: .32em;
    color: var(--c-text-mute);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}
/* 平滑滚动(尊重减少动画偏好) */
@media (prefers-reduced-motion: no-preference) {
    html.mag { scroll-behavior: smooth; }
}
html.mag .mag-intro h2 { margin: 0 0 var(--sp-3); }
html.mag .mag-intro h2 > span {
    position: relative;
    display: block;
    font-size: var(--fs-h1);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: var(--lh-tight);
    color: var(--c-ink);
    padding-top: var(--sp-3);
    text-wrap: balance;
}
html.mag .mag-intro h2 > span::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 4px;
    border-radius: var(--rd-pill);
    background: var(--c-accent);
}
html.mag .mag-intro h2 > p {
    margin: var(--sp-2) 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-accent);
    letter-spacing: .04em;
}
html.mag .mag-intro > p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-ink-soft);
    max-width: 640px;
}

/* ============================================================
   6. 长文阅读区 .mag-prose(blog-details / works-details)
   ============================================================ */
html.mag .mag-prose {
    max-width: var(--mw-prose);
    margin-left: auto;
    margin-right: auto;
    color: var(--c-ink-soft);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
html.mag .mag-prose h2,
html.mag .mag-prose h3,
html.mag .mag-prose h4 {
    position: relative;
    color: var(--c-ink);
    font-weight: 700;
    line-height: var(--lh-head);
    margin-top: 1.8em;
    margin-bottom: .6em;
    scroll-margin-top: 90px;
}
html.mag .mag-prose h2 { font-size: var(--fs-h2); padding-top: .2em; }
html.mag .mag-prose h2::before {
    content: "";
    display: block;
    width: 36px; height: 3px;
    border-radius: var(--rd-pill);
    background: var(--c-accent);
    margin-bottom: .5em;
}
html.mag .mag-prose h3 { font-size: var(--fs-h3); }
html.mag .mag-prose p { margin: 0 0 1.2em; }
/* 正文链接:默认靠红色区分(hover 前无下划线,版面干净),hover 时下划线从左滑出 0→100%,同时加深 */
html.mag .mag-prose a {
    color: var(--c-accent);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition: background-size .3s var(--tr-base), color .2s var(--tr-fast);
}
html.mag .mag-prose a:hover {
    color: var(--c-accent-2);
    background-size: 100% 1.5px;
}
html.mag .mag-prose blockquote {
    margin: 1.6em 0;
    padding: .6em 1.2em;
    border-left: 3px solid var(--c-accent);
    background: var(--c-quote-bg);
    color: var(--c-ink-soft);
    border-radius: 0 var(--rd-btn) var(--rd-btn) 0;
}
html.mag .mag-prose img { border-radius: var(--rd-card); margin: 1.4em auto; display: block; background: var(--c-line-soft); }
html.mag .mag-prose pre {
    background: var(--c-code-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--rd-btn);
    padding: 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
}
html.mag .mag-prose code { font-family: var(--font-mono); }
html.mag .mag-prose :not(pre) > code {
    background: var(--c-code-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .9em;
    color: var(--c-code-text);
}

/* 文章详情头部 */
html.mag .mag-article-head { max-width: var(--mw-prose); margin: 0 auto var(--sp-5); text-align: left; }
html.mag .mag-article-head time,
html.mag .mag-article-head .mag-meta { display: inline-block; font-size: var(--fs-small); color: var(--c-text-mute); margin-bottom: var(--sp-2); }
html.mag .mag-article-head time span { display: inline; }
html.mag .mag-article-head h1 {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: var(--lh-tight);
    color: var(--c-ink);
    text-wrap: balance;
}

/* ============================================================
   7. 阅读进度条 / TOC / 代码复制按钮
   ============================================================ */
html.mag #reading-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: var(--z-progress);
    background: linear-gradient(90deg, var(--c-accent), #e8913a) !important;
    transition: width .1s ease;
}
html.mag .toc-container {
    max-width: var(--mw-prose);
    margin: 0 auto var(--sp-5);
    padding: var(--sp-4);
    background: var(--c-paper-2);
    border: 1px solid var(--c-line);
    border-radius: var(--rd-card);
}
html.mag .toc-container h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-small); color: var(--c-text-mute); letter-spacing: .08em; text-transform: uppercase; }
html.mag .toc-list { list-style: none; padding-left: 0; margin: 0; }
html.mag .toc-list li { margin: var(--sp-1) 0; }
html.mag .toc-list a { color: var(--c-ink-soft); font-size: var(--fs-small); }
html.mag .toc-list a:hover { color: var(--c-accent); }
html.mag .toc-list .toc-h3 { padding-left: var(--sp-3); }
html.mag .toc-list .toc-h4 { padding-left: var(--sp-5); }

html.mag .code-copy-btn {
    position: absolute; top: 8px; right: 8px;
    font-size: var(--fs-tiny); color: var(--c-text-mute);
    background: var(--c-paper-2); border: 1px solid var(--c-line);
    border-radius: var(--rd-btn); padding: 3px 10px; cursor: pointer;
    transition: color var(--tr-fast), border-color var(--tr-fast);
}
html.mag .code-copy-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
/* 代码块容器(blog-details 由 JS 包裹 pre) + 图片懒加载占位 */
html.mag .code-block-wrapper { position: relative; }
html.mag img[data-src] {
    background: var(--c-line-soft);
    min-height: 100px;
    transition: opacity .3s;
}

/* ============================================================
   8. 分页 / 表单 / 按钮
   ============================================================ */
html.mag .lists-navigator { margin: var(--sp-6) 0 0; }
html.mag .page-navigator,
html.mag .pagination {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1);
    margin: 0; padding: 0;
}
html.mag .page-navigator li a,
html.mag .page-navigator li span,
html.mag .pagination li a,
html.mag .pagination li span {
    display: inline-block;
    min-width: 40px; height: 40px; line-height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--rd-pill);
    color: var(--c-ink-soft);
    font-size: var(--fs-small);
    background: var(--c-paper-2);
    border: 1px solid var(--c-line);
    text-align: center;
}
html.mag .page-navigator li a:hover,
html.mag .pagination li a:hover { color: var(--c-accent); border-color: var(--c-accent); }
html.mag .page-navigator li.active span,
html.mag .page-navigator li.current span,
html.mag .pagination li.active span {
    background: var(--c-accent); color: #fff; border-color: var(--c-accent);
}

html.mag .mag-form input[type="text"],
html.mag .mag-form input[type="email"],
html.mag .mag-form input[type="url"],
html.mag .mag-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--c-ink);
    background: var(--c-paper-2);
    border: 1px solid var(--c-line);
    border-radius: var(--rd-btn);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
    box-sizing: border-box;
}
html.mag .mag-form input:focus,
html.mag .mag-form textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
html.mag .mag-form textarea { min-height: 130px; resize: vertical; }

html.mag .mag-btn {
    display: inline-block;
    padding: 11px 26px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 600;
    color: #fff !important;
    background: var(--c-accent);
    border: 1px solid var(--c-accent);
    border-radius: var(--rd-pill);
    cursor: pointer;
    transition: background var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
html.mag .mag-btn:hover {
    background: var(--c-accent-2);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(251,83,83,.5);
}

/* ============================================================
   9. 评论(comments.html —— 只美化,不动 form 字段)
   ============================================================ */
html.mag .comments-reply { list-style: none; margin: 0; padding: 0; }
html.mag .comments-reply > li {
    display: flex; gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding: var(--sp-4);
    background: var(--c-paper-2);
    border: 1px solid var(--c-line);
    border-radius: var(--rd-card);
}
html.mag .comments-reply img,
html.mag .comments-reply .comment-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
}
html.mag .comments-reply h4 { margin: 0 0 4px; font-size: var(--fs-h4); font-weight: 700; color: var(--c-ink); }
html.mag .comments-reply h4 a { color: var(--c-ink); }
html.mag .comments-reply h4 a:hover { color: var(--c-accent); }
html.mag .comments-reply .date-pan { font-size: var(--fs-tiny); color: var(--c-text-mute); margin-bottom: var(--sp-2); }
html.mag .comments-reply p { margin: 0; color: var(--c-ink-soft); font-size: 15px; line-height: 1.7; }

/* ============================================================
   9b. 归档页 / 空状态
   ============================================================ */
html.mag .archive-group { margin-bottom: var(--sp-5); }
html.mag .archive-date {
    font-size: var(--fs-h3); font-weight: 700; color: var(--c-ink);
    padding-bottom: var(--sp-2); margin-top: var(--sp-5);
    border-bottom: 1px solid var(--c-line);
}
html.mag .archive-date::after {
    content: ""; display: block; width: 36px; height: 3px;
    background: var(--c-accent); border-radius: var(--rd-pill); margin-top: 8px;
}
html.mag .archive-date small { color: var(--c-text-mute); font-size: var(--fs-small); font-weight: 400; margin-left: var(--sp-2); }
html.mag .archive-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
html.mag .archive-list li {
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
}
html.mag .archive-list li:last-child { border-bottom: none; }
html.mag .archive-list a { color: var(--c-ink-soft); font-size: 15px; }
html.mag .archive-list a:hover { color: var(--c-accent); }
html.mag .archive-list .date { color: var(--c-text-mute); font-size: var(--fs-small); white-space: nowrap; }
html.mag .archive-list .date span { display: inline; }
html.mag .empty-tip { color: var(--c-text-mute); padding: var(--sp-7) 0; text-align: center; font-size: var(--fs-body); }

/* ============================================================
   9c. 评论列表 + 评论表单(comments.html —— 纯 CSS 美化,不动模板/TaleComment 契约)
   ============================================================ */
html.mag .comments-pan h3 {
    font-size: var(--fs-h3); font-weight: 700; color: var(--c-ink);
    margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-line);
}
html.mag .comments-reply > li figure { flex: 0 0 auto; margin: 0; }
html.mag .comments-reply > li > section { flex: 1 1 auto; min-width: 0; }
html.mag .commentys-form { margin-top: var(--sp-6); }
html.mag .commentys-form > h4 {
    font-size: var(--fs-h4); font-weight: 700; color: var(--c-ink);
    margin: 0 0 var(--sp-3);
}
html.mag .comment-form input[type="text"],
html.mag .comment-form input[type="email"],
html.mag .comment-form input[type="url"],
html.mag .comment-form textarea {
    width: 100%; padding: 12px 14px;
    font-family: var(--font-sans); font-size: var(--fs-body);
    color: var(--c-ink); background: var(--c-paper-2);
    border: 1px solid var(--c-line); border-radius: var(--rd-btn);
    box-sizing: border-box;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
html.mag .comment-form input:focus,
html.mag .comment-form textarea:focus {
    outline: none; border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
html.mag .comment-form textarea { min-height: 130px; resize: vertical; }
html.mag .comment-form input[type="submit"],
html.mag #misubmit {
    display: inline-block; padding: 11px 30px;
    font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600;
    color: #fff; background: var(--c-accent); border: 1px solid var(--c-accent);
    border-radius: var(--rd-pill); cursor: pointer;
    transition: background var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
html.mag .comment-form input[type="submit"]:hover,
html.mag #misubmit:hover {
    background: var(--c-accent-2); transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(251,83,83,.5);
}

/* ============================================================
   10. 入场动画(渐进增强,prefers-reduced-motion 关闭)
   ============================================================ */
@keyframes mag-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    /* .mag-card 入场改由 magazine.js 的 IntersectionObserver 触发(滚到才动画);
       mag-js 安全网:仅当 JS 已加载(html.mag-js)才隐藏卡片待入场,无 JS 时卡片正常可见,杜绝 opacity:0 卡死 */
    html.mag.mag-js .mag-grid > li {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .6s var(--tr-base), transform .6s var(--tr-base);
        will-change: opacity, transform;
    }
    html.mag.mag-js .mag-grid > li.mag-in { opacity: 1; transform: none; }
    /* 非 grid 的 .mag-anim 仍用 CSS animation-delay */
    html.mag .mag-anim {
        opacity: 0;
        animation: mag-fadein .5s var(--tr-base) forwards;
        animation-delay: calc(var(--i, 0) * 55ms);
    }
}

/* ============================================================
   11. 响应式
   ============================================================ */
@media (max-width: 991px) {
    html.mag .mag-card--feature { grid-template-columns: 1fr; }
    html.mag .mag-card--feature .mag-card__media img { object-fit: contain; aspect-ratio: 1 / 1; }
}
@media (max-width: 767px) {
    html.mag .mag-grid,
    html.mag .mag-grid--3 { grid-template-columns: 1fr; }
    html.mag header[role="header"] .container { flex-wrap: wrap; min-height: 0; gap: var(--sp-2); }
    html.mag nav[role="header-nav"] ul { justify-content: flex-start; gap: 4px; }
    html.mag nav[role="header-nav"] ul > li > a { padding: 6px 12px !important; font-size: 14px !important; }

    /* 移动端首屏精简:介绍区收紧,让卡片更早露出(微信移动是主战场) */
    html.mag .mag-intro { padding: var(--sp-2) var(--sp-2) var(--sp-3); }
    html.mag .mag-intro h2 { margin-bottom: var(--sp-2); }
    /* 单字站名"梦"在移动端超大,杂志封面感 */
    html.mag .mag-intro h2 > span { font-size: clamp(56px, 22vw, 96px); letter-spacing: -.06em; }
    html.mag .mag-intro h2 > p { font-size: 13px; }
    html.mag .mag-intro > p { font-size: 14px; }
    html.mag .mag-article-head h1 { font-size: clamp(28px, 7.5vw, 38px); }

    /* 首卡移动端:码在上、文字在下,码控制尺寸别占满屏 */
    html.mag .mag-card--feature { grid-template-columns: 1fr; }
    html.mag .mag-card--feature .mag-card__media { order: 0; min-height: 0; padding: var(--sp-4); }
    html.mag .mag-card--feature .mag-card__media img { max-width: 220px; }
    html.mag .mag-card--feature .mag-card__body { order: 1; padding: var(--sp-4); }

    html.mag main[role="main-home-wrapper"],
    html.mag main[role="main-inner-wrapper"] { padding-top: var(--sp-4) !important; }
}

/* ============================================================
   12. 微体验:首屏淡入 · 回到顶部 · 空状态
   ============================================================ */

/* 首屏 body 克制淡入(mag-js 安全网:JS 未加载则无动画正常显示;reduce-motion 关闭) */
@media (prefers-reduced-motion: no-preference) {
    html.mag.mag-js body { animation: mag-pagein .4s var(--tr-base) both; }
}
@keyframes mag-pagein { from { opacity: 0; } to { opacity: 1; } }

/* 回到顶部浮动按钮:右下,音乐按钮正上方垂直堆叠;墨黑半透明,hover 点睛红(守住克制,不新增常驻红块) */
html.mag .mag-totop {
    position: fixed; bottom: 88px; right: 24px; z-index: 9990;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 26, 26, .78); color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .42);
    cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .3s var(--tr-base), transform .3s var(--tr-base), background .2s var(--tr-fast);
}
html.mag .mag-totop.is-show { opacity: 1; visibility: visible; transform: none; }
html.mag .mag-totop:hover { background: var(--c-accent); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(251, 83, 83, .55); }
html.mag .mag-totop:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
html.mag .mag-totop svg { width: 20px; height: 20px; }
@media (max-width: 767px) {
    html.mag .mag-totop { bottom: 80px; right: 18px; width: 42px; height: 42px; }
    html.mag .mag-totop svg { width: 18px; height: 18px; }
}

/* 空状态:克制线稿图标 + 标题 + 引导(blog 列表 / 友链 / 归档空数据场景,优雅不报错) */
html.mag .mag-empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--c-text-mute);
}
html.mag .mag-empty__icon { width: 56px; height: 56px; margin: 0 auto var(--sp-4); color: var(--c-line); }
html.mag .mag-empty__icon svg { width: 100%; height: 100%; }
html.mag .mag-empty__title {
    font-size: var(--fs-h3); font-weight: 800; color: var(--c-ink-soft);
    margin: 0 0 var(--sp-2); letter-spacing: -.01em;
}
html.mag .mag-empty__hint { font-size: var(--fs-small); margin: 0; }
html.mag .mag-empty__hint a { color: var(--c-accent); }