/* ============================================================
 * 奇营主题 — Typecho 主题样式 v1.4
 * 柔和中性底色 / 大圆角卡片 / 药丸按钮 / 细线分隔
 * 设计取向参考：yumxq.com（中性留白）、starh5（iOS 柔和灰阶）
 * ========================================================== */

/* 中文标题字重偏粗会显生硬，统一使用更柔和的开源中文字体（失败时回退系统字体） */
@font-face {
    font-family: "OPPOSans";
    src: local("OPPO Sans"), local("OPPOSans"),
         url("https://dsfs.oppo.com/store/public/font/OPPOSans-Medium.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #2f7dff;
    --primary-dark: #1f66e0;
    --primary-soft: #edf4ff;
    --price: #ef5b4c;
    --ink: #20232b;
    --ink-2: #4b5363;
    --muted: #8b91a1;
    --stats: #a7adba;
    --meta: #b9bfcb;
    --line: #eef0f4;
    --line-2: #e3e6ec;     /* 稍深一级的描边，用于输入框与需要辨识的边界 */
    --bg: #f6f7f9;
    --card: #ffffff;
    --shadow: 0 1px 2px rgba(24, 28, 40, .04), 0 6px 20px rgba(24, 28, 40, .05);
    --shadow-hover: 0 2px 8px rgba(24, 28, 40, .06), 0 18px 40px rgba(24, 28, 40, .09);
    --radius: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --header-h: 70px;
    --header-bar: 70px;   /* 顶栏导航行本身的高度（不含公告条） */
    --wrap-pad: 20px;     /* 容器左右内边距，窄屏由媒体查询收窄 */
    --font: "OPPOSans", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
html.qy-no-smooth { scroll-behavior: auto; }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font-family: inherit; font-size: inherit; }

/* 只设左右内边距，上下留给各区块自己控制，避免被同优先级规则互相覆盖 */
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }

/* 固定顶栏占位：整页内容统一由此下移，各页面区块不再各自加偏移 */
.site-main { padding-top: var(--header-h); }

::selection { background: var(--primary); color: #fff; }

/* ================= 顶部导航 ================= */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s, background-color .25s, border-color .25s;
}
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--line);
}
.header-in {
    height: var(--header-bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.logo img { height: 40px; width: auto; }
.logo-cube { width: 34px; height: 34px; }
.logo-text { font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.logo-text::first-letter { color: var(--primary); }

.main-nav ul { display: flex; gap: 2px; }
.main-nav li { position: relative; }
.main-nav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
    border-radius: var(--radius-pill);
    transition: color .18s, background-color .18s;
}
.main-nav a::before { content: none; }
.main-nav a:hover { color: var(--ink); background: #f2f4f8; }
.main-nav a.active { color: var(--primary); background: var(--primary-soft); }

/* 导航图标：尺寸随文字，颜色默认继承文字，可由后台内联 style 覆盖 */
.nav-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    color: inherit;
}
.nav-ico svg,
.nav-ico i { width: 18px; height: 18px; font-size: 18px; line-height: 1; }
.nav-ico img { width: 18px; height: 18px; object-fit: contain; display: block; border-radius: 3px; }
.main-nav .sub-menu .nav-ico,
.main-nav .sub-menu .nav-ico svg,
.main-nav .sub-menu .nav-ico i { width: 16px; height: 16px; font-size: 16px; }
.main-nav a:hover .nav-ico { color: var(--ink); }
.main-nav a.active .nav-ico { color: var(--primary); }

/* 多级分类：子级箭头（桌面端显示） */
.nav-caret {
    flex-shrink: 0;
    width: 6px; height: 6px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 1px;
    opacity: .55;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .2s, opacity .2s;
}
.main-nav li.has-sub:hover > a .nav-caret { opacity: 1; transform: rotate(225deg) translateY(-1px); }
.main-nav .sub-menu .nav-caret { transform: rotate(-45deg); }
.main-nav .sub-menu li.has-sub:hover > a .nav-caret { transform: rotate(45deg); }

/* 多级分类：下拉面板（桌面 hover 展开） */
.main-nav .sub-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 190px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(24, 28, 40, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, visibility .18s ease, transform .22s var(--ease);
}
.main-nav .sub-menu a {
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 10px;
}
.main-nav .sub-menu a::before { display: none; }
.main-nav .sub-menu a:hover { color: var(--ink); background: #f4f6fa; }
.main-nav .sub-menu a.active { color: var(--primary); background: var(--primary-soft); }
/* 三级及更深：向右展开 */
.main-nav .sub-menu .sub-menu {
    top: -7px;
    left: calc(100% + 6px);
    transform: translateX(8px);
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-nav .sub-menu li:hover > .sub-menu,
.main-nav .sub-menu li:focus-within > .sub-menu { transform: translateX(0); }

/* 展开按钮只属于手机端抽屉，桌面隐藏 */
.sub-toggle { display: none; }

/* 手机端全屏导航抽屉：桌面端不渲染 */
.mobile-nav { display: none; }

.header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-search { position: relative; display: flex; align-items: center; }
.header-search form {
    display: flex;
    align-items: center;
    width: 210px;
    height: 40px;
    background: #f2f4f8;
    border-radius: var(--radius-pill);
    padding: 0 5px 0 16px;
    transition: width .3s var(--ease), background-color .2s, box-shadow .2s;
}
.header-search form:focus-within { width: 260px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 6px 18px rgba(24, 28, 40, .07); }
.header-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; color: var(--ink); }
.header-search input::placeholder { color: var(--muted); }
.header-search form button {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    color: #fff; background: var(--primary);
    border-radius: 50%; flex-shrink: 0;
    transition: background-color .2s;
}
.header-search form button:hover { background: var(--primary-dark); }
.header-search form button svg { width: 15px; height: 15px; }
.header-search .search-icon { display: none; width: 40px; height: 40px; color: var(--ink-2); }
.header-search .search-icon svg { width: 22px; height: 22px; }
.header-service { display: none; width: 40px; height: 40px; color: var(--ink-2); border-radius: 50%; }
.header-service svg { width: 22px; height: 22px; }
.header-search-mobile { display: none; position: relative; z-index: 1; padding: 10px 14px 14px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 12px 26px rgba(24, 28, 40, .08); }
.header-search-mobile form { display: flex; gap: 8px; }
.header-search-mobile input {
    flex: 1; height: 42px; padding: 0 16px;
    border: 1px solid var(--line-2); border-radius: var(--radius-pill); outline: 0; font-size: 14px; background: #f7f8fa;
}
.header-search-mobile input:focus { border-color: var(--primary); background: #fff; }
.header-search-mobile button { padding: 0 22px; border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-size: 14px; }
.site-header.search-open .header-search-mobile { display: block; }

.header-user { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.header-user img { width: 34px; height: 34px; border-radius: 50%; }
.header-user:hover { color: var(--ink); }
.header-login { font-size: 14px; color: var(--ink-2); padding: 7px 10px; border-radius: var(--radius-pill); }
.header-login:hover { color: var(--ink); background: #f2f4f8; }
.header-register {
    font-size: 14px; color: #fff;
    background: var(--primary);
    padding: 9px 20px; border-radius: var(--radius-pill);
    transition: background .2s, transform .2s;
}
.header-register:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }

.nav-toggle {
    display: none;
    width: 38px; height: 38px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: #f4f5f7;
    border-radius: 12px;
}
.nav-toggle span { width: 20px; height: 2px; background: #1f232e; border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] { background: var(--primary); }
.nav-toggle[aria-expanded="true"] span { background: #fff; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================= 首屏横幅 ================= */
.hero {
    position: relative;
    background: #f4f6fa;
    overflow: hidden;
}
.hero-slider { position: relative; height: 520px; }
.hero-slider .carousel-track { height: 100%; }
.hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}
.hero-slide.is-media img, .hero-slide.is-media video { width: 100%; height: 100%; object-fit: cover; }

/* 内置默认横幅：浅色 3D 场景 */
.hero-slide-default {
    display: flex;
    align-items: center;
    background:
        radial-gradient(720px 380px at 88% 8%, rgba(47, 125, 255, .14), transparent 64%),
        radial-gradient(560px 420px at 10% 96%, rgba(120, 170, 255, .12), transparent 62%),
        linear-gradient(118deg, #f7f9fd 0%, #fbfcfe 52%, #eef4fc 100%);
}
.hero-slide-default::before {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .65) 38.4%, transparent 39.5%),
        linear-gradient(105deg, transparent 60%, rgba(196, 218, 250, .28) 60.4%, transparent 61.4%);
    pointer-events: none;
}
.hsd-text { position: relative; z-index: 2; padding-left: 9%; }
.hsd-pill {
    display: inline-block;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(47, 125, 255, .16);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 10px rgba(47, 125, 255, .08);
}
.hsd-text h2, .hero-overlay h1 { margin: 20px 0 14px; font-size: 50px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.hsd-text h2 .blue, .hero-overlay h1 .blue { color: var(--primary); }
.hsd-text h2 .dark, .hero-overlay h1 .dark { color: var(--ink); }
.hsd-sub {
    font-size: 15px;
    color: var(--muted);
    letter-spacing: .18em;
    white-space: nowrap;
}
.hero-art {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    height: 84%;
    z-index: 1;
}

/* 自定义素材时的桌面叠层文字 + 搜索 */
.hero-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    pointer-events: none;
}
.hero-overlay-in { pointer-events: auto; }
.hero-overlay h1 { color: #fff; text-shadow: 0 2px 22px rgba(0, 20, 60, .28); }
.hero-overlay h1 .blue { color: #a8c9ff; }
.hero-overlay h1 .dark { color: #fff; }
.hero-overlay .hsd-sub { color: rgba(255, 255, 255, .88); margin-bottom: 26px; }
.hero-search {
    display: flex;
    align-items: center;
    width: 560px; max-width: 100%;
    height: 56px;
    background: #fff;
    border-radius: var(--radius-pill);
    padding: 0 7px 0 22px;
    box-shadow: 0 10px 30px rgba(20, 32, 60, .14);
}
.hero-search > svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 14px; font-size: 15px; background: none; color: var(--ink); }
.hero-search button {
    flex-shrink: 0;
    height: 42px; padding: 0 28px;
    background: var(--primary); color: #fff;
    font-size: 14px; font-weight: 500;
    border-radius: var(--radius-pill);
    transition: background .2s;
}
.hero-search button:hover { background: var(--primary-dark); }

/* 轮播圆点 */
.hero-dots {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    display: flex; justify-content: center; gap: 6px;
    z-index: 6;
}
.hero-dots button {
    width: 7px; height: 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 1px 3px rgba(30, 60, 120, .18);
    transition: width .25s var(--ease), background .25s;
}
.hero-dots button.active { width: 22px; background: var(--primary); }

/* ================= 首页主体 ================= */
.home-body { position: relative; z-index: 3; padding-bottom: 36px; }

/* 快捷入口卡片 */
.quick-card {
    position: relative;
    margin-top: -84px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 34px rgba(24, 28, 40, .07);
    padding: 26px 30px;
}
.quick-cats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.quick-cat {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 12px 4px;
    font-size: 14px; color: var(--ink-2);
    border-radius: var(--radius);
    transition: background .2s, transform .2s;
}
.quick-cat:hover { background: #f6f8fb; }
.quick-cat:active { transform: scale(.97); }
.quick-icon { width: 50px; height: 50px; display: grid; place-items: center; }
.quick-icon svg { width: 100%; height: 100%; }
.quick-icon img { width: 50px; height: 50px; object-fit: contain; }

.quick-slider-wrap {
    margin-top: 18px; padding-top: 20px;
    border-top: 1px solid var(--line);
}

/* 通用轮播 */
.carousel { position: relative; overflow: hidden; }
.carousel-track {
    display: flex;
    gap: 14px;
    will-change: transform;
}
.carousel-track.no-anim { transition: none !important; }
.slide-card {
    flex: 0 0 calc((100% - (var(--spv, 5) - 1) * 14px) / var(--spv, 5));
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 209 / 154;
    background: #f2f4f8;
}
.slide-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.slide-card:hover img { transform: scale(1.04); }
.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .94);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(24, 28, 40, .12);
    color: var(--ink);
    opacity: 0;
    transition: opacity .2s, background .2s, color .2s;
    z-index: 5;
}
.carousel:hover .carousel-btn { opacity: 1; }
.carousel-btn:hover { background: var(--ink); color: #fff; }
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }
@media (hover: none) { .carousel-btn { opacity: 0; } }

.hot-banner { margin-top: 18px; }
.hot-slide {
    flex: 0 0 calc((100% - (var(--spv, 5) - 1) * 14px) / var(--spv, 5));
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 209 / 90;
}
.hot-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.hot-slide:hover img { transform: scale(1.03); }

/* ================= 区块标题 ================= */
.home-section { margin-top: 40px; }
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.section-title { display: flex; align-items: center; gap: 10px; }
.section-icon { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; }
.section-icon svg { width: 100%; height: 100%; }
.section-icon img { width: 32px; height: 32px; object-fit: contain; }
.section-title h2 { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.section-more {
    display: flex; align-items: center; gap: 2px;
    font-size: 14px; color: var(--muted);
}
.section-more svg { width: 18px; height: 18px; }
.section-more:hover { color: var(--primary); }

/* ================= 产品卡片 ================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.product-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.product-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow-hover); }
.product-thumb {
    display: block;
    aspect-ratio: 209 / 154;
    background: #f2f5f9;
    overflow: hidden;
}
.product-thumb img, .product-thumb video { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.product-card:hover .product-thumb img, .product-card:hover .product-thumb video { transform: scale(1.04); }
.product-title {
    padding: 13px 14px 4px;
    font-size: 15px; font-weight: 500; line-height: 1.5;
    color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-title a { display: block; }
.product-title a:hover { color: var(--primary); }
.product-price-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px 14px;
}
.product-price { font-size: 18px; font-weight: 600; color: var(--price); letter-spacing: -.01em; flex: 0 0 auto; white-space: nowrap; }
.buy-btn {
    display: inline-block;
    padding: 7px 16px;
    font-size: 13px; font-weight: 500;
    white-space: nowrap;
    color: #fff; background: var(--primary);
    border-radius: var(--radius-pill);
    transition: background .2s, transform .2s;
}
.buy-btn:hover { background: var(--primary-dark); transform: translateY(-1px); color: #fff; }
.buy-btn.big { padding: 13px 40px; font-size: 15px; font-weight: 500; }
.product-meta {
    display: flex; align-items: center;
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--meta);
}
.product-meta b { color: var(--meta); font-weight: 400; }
.meta-sep {
    display: inline-block;
    width: 1px; height: 11px;
    margin: 0 10px;
    background: var(--line-2);
}

/* ================= 教程卡片 ================= */
.article-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.article-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.article-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow-hover); }
.article-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    background: #f2f5f9;
    overflow: hidden;
}
.article-thumb img, .article-thumb video { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.article-thumb video, .product-thumb video { pointer-events: none; }
.article-card:hover .article-thumb img, .article-card:hover .article-thumb video { transform: scale(1.04); }
.article-info { padding: 14px 16px 16px; }
.article-info h3 {
    font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.1em;
}
.article-info h3 a:hover { color: var(--primary); }
.article-excerpt {
    margin: 8px 0 0;
    font-size: 13px; line-height: 1.7; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-stats { display: flex; gap: 18px; margin-top: 12px; }
.article-stats li { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--stats); }
.article-stats svg { width: 16px; height: 16px; }
.article-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px;
}
.article-author { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); min-width: 0; }
.article-author img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.cube-avatar { width: 22px; height: 22px; display: inline-block; flex-shrink: 0; }
.cube-avatar svg { width: 100%; height: 100%; }
.article-author-name, .article-author > span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.article-foot time { font-size: 13px; color: var(--muted); flex-shrink: 0; margin-left: 10px; }

/* ================= 归档页 ================= */
.archive-head {
    padding: 52px 0 42px;
    background: linear-gradient(180deg, #fbfcfe, #f4f6fa);
    border-bottom: 1px solid var(--line);
}
.archive-head h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.archive-head p { margin-top: 10px; font-size: 14px; color: var(--muted); }
.archive-body { padding-top: 28px; padding-bottom: 56px; }
.archive-body .article-grid { grid-template-columns: repeat(3, 1fr); }
.archive-body .article-thumb { aspect-ratio: 16 / 10; }

.pager { margin-top: 34px; }
.pager-in { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pager-in span, .pager-in a {
    display: inline-grid; place-items: center;
    min-width: 40px; height: 40px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ink-2);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    transition: .2s;
}
.pager-in a:hover { background: #f4f6fa; color: var(--ink); }
.pager-in .current { background: var(--primary); border-color: var(--primary); color: #fff; }

.empty-card { padding: 64px 30px; text-align: center; }
.empty-card h2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.empty-card p { color: var(--muted); margin-bottom: 24px; }

/* ================= 详情页 ================= */
.single-body { padding-top: 24px; padding-bottom: 50px; }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs i { font-style: normal; }

.product-hero { display: flex; gap: 30px; padding: 28px; margin-bottom: 22px; border-radius: var(--radius-lg); }
.product-hero-thumb { flex: 0 0 380px; border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.product-hero-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.product-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.product-hero-info h1 { margin: 12px 0; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.product-hero-price b { font-size: 34px; font-weight: 600; color: var(--price); letter-spacing: -.01em; }
.product-hero-meta { display: flex; gap: 26px; margin: 16px 0; font-size: 14px; color: var(--muted); }
.product-hero-meta b { color: var(--ink-2); }
.product-hero-actions { display: flex; gap: 14px; margin-top: auto; }

/* ---- 产品封面轮播（多张封面时可滑动切换） ---- */
.product-hero-thumb.is-carousel { position: relative; aspect-ratio: 4 / 3; }
.product-hero-thumb.is-carousel .qy-slides {
    display: flex;
    height: 100%;
    touch-action: pan-y;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.product-hero-thumb.is-carousel .qy-slides.is-dragging { transition: none; }
.product-hero-thumb.is-carousel .qy-slide { flex: 0 0 100%; min-width: 0; height: 100%; }
.product-hero-thumb.is-carousel .qy-slide img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}
.qy-slide-prev, .qy-slide-next {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(15, 23, 42, .42);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .2s, background .2s;
}
.qy-slide-prev { left: 10px; }
.qy-slide-next { right: 10px; }
.qy-slide-prev:hover, .qy-slide-next:hover { background: rgba(15, 23, 42, .68); }
.qy-slide-prev svg, .qy-slide-next svg { width: 18px; height: 18px; }
@media (hover: hover) {
    .qy-slide-prev, .qy-slide-next { opacity: 0; }
    .product-hero-thumb.is-carousel:hover .qy-slide-prev,
    .product-hero-thumb.is-carousel:hover .qy-slide-next,
    .product-hero-thumb.is-carousel:focus-within .qy-slide-prev,
    .product-hero-thumb.is-carousel:focus-within .qy-slide-next { opacity: 1; }
}
@media (hover: none) {
    .qy-slide-prev, .qy-slide-next { opacity: .82; }
}
.qy-slide-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.qy-slide-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    background: rgba(255, 255, 255, .55);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .16);
    cursor: pointer;
    transition: width .2s, border-radius .2s, background .2s;
}
.qy-slide-dot.on { width: 18px; border-radius: 4px; background: #fff; }
.ghost-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 15px; font-weight: 600;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius);
    transition: .2s;
}
.ghost-btn:hover { background: var(--primary-soft); }

.post-card { padding: 34px 38px; border-radius: var(--radius-lg); }
.post-card-title { font-size: 17px; font-weight: 600; margin-bottom: 16px; padding-left: 0; letter-spacing: -.01em; }
.post-title { margin: 14px 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.45; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.post-author { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; }
.post-author img { width: 34px; height: 34px; border-radius: 50%; }
.post-author:hover { color: var(--primary); }
.post-meta-item { display: flex; align-items: center; gap: 5px; }
.post-meta-item svg { width: 15px; height: 15px; }

.post-content { font-size: 16.5px; line-height: 1.95; color: var(--ink-2); word-wrap: break-word; }
.post-content p { margin: 0 0 1.2em; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4 {
    color: var(--ink); font-weight: 600;
    margin: 1.6em 0 .8em; line-height: 1.4;
}
.post-content h1 { font-size: 23px; }
.post-content h2 { font-size: 20px; padding-left: 12px; border-left: 4px solid var(--primary); }
.post-content h3 { font-size: 18px; }
.post-content h4 { font-size: 16px; }
.post-content a { color: var(--primary); border-bottom: 1px solid transparent; }
.post-content a:hover { border-bottom-color: var(--primary); }
.post-content img { max-width: 100%; height: auto; margin: 1em auto; border-radius: var(--radius); }
/* 媒体（视频/图片/内嵌页）必须限制在正文栏宽度内，否则 960px 原始宽度的视频会把整页撑宽，手机端要缩小才能看全 */
.post-content video, .post-content iframe { display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: var(--radius); }
.post-content figure { max-width: 100%; margin: 1em 0; }
.post-content figure img, .post-content figure video { max-width: 100%; height: auto; }
.post-content ul, .post-content ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin: .35em 0; }
.post-content blockquote {
    margin: 1.2em 0; padding: 14px 20px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-2);
}
.post-content code {
    font-family: var(--mono); font-size: .88em;
    background: #f0f1f5; color: #d6336c;
    padding: 2px 7px; border-radius: 4px;
}
.post-content pre {
    margin: 1.2em 0; padding: 18px 20px;
    background: #1e2030; color: #e6e8f2;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 14px; line-height: 1.7;
}
.post-content pre code { background: none; color: inherit; padding: 0; }
.post-content table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14.5px; }
.post-content th, .post-content td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.post-content th { background: var(--bg); font-weight: 600; }
.post-content hr { border: 0; border-top: 1px dashed var(--line); margin: 2em 0; }

.post-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.post-tags:empty { display: none; }
.post-tags a {
    padding: 5px 14px;
    font-size: 13px; color: var(--ink-2);
    background: var(--bg);
    border-radius: 4px;
    transition: .2s;
}
.post-tags a:hover { background: var(--primary-soft); color: var(--primary); }

.author-box {
    display: flex; align-items: center; gap: 16px;
    margin-top: 30px; padding: 18px 22px;
    background: var(--bg);
    border-radius: var(--radius-lg);
}
.author-box img { width: 52px; height: 52px; border-radius: 50%; }
.author-box b { font-size: 16px; }
.author-box p { font-size: 13px; color: var(--muted); }
.author-box .ghost-btn { margin-left: auto; padding: 8px 22px; font-size: 13.5px; flex-shrink: 0; white-space: nowrap; }

.related-section { margin-top: 30px; }
.related-section .article-grid { grid-template-columns: repeat(4, 1fr); }
.related-section .article-thumb { aspect-ratio: 16 / 10; }
.related-section .article-info h3 { font-size: 14.5px; min-height: 0; }

/* ================= 评论（有光社区版式） ================= */
.comments-card { margin-top: 26px; padding: 0 28px 8px; border-radius: var(--radius-lg); overflow: hidden; }
.comments-head {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 18px 0 14px;
    font-size: 17px; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line);
}
.comments-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; border: 0;
    background: none; color: #8a8f9c; cursor: pointer;
    transition: transform .2s;
}
.comments-toggle svg { width: 16px; height: 16px; }
.comments-toggle.is-closed { transform: rotate(180deg); }
.comment-list.is-closed { display: none; }
.comments-empty { padding: 34px 0; text-align: center; font-size: 14px; color: var(--muted); }
.comment-list { margin: 0; padding: 0; }
.comment-item { list-style: none; }
.comment-body { display: flex; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.comment-avatar { flex: none; line-height: 0; }
.comment-avatar a, .comment-avatar img { display: block; background: #eef1f6; border-radius: 50%; }
.comment-avatar img { width: var(--cs, 44px); height: var(--cs, 44px); object-fit: cover; }
.comment-main { flex: 1; min-width: 0; }
.comment-author { font-size: 15px; line-height: 1.3; color: #8b8f9c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-author a { color: inherit; }
.comment-awaiting { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; color: #f59e0b; }
.comment-text { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--ink); word-wrap: break-word; }
.comment-text p { margin: 0 0 .5em; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-quote { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); border-left: 3px solid var(--primary); }
.comment-quote span { display: block; font-size: 14px; color: #9aa0ac; }
.comment-quote p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: #666b75; word-break: break-word; }
.comment-meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 13.5px; color: #a1a6b3; }
.cmt-reply {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
    background: none; color: #7c8290; cursor: pointer; line-height: 0;
    -webkit-tap-highlight-color: transparent; transition: background .18s, color .18s;
}
.cmt-reply:hover { color: var(--primary); background: #f3f5f9; }
.cmt-reply svg { width: 19px; height: 19px; }
/* 回复以引用块表达层级，不再额外缩进（与参考版式一致） */
.comment-children { padding-left: 0; }
.comment-list > .comment-item:last-child > .comment-body { border-bottom: 0; }
.comments-pager { padding: 12px 0 4px; text-align: center; }
.comments-pager a { margin: 0 8px; color: var(--ink-2); }
.comments-pager a:hover { color: var(--primary); }

.respond { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.respond-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.comment-login { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.comment-login a { color: var(--primary); margin-right: 10px; }
.cf-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.comment-form input, .comment-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    outline: 0;
    transition: border-color .2s, background .2s;
}
.comment-form input { height: 42px; padding: 0 14px; font-size: 14px; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(47, 125, 255, .12); }
.cf-reply-tip { display: none; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.comment-form.is-replying .cf-reply-tip { display: flex; }
.cf-reply-to { color: var(--primary); font-weight: 600; }
.cf-cancel { color: var(--muted); }
.cf-bar { display: flex; align-items: flex-end; gap: 10px; }
.cf-bar textarea {
    flex: 1; min-width: 0; min-height: 44px; max-height: 140px;
    padding: 11px 14px; font-size: 14.5px; line-height: 1.5;
    border-radius: 12px; resize: none;
}
.cf-send {
    flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
    background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: box-shadow .2s, opacity .2s;
}
.cf-send:hover { box-shadow: 0 8px 18px rgba(47, 125, 255, .35); }
.cf-send:active { opacity: .85; }
.comments-closed { padding: 18px 0; text-align: center; color: var(--muted); }

@media (max-width: 767px) {
    /* 评论区贴合屏幕，评论框跟随文章底部，不在页面中悬浮 */
    .comments-card { margin: 10px -14px 0; padding: 0 16px 18px; border-radius: 0; box-shadow: none; border: 0; }
    .comments-head { padding: 16px 0 12px; font-size: 16px; }
    .comment-body { padding: 16px 0; gap: 11px; }
    .comment-text { margin-top: 8px; font-size: 16.5px; }
    .comment-children { padding-left: 0; margin-left: 0; }
    .comments-empty { padding: 30px 0; }
    .comments-pager { padding: 12px 0 4px; }
    .respond {
        position: static;
        margin: 14px 0 0; padding: 14px 0 0;
        background: transparent; border-top: 1px solid var(--line);
        box-shadow: none; box-sizing: border-box;
    }
    .respond-title { display: block; font-size: 15px; }
    .cf-fields { display: grid; grid-template-columns: 1fr 1fr; }
    .cf-fields input[type="url"] { grid-column: 1 / -1; }
    .cf-bar textarea { min-height: 76px; height: auto; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
    .cf-send { height: 40px; padding: 0 18px; border-radius: 12px; }
    .cf-reply-tip { margin-bottom: 8px; }
}


/* ================= 极简页脚 ================= */
.site-footer {
    margin-top: 30px;
    background: #fff;
    border-top: 1px solid var(--line);
}
.footer-simple {
    padding: 30px 20px 36px;
    text-align: center;
    font-size: 14px;
    line-height: 2.1;
    color: #5f6572;
}
.footer-simple p { margin: 0; }
.footer-simple a { color: #5f6572; }
.footer-simple a:hover { color: var(--primary); }

/* ================= 移动端七格底部导航 ================= */
.mobile-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 130;
    display: none;
    align-items: flex-end;
    background: #fff;
    box-shadow: 0 -2px 16px rgba(22, 23, 47, .08);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.mobile-tabbar .tab-side {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    min-width: 0;
}
.mobile-tabbar a.tab-item {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 0;
    padding: 3px 0 2px;
    font-size: 12px; color: #4a4f5c;
}
.mobile-tabbar a.tab-item svg { width: 24px; height: 24px; }
.mobile-tabbar a.tab-item .tab-ico { width: 24px; height: 24px; object-fit: contain; display: block; }
.mobile-tabbar a.tab-item [class^="ri-"] { font-size: 24px; line-height: 1; display: block; }
.mobile-tabbar a.tab-item.active { color: var(--primary); }
.tab-center {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    margin: 0 6px -2px;
    display: grid; place-items: center;
    background: linear-gradient(160deg, #2f80ff, #0057d9);
    border-radius: 13px;
    box-shadow: 0 6px 14px rgba(47, 125, 255, .32);
    color: #fff;
}
.tab-center svg { width: 26px; height: 26px; transition: transform .28s ease; }
.tab-center:active { transform: scale(.94); }
.tab-center.is-open svg { transform: rotate(45deg); }

/* ================= 分类页：顶部轮播 + 排序栏 ================= */
.cat-hero {
    position: relative;
    height: clamp(180px, 26vw, 300px);
    overflow: hidden;
    background: #0f1420;
    isolation: isolate;
}
.cat-hero-track { position: absolute; inset: 0; }
.cat-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .9s ease, transform 6s linear;
}
.cat-hero-slide.is-active { opacity: 1; transform: scale(1); }
.cat-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,14,24,.22), rgba(10,14,24,.52) 55%, rgba(10,14,24,.74));
}
.cat-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 22px;
}
.cat-hero-inner h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -.01em;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.cat-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.82);
}
.cat-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); }
.cat-hero-meta .desc { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-hero-dots {
    position: absolute;
    right: 20px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 6px;
}
.cat-hero-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255,255,255,.45);
    transition: width .25s, background .25s;
}
.cat-hero-dot.is-active { width: 18px; background: #fff; }

.cat-sort {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--card, #fff);
    border: 1px solid var(--line, #f0f1f5);
    border-radius: var(--radius-lg, 10px);
}
.cat-sort-label { flex: 0 0 auto; font-size: 13px; color: var(--muted, #8a8fa3); }
.cat-sort-list { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cat-sort-list::-webkit-scrollbar { display: none; }
.cat-sort-item {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2, #3d414d);
    text-decoration: none;
    transition: background .16s, color .16s;
}
.cat-sort-item:hover { background: #f3f5f9; color: var(--ink, #1d2129); }
.cat-sort-item.is-active { background: var(--primary-soft, #edf4ff); color: var(--primary, #2f7dff); font-weight: 600; }

@media (max-width: 640px) {
    .cat-hero { height: 168px; }
    .cat-hero-inner { padding-bottom: 16px; }
    .cat-hero-inner h1 { font-size: 21px; }
    .cat-hero-dots { right: 14px; bottom: 12px; }
    .cat-sort { flex-wrap: wrap; gap: 8px; padding: 8px 10px; margin-top: 10px; border-radius: 12px; }
    .cat-sort-item { padding: 4px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-hero-slide { transition: opacity .3s; }
}

/* ================= 底栏「我的」内联面板 ================= */
/* 与首页一体化：全屏铺满，无标题栏/关闭按钮，再点底栏「我的」收起 */
.qy-mine-sheet {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg, #f5f6f8);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s;
}
.qy-mine-sheet.open { visibility: visible; transform: none; }

/* 面板内部：撑满 sheet 高度，让 body 区域独立滚动（缺这段会导致内容被裁掉、划不动） */
.qy-mine-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.qy-mine-topbar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(46px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0;
    background: #fff;
    border-bottom: 1px solid var(--line, #f0f1f5);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #1d2129);
}
.qy-mine-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--muted, #8a8fa3);
    transition: background .15s, color .15s;
}
.qy-mine-close svg { width: 18px; height: 18px; }
.qy-mine-close:hover { background: #f2f4f7; color: var(--ink, #1d2129); }

.qy-mine-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* 底部留出固定底栏高度，最后内容不被遮 */
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}
.qy-mine-body .qy-uc { padding-top: 14px; }

.qy-mine-sheet.is-loading .qy-mine-body::after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    margin: 90px auto;
    border-radius: 50%;
    border: 2.5px solid #e3e7ee;
    border-top-color: var(--primary, #2f7dff);
    animation: qyMineSpin .7s linear infinite;
}
@keyframes qyMineSpin { to { transform: rotate(360deg); } }

html.qy-mine-open, html.qy-mine-open body { overflow: hidden; }

@media (min-width: 641px) {
    .qy-mine-sheet { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .qy-mine-sheet { transition: none; }
}

/* ================= 移动端底栏「快捷操作」弹层 ================= */
body.qy-quick-lock { overflow: hidden; }

.qy-quick {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    visibility: hidden;
    display: none;
}
.qy-quick.open { visibility: visible; }

.qy-quick-mask {
    position: absolute;
    inset: 0 0 calc(56px + env(safe-area-inset-bottom)) 0;
    background: rgba(17, 20, 30, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.qy-quick.open .qy-quick-mask { opacity: 1; pointer-events: auto; }

.qy-quick-panel {
    position: absolute;
    left: 10px; right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 -6px 34px rgba(17, 20, 30, .2);
    padding: 16px 14px 14px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .24s ease, transform .24s cubic-bezier(.22, .61, .36, 1);
}
.qy-quick.open .qy-quick-panel { opacity: 1; transform: none; }

.qy-quick-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.qy-quick-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.qy-quick-close {
    width: 30px; height: 30px; border: 0; background: var(--bg);
    border-radius: 50%; display: grid; place-items: center;
    color: var(--muted); cursor: pointer; padding: 0;
}
.qy-quick-close svg { width: 15px; height: 15px; }

.qy-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 8px;
}
.qy-quick-item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 12px 4px 10px;
    border-radius: 12px;
    background: var(--bg);
    transition: background .18s ease, transform .18s ease;
}
.qy-quick-item:active { background: var(--primary-soft); transform: scale(.96); }
.qy-quick-ico {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    background: #fff; color: var(--primary);
    box-shadow: 0 2px 8px rgba(22, 23, 47, .07);
}
.qy-quick-ico svg { width: 20px; height: 20px; }
.qy-quick-label { font-size: 12.5px; color: var(--ink-2); line-height: 1; }

@media (max-width: 640px) {
    .qy-quick { display: block; }
}

/* ================= 返回顶部 ================= */
.back-top {
    position: fixed;
    right: 20px; bottom: 88px;
    z-index: 90;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow);
    color: var(--ink-2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: .25s;
}
.back-top svg { width: 19px; height: 19px; }
.back-top.show { opacity: 1; pointer-events: auto; transform: none; }
.back-top:hover { background: var(--primary); color: #fff; }

/* ================= 404 ================= */
.notfound-card { margin: 40px auto 60px; max-width: 640px; padding: 60px 30px; text-align: center; border-radius: var(--radius-lg); }
.notfound-code {
    font-size: 88px; font-weight: 600; line-height: 1; letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--primary), #6ab0ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.notfound-card h1 { margin: 12px 0 8px; font-size: 22px; }
.notfound-card p { color: var(--muted); margin-bottom: 26px; }
.notfound-card .buy-btn { margin-top: 22px; padding: 10px 34px; }

/* ================= 响应式 ================= */
@media (max-width: 1080px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .archive-body .article-grid { grid-template-columns: repeat(2, 1fr); }
    .related-section .article-grid { grid-template-columns: repeat(3, 1fr); }
    .carousel, .hot-banner { --spv: 4; }
}

@media (max-width: 860px) {
    /* 桌面内联导航在手机端隐藏，改用全屏抽屉 */
    .main-nav { display: none; }

    /* ===== 全屏导航抽屉（lovestu 风格） ===== */
    body.qy-nav-lock { overflow: hidden; }

    .mobile-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        visibility: hidden;
        pointer-events: none;
    }
    .mobile-nav.open {
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-nav-mask {
        position: absolute;
        inset: 0;
        background: rgba(17, 20, 30, .5);
        opacity: 0;
        transition: opacity .25s ease;
    }
    .mobile-nav.open .mobile-nav-mask { opacity: 1; }

    .mobile-nav-panel {
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 84vw;
        max-width: 340px;
        display: flex;
        flex-direction: column;
        background: var(--bg);
        box-shadow: 8px 0 40px rgba(17, 20, 30, .22);
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.22, .61, .36, 1);
        padding-top: env(safe-area-inset-top);
    }
    .mobile-nav.open .mobile-nav-panel { transform: translateX(0); }

    .mobile-nav-topbar {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px 8px 18px;
    }
    .mobile-nav-brand {
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -.01em;
    }
    .mobile-nav-close {
        width: 38px; height: 38px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--ink-2);
        transition: background .18s;
    }
    .mobile-nav-close svg { width: 22px; height: 22px; }
    .mobile-nav-close:active { background: rgba(0, 0, 0, .07); }

    .mobile-nav-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 6px 14px calc(22px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mobile-nav-body::-webkit-scrollbar { display: none; }

    /* 用户卡片 */
    .mobile-user-card {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        background: var(--card);
        border-radius: 14px;
        box-shadow: var(--shadow);
    }
    .mobile-user-card:active { background: var(--primary-soft); }
    .mobile-user-avatar {
        flex-shrink: 0;
        width: 48px; height: 48px;
        border-radius: 50%;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: var(--primary-soft);
        color: var(--primary);
    }
    .mobile-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .mobile-user-avatar svg { width: 28px; height: 28px; }
    .mobile-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mobile-user-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-user-role { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
    .mobile-user-arrow { flex-shrink: 0; display: flex; color: var(--muted); }
    .mobile-user-arrow svg { width: 18px; height: 18px; }

    .mobile-nav-section-title {
        flex-shrink: 0;
        padding: 10px 6px 0;
        font-size: 12.5px;
        color: var(--muted);
    }

    /* 菜单卡片 */
    .mobile-nav-group {
        flex-shrink: 0;
        overflow: hidden;
        background: var(--card);
        border-radius: 14px;
        box-shadow: var(--shadow);
    }
    .mobile-nav-group > ul { display: flex; flex-direction: column; }
    .mobile-nav-group li { position: relative; list-style: none; }

    .mobile-nav-group > ul > li > a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
        font-size: 15px;
        color: var(--ink);
        line-height: 1.35;
    }
    /* 同级行之间的细分隔线（展开子菜单时变成标题行底线） */
    .mobile-nav-group > ul > li:not(:last-child) > a,
    .mobile-nav-group li.sub-open > a { box-shadow: inset 0 -1px 0 var(--line); }
    .mobile-nav-group a:active,
    .mobile-nav-group a.active { color: var(--primary); background: var(--primary-soft); }

    /* 名字旁的桌面级小箭头在抽屉内隐藏，展开指示统一用右侧按钮 */
    .mobile-nav .nav-caret { display: none; }
    /* 抽屉内图标略大，与更大的行高更协调 */
    .mobile-nav .nav-ico { width: 20px; height: 20px; margin-right: 9px; }
    .mobile-nav .nav-ico svg,
    .mobile-nav .nav-ico i { width: 20px; height: 20px; font-size: 20px; }
    .mobile-nav .nav-ico img { width: 20px; height: 20px; }
    .mobile-nav-group .sub-menu .nav-ico,
    .mobile-nav-group .sub-menu .nav-ico svg,
    .mobile-nav-group .sub-menu .nav-ico i { width: 17px; height: 17px; font-size: 17px; }

    /* 子菜单展开按钮（右侧独立热区，链接本身正常跳转） */
    .mobile-nav-group .sub-toggle {
        position: absolute;
        top: 5px;
        right: 10px;
        z-index: 2;
        width: 44px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: var(--muted);
    }
    .mobile-nav-group .sub-toggle:active { background: rgba(0, 0, 0, .06); color: var(--primary); }
    .mobile-nav-group .sub-toggle svg { width: 17px; height: 17px; transition: transform .2s ease; }
    .mobile-nav-group li.has-sub > a { padding-right: 62px; }
    .mobile-nav-group li.sub-open > .sub-toggle svg { transform: rotate(90deg); }

    /* 多级子菜单：默认收起，点击展开，缩进表示层级 */
    .mobile-nav-group .sub-menu {
        display: none;
        padding: 2px 8px 8px 16px;
        background: var(--bg);
    }
    .mobile-nav-group li.sub-open > .sub-menu { display: block; }
    .mobile-nav-group .sub-menu a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px;
        font-size: 14px;
        color: var(--ink-2);
        border-radius: 10px;
    }
    .mobile-nav-group .sub-menu a::before { display: none; }
    .mobile-nav-group .sub-menu .sub-menu { padding-left: 12px; padding-right: 0; }
    .mobile-nav-group .sub-menu .sub-menu a { min-height: 40px; font-size: 13.5px; }
    .nav-toggle { display: flex; margin-right: 4px; background: transparent; border-radius: 0; }
    .nav-toggle[aria-expanded="true"] { background: var(--primary); border-radius: 10px; }
    .header-left { gap: 10px; }
    .header-in { gap: 10px; }
    .header-search form { display: none; }
    .header-search .search-icon { display: grid; place-items: center; }
    .header-service { display: grid; place-items: center; }
    .header-user span, .header-login, .header-register { display: none; }
    .logo-cube { width: 30px; height: 30px; }
    .logo-text { font-size: 20px; }
    .logo img { height: 30px; }

    /* 横幅：内嵌圆角卡片（两侧 6px 留白，无叠层） */
    .hero { background: transparent; }
    .hero-slider { height: 43vw; margin: 22px 6px 0; border-radius: 20px; }
    .hero-overlay { display: none; }
    .hsd-text { padding-left: 7%; }
    .hsd-pill { font-size: clamp(11px, 3.1vw, 14px); padding: .45em 1.1em; border-radius: var(--radius-pill); }
    .hsd-text h2 { margin: 3.5vw 0 3vw; font-size: clamp(23px, 7.2vw, 40px); }
    .hsd-sub { font-size: clamp(9px, 2.7vw, 14px); letter-spacing: .28em; }
    .hero-art { right: -2%; height: 78%; }
    .hero-dots { bottom: 2vw; }

    /* 快捷入口：通栏白色块，无圆角阴影 */
    .quick-card {
        margin: 12px -10px 0;
        padding: 22px 0 14px;
        border-radius: 0;
        box-shadow: none;
    }
    .quick-cats { gap: 0; }
    .quick-icon { width: 45px; height: 45px; }
    .quick-cat { gap: 6px; padding: 6px 2px; font-size: 13px; color: var(--ink-2); }
    .quick-slider-wrap { margin-top: 14px; padding-top: 14px; }

    .hot-banner { margin-top: 12px; }

    .home-section { margin-top: 26px; }
    .section-head { margin-bottom: 14px; }
    .section-icon { width: 25px; height: 25px; }
    .section-title { gap: 8px; }
    .section-title h2 { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
    .section-more { font-size: 16px; color: #8a8f98; gap: 2px; }
    .section-more svg { width: 16px; height: 16px; stroke-width: 2.2; }

    .product-hero { flex-direction: column; gap: 18px; padding: 20px; }
    .product-hero-thumb { flex: none; }
    .post-card { padding: 24px 20px; }
    .post-title { font-size: 21px; }
    .comments-card { padding: 22px 18px; }
}

@media (max-width: 640px) {
    :root { --wrap-pad: 6px; }

    body { padding-bottom: calc(55px + env(safe-area-inset-bottom)); }
    .mobile-tabbar { display: flex; }
    .back-top { bottom: 70px; right: 12px; width: 38px; height: 38px; }

    .carousel, .hot-banner { --spv: 2.4; }

    /* 正文表格：允许横向滚动，避免宽表格撑破屏幕产生横向位移 */
    .post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 快捷入口随 .wrap 6px 出血；移动端隐藏产品横滑 */
    .quick-card { margin-left: -6px; margin-right: -6px; }
    .quick-slider-wrap { display: none; }

    /* 产品卡：对标参考站实测值 */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-thumb { aspect-ratio: 191 / 141; }
    .product-title {
        display: block;
        padding: 7px 12px 8px;
        font-size: 14px; font-weight: 400; color: var(--ink);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .product-price-row { padding: 5px 12px; border-top-color: #f6f7fa; }
    .product-price { font-size: 15px; font-weight: 600; }
    .buy-btn { font-size: 12px; padding: 5px 12px; }
    .product-meta {
        gap: 22px;
        padding: 10px 12px 12px;
        font-size: 12px; color: var(--meta);
        border-top-color: #f6f7fa;
    }
    .product-meta b { color: var(--meta); }
    .meta-sep { display: none; }

    /* 教程卡：4:3 封面 + 双行标题 + 三项统计 + 作者行 */
    .article-grid, .archive-body .article-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .article-thumb { aspect-ratio: 190 / 143; }
    .article-info { padding: 0; }
    .article-info h3 {
        margin: 6px 16px 0;
        font-size: 14px; font-weight: 400; color: var(--ink); line-height: 1.55;
        min-height: 2.7em;
    }
    .article-stats { gap: 15px; margin: 5px 16px 0; font-size: 13px; color: var(--stats); }
    .article-excerpt { margin: 5px 16px 0; font-size: 12px; line-height: 1.6; }
    .article-stats svg { width: 16px; height: 16px; stroke-width: 1.6; }
    .article-foot { margin-top: 8px; padding: 8px 16px 10px; }
    .article-author { font-size: 12px; color: var(--muted); gap: 7px; }
    .article-author img { width: 20px; height: 20px; }
    .cube-avatar { width: 20px; height: 20px; }
    .article-foot time { font-size: 12px; color: var(--muted); }
    /* 相关推荐：手机端只保留一排，左右滑动查看 */
    .related-section .article-grid,
    .related-section .product-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -6px;
        margin-right: -6px;
        padding: 0 6px 2px;
    }
    .related-section .article-grid::-webkit-scrollbar,
    .related-section .product-grid::-webkit-scrollbar { display: none; }
    .related-section .article-grid > *,
    .related-section .product-grid > * {
        flex: 0 0 42vw;
        width: 42vw;
        max-width: 42vw;
    }

    /* 底栏：55px 高，中央 40px 蓝色圆角方块 + 加号 */
    .mobile-tabbar { padding: 5px 5px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 10px rgba(22,23,47,.06); }
    .mobile-tabbar a.tab-item { gap: 2px; font-size: 12px; color: var(--ink-2); padding: 2px 0; }
    .mobile-tabbar a.tab-item svg { width: 23px; height: 23px; }
    .mobile-tabbar a.tab-item .tab-ico { width: 23px; height: 23px; }
    .mobile-tabbar a.tab-item [class^="ri-"] { font-size: 23px; }
    .tab-center { width: 40px; height: 40px; margin: 0 4px; border-radius: 13px; background: var(--primary); box-shadow: none; }
    .tab-center svg { width: 22px; height: 22px; }

    .footer-simple { padding: 22px 16px 24px; font-size: 13px; line-height: 1.9; color: var(--muted); }

    .comment-fields { grid-template-columns: 1fr; }
    .product-hero-actions { flex-direction: column; }
    .product-hero-actions .buy-btn.big, .product-hero-actions .ghost-btn { text-align: center; }

    /* 作者卡片：手机端收紧间距，保证「TA 的文章」按钮单行显示 */
    .author-box { gap: 12px; padding: 16px; }
    .author-box img { width: 46px; height: 46px; }
    .author-box > div { min-width: 0; }
    .author-box b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .author-box .ghost-btn { padding: 8px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ============================================================
 * 奇营主题 v1.3 新增：公告条 / 页脚栏目 / 友情链接 / 广告位 / 悬浮分享
 * ========================================================== */

/* ---------- 顶部公告条（位于导航栏下方，并整体下移页面内容） ---------- */
body.qy-has-notice { --header-h: 104px; }
.qy-notice {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34px;
    background: linear-gradient(90deg, var(--primary), #4d94ff);
    color: #fff;
    font-size: 13px;
}
.qy-notice-in { display: flex; align-items: center; gap: 10px; height: 34px; }
.qy-notice-icon { width: 16px; height: 16px; flex: none; opacity: .95; }
.qy-notice-text {
    flex: 1; min-width: 0; color: #fff;
    white-space: nowrap; overflow: hidden;
}
/* 公告文字横向滚动，悬停暂停 */
.qy-notice-marquee {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    animation: qy-notice-scroll 14s linear infinite;
    will-change: transform;
}
.qy-notice-text:hover .qy-notice-marquee { animation-play-state: paused; }
@keyframes qy-notice-scroll {
    to { transform: translateX(-100%); }
}
a.qy-notice-text:hover { text-decoration: underline; }
.qy-notice-close {
    flex: none; width: 22px; height: 22px;
    display: grid; place-items: center;
    color: #fff; opacity: .8; border-radius: 50%;
}
.qy-notice-close:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.qy-notice-close svg { width: 13px; height: 13px; }

/* ---------- LOGO 副标题 ---------- */
.logo-sub {
    font-size: 12.5px; color: var(--muted);
    padding-left: 10px; margin-left: 2px;
    border-left: 1px solid var(--line);
    white-space: nowrap;
}

/* ---------- 登录入口：图标模式 ---------- */
.header-service.header-admin-icon { display: grid; place-items: center; }
body.qy-auth-icon .header-service { display: grid; place-items: center; }
body.qy-auth-icon .header-login,
body.qy-auth-icon .header-register { display: none; }

/* ---------- 自定义素材横幅：仅保留搜索框 ---------- */
.hero-overlay.is-search-only { align-items: flex-end; padding-bottom: 34px; }

/* ---------- 广告位 ---------- */
.qy-ad { margin: 16px auto; text-align: center; }
.qy-ad img, .qy-ad iframe { margin: 0 auto; }
.qy-ad-header { margin: 0; padding: 10px 0; background: #fff; border-bottom: 1px solid var(--line); }
.qy-ad-footer { margin: 0; padding: 18px 0; }
.qy-ad-article-top { margin: 4px 0 20px; }
.qy-ad-article-bottom { margin: 22px 0 4px; }

/* ---------- 文章声明 ---------- */
.post-copyright {
    margin-top: 26px; padding: 18px 20px;
    background: linear-gradient(180deg, #f6f9ff, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.post-copyright .pc-title {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    font-size: 15px; font-weight: 600; color: var(--ink);
}
.post-copyright .pc-title svg { width: 17px; height: 17px; color: var(--primary); }
.post-copyright ul { margin: 0; padding: 0; list-style: none; }
.post-copyright li {
    display: flex; gap: 14px; padding: 8px 0;
    font-size: 13.5px; line-height: 1.7;
}
.post-copyright li + li { border-top: 1px dashed var(--line); }
.post-copyright li b { flex: none; width: 62px; font-weight: 500; color: var(--muted); }
.post-copyright li span { color: var(--ink-2); word-break: break-all; }
.post-copyright li .pc-link { color: var(--primary); }

/* ---------- 上一篇 / 下一篇 ---------- */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.post-nav-item {
    display: flex; align-items: center; gap: 14px;
    min-width: 0; padding: 14px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.post-nav-item:only-child { grid-column: 1 / -1; }
.post-nav-item:hover { border-color: var(--primary); box-shadow: 0 10px 24px rgba(47, 125, 255, .12); transform: translateY(-2px); }
.post-nav-thumb { flex: none; width: 86px; height: 62px; border-radius: var(--radius); object-fit: cover; background: #eef1f6; }
.post-nav-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.post-nav-label { font-size: 12px; color: var(--muted); transition: color .2s; }
.post-nav-item:hover .post-nav-label { color: var(--primary); }
.post-nav-item.is-prev .post-nav-label::before { content: "← "; }
.post-nav-item.is-next .post-nav-label::after { content: " →"; }
.post-nav-title {
    font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-nav-item.is-next { flex-direction: row-reverse; text-align: right; }
@media (max-width: 767px) {
    .post-nav { grid-template-columns: 1fr; gap: 10px; }
    .post-nav-thumb { width: 76px; height: 56px; }
}

/* ---------- 悬浮分享按钮 ---------- */
.qy-share {
    position: fixed; right: 20px; bottom: 140px; z-index: 90;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: #fff; border-radius: 50%;
    box-shadow: var(--shadow); color: var(--ink-2);
    transition: .25s;
}
.qy-share:hover { background: var(--primary); color: #fff; }
.qy-share svg { width: 19px; height: 19px; }

/* ---------- 轻提示 ---------- */
.qy-toast {
    position: fixed; left: 50%; bottom: 90px; z-index: 2000;
    transform: translate(-50%, 10px);
    padding: 9px 18px; border-radius: 20px;
    background: rgba(29, 33, 41, .88); color: #fff;
    font-size: 13px; opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.qy-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 页脚栏目 ---------- */
.footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 30px;
    padding: 38px 20px 30px;
}
.footer-col h4 { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul a { font-size: 13.5px; color: #6b7180; }
.footer-col ul a:hover { color: var(--primary); }
.footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.footer-logo span { font-size: 18px; font-weight: 600; color: var(--ink); }
.footer-desc { font-size: 13.5px; line-height: 1.85; color: #6b7180; max-width: 340px; }
.footer-extra { text-align: center; }
.footer-extra img { max-height: 120px; margin: 0 auto; }
.site-footer .footer-cols + .footer-simple { border-top: 1px solid var(--line); }

/* ---------- 友情链接 ---------- */
.qy-links { margin-top: 30px; }
.qy-links-title {
    font-size: 15px; font-weight: 600; color: var(--ink);
    margin-bottom: 16px; padding-left: 11px;
    border-left: 4px solid var(--primary);
}
.qy-links-list { display: flex; flex-wrap: wrap; gap: 10px; }
.qy-links-list a {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 16px; background: #fff;
    border: 1px solid var(--line); border-radius: 20px;
    font-size: 13px; color: var(--ink-2);
    transition: .2s;
}
.qy-links-list a:hover { border-color: var(--primary); color: var(--primary); }
.qy-links-list img { width: 16px; height: 16px; border-radius: 4px; }

/* ---------- 评论头像尺寸（由「评论设置 → 评论头像尺寸」决定） ---------- */
.comment-avatar img { width: var(--cs, 44px); height: var(--cs, 44px); border-radius: 50%; }

/* ================= 产品直接购买弹窗 ================= */
.qy-buy-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.qy-buy-modal[hidden] { display: none; }
.qy-buy-mask { position: absolute; inset: 0; background: rgba(20, 24, 35, .5); backdrop-filter: blur(3px); }
.qy-buy-dialog {
    position: relative; width: min(440px, 100%); max-height: 90vh; overflow-y: auto;
    background: var(--card); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(22, 23, 47, .25);
}
.qy-buy-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 16px;
}
.qy-buy-x {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
    color: var(--muted); border-radius: 8px; transition: .2s;
}
.qy-buy-x:hover { background: var(--bg); color: var(--ink); }
.qy-buy-x svg { width: 15px; height: 15px; }
.qy-buy-main { padding: 16px 18px 6px; }
.qy-buy-prod { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.qy-buy-prod img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.qy-buy-prod-info { min-width: 0; }
.qy-buy-prod-info b {
    display: block; font-size: 14.5px; color: var(--ink); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qy-buy-unit { display: inline-block; margin-top: 5px; color: var(--price); font-weight: 600; font-size: 16px; }
.qy-buy-row { margin-bottom: 15px; }
.qy-buy-label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.qy-buy-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.qy-buy-spec {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 88px; padding: 8px 14px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
    font-size: 13.5px; color: var(--ink-2); transition: .18s;
}
.qy-buy-spec small { font-size: 12px; color: var(--muted); }
.qy-buy-spec:hover:not(:disabled) { border-color: var(--primary); }
.qy-buy-spec.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.qy-buy-spec.on small { color: var(--primary); }
.qy-buy-spec:disabled { cursor: not-allowed; opacity: .5; }
.qy-buy-spec em {
    position: absolute; top: -7px; right: -6px; font-style: normal;
    font-size: 10.5px; line-height: 1; padding: 3px 6px; border-radius: 8px;
    background: var(--stats); color: #fff;
}
.qy-buy-qty { display: flex; align-items: center; gap: 0; }
.qy-buy-qty button {
    width: 34px; height: 34px; border: 1px solid var(--line); background: var(--bg);
    font-size: 16px; color: var(--ink-2); cursor: pointer; transition: .18s;
}
.qy-buy-qty button:hover { border-color: var(--primary); color: var(--primary); }
.qy-buy-qty .qy-buy-minus { border-radius: 8px 0 0 8px; }
.qy-buy-qty .qy-buy-plus { border-radius: 0 8px 8px 0; }
.qy-buy-qty .qy-buy-num {
    width: 52px; height: 34px; border: 1px solid var(--line); border-left: 0; border-right: 0;
    text-align: center; font-size: 14px; color: var(--ink); outline: none; background: #fff;
}
.qy-buy-stock { margin-left: 10px; font-size: 12.5px; color: var(--muted); }
.qy-buy-contact {
    width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
    border: 1.5px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink);
    outline: none; transition: .18s; background: #fff;
}
.qy-buy-contact:focus { border-color: var(--primary); }
.qy-buy-methods { display: flex; flex-direction: column; gap: 8px; }
.qy-buy-methods label {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer;
    border: 1.5px solid var(--line); border-radius: 8px; font-size: 13.5px; color: var(--ink-2); transition: .18s;
}
.qy-buy-methods label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.qy-buy-methods input { accent-color: var(--primary); margin: 0; }
.qy-buy-msg { min-height: 18px; font-size: 13px; color: #e6432d; }
.qy-buy-msg.success { color: #18a058; }
.qy-buy-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-top: 1px solid var(--line);
}
.qy-buy-total { font-size: 13.5px; color: var(--muted); }
.qy-buy-total b { color: var(--price); font-size: 20px; font-weight: 600; margin-left: 2px; }
.qy-buy-foot .buy-btn { flex-shrink: 0; }
.qy-buy-done { padding: 40px 24px 34px; text-align: center; }
.qy-buy-done-icon { width: 56px; height: 56px; color: #18a058; margin-bottom: 12px; }
.qy-buy-done strong { display: block; font-size: 18px; color: var(--ink); margin-bottom: 10px; }
.qy-buy-done p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 8px; }
.qy-buy-done-no { color: var(--muted); font-size: 12.5px; }
.qy-buy-done .buy-btn { margin-top: 18px; }

@media (max-width: 860px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 20px 22px; }
    .footer-col.footer-brand { grid-column: 1 / -1; }
    .qy-share { bottom: 120px; right: 12px; width: 38px; height: 38px; }
    .qy-notice { font-size: 12.5px; }
    .logo-sub { display: none; }
    .qy-buy-modal { align-items: flex-end; padding: 0; }
    .qy-buy-dialog { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
}

/* ---------- 文章图片灯箱（点击放大） ---------- */
.qy-zoomable { cursor: zoom-in; }

.qy-viewer {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(11, 13, 19, .93);
    opacity: 0; transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: contain;
}
.qy-viewer[hidden] { display: none; }
.qy-viewer.is-open { opacity: 1; }

.qy-viewer-stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    opacity: 0; transform: scale(.97);
    transition: opacity .24s ease, transform .24s ease;
    touch-action: none;
    cursor: zoom-out;
}
.qy-viewer.is-open .qy-viewer-stage { opacity: 1; transform: scale(1); }
.qy-viewer.is-zoomed .qy-viewer-stage { cursor: grab; }
.qy-viewer.is-dragging .qy-viewer-stage { cursor: grabbing; }

.qy-viewer-img {
    max-width: 94vw; max-height: 86vh;
    margin: 0; border-radius: 2px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    transform-origin: center center;
    transition: transform .22s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}
.qy-viewer.is-live .qy-viewer-img { transition: none; }

/* 顶部工具条 */
.qy-viewer-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 16px;
    background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.qy-viewer-bar > * { pointer-events: auto; }
.qy-viewer-count {
    color: rgba(255, 255, 255, .72); font-size: 13px;
    font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.qy-viewer-tools { display: flex; align-items: center; gap: 8px; }
.qy-viewer-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: #fff; background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .18s, transform .18s;
}
.qy-viewer-btn:hover { background: rgba(255, 255, 255, .26); }
.qy-viewer-btn:active { transform: scale(.92); }
.qy-viewer-btn svg { width: 18px; height: 18px; }

/* 左右切换 */
.qy-viewer-nav {
    position: absolute; top: 50%; z-index: 2;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: #fff; background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .18s, transform .18s;
}
.qy-viewer-nav:hover { background: rgba(255, 255, 255, .26); }
.qy-viewer-nav.prev { left: 16px; }
.qy-viewer-nav.next { right: 16px; }
.qy-viewer-nav[hidden] { display: none; }
.qy-viewer-nav svg { width: 20px; height: 20px; }

/* 底部说明 */
.qy-viewer-caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 22px 76px 20px; text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
    pointer-events: none;
    opacity: 0; transition: opacity .24s ease;
}
.qy-viewer-caption.show { opacity: 1; }
.qy-viewer-alt { color: rgba(255, 255, 255, .9); font-size: 13.5px; line-height: 1.6; margin-bottom: 4px; }
.qy-viewer-hint { color: rgba(255, 255, 255, .5); font-size: 12px; }

body.qy-viewer-lock { overflow: hidden; }

@media (max-width: 860px) {
    .qy-viewer-img { max-width: 100vw; max-height: 80vh; border-radius: 0; }
    .qy-viewer-nav { width: 38px; height: 38px; }
    .qy-viewer-nav.prev { left: 8px; }
    .qy-viewer-nav.next { right: 8px; }
    .qy-viewer-caption { padding: 18px 20px 26px; }
    .qy-viewer-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .qy-viewer, .qy-viewer-stage, .qy-viewer-img, .qy-viewer-caption { transition: none; }
    .qy-viewer:not(.is-open) .qy-viewer-stage { transform: none; }
}

/* ================= 首屏加载动效（4 种样式可切换） =================
 * 开关与样式：后台「外观设置 → 加载动效」（loadAniEnable / loadAniStyle / loadAniRepeat）。
 * 门控：<html> 上的 qy-loading 由 header.php 内联脚本添加（?qy_boot=1 强制预览）。
 * 样式：tiles 拆片拼合 / ripple 涟漪脉冲 / orbit 光环环绕 / dots 三点跳动。
 * 关闭开关或禁用 JS 时不渲染任何节点，页面不受影响。
 */
.qy-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    /* 兜底：主脚本未接管时 2.8s 自动退场，避免白屏卡死 */
    animation: qy-pre-guard .1s linear 2.8s forwards;
}
html.qy-loading .qy-preloader { display: flex; }

@keyframes qy-pre-guard {
    0%, 99% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; }
}

.qy-pre-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    transition: transform .44s ease;
}
.qy-preloader.is-done .qy-pre-inner { transform: translateY(-10px); }

/* 舞台：logo 与各样式装饰件共用的定位容器 */
.qy-pre-stage { position: relative; width: 132px; height: 132px; }
.qy-pre-mark { position: absolute; inset: 0; }

/* 背后的柔光：拼合完成后缓慢呼吸 */
.qy-pre-glow {
    position: absolute;
    inset: -26%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 125, 255, .16) 0%, rgba(47, 125, 255, .06) 45%, rgba(47, 125, 255, 0) 72%);
    animation: qy-pre-glow 2.6s ease-in-out .7s infinite;
}
@keyframes qy-pre-glow {
    0%, 100% { opacity: .3; transform: scale(.92); }
    50%      { opacity: 1;  transform: scale(1.06); }
}

/* logo 图片层：tiles 样式切成四块分别飞入，其余样式整图淡入 */
.qy-pre-tile {
    position: absolute;
    inset: 0;
    background: url(../img/logo-qy.png) center / contain no-repeat;
}

/* 非 tiles 样式：只留一张整图，上浮淡入 */
.qy-preloader:not([data-style="tiles"]) .qy-pre-tile { display: none; }
.qy-preloader:not([data-style="tiles"]) .qy-pre-tile.t1 {
    display: block;
    animation: qy-pre-rise .58s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes qy-pre-rise {
    from { opacity: 0; transform: translateY(8px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

/* ============ 样式一：拆片拼合（LOGO 四分块对角飞入） ============ */
.qy-preloader[data-style="tiles"] .qy-pre-tile {
    opacity: 0;
    animation: qy-pre-tile .74s cubic-bezier(.2, .72, .26, 1) both;
}
.qy-preloader[data-style="tiles"] .qy-pre-tile.t1 { clip-path: inset(0 50% 50% 0); -webkit-clip-path: inset(0 50% 50% 0); --tx: -20px; --ty: -20px; animation-delay: .05s; }
.qy-preloader[data-style="tiles"] .qy-pre-tile.t2 { clip-path: inset(0 0 50% 50%); -webkit-clip-path: inset(0 0 50% 50%); --tx:  20px; --ty: -20px; animation-delay: .13s; }
.qy-preloader[data-style="tiles"] .qy-pre-tile.t3 { clip-path: inset(50% 50% 0 0); -webkit-clip-path: inset(50% 50% 0 0); --tx: -20px; --ty:  20px; animation-delay: .13s; }
.qy-preloader[data-style="tiles"] .qy-pre-tile.t4 { clip-path: inset(50% 0 0 50%); -webkit-clip-path: inset(50% 0 0 50%); --tx:  20px; --ty:  20px; animation-delay: .21s; }

@keyframes qy-pre-tile {
    0%   { opacity: 0; transform: translate3d(var(--tx), var(--ty), 0) scale(.92); }
    30%  { opacity: 1; }
    70%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1.04); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ============ 样式二：涟漪脉冲（参考 Joe loading-49 的放大淡出） ============ */
.qy-pre-ripple {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    border: 2px solid rgba(47, 125, 255, .38);
    opacity: 0;
}
.qy-preloader[data-style="ripple"] .qy-pre-ripple {
    animation: qy-pre-ripple 2.1s cubic-bezier(.2, .55, .3, 1) infinite;
}
.qy-preloader[data-style="ripple"] .qy-pre-ripple.r2 { animation-delay: 1.05s; }
@keyframes qy-pre-ripple {
    0%   { opacity: .6; transform: scale(.6); }
    100% { opacity: 0;  transform: scale(1.8); }
}

/* ============ 样式三：光环环绕（外圈蓝橙弧线旋转） ============ */
.qy-pre-orbit {
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    border: 3px solid rgba(47, 125, 255, .14);
    opacity: 0;
}
.qy-preloader[data-style="orbit"] .qy-pre-orbit {
    opacity: 1;
    border-top-color: var(--primary);
    border-right-color: #f7a35c;
    animation: qy-pre-spin .95s linear infinite;
}
@keyframes qy-pre-spin { to { transform: rotate(360deg); } }

/* ============ 样式四：三点跳动（无 LOGO，纯圆点波浪，最轻量） ============ */
.qy-pre-dots {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 13px;
}
.qy-preloader[data-style="dots"] .qy-pre-mark { display: none; }
.qy-preloader[data-style="dots"] .qy-pre-dots { display: flex; }
.qy-pre-dots i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--primary);
    animation: qy-pre-dot 1.15s ease-in-out infinite;
}
.qy-pre-dots i:nth-child(2) { background: #4cb4ff; animation-delay: .16s; }
.qy-pre-dots i:nth-child(3) { background: #ff8a1f; animation-delay: .32s; }
@keyframes qy-pre-dot {
    0%, 55%, 100% { transform: translateY(0) scale(.78); opacity: .4; }
    28%           { transform: translateY(-16px) scale(1); opacity: 1; }
}

/* 进度条：取 logo 的蓝橙做渐变，收尾由脚本补满 */
.qy-pre-bar {
    position: relative;
    width: 136px;
    height: 3px;
    border-radius: 3px;
    background: #eef1f6;
    overflow: hidden;
}
.qy-pre-bar i {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #7fb3ff, var(--primary) 60%, #f7a35c);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: qy-pre-bar 1.4s cubic-bezier(.3, .08, .2, 1) .28s forwards;
}
@keyframes qy-pre-bar {
    0%   { transform: scaleX(.05); }
    55%  { transform: scaleX(.56); }
    100% { transform: scaleX(.86); }
}

/* 退场 */
.qy-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    transition: opacity .44s ease, visibility .44s;
}

@media (max-width: 480px) {
    .qy-pre-stage { width: 112px; height: 112px; }
    .qy-pre-inner { gap: 24px; }
    .qy-pre-dots { gap: 11px; }
    .qy-pre-dots i { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .qy-preloader { display: none !important; }
}

/* ============================================================
 * 有光社区风格：瀑布流文章列表
 * 后台「外观设置 → 主题样式 → 文章列表展示风格」切换后生效
 * 封面不裁切，按图片 / 视频原始宽高比展示，卡片高度自然错落
 * ========================================================== */
.article-grid.qy-waterfall {
    display: block;
    column-count: 3;
    column-gap: 18px;
}
.article-grid.qy-waterfall .article-card {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}
.article-grid.qy-waterfall .article-thumb {
    aspect-ratio: auto;
    height: auto;
    background: #eef2f8;
}
.article-grid.qy-waterfall .article-thumb img,
.article-grid.qy-waterfall .article-thumb video {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.article-grid.qy-waterfall .article-info h3 { min-height: 0; }
.article-grid.qy-waterfall .article-excerpt { display: none; }
.article-grid.qy-waterfall .article-card:hover { transform: none; }

@media (max-width: 900px) {
    .article-grid.qy-waterfall { column-count: 2; column-gap: 12px; }
    .article-grid.qy-waterfall .article-card { margin-bottom: 12px; }
}

@media (max-width: 767px) {
    .article-grid.qy-waterfall { column-count: 2; column-gap: 8px; }
    .article-grid.qy-waterfall .article-card { margin-bottom: 8px; }
}

/* ============================================================
 * v1.6 视觉柔和化层
 * 目标：中性底色 + 柔和层级；大圆角卡片、发丝边框、双层超柔阴影，
 *       蓝色只作强调。只动外观，不改结构、脚本与数据。
 * 提示：后台「主题样式」若单独设置过主色 / 圆角，其内联值优先；
 *       本层用具体选择器保证主要卡片的圆角与阴影仍然生效。
 * ========================================================== */

:root {
    --primary-soft: #edf4ff;
    --price: #ef5b4c;
    --ink: #20232b;
    --ink-2: #4b5363;
    --muted: #8b91a1;
    --stats: #a7adba;
    --meta: #a7adba;
    --line: #eef0f4;
    --bg: #f6f7f9;
    --card: #ffffff;
    --hairline: var(--line);
    --shadow: 0 1px 2px rgba(24, 28, 40, .04), 0 6px 20px rgba(24, 28, 40, .05);
    --shadow-hover: 0 2px 8px rgba(24, 28, 40, .06), 0 18px 40px rgba(24, 28, 40, .09);
    --radius: 14px;
    --radius-lg: 24px;
}

::selection { background: #e4edfd; color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #dfe3ea;
    border: 3px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #cbd1db; background-clip: content-box; }

a:focus-visible,
button:focus-visible,
.buy-btn:focus-visible,
.ghost-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- 顶栏：发丝分隔 + 更轻的毛玻璃 ---------- */
.site-header {
    background: rgba(255, 255, 255, .84);
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .95);
    border-bottom-color: var(--line);
}
.logo-text { font-weight: 600; letter-spacing: -.01em; }
.logo-sub { color: var(--muted); }

/* 导航：由下划线改为柔和胶囊 */
.main-nav a { font-size: 15px; font-weight: 500; padding: 8px 15px; border-radius: var(--radius-pill); color: var(--ink-2); }
.main-nav a::before { display: none; }
.main-nav a:hover { background: #f3f5f8; color: var(--ink); }
.main-nav a.active { background: var(--primary-soft); color: var(--primary); }
.main-nav .sub-menu {
    border-radius: 16px;
    border-color: var(--hairline);
    box-shadow: 0 14px 34px -18px rgba(24, 28, 40, .28);
    padding: 7px;
}
.main-nav .sub-menu a:hover { background: #f4f6fa; color: var(--ink); }
.main-nav .sub-menu a.active { background: var(--primary-soft); color: var(--primary); }

.header-search form { background: #f2f4f8; border: 1px solid transparent; }
.header-search form:focus-within {
    background: #fff;
    border-color: var(--line-2);
    box-shadow: 0 8px 22px -12px rgba(24, 28, 40, .22);
}
.header-search form button { background: var(--primary-soft); color: var(--primary); transition: background .2s, color .2s; }
.header-search form button:hover { background: var(--primary); color: #fff; }
.header-search .search-icon,
.header-service { color: var(--ink-2); }
.header-login { color: var(--ink-2); }
.header-register { border-radius: var(--radius-pill); padding: 9px 18px; font-weight: 500; }
.nav-toggle { border-radius: 12px; background: #f3f5f8; }

/* ---------- 首屏横幅：降低蓝色浓度 ---------- */
.hero { background: #f4f6fa; }
.hero-slide-default {
    background:
        radial-gradient(720px 380px at 86% 10%, rgba(47, 125, 255, .13), transparent 62%),
        radial-gradient(620px 460px at 10% 94%, rgba(120, 170, 255, .10), transparent 60%),
        linear-gradient(120deg, #f8fafd 0%, #fcfdfe 55%, #f2f7fd 100%);
}
.hero-slide-default::before { opacity: .5; }
.hsd-pill {
    background: #fff;
    color: var(--primary);
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px -12px rgba(20, 50, 120, .38);
}
.hsd-text h2, .hero-overlay h1 { font-weight: 600; letter-spacing: -.02em; }
.hero-overlay h1 { text-shadow: 0 2px 22px rgba(0, 24, 80, .22); }
.hero-search {
    border-radius: var(--radius-pill);
    box-shadow: 0 18px 40px -24px rgba(20, 40, 80, .45);
}
.hero-search button { border-radius: var(--radius-pill); font-weight: 500; }
.hero-dots button { background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(17, 24, 39, .10); }
.hero-dots button.active { background: var(--primary); box-shadow: 0 0 0 1px rgba(47, 125, 255, .18); }

/* ---------- 首页主体 ---------- */
.home-body { padding-bottom: 48px; }
.quick-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px -26px rgba(24, 28, 40, .30);
}
.quick-cat { border-radius: var(--radius); color: var(--ink-2); }
.quick-cat:hover { background: #f5f7fa; }
.quick-slider-wrap { border-top: 1px solid var(--line); }

.slide-card { border-radius: var(--radius); }
.hot-slide { border-radius: var(--radius); }
.carousel-btn { box-shadow: 0 8px 24px -14px rgba(24, 28, 40, .30); }

.section-title h2 { font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.section-more { color: var(--muted); }
.section-more:hover { color: var(--primary); }

/* 通用卡片底座（此前 .card 没有基础样式，这里补齐） */
.card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* 产品 / 教程卡片 */
.product-card,
.article-card {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.product-card:hover,
.article-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--shadow-hover);
}
.product-thumb,
.article-thumb { background: #f2f5f9; }
.product-title { color: var(--ink); }
.product-price-row,
.product-meta { border-top-color: var(--line); }
.product-price { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.product-meta { color: var(--meta); }
.product-meta b { color: var(--meta); }
.meta-sep { background: var(--line-2); }

.buy-btn {
    border-radius: var(--radius-pill);
    padding: 7px 18px;
    font-weight: 500;
    letter-spacing: .01em;
}
.buy-btn.big { border-radius: var(--radius-pill); padding: 13px 42px; font-weight: 500; }
.ghost-btn {
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
    background: #fff;
    font-weight: 500;
    transition: color .2s, border-color .2s, background .2s;
}
.ghost-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* ---------- 归档页 ---------- */
.archive-head {
    background: #fbfcfd;
    border-bottom: 1px solid var(--line);
    padding: 48px 0 36px;
}
.archive-head h1 { font-weight: 600; letter-spacing: -.01em; }
.archive-head p { margin-top: 10px; color: var(--muted); }
.archive-body { padding-top: 28px; padding-bottom: 60px; }

.pager-in span, .pager-in a {
    min-width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    box-shadow: none;
    background: #fff;
    color: var(--ink-2);
}
.pager-in a:hover { border-color: var(--line-2); background: #f5f7fa; color: var(--ink); }
.pager-in .current { border-color: transparent; background: var(--primary); color: #fff; }

.empty-card { border-radius: var(--radius-lg); padding: 64px 30px; }
.empty-card h2 { font-size: 20px; font-weight: 600; }

/* ---------- 详情页 ---------- */
.product-hero { border-radius: var(--radius-lg); }
.product-hero-thumb { border-radius: var(--radius); }
.product-hero-info h1 { font-weight: 600; letter-spacing: -.01em; }
.product-hero-price b { color: var(--price); font-weight: 600; }
.product-hero-meta { color: var(--muted); }

.post-card { border-radius: var(--radius-lg); }
.post-card-title { border-left: 0; font-size: 17px; font-weight: 600; padding-left: 0; }
.post-card-title::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--primary);
}
.post-title { font-weight: 600; letter-spacing: -.01em; }
.post-meta { border-bottom: 1px solid var(--line); }
.post-author { color: var(--ink-2); font-weight: 500; }

.post-content blockquote {
    background: #f7f8fa;
    border-left: 3px solid var(--line-2);
    border-radius: var(--radius);
    padding: 16px 20px;
    color: var(--ink-2);
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 { font-weight: 600; }
.post-content h2 {
    border-left: 0;
    padding-left: 0;
}
.post-content h2::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    border-radius: 50%;
    background: var(--primary);
}
.post-content img,
.post-content video,
.post-content iframe { border-radius: var(--radius); }
.post-content code { border-radius: 7px; }
.post-content pre { border-radius: var(--radius); }
.post-content table { border-radius: var(--radius); overflow: hidden; }

.post-tags a { border-radius: var(--radius-pill); background: #f4f5f8; padding: 5px 14px; }
.post-tags a:hover { background: var(--primary-soft); color: var(--primary); }

.author-box {
    background: #f8f9fb;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}
.related-section { margin-top: 34px; }

/* ---------- 评论 ---------- */
.comments-card { border-radius: var(--radius-lg); }
.comments-head { font-size: 16.5px; font-weight: 600; border-bottom: 1px solid var(--line); }
.comment-body { border-bottom: 1px solid var(--line); }
.comment-author { color: var(--muted); }
.comment-text { color: var(--ink); font-weight: 400; }
.comment-quote { background: #f7f8fa; border-radius: 12px; }
.comment-meta { color: var(--muted); }
.cmt-reply:hover { background: var(--bg); }
.respond { border-top: 1px solid var(--line); }
.comment-form input,
.comment-form textarea {
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f5f6f9;
}
.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--line-2);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(47, 125, 255, .10);
}
.cf-send { border-radius: var(--radius-pill); font-weight: 500; padding: 0 20px; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-simple { color: var(--muted); font-size: 13.5px; line-height: 2; }
.footer-simple a { color: var(--muted); }
.footer-col h4 { font-weight: 600; }
.footer-cols { border-bottom: 1px solid var(--line); }

/* ---------- 移动端底栏 ---------- */
.mobile-tabbar {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 28px -22px rgba(24, 28, 40, .35);
}
.mobile-tabbar a.tab-item { color: #6f7684; }
.mobile-tabbar a.tab-item.active { color: var(--primary); }
.tab-center {
    border-radius: 15px;
    background: var(--primary);
    box-shadow: 0 8px 20px -10px rgba(47, 125, 255, .55);
}

/* ---------- 公告条：由整条蓝底改为浅色细条 ---------- */
.qy-notice {
    background: #f7f8fa;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}
.qy-notice-in,
.qy-notice-text { color: inherit; }
.qy-notice-icon { color: var(--primary); opacity: .9; }
.qy-notice-close { color: var(--muted); }
.qy-notice-close:hover { background: rgba(17, 24, 39, .06); color: var(--ink); }
a.qy-notice-text:hover { color: var(--primary); text-decoration: none; }

/* ---------- 其它细节 ---------- */
.qy-links-title { border-left: 0; padding-left: 0; font-weight: 600; }
.qy-links-title::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--primary);
}
.qy-links-list a { border-color: var(--hairline); border-radius: var(--radius-pill); background: #fff; box-shadow: none; }
.qy-ad-header { border-bottom: 1px solid var(--line); }
.qy-share, .back-top {
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow);
}
.qy-buy-dialog { border-radius: var(--radius-lg); box-shadow: 0 30px 70px -40px rgba(24, 28, 40, .45); }
.qy-buy-prod img,
.qy-buy-spec,
.qy-buy-contact,
.qy-buy-methods label { border-radius: 12px; }
.qy-buy-spec { border-width: 1px; }
.qy-buy-spec em { background: #eef0f4; color: #6b7280; }
.qy-buy-qty button { background: #f5f6f9; }
.qy-buy-qty .qy-buy-minus { border-radius: 12px 0 0 12px; }
.qy-buy-qty .qy-buy-plus { border-radius: 0 12px 12px 0; }
.qy-buy-qty .qy-buy-num { background: #fff; }
.qy-viewer-img { border-radius: 6px; }
.notfound-code { font-weight: 600; background: linear-gradient(120deg, var(--primary), #a9c9ff); -webkit-background-clip: text; background-clip: text; }

/* ---------- 桌面端尺寸微调（不影响移动端既有排版） ---------- */
@media (min-width: 861px) {
    .hsd-text h2 { font-size: 46px; }
    .hero-overlay h1 { font-size: 46px; }
    .hsd-pill { font-size: 14px; padding: 6px 18px; }
    .hsd-sub { font-size: 15px; letter-spacing: .2em; }
    .quick-card { margin-top: -84px; padding: 26px 30px 22px; }
    .home-section { margin-top: 40px; }
    .section-title h2 { font-size: 21px; }
    .product-title { padding: 13px 14px 6px; }
    .post-card { padding: 34px 36px 38px; }
    .post-title { font-size: 25px; }
    .product-hero { padding: 26px; }
    .comments-card { margin-top: 24px; padding: 0 26px 10px; }
}

/* ---------- 平板 / 手机端：保持原布局，只换质感 ---------- */
@media (max-width: 860px) {
    .hero { background: transparent; }
    .hero-slider { margin: 18px 8px 0; border-radius: 20px; }
    .hsd-text h2 { font-weight: 600; }

    .quick-card {
        margin: 14px 0 0;
        padding: 20px 10px 14px;
        border-radius: var(--radius-lg);
        box-shadow: 0 6px 22px -14px rgba(24, 28, 40, .28);
        border: 1px solid var(--line);
    }
    .quick-cat { border-radius: var(--radius); }
    .quick-cat:active { background: #f4f6fa; }
    .section-title h2 { font-size: 17px; font-weight: 600; color: var(--ink); }

    .post-card { padding: 26px 20px 28px; border-radius: var(--radius-lg); }
    .post-title { font-size: 21px; }
    .product-hero { padding: 18px; border-radius: var(--radius-lg); }
    .comments-card { padding: 0 18px 12px; }
    .qy-buy-dialog { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

    .mobile-user-card,
    .mobile-nav-group {
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
    }
}

@media (max-width: 767px) {
    .comments-card {
        margin: 10px -14px 0;
        padding: 4px 16px 16px;
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .hero-slider { margin: 16px 8px 0; border-radius: 18px; }
    .quick-card {
        margin: 12px 0 0;
        padding: 18px 8px 12px;
        border-radius: 18px;
    }
    .product-grid { gap: 10px; }
    .product-card, .article-card { border-radius: var(--radius); }
    .product-title { font-size: 14px; padding: 8px 12px; color: var(--ink); }
    .product-price-row { padding: 6px 12px 12px; }
    .product-price { font-size: 15px; }
    .buy-btn { padding: 5px 13px; font-size: 12px; }
    .buy-btn.big { padding: 12px 28px; font-size: 15px; }
    .product-meta { color: var(--meta); }
    .product-meta b { color: var(--meta); }
    .article-grid, .archive-body .article-grid { gap: 10px; }
    .section-title h2 { font-size: 17px; }
    .comments-card {
        margin: 10px -6px 0;
        padding: 4px 14px 16px;
        border-radius: 0;
    }
    .post-card { padding: 22px 18px 26px; border-radius: var(--radius-lg); }
    .tab-center {
        border-radius: 14px;
        background: var(--primary);
        box-shadow: 0 8px 18px -10px rgba(47, 125, 255, .5);
    }
    .footer-simple { color: var(--muted); }
}

/* ================= 顶部导航：项过多时折叠为「更多」 ================= */
.main-nav { min-width: 0; }
.main-nav .qy-nav-list { flex-wrap: nowrap; }
.main-nav .qy-nav-more > a { color: var(--ink-2); }
.main-nav .qy-nav-more .sub-menu { left: auto; right: 0; }
.main-nav .qy-nav-more .sub-menu .sub-menu { left: auto; right: calc(100% + 6px); }
.main-nav .qy-nav-more.is-open > a,
.main-nav .qy-nav-more:hover > a { color: var(--ink); background: #f2f4f8; }
.main-nav .qy-nav-more.is-open > a .nav-caret { opacity: 1; transform: rotate(225deg) translateY(-1px); }
.main-nav .qy-nav-more.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* ================= 站点侧边栏（复刻 dyjdyj 右侧栏 / 手机端左侧抽屉） ================= */
.side-toggle {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    color: var(--ink-2);
    border-radius: 50%;
    transition: background .2s, color .2s;
}
.side-toggle svg { width: 21px; height: 21px; }
.side-toggle:hover { background: #f2f4f8; color: var(--primary); }

.qy-side { display: none; }
.qy-side-mask {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 9998;
}
body.qy-side-open .qy-side-mask { opacity: 1; visibility: visible; }
body.qy-side-open { overflow: hidden; }

/* --- 抽屉态（窄屏） --- */
@media (max-width: 1279.98px) {
    .qy-side {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 300px; max-width: 84vw;
        padding: 14px 12px 24px;
        margin: 0;
        overflow-y: auto;
        background: #f7f9fc;
        box-shadow: 2px 0 24px rgba(15, 23, 42, .18);
        transform: translateX(-100%);
        transition: transform .34s cubic-bezier(.4, 0, .2, 1);
        z-index: 9999;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    .qy-side.is-open { transform: translateX(0); }
    .side-toggle { display: none; }
}

/* --- 常驻态（桌面：大屏横幅全宽，主内容在左、侧栏在右下方） --- */
@media (min-width: 1280px) {
    .site-main {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 28px;
        align-items: start;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--wrap-pad);
        padding-right: var(--wrap-pad);
    }
    .site-main > * { grid-column: 1; min-width: 0; }
    .site-main .wrap { max-width: none; padding-left: 0; padding-right: 0; }
    .site-header .wrap, .site-footer .wrap { max-width: 1400px; }
    .qy-links .wrap { max-width: 1400px; }

    /* 首页横幅占满整行，保持大屏背景观感 */
    body.is-home .site-main > .hero { grid-column: 1 / -1; grid-row: 1; }
    body.is-home .site-main > .hero .wrap { max-width: 1200px; margin: 0 auto; }

    .site-main > .qy-side {
        display: flex;
        flex-direction: column;
        gap: 14px;
        grid-column: 2;
        grid-row: 1 / span 40;
        align-self: start;
        position: sticky;
        top: calc(var(--header-h) + 14px);
        width: 300px;
        margin: 0;
        padding: 0;
        overflow: visible;
        background: transparent;
        border-left: 0;
        z-index: 20;
        box-sizing: border-box;
    }
    /* 首页：侧栏从横幅下方开始，接在主内容右侧 */
    body.is-home .site-main > .qy-side { grid-row: 2 / span 40; }

    .qy-side-head, .side-toggle, .qy-side-close, .qy-side-mask { display: none; }
}

/* --- 侧边栏头部 --- */
.qy-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 10px;
}
.qy-side-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.qy-side-close {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    color: var(--muted); border-radius: 8px;
}
.qy-side-close svg { width: 16px; height: 16px; }
.qy-side-close:hover { background: #eef1f6; color: var(--ink); }

/* --- 通用小卡片 --- */
.qy-widget {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.qy-widget-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px;
    font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.qy-widget-title svg { width: 17px; height: 17px; flex-shrink: 0; }
.qy-widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* --- 个人资料 --- */
.qy-side-profile { padding: 0 0 18px; text-align: center; overflow: hidden; }
.qy-profile-cover {
    height: 86px;
    background: linear-gradient(135deg, #2f7dff, #7ab0ff);
    background-size: cover; background-position: center;
}
.qy-profile-cover.is-plain { background: linear-gradient(135deg, #2f7dff, #8fc0ff); }
.qy-profile-avatar {
    width: 64px; height: 64px;
    margin: -32px auto 0;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
    overflow: hidden;
    display: grid; place-items: center;
    position: relative; z-index: 2;
}
.qy-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qy-profile-initial {
    font-size: 26px; font-weight: 700;
    color: var(--primary);
    background: linear-gradient(135deg, #eaf2ff, #fff);
    width: 100%; height: 100%;
    display: grid; place-items: center;
}
.qy-profile-name { margin: 10px 0 4px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.qy-profile-bio {
    margin: 0; padding: 0 18px;
    font-size: 12.5px; line-height: 1.7; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- 侧边栏顶部用户区 --- */
.qy-side-user { padding: 16px; }

/* 已登录：用户卡 */
.qy-su-head {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
}
.qy-su-avatar {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .14);
}
.qy-su-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qy-su-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qy-su-name {
    font-size: 15.5px; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qy-su-mail {
    font-size: 12px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qy-su-stats {
    margin-top: 12px;
    background: #f6f8fb;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.qy-su-stat {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--muted);
}
.qy-su-stat svg { width: 15px; height: 15px; color: #94a3b8; flex-shrink: 0; }
.qy-su-stat b { color: var(--primary); font-size: 14px; font-weight: 700; }
.qy-su-actions { margin-top: 12px; display: flex; gap: 10px; }
.qy-su-btn {
    flex: 1; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
    color: var(--ink); background: #eef1f6;
    text-decoration: none;
    transition: opacity .15s ease;
}
.qy-su-btn:hover { opacity: .85; }
.qy-su-btn.is-primary { color: #fff; background: linear-gradient(135deg, #2f7dff, #5a9bff); }

/* 游客：登录/注册/找回密码 */
.qy-su-hi { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); text-align: center; }
.qy-su-tip { margin: 4px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.qy-su-auth {
    margin-top: 14px;
    display: flex; justify-content: space-around;
}
.qy-su-auth-item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600;
    text-decoration: none;
}
.qy-su-auth-ico {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.qy-su-auth-ico svg { width: 21px; height: 21px; }
.qy-su-auth-item.is-blue  { color: #2f7dff; }
.qy-su-auth-item.is-blue  .qy-su-auth-ico { color: #2f7dff; background: #e6efff; }
.qy-su-auth-item.is-green { color: #16a34a; }
.qy-su-auth-item.is-green .qy-su-auth-ico { color: #16a34a; background: #e5f7ec; }
.qy-su-auth-item.is-pink  { color: #db2777; }
.qy-su-auth-item.is-pink  .qy-su-auth-ico { color: #db2777; background: #fce8f3; }
.qy-su-auth-item:active { opacity: .8; }

/* 用户区仅在手机端抽屉显示，桌面右侧栏不重复展示 */
@media (min-width: 1280px) {
    .qy-side-user { display: none; }
}

/* ================= QYTool 登录/注册弹层适配（插件样式后加载，需提权覆盖） ================= */
@media (max-width: 640px) {
    /* 顶部 tab 居中，间距拉开，手机上更稳 */
    #ptAuth .pt-auth-tabs { justify-content: center; gap: 40px; }
    /* 确保下划线以 tab 为定位基准（防止个别机型因定位上下文缺失导致横条跑偏） */
    #ptAuth .pt-auth-tab { position: relative; }
    /* 蓝色下划线改为固定宽度居中，避免按 tab 全宽渲染时出现偏移/歪斜 */
    #ptAuth .pt-auth-tab.active::after {
        left: 50%;
        right: auto;
        width: 22px;
        transform: translateX(-50%);
        border-radius: 99px;
    }
}

/* --- 人生倒计时 --- */
.qy-cd-list { display: flex; flex-direction: column; gap: 10px; }
.qy-cd-label { font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.qy-cd-label b { color: var(--ink); font-weight: 600; }
.qy-cd-row { display: flex; align-items: center; gap: 8px; }
.qy-cd-track { flex: 1; height: 6px; background: #eef1f6; border-radius: 99px; overflow: hidden; }
.qy-cd-track > i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--primary); transition: width .5s ease; }
.qy-cd-item:nth-child(2) .qy-cd-track > i { background: #10b981; }
.qy-cd-item:nth-child(3) .qy-cd-track > i { background: #f59e0b; }
.qy-cd-item:nth-child(4) .qy-cd-track > i { background: #8b5cf6; }
.qy-cd-pct { flex-shrink: 0; min-width: 34px; text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- 分类 --- */
.qy-side-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px; color: var(--ink-2);
    transition: background .2s, color .2s;
}
.qy-side-cats a:hover { background: #f5f8ff; color: var(--primary); }
.qy-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qy-cat-count {
    flex-shrink: 0;
    min-width: 24px; height: 20px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--muted);
    background: #f2f4f8; border-radius: 99px;
}

/* 分类两级：一级行 = 链接 + 展开按钮，二级缩进挂在下方 */
.qy-side-cats > .qy-cat-item {
    display: grid;
    grid-template-columns: 1fr 24px;
    align-items: center;
}
.qy-side-cats > .qy-cat-item > a { grid-column: 1; padding-right: 6px; }
/* 无子分类的一级项不预留箭头列 */
.qy-side-cats > .qy-cat-item:not(.qy-cat-has-sub) { display: block; }
.qy-side-cats > .qy-cat-item:not(.qy-cat-has-sub) > a { padding-right: 10px; }
.qy-cat-toggle {
    grid-column: 2;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    color: var(--muted);
    border-radius: 7px;
    transition: background .2s, color .2s;
}
.qy-cat-toggle:hover { color: var(--ink-2); background: #f2f4f8; }
.qy-cat-toggle svg { width: 14px; height: 14px; transform: rotate(180deg); transition: transform .22s var(--ease); }
.qy-cat-item.is-collapsed .qy-cat-toggle svg { transform: rotate(0deg); }

.qy-cat-sub {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    margin: 1px 0 3px 10px;
    padding-left: 8px;
    border-left: 2px solid #eef1f6;
}
.qy-cat-item.is-collapsed .qy-cat-sub { display: none; }
.qy-cat-sub a { padding: 6px 10px; font-size: 13px; }
.qy-cat-sub .qy-cat-count { min-width: 20px; height: 18px; font-size: 10.5px; }

/* --- 热门文章 --- */
.qy-side-hot a { display: flex; align-items: center; gap: 9px; padding: 2px 0; }
.qy-hot-badge {
    flex-shrink: 0;
    min-width: 40px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; color: #fff;
    background: #94a3b8; border-radius: 5px;
}
.qy-hot-1 { background: #ef4444; }
.qy-hot-2 { background: #f97316; }
.qy-hot-3 { background: #f59e0b; }
.qy-hot-4 { background: #3b82f6; }
.qy-hot-5 { background: #8b5cf6; }
.qy-hot-title {
    font-size: 13px; line-height: 1.5; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qy-side-hot a:hover .qy-hot-title { color: var(--primary); }

/* --- 最新回复 --- */
.qy-side-comments a { display: block; padding: 4px 0; }
.qy-rc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.qy-rc-avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: #eef1f6; flex-shrink: 0; }
.qy-rc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qy-rc-author { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.qy-rc-date { margin-left: auto; font-size: 11px; color: var(--muted); }
.qy-rc-text {
    display: block;
    font-size: 12.5px; line-height: 1.6; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qy-side-comments a:hover .qy-rc-text { color: var(--primary); }

/* --- 标签云 --- */
.qy-side-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.qy-tag-chip {
    padding: 4px 10px;
    font-size: 12px; color: var(--ink-2);
    background: #f4f7fb;
    border: 1px solid var(--line);
    border-radius: 99px;
    transition: all .2s;
}
.qy-tag-chip:hover { color: var(--primary); background: var(--primary-soft); border-color: #cfe0ff; }

/* --- 网站信息 --- */
.qy-side-info li { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.qy-side-info b { font-weight: 600; color: var(--ink-2); }

@media (max-width: 640px) {
    .qy-widget { padding: 12px 13px; }
    .back-top { right: 12px; }
}

/* ================= 文章目录 ================= */
.qy-toc {
    margin: 2px 0 24px;
    padding: 0 16px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.qy-toc summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.qy-toc summary::-webkit-details-marker { display: none; }
.qy-toc summary::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .5;
    transition: transform .2s;
}
.qy-toc details[open] summary::after { transform: rotate(225deg); }
.qy-toc summary .qy-toc-count { font-size: 12px; font-weight: 400; color: var(--muted); }
.qy-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 6px 0 14px;
    list-style: none;
    border-top: 1px dashed var(--line);
}
.qy-toc-list li.lv-3 { padding-left: 16px; }
.qy-toc-list a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ink-2);
    transition: background-color .18s, color .18s;
}
.qy-toc-list a:hover { background: #eef2f8; color: var(--ink); }
.qy-toc-list a.is-active { color: var(--primary); background: var(--primary-soft); }
.post-content h2,
.post-content h3,
.post-content h4 { scroll-margin-top: calc(var(--header-h) + 18px); }

@media (max-width: 640px) {
    .qy-toc { margin-bottom: 18px; }
    .qy-toc-list a { padding: 8px 10px; }
}

/* ================= 作者页个人档案（复刻参考站作者页） ================= */
.author-hero {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--line);
    text-align: center;
    padding: 0 20px 32px;
}
.author-cover {
    height: 200px;
    margin: 0 calc(50% - 50vw);
    background-size: cover;
    background-position: center;
}
.author-cover.is-plain {
    background: linear-gradient(135deg, #2f7dff, #7ab0ff);
}
.author-avatar {
    width: 96px; height: 96px;
    margin: -48px auto 0;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
    background: #fff;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-name { margin: 14px 0 6px; font-size: 22px; font-weight: 700; color: var(--ink); }
.author-bio { margin: 0 auto 14px; max-width: 520px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.author-stats { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 14px; background: #f4f7fb; border-radius: 99px; }
.author-stats b { font-size: 16px; color: var(--primary); font-weight: 700; }
.author-stats span { font-size: 12.5px; color: var(--muted); }
.author-icons {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-top: 18px;
}
.author-icon {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: #f4f7fb;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: transform .2s, background .2s;
}
.author-icon svg { width: 20px; height: 20px; }
.author-icon:hover { transform: translateY(-2px); background: #fff; }

@media (max-width: 640px) {
    .author-cover { height: 140px; }
    .author-avatar { width: 80px; height: 80px; margin-top: -40px; }
    .author-name { font-size: 19px; }
}