/*!
 * QBCMS Aurora Theme
 * 极光主题 —— 面向 QBCMS 官网的现代深色/浅色双模主题
 * 设计理念：深空蓝紫渐变（极光）、玻璃拟态卡片、柔和光晕、克制而专业的开发者气质
 */

/* ==========================================================
   1. 设计令牌 Design Tokens
   ========================================================== */
:root {
    /* 品牌色 —— 极光蓝紫 */
    --au-brand: #4f46e5;
    --au-brand-2: #7c3aed;
    --au-brand-3: #06b6d4;
    /* 顶部提示条底色：主题切换按钮（白天态月亮图标底）共用，
       保证顶栏与该按钮两个相邻深色块始终同色 */
    --au-topbar-bg: #2c3570;
    /* Hero 深色底：首页 .hero 与各内页 .page-hero 共用，
       避免首页提亮后内页仍是近黑，两处观感割裂 */
    --au-hero-bg: #17224a;
    --au-accent: #f59e0b;

    /* 语义色 */
    --au-success: #10b981;
    --au-warning: #f59e0b;
    --au-danger: #ef4444;

    /* 渐变 */
    --au-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
    --au-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, .12) 0%, rgba(124, 58, 237, .10) 50%, rgba(6, 182, 212, .12) 100%);

    /* 圆角 */
    --au-radius-sm: 8px;
    --au-radius: 14px;
    --au-radius-lg: 20px;
    --au-radius-xl: 28px;
    --au-radius-full: 999px;

    /* 间距节奏 */
    --au-gap-xs: 6px;
    --au-gap-sm: 12px;
    --au-gap: 20px;
    --au-gap-lg: 32px;
    --au-gap-xl: 56px;
    --au-section-y: 88px;

    /* 布局 */
    --au-maxw: 1200px;
    --au-header-h: 68px;

    /* 动效 */
    --au-ease: cubic-bezier(.4, 0, .2, 1);
    --au-ease-out: cubic-bezier(.16, 1, .3, 1);
    --au-dur: .3s;

    /* ===== 浅色模式（默认） ===== */
    --au-bg: #ffffff;
    --au-bg-soft: #f7f8fc;
    --au-bg-soft-2: #eef1f8;
    --au-surface: #ffffff;
    --au-surface-2: #f7f8fc;
    --au-border: #e5e8f0;
    --au-border-strong: #d3d8e6;

    --au-text: #131a2a;
    --au-text-2: #4a5568;
    --au-text-3: #8592a8;
    --au-text-inverse: #ffffff;

    --au-shadow-sm: 0 1px 2px rgba(19, 26, 42, .06), 0 1px 3px rgba(19, 26, 42, .04);
    --au-shadow: 0 4px 6px -1px rgba(19, 26, 42, .07), 0 2px 4px -2px rgba(19, 26, 42, .05);
    --au-shadow-lg: 0 20px 25px -5px rgba(19, 26, 42, .10), 0 8px 10px -6px rgba(19, 26, 42, .06);
    --au-shadow-brand: 0 14px 34px -12px rgba(79, 70, 229, .45);

    --au-glass-bg: rgba(255, 255, 255, .72);
    --au-glass-border: rgba(255, 255, 255, .85);
    --au-hero-text: #ffffff;
    --au-hero-text-dim: rgba(255, 255, 255, .78);
    --au-on-gradient: #ffffff;
}

/* ===== 深色模式 ===== */
html[data-theme="dark"] {
    /* Hero 底色：浅色主题的 #17224a 在深色页面上偏亮、显脏。
       取页面底色 #0a0e1a 略提亮一档作 Hero 底，
       既与深色页面协调、又能让 Hero 区块与正文拉开层次。 */
    --au-hero-bg: #141c38;

    --au-bg: #0a0e1a;
    --au-bg-soft: #0f1524;
    --au-bg-soft-2: #151d30;
    --au-surface: #121a2b;
    --au-surface-2: #182135;
    --au-border: #26304a;
    --au-border-strong: #364260;

    --au-text: #e8edf7;
    --au-text-2: #a8b3c9;
    --au-text-3: #71809c;
    --au-text-inverse: #0a0e1a;

    --au-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --au-shadow: 0 4px 12px rgba(0, 0, 0, .45);
    --au-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .6);
    --au-shadow-brand: 0 14px 34px -12px rgba(79, 70, 229, .55);

    --au-glass-bg: rgba(18, 26, 43, .78);
    --au-glass-border: rgba(255, 255, 255, .10);
    --au-hero-text: #ffffff;
    --au-hero-text-dim: rgba(255, 255, 255, .74);
    --au-on-gradient: #ffffff;

    --au-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, .22) 0%, rgba(124, 58, 237, .18) 50%, rgba(6, 182, 212, .20) 100%);
}

/* ==========================================================
   2. 基础重置 Base Reset
   ========================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--au-header-h) + 16px);
    /* 注意：不可在此处用 overflow-x:hidden/clip 裁剪溢出。
       一旦 html 成为滚动容器，position:sticky（吸顶头部、侧栏）会失效。
       横向溢出改由移动端抽屉自身的 visibility 控制，见第 20 节。 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--au-text);
    background: var(--au-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--au-dur) var(--au-ease), color var(--au-dur) var(--au-ease);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--au-brand); text-decoration: none; transition: color var(--au-dur) var(--au-ease); }
a:hover { color: var(--au-brand-2); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
    outline: 2px solid var(--au-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: var(--au-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================
   3. 通用工具类 Utilities
   ========================================================== */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* 区块标题 */
.section { padding: var(--au-section-y) 0; }
.section--soft { background: var(--au-bg-soft); }

.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }

.section-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--au-brand); background: var(--au-gradient-soft);
    padding: 6px 14px; border-radius: var(--au-radius-full);
    border: 1px solid var(--au-border); margin-bottom: 18px;
}
.section-title {
    font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.25;
    letter-spacing: -.02em; margin-bottom: 14px;
}
.section-desc { font-size: 17px; color: var(--au-text-2); line-height: 1.75; }

/* ==========================================================
   4. 按钮 Buttons
   ========================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 26px; border-radius: var(--au-radius-full);
    font-size: 15px; font-weight: 600; line-height: 1.4;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform var(--au-dur) var(--au-ease), box-shadow var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease), border-color var(--au-dur) var(--au-ease),
                color var(--au-dur) var(--au-ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }

.btn-primary {
    background: var(--au-gradient); color: var(--au-on-gradient);
    box-shadow: var(--au-shadow-brand);
}
.btn-primary:hover {
    color: var(--au-on-gradient); transform: translateY(-2px);
    box-shadow: 0 18px 40px -12px rgba(79, 70, 229, .55);
}

.btn-ghost {
    background: transparent; color: var(--au-text); border-color: var(--au-border-strong);
}
.btn-ghost:hover {
    color: var(--au-brand); border-color: var(--au-brand);
    background: var(--au-gradient-soft); transform: translateY(-2px);
}

.btn-light {
    background: rgba(255, 255, 255, .14); color: #fff;
    border-color: rgba(255, 255, 255, .26); backdrop-filter: blur(10px);
}
.btn-light:hover {
    background: rgba(255, 255, 255, .24); color: #fff; transform: translateY(-2px);
}

.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 15px 34px; font-size: 16px; }
.btn-block { width: 100%; }

/* ==========================================================
   5. 顶部提示条 Topbar
   ========================================================== */
.topbar {
    /* 原用 var(--au-text)（#131a2a 近黑），色块过重、与下方浅色头部割裂。
       改为品牌深蓝 —— 仍是深色条（保证白色文字对比度），
       但明度更协调，与页面整体色调统一。
       提取为 --au-topbar-bg 变量，主题切换按钮共用，保证两处深色块永不跑偏。 */
    background: var(--au-topbar-bg); color: #fff;
    font-size: 13px; line-height: 1.6;
}
/* 深色主题下再收一档，避免与深色页面糊在一起 */
html[data-theme="dark"] .topbar { background: #171e40; color: var(--au-text-2); }
.topbar .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--au-gap); min-height: 38px; flex-wrap: wrap;
}
.topbar-brand { display: inline-flex; align-items: center; gap: 8px; opacity: .9; }
/* 标语来自 site_description_global，站点描述未填写时会输出空串。
   模板引擎不支持 {if}，此处用 CSS 兜底：空标语不占位、不留多余间距。
   窄屏同样隐藏（见媒体查询）。 */
.topbar-tagline:empty { display: none; }
.topbar-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar a { color: inherit; opacity: .8; }
.topbar a:hover { opacity: 1; color: inherit; }
.topbar-badge {
    display: inline-block; padding: 1px 8px; border-radius: var(--au-radius-full);
    background: var(--au-gradient); color: #fff; font-size: 11px; font-weight: 700;
}
/* 顶部会员链接片段（static/member/links.html 公共模板输出，class 由公共片段决定） */
.topbar #member-links-bar,
.topbar-member { display: inline-flex; align-items: center; gap: 16px; }
.topbar .topbar-link,
.topbar .topbar-user {
    opacity: .8; font-size: 13px; transition: opacity var(--au-dur) var(--au-ease);
}
.topbar .topbar-user { font-weight: 600; opacity: 1; }
.topbar .topbar-link:hover,
.topbar .topbar-user:hover { opacity: 1; }
.topbar .topbar-logout:hover { color: #fca5a5; }

/* ==========================================================
   6. 站点头部 Header
   ========================================================== */
.site-header {
    position: sticky; top: 0; z-index: 900;
    background: var(--au-glass-bg);
    border-bottom: 1px solid var(--au-border);
    transition: box-shadow var(--au-dur) var(--au-ease), background-color var(--au-dur) var(--au-ease);
}
/* 毛玻璃吸顶通过伪元素实现，而非直接加在 .site-header 上。
   ⚠️ 原因：backdrop-filter 会为 position:fixed 的后代创建包含块，
   使移动端抽屉的"视口"被限制在 header 内 —— 实测高度塌缩为 120px、
   位置偏移 38px，抽屉变成右上角一块白板。
   放到 ::before 上后，滤镜作用在伪元素，header 自身不再创建包含块，
   抽屉得以真正相对视口定位，同时桌面端的毛玻璃效果完全保留。 */
.site-header::before {
    content: '';
    position: absolute; inset: 0;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    /* header 需要建立定位上下文供伪元素定位；注意这不影响 fixed 后代 */
    pointer-events: none;
    z-index: -1;
}
.site-header.is-stuck { box-shadow: var(--au-shadow); }

.header-inner {
    display: flex; align-items: center; gap: var(--au-gap-lg);
    min-height: var(--au-header-h);
}
/* 导航项较多时允许收缩，避免在中等宽度换行 */
.main-nav { margin-left: auto; min-width: 0; }

/* 抽屉的关闭按钮由 JS 无条件注入，桌面端必须显式隐藏。
   否则它会作为 inline-block 参与 .main-nav 的行内布局，
   把 ul 向下挤约 14px —— 表现为顶栏导航文字与 Logo 不垂直居中。
   移动端的可见样式写在 @media (max-width:900px) 内。 */
.main-nav-close { display: none; }

/* Logo */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.logo-mark {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--au-gradient);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.02em;
    box-shadow: var(--au-shadow-brand); flex-shrink: 0;
}
.logo-img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.logo-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
/* 站点名过长时截断，避免把右侧操作区挤出视口造成横向滚动 */
.logo-title, .logo-sub {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.logo-title { font-size: 18px; font-weight: 800; color: var(--au-text); letter-spacing: -.01em; }
.logo-title:hover { color: var(--au-brand); }
.logo-sub { font-size: 11.5px; color: var(--au-text-3); letter-spacing: .04em; }

/* 主导航 */
.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav > ul > li { position: relative; }
.main-nav a {
    display: block; padding: 9px 14px; border-radius: var(--au-radius-sm);
    font-size: 15px; font-weight: 500; color: var(--au-text-2); position: relative;
    white-space: nowrap;
}
.main-nav > ul > li > a:hover { color: var(--au-brand); background: var(--au-gradient-soft); }
/* 当前所在栏目：底色与 hover 一致（柔和紫底）+ 加粗 + 底部渐变指示条，
   三者同时出现才能一眼看出"我现在在这个栏目"。
   ⚠️ .active 由 main.js 的 initNavActive() 按当前 URL 动态添加，
   模板里不会预置（首页链接是 /，无法用静态模板判断）。 */
.main-nav > ul > li > a.active {
    color: var(--au-brand); font-weight: 600;
    background: var(--au-gradient-soft);
}
.main-nav > ul > li > a.active::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
    height: 2px; border-radius: 2px; background: var(--au-gradient);
}
/* 鼠标移到其他栏目时，当前项只保留指示条、淡化底色，
   高亮"跟随"过去 */
.main-nav > ul > li > a.active:not(:hover) { transition: all var(--au-dur) var(--au-ease); }

/* 二级下拉 */
.main-nav .dropdown-menu {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 168px;
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius); box-shadow: var(--au-shadow-lg);
    padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all var(--au-dur) var(--au-ease-out); z-index: 20;
}
.main-nav > ul > li:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .dropdown-menu a {
    padding: 9px 12px; border-radius: var(--au-radius-sm); font-size: 14px;
    color: var(--au-text-2); display: block;
}
.main-nav .dropdown-menu a:hover { background: var(--au-gradient-soft); color: var(--au-brand); }
/* 二级菜单里的当前项（由 initNavActive() 同时点亮所属一级项） */
.main-nav .dropdown-menu a.active {
    color: var(--au-brand); font-weight: 600; background: var(--au-gradient-soft);
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* 主题切换按钮 */
.theme-toggle {
    width: 38px; height: 38px; border-radius: var(--au-radius-sm);
    border: 1px solid var(--au-border); background: var(--au-surface);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--au-text-2);
    transition: background-color var(--au-dur) var(--au-ease),
                border-color var(--au-dur) var(--au-ease),
                color var(--au-dur) var(--au-ease);
}
/* 白天：月亮图标配深色底（深底浅月，一眼看出"点击变暗"）
   底色与顶部提示条统一为 --au-topbar-bg，避免两个相邻深色块颜色不一致。
   深夜：太阳图标配浅色底（浅底深日，一眼看出"点击变亮"） */
html:not([data-theme="dark"]) .theme-toggle {
    background: var(--au-topbar-bg); border-color: var(--au-topbar-bg); color: #f1f5fb;
}
html[data-theme="dark"] .theme-toggle {
    background: #f1f5fb; border-color: #f1f5fb; color: #1a2235;
}
/* 悬停时同色系加深一档，保持与顶栏的血缘关系 */
html:not([data-theme="dark"]) .theme-toggle:hover {
    background: #202a5c; border-color: #202a5c; color: #fff;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .theme-toggle:hover {
    background: #fff; border-color: #fff; color: #000;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
}
.theme-toggle svg { width: 18px; height: 18px; }
/* 白天显示月亮（点击进入深夜），深夜显示太阳（点击回到白天）——
   这是用户预期的常规逻辑，与 GitHub 等站点一致。 */
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* 搜索 */
.nav-search { position: relative; flex-shrink: 0; }
/* 搜索表单由控制器预渲染（{raw:nav_search_form}），此处兜底约束其尺寸，
   避免在窄屏下撑破头部布局 */
.nav-search .nav-search-form,
.nav-search-form { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.nav-search-form input[type="text"],
.nav-search-form .nav-search-input {
    width: 168px; max-width: 100%; min-width: 0;
}
.nav-search-form select { max-width: 100%; }
/* 搜索范围与输入框现在同为可见控件，相邻拼成一个整体输入组。
   ⚠️ 曾用"两个控件各画半边"的方式拼接（gap:0 + 圆角互补 + border-left:none），
   结果中间竖线虽去掉了，**上下外边框在接缝处仍断开 1px**——
   因为两个元素各画各的边框，拼接处边界不重合。
   正解：改由 .nav-search-form 画**完整外框**，内部控件全部去掉边框，
   接缝处自然连续无缺口。 */
.nav-search .nav-search-form,
.nav-search-form { gap: 0; }
/* 输入组的聚焦光晕（不画边框，避免与控件自身边框重成双线）。
   inset 右侧留出「按钮宽 38 + 间距 8」= 46px，只覆盖「输入框 + 选择框」这一组。 */
.nav-search .nav-search-form::before,
.nav-search-form::before {
    content: ''; position: absolute; inset: 0 46px 0 0;
    border-radius: var(--au-radius-full);
    pointer-events: none; z-index: 1;
}
.nav-search-form { position: relative; }
/* 搜索按钮在输入组之外，需提升层级，否则会被输入组的
   ::before 外框（z-index:1）压在下面，边框盖住按钮上 */
.nav-search .nav-search-form .nav-search-btn,
.nav-search-form .nav-search-btn { margin-left: 8px; position: relative; z-index: 2; }
/* 内部控件：各自保留边框与圆角，拼成一体胶囊。
   ⚠️ 上一版把 border/border-radius 全部去掉、完全依赖 form 的 ::before 外框，
   一旦伪元素因兼容性/缓存/层级未生效，控件就退化成直角方框（用户实测到）。
   现改为「控件自带 + 伪元素仅作聚焦高亮」的双保险结构：
   输入框左圆角、选择框右圆角、中间接缝用 border-left:none 隐藏。 */
.nav-search .nav-search-form .nav-search-input,
.nav-search-form .nav-search-input {
    border: 1px solid var(--au-border); border-right: none;
    border-radius: var(--au-radius-full) 0 0 var(--au-radius-full);
    background: var(--au-surface-2); position: relative; z-index: 0;
}
.nav-search .nav-search-form .nav-search-scope,
.nav-search-form .nav-search-scope {
    border: 1px solid var(--au-border); border-left: none;
    border-radius: 0 var(--au-radius-full) var(--au-radius-full) 0;
    background-color: var(--au-surface-2); position: relative; z-index: 0;
}
/* 聚焦时外框高亮 */
.nav-search-form:focus-within .nav-search-input,
.nav-search-form:focus-within .nav-search-scope { border-color: var(--au-brand); }
.nav-search-form:focus-within::before {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.nav-search-input {
    width: 168px; padding: 8px 14px; font-size: 14px;
    height: 38px; font-family: inherit;
    border: 1px solid var(--au-border); border-radius: var(--au-radius-full);
    background: var(--au-surface-2); color: var(--au-text); outline: none;
    transition: all var(--au-dur) var(--au-ease);
}
.nav-search-input::placeholder { color: var(--au-text-3); }
.nav-search-input:focus { width: 210px; border-color: var(--au-brand); background: var(--au-surface); }
/* 搜索范围下拉
   原实现是 `position:absolute; opacity:0; width:42px` 的隐形选择框，
   绝对定位到输入框左侧当"点哪儿都能唤起下拉"的触发器。
   问题：① 完全看不出可点，可发现性为零；
        ② 原生下拉样式不受控（实测 16px 字号、0 圆角、0 内边距，
           宽度被文字挤到 42px），与主题风格不符。
   改为与输入框同款的**显式可见**控件。 */
.nav-search-scope {
    flex-shrink: 0; height: 38px; padding: 0 30px 0 14px;
    font-size: 14px; font-family: inherit; line-height: 1.4;
    color: var(--au-text-2);
    border: 1px solid var(--au-border); border-radius: var(--au-radius-full);
    background-color: var(--au-surface-2);
    /* appearance:none 去掉系统原生外观，改用下面的自绘箭头 */
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer; outline: none;
    transition: border-color var(--au-dur) var(--au-ease),
                color var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease);
}
.nav-search-scope:hover { color: var(--au-brand); border-color: var(--au-brand); }
.nav-search-scope:focus { border-color: var(--au-brand); background: var(--au-surface); }
/* 自绘下拉箭头：用背景图实现，不额外插 DOM */
.nav-search-scope {
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 15px center, right 10px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
/* 深色模式下下拉项需显式指定背景，否则系统会用浅色默认底 */
.nav-search-scope option { background: var(--au-surface); color: var(--au-text); }
.nav-search-btn {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--au-surface-2); border: 1px solid var(--au-border);
    color: var(--au-text-2); display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--au-dur) var(--au-ease);
}.nav-search-btn:hover { color: var(--au-brand); border-color: var(--au-brand); background: var(--au-gradient-soft); }
.nav-search-btn svg { width: 17px; height: 17px; }

/* 移动端菜单开关 */
.nav-toggle {
    display: none; width: 44px; height: 44px; border-radius: var(--au-radius-sm);
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid var(--au-border); background: var(--au-surface); flex-shrink: 0;
    /* 触屏最小可点击区域建议 44px，同时禁用点击高亮与选中，避免误触 */
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background-color var(--au-dur) var(--au-ease),
                border-color var(--au-dur) var(--au-ease);
}
.nav-toggle:hover, .nav-toggle:focus-visible {
    background: var(--au-gradient-soft); border-color: rgba(99, 102, 241, .40);
}
.nav-toggle:focus-visible { outline: 2px solid var(--au-brand); outline-offset: 2px; }
.nav-toggle span {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--au-text); transition: all var(--au-dur) var(--au-ease);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
    /* 显式给尺寸而非 inset:0：抽屉打开时 body 锁定滚动会使 fixed 元素
       的定位参照系变化，inset:0 会撑到文档全宽（实测 710px）产生横向滚动。
       同时 height 用 100dvh，兼容 iOS Safari 地址栏收起/展开。 */
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    background: rgba(10, 14, 26, .5);
    backdrop-filter: blur(2px); opacity: 0; visibility: hidden;
    transition: opacity var(--au-dur) var(--au-ease), visibility var(--au-dur) var(--au-ease);
    z-index: 940;
    overflow: hidden;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ==========================================================
   7. 首页 Hero
   ========================================================== */
.hero {
    position: relative; overflow: hidden;
    /* 原为 #0b1020（接近纯黑），实测平均亮度 39.5、
       76% 像素落在 0-30 极暗区间 —— 大面积死黑、观感沉重。
       提亮为偏蓝的深色底（提取为 --au-hero-bg 供 .page-hero 共用），
       保留深色科技调但不再压暗。 */
    background: var(--au-hero-bg);
    color: #fff;
    padding: 104px 0 96px;
    isolation: isolate;
}
/* 极光光晕背景
   原为三个小半径光晕（48%/44% 级别），只覆盖局部，
   其余区域全部露出近黑底色。现扩大半径与不透明度、
   并补一层底部提亮，使画面整体亮度均衡。 */
.hero::before {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 130%;
    background:
        radial-gradient(66% 62% at 16% 20%, rgba(99, 102, 241, .62) 0%, transparent 70%),
        radial-gradient(60% 58% at 80% 12%, rgba(139, 92, 246, .55) 0%, transparent 68%),
        radial-gradient(64% 60% at 60% 78%, rgba(6, 182, 212, .50) 0%, transparent 70%),
        radial-gradient(78% 58% at 50% 52%, rgba(59, 130, 246, .26) 0%, transparent 74%),
        radial-gradient(90% 70% at 50% 100%, rgba(14, 165, 233, .18) 0%, transparent 76%);
    filter: blur(28px); z-index: -2;
}
/* 网格纹理 */
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .3;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 78%);
}
.hero .container { position: relative; }

.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px 7px 8px; border-radius: var(--au-radius-full);
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    font-size: 13.5px; color: #fff; margin-bottom: 26px;
    backdrop-filter: blur(10px);
}
.hero-badge b {
    background: var(--au-gradient); padding: 2px 10px; border-radius: var(--au-radius-full);
    font-size: 12px; font-weight: 700;
}

.hero-title {
    font-size: clamp(34px, 5.2vw, 62px); font-weight: 800; line-height: 1.12;
    letter-spacing: -.03em; margin-bottom: 22px; color: #fff;
}
.hero-title .grad {
    background: linear-gradient(120deg, #a5b4fc 0%, #c4b5fd 35%, #67e8f9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero-desc {
    font-size: clamp(15.5px, 1.5vw, 18.5px); line-height: 1.8;
    color: rgba(255, 255, 255, .78); max-width: 560px; margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-meta { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hero-meta-item strong {
    display: block; font-size: 26px; font-weight: 800; line-height: 1.2;
    background: linear-gradient(120deg, #a5b4fc, #67e8f9);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-meta-item span { font-size: 13px; color: rgba(255, 255, 255, .62); }

/* Hero 终端卡片
   底色仍保持深色（代码块本就该深色），
   但 Hero 背景提亮后，需同步加强边框与投影，
   否则卡片会像"贴"在背景上、缺少悬浮感。 */
.hero-visual { position: relative; }
.terminal {
    /* 代码块保留深色底（代码就该深色），
       但原 rgba(11,16,30,.86) 近黑过重，在浅化的 Hero 上像"黑洞"。
       调到偏蓝的深灰并降低不透明度，让背景色调透上来。 */
    background: rgba(24, 32, 58, .74);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--au-radius-lg); overflow: hidden;
    box-shadow: 0 36px 70px -26px rgba(4, 8, 20, .68);
    backdrop-filter: blur(20px);
}
.terminal-bar {
    display: flex; align-items: center; gap: 8px; padding: 13px 18px;
    background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-dot:nth-child(1) { background: #ff5f57; }
.terminal-dot:nth-child(2) { background: #febc2e; }
.terminal-dot:nth-child(3) { background: #28c840; }
.terminal-title { margin-left: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .55); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.terminal-body { padding: 22px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 2; }
.terminal-body .t-dim { color: rgba(255, 255, 255, .42); }
.terminal-body .t-cmd { color: #67e8f9; }
.terminal-body .t-ok { color: #4ade80; }
.terminal-body .t-key { color: #c4b5fd; }
.terminal-body .t-val { color: #fcd34d; }

/* 悬浮小卡片 */
.hero-float {
    position: absolute; background: rgba(255, 255, 255, .95);
    color: #131a2a; border-radius: var(--au-radius); padding: 13px 17px;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5); font-size: 13px;
    display: flex; align-items: center; gap: 10px; font-weight: 600;
}
html[data-theme="dark"] .hero-float { background: rgba(26, 34, 54, .95); color: #e8edf7; }
.hero-float--tl { top: -18px; right: 18px; animation: auFloat 5s var(--au-ease) infinite; }
.hero-float--br { bottom: -20px; left: -14px; animation: auFloat 6s var(--au-ease) .6s infinite; }
.hero-float i {
    width: 30px; height: 30px; border-radius: 9px; background: var(--au-gradient);
    display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: 15px;
}
@keyframes auFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ==========================================================
   8. 卡片 Cards
   ========================================================== */
.card {
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg); padding: 30px;
    position: relative;
    transition:
        transform .4s var(--au-ease-out),
        box-shadow .4s var(--au-ease-out),
        border-color .3s var(--au-ease),
        background-color .3s var(--au-ease);
}
.card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .26);
    box-shadow:
        0 22px 42px -20px rgba(79, 70, 229, .28),
        0 6px 14px -10px rgba(19, 26, 42, .12);
}
html[data-theme="dark"] .card:hover {
    border-color: rgba(129, 140, 248, .30);
    box-shadow:
        0 24px 46px -20px rgba(0, 0, 0, .60),
        0 0 0 1px rgba(99, 102, 241, .14);
}

/* 特性网格 */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* 特性卡片悬停
   设计取向：框要"退后"。参考 official 主题的做法 —— 不做抢眼的描边动画，
   而是用抬升 + 更强更柔的阴影表达悬停，边框只做极轻微的品牌色偏移。
   指针跟随柔光（--mx/--my 由 main.js 的 initSpotlight() 写入，
   无 JS 时回退到卡片中心）负责提供"聚焦感"。
   padding 由 .card 提供，悬停时不再变化，避免内容与边框贴死。 */
.feature-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* 注意：.feature-card 未带 .card 类，padding/border 不从 .card 继承，
       必须显式声明，否则内容会贴边（0 内边距）。 */
    background: var(--au-surface);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg);
    padding: 34px 30px;
    transition:
        transform .4s var(--au-ease-out),
        box-shadow .4s var(--au-ease-out),
        border-color .3s var(--au-ease),
        background-color .3s var(--au-ease);
}
/* 跟随指针的柔光层：中心→边缘柔和衰减，避免出现明显"光斑边界" */
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
        rgba(99, 102, 241, .13),
        rgba(124, 58, 237, .06) 46%,
        transparent 72%);
    opacity: 0;
    transition: opacity .45s var(--au-ease);
}
.feature-card:hover {
    transform: translateY(-7px);
    border-color: rgba(99, 102, 241, .22);
    box-shadow:
        0 26px 48px -22px rgba(79, 70, 229, .26),
        0 10px 22px -14px rgba(19, 26, 42, .12);
}
html[data-theme="dark"] .feature-card:hover {
    border-color: rgba(129, 140, 248, .28);
    box-shadow:
        0 28px 52px -22px rgba(0, 0, 0, .60),
        0 0 0 1px rgba(99, 102, 241, .12);
}
.feature-card:hover::before { opacity: 1; }

/* 内容层抬到柔光之上，并保证与边框有充足留白 */
.feature-card > * { position: relative; z-index: 1; }

.feature-icon {
    width: 54px; height: 54px; border-radius: 15px; margin-bottom: 22px;
    background: var(--au-gradient-soft); border: 1px solid var(--au-border);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    flex-shrink: 0;
    transition:
        transform .4s var(--au-ease-out),
        border-color .3s var(--au-ease),
        box-shadow .4s var(--au-ease-out);
}
/* 图标跟随整卡抬升，位移减半以免脱离原位显得脱节 */
.feature-card:hover .feature-icon {
    transform: translateY(-3px) scale(1.05) rotate(-3deg);
    border-color: rgba(99, 102, 241, .34);
    box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .45);
}
.feature-card h3 {
    font-size: 19px; font-weight: 700; margin-bottom: 11px; letter-spacing: -.01em;
    color: var(--au-text);
    transition: color .3s var(--au-ease);
}
.feature-card:hover h3 { color: var(--au-brand); }
.feature-card p { font-size: 14.8px; color: var(--au-text-2); line-height: 1.78; }

/* 特性列表（带勾选） */
.check-list { display: grid; gap: 13px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.2px; color: var(--au-text-2); line-height: 1.7; }
.check-list li::before {
    content: ''; flex-shrink: 0; width: 21px; height: 21px; margin-top: 3px; border-radius: 50%;
    background: var(--au-gradient-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234f46e5'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/13px no-repeat;
}
html[data-theme="dark"] .check-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a5b4fc'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* 交错展示（图文左右） */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.showcase--reverse .showcase-body { order: 2; }
.showcase-body h3 { font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 18px; }
.showcase-body > p { font-size: 16px; color: var(--au-text-2); line-height: 1.85; margin-bottom: 24px; }
.showcase-visual {
    border-radius: var(--au-radius-xl); padding: 34px; min-height: 340px;
    background: var(--au-gradient-soft); border: 1px solid var(--au-border);
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.showcase-visual::before {
    content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: var(--au-gradient); filter: blur(70px); opacity: .16;
}

/* 数据统计条 */
.stat-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius-xl); padding: 40px 32px;
}
.stat-strip-item { text-align: center; position: relative; }
.stat-strip-item + .stat-strip-item::before {
    content: ''; position: absolute; left: -12px; top: 12%; bottom: 12%; width: 1px; background: var(--au-border);
}
.stat-strip-item strong {
    display: block; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15;
    letter-spacing: -.02em; background: var(--au-gradient);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-strip-item span { font-size: 14px; color: var(--au-text-3); }

/* ==========================================================
   9. 文章卡片与列表
   ========================================================== */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.article-card {
    display: flex; flex-direction: column; overflow: hidden; padding: 0;
    background: var(--au-surface);
}
/* 文章卡片同样带跟随柔光，视觉语言与特性卡保持一致 */
.article-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
        rgba(99, 102, 241, .13),
        rgba(6, 182, 212, .07) 48%,
        transparent 72%);
    opacity: 0;
    transition: opacity .45s var(--au-ease);
}
.article-card:hover::before { opacity: 1; }
.article-card > * { position: relative; z-index: 1; }
.article-card h3 {
    font-size: 17.5px; font-weight: 700; line-height: 1.5; margin-bottom: 11px;
    transition: color .3s var(--au-ease);
}
.article-card:hover h3 { color: var(--au-brand); }
.article-thumb {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--au-gradient-soft); display: flex; align-items: center; justify-content: center;
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--au-ease-out); }
.article-card:hover .article-thumb img { transform: scale(1.06); }
.article-thumb-empty { font-size: 40px; opacity: .32; }
.article-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.article-meta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--au-text-3); margin-bottom: 12px;
}
.article-meta .cat {
    padding: 3px 10px; border-radius: var(--au-radius-full);
    background: var(--au-gradient-soft); color: var(--au-brand); font-weight: 600;
}
.article-card h3 a { color: var(--au-text); }
.article-card h3 a:hover { color: var(--au-brand); }
.article-card p {
    font-size: 14.3px; color: var(--au-text-2); line-height: 1.75; margin-bottom: 18px; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 15px; border-top: 1px solid var(--au-border); font-size: 12.5px; color: var(--au-text-3);
}
.article-foot .hits { display: inline-flex; align-items: center; gap: 5px; }

/* 列表页条目 */
.article-list { display: flex; flex-direction: column; gap: 20px; }

/* 标签文章列表：TagController::renderListHtml 预渲染，结构为
   .article-item > .article-thumb + .article-body > h3 / .article-desc */
.article-item {
    display: flex; gap: 20px; padding: 20px;
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg);
    transition: border-color var(--au-dur) var(--au-ease),
                box-shadow var(--au-dur) var(--au-ease),
                transform var(--au-dur) var(--au-ease);
}
.article-item:hover {
    border-color: var(--au-brand); box-shadow: var(--au-shadow-lg); transform: translateY(-3px);
}
.article-item .article-thumb {
    width: 210px; flex-shrink: 0; border-radius: var(--au-radius); overflow: hidden;
    background: var(--au-gradient-soft); aspect-ratio: 16 / 10;
}
.article-item .article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-item .article-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.article-item .article-body h3 { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 9px; }
.article-item .article-body h3 a { color: var(--au-text); }
.article-item .article-body h3 a:hover { color: var(--au-brand); }
.article-item .article-meta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--au-text-3); margin-bottom: 9px;
}
.article-item .article-meta .cat {
    padding: 3px 10px; border-radius: var(--au-radius-full);
    background: var(--au-gradient-soft); color: var(--au-brand); font-weight: 600;
}
.article-item .article-desc {
    font-size: 14.3px; color: var(--au-text-2); line-height: 1.75; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
    .article-item { flex-direction: column; gap: 14px; }
    .article-item .article-thumb { width: 100%; }
}
.article-row {
    display: grid; grid-template-columns: 268px 1fr; gap: 26px; padding: 22px;
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg); transition: all var(--au-dur) var(--au-ease);
}
/* ⚠️ {qbcms:arclist} 连续输出 .article-row，彼此间**没有任何容器也没有间距**，
   导致条目卡片上下紧贴（视觉上糊成一片）。
   用相邻兄弟选择器补间距：首条不加（否则会多出顶部空白）。 */
.article-row + .article-row { margin-top: 22px; }
.article-row:hover { border-color: var(--au-brand); box-shadow: var(--au-shadow-lg); transform: translateY(-3px); }
.article-row .article-thumb { border-radius: var(--au-radius); aspect-ratio: 16 / 10; }
.article-row .article-body { padding: 0; }
.article-row h3 { font-size: 19px; margin-bottom: 10px; }

/* 侧栏 */
.layout-with-side { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 36px; align-items: start; }
.sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--au-header-h) + 24px); }
.widget {
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg); padding: 24px;
}
.widget-title {
    font-size: 15.5px; font-weight: 700; margin-bottom: 18px; padding-bottom: 13px;
    border-bottom: 1px solid var(--au-border); display: flex; align-items: center; gap: 9px;
}
.widget-title::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: var(--au-gradient); }

/* 热门列表 */
.rank-list { counter-reset: rank; display: flex; flex-direction: column; gap: 4px; }
.rank-list li { counter-increment: rank; display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--au-border); }
.rank-list li:last-child { border-bottom: none; }
.rank-list li::before {
    content: counter(rank); flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
    font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    background: var(--au-bg-soft-2); color: var(--au-text-3);
}
.rank-list li:nth-child(-n+3)::before { background: var(--au-gradient); color: #fff; }
.rank-list a { font-size: 14.2px; color: var(--au-text-2); line-height: 1.6; flex: 1; }
.rank-list a:hover { color: var(--au-brand); }
.rank-list .hits { font-size: 12px; color: var(--au-text-3); flex-shrink: 0; }

/* 标签云 */
.tag-cloud-wrap { display: flex; flex-wrap: wrap; gap: 9px; line-height: 1; }
.tag-item {
    display: inline-block; padding: 6px 13px; border-radius: var(--au-radius-full);
    background: var(--au-bg-soft-2); color: var(--au-text-2); border: 1px solid transparent;
    transition: all var(--au-dur) var(--au-ease);
}
.tag-item:hover { background: var(--au-gradient); color: #fff; border-color: transparent; transform: translateY(-2px); }

/* ==========================================================
   10. 面包屑 & 内页头部
   ========================================================== */
/* 面包屑：位于页头封面图**下方**（与页头图互换顺序后）。
   用深色底衔接图片区下缘，与深色页头形成连贯的一整块视觉。 */
.breadcrumb-bar { background: var(--au-bg-soft); border-bottom: 1px solid var(--au-border); padding: 14px 0; }
/* 紧跟在带封面的页头之后时，上边框与浅底会与深色图割裂，
   改为与页面同底色、仅保留下边框，视觉上更整块。 */
.page-hero-cover + .breadcrumb-bar {
    background: var(--au-bg-soft);
    border-top: none;
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--au-text-3); }
.breadcrumb a { color: var(--au-text-2); }
.breadcrumb a:hover { color: var(--au-brand); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--au-text); font-weight: 600; }

.page-hero {
    position: relative; overflow: hidden;
    /* 与首页 .hero 统一到 --au-hero-bg（原为 #0b1020 近黑，各内页显得过暗） */
    background: var(--au-hero-bg); color: #fff;
    padding: 62px 0; isolation: isolate;
}
/* 带封面的页头统一高度：栏目页 / 留言板 / 标签云 / 关于我们 / 搜索页
   统一为 225px，避免各页因内容多少高低不一、切换时视觉跳动。
   用 min-height 而非 height —— 内容超长时仍能自然撑开，不会截断。 */
.page-hero-cover { min-height: 225px; display: flex; flex-direction: column; justify-content: center; }
/* 搜索页原本 padding 只有 46px，比页头矮约 12px，这里对齐 */
.search-hero-cover { min-height: 225px; display: flex; flex-direction: column; justify-content: center; }

/* 页头里的 .section-eyebrow 眉标
   ① 外观：原为「品牌紫底 + 紫字」，压在任何深色/彩色封面页头上都不可读
     （申请友链页曾紫字压深蓝底，几乎看不见）。
     只要位于 .page-hero 内就统一改为**半透明白底 + 白字** ——
     页头底色一律深色，无需分是否有 page-hero-cover 类。
   ② 布局：某些页眉标多一行（如标签云），叠放会让该页比其他页高约 42px。
     改为与标题**同行并排**，总高与其他页一致。 */
.page-hero .section-eyebrow {
    display: inline-flex; vertical-align: middle;
    margin-bottom: 0; margin-right: 12px;
    transform: translateY(-1px);
    color: #fff; background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .38);
    backdrop-filter: blur(2px);
}
.page-hero-cover h1 { vertical-align: middle; }
/* 眉标与标题同行并排（某些页眉标多一行，叠放会撑高页头） */
.page-hero-cover .container > .section-eyebrow + h1 { display: inline; }
.page-hero::before {
    content: ''; position: absolute; inset: -50% -10% auto -10%; height: 160%; z-index: -2;
    /* 光晕范围与不透明度对齐首页 .hero::before，保持两处观感一致 */
    background:
        radial-gradient(58% 56% at 20% 28%, rgba(99, 102, 241, .58) 0%, transparent 68%),
        radial-gradient(52% 50% at 82% 20%, rgba(139, 92, 246, .50) 0%, transparent 66%),
        radial-gradient(56% 52% at 62% 78%, rgba(6, 182, 212, .44) 0%, transparent 68%),
        radial-gradient(76% 54% at 50% 54%, rgba(59, 130, 246, .22) 0%, transparent 72%);
    filter: blur(30px);
}
.page-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 48px 48px;
}
.page-hero h1 { font-size: clamp(25px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; color: #fff; }
.page-hero p { color: rgba(255, 255, 255, .74); font-size: 15.5px; max-width: 720px; }

/* 栏目封面背景图
   后台「栏目管理 → 封面图片」上传后自动生效（template 里输出 {var:category.image}）。
   未上传时 src 为空，图片不会渲染，原有渐变底纹依旧完整 —— 无需任何兜底文案。 */
.page-hero-bg {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    /* 封面为明亮插画，接近原色呈现 */
    opacity: 1;
}
/* 单页由后台上传的封面：控制器输出的 <img> 没有 page-hero-bg 类，
   统一按背景图定位并压到兜底图之下（数值更小）；
   同时隐藏兜底图，避免两层叠加发灰。 */
.page-hero-cover > img:not([class]) {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
.page-hero-cover > img:not([class]) ~ .page-hero-bg { display: none; }
/* 遮罩改为 5% 后，标题改用自身投影保证可读，
   不再靠压暗整张封面图 —— 既清晰又不遮挡画面。
   描述文字是浅灰色，投影需比标题更强才够对比。
   ⚠️ 后台填写的标题/描述（专题、单页等）可能很长，换行会把 225px 的页头
   撑开（实测超长文案下变成 251px）。故标题限 1 行、描述限 2 行，
   超出以省略号收敛，保证全站页头高度恒定。
   ⚠️ 这两条 display 规则必须**合并写在一起**：
   分开写时后面的 `display:inline-block` 会覆盖 `-webkit-box`，导致截断失效。 */
.page-hero-cover h1 {
    text-shadow: 0 2px 16px rgba(11, 16, 32, .6), 0 1px 3px rgba(11, 16, 32, .45);
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; overflow: hidden;
}
.page-hero-cover p {
    color: #fff;
    text-shadow: 0 2px 12px rgba(11, 16, 32, .75), 0 1px 4px rgba(11, 16, 32, .6);
    /* 限 1 行（实测 2 行时页头变 241px，超出统一高度）。
       完整描述在正文区本就另有一份，页头只需一句概括。 */
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; overflow: hidden;
}
/* 眉标与标题同行时，h1 需回到 inline 才能并排（覆盖上面的 -webkit-box） */
.page-hero-cover .container > .section-eyebrow + h1 { display: inline; }
/* 压暗层：保证标题在任意封面上都有足够对比度 */
/* 压暗层：仅做轻微压深，保证标题可读，不再遮挡封面本身。
   原为 .58→.78 不透明，加上封面图的 opacity:.5 后画面过暗，
   现按反馈降到 5%（几乎透明），改由文字自身的投影保证对比度。 */
.page-hero-veil {
    position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(180deg, rgba(11, 16, 32, .05) 0%, rgba(11, 16, 32, .05) 100%);
}
/* 文字区局部压深：只覆盖左侧标题区域，右侧画面保持原亮度。
   浅色封面（如"功能"栏目）上仅靠投影仍偏弱，故补这一层，
   透明度同样很低（.3 → 0），不会造成整体压暗。 */
.page-hero-veil::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(11, 16, 32, .34) 0%,
                                rgba(11, 16, 32, .14) 42%,
                                rgba(11, 16, 32, 0) 72%);
}
/* 无封面时把压暗层压回透明，避免原渐变被整体压暗 */
.page-hero:not(.page-hero-cover) .page-hero-veil { display: none; }

/* 子栏目卡片（带封面）
   尺寸依据容器推导：.container 最大 1200px，列表页主内容区约 860px，
   三列网格 gap 20px → 单列约 273px；封面比例 16:9 → 高约 154px。 */
.subcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 20px; margin-bottom: 30px;
}
/* 无子栏目时隐藏容器，不留空隙。
   ⚠️ `:empty` 只在**完全没有任何子节点**时匹配；
   catlist 无输出时网格里仍残留换行与缩进空白文本节点，
   `:empty` 匹配不上 → 容器高 0px 但仍带 margin-bottom:30px，
   把下方第一篇文章压低 30px，与右侧 widget 顶部错开。
   故改用 `:not(:has(.subcat-card))` —— 只要没有真实卡片就隐藏。 */
.subcat-grid:not(:has(.subcat-card)) { display: none; }
.subcat-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius-lg);
    transition: transform var(--au-dur) var(--au-ease-out),
                box-shadow var(--au-dur) var(--au-ease-out),
                border-color var(--au-dur) var(--au-ease);
}
.subcat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .28);
    box-shadow: 0 22px 40px -20px rgba(79, 70, 229, .30),
                0 6px 14px -10px rgba(19, 26, 42, .12);
}
.subcat-cover {
    position: relative; display: block; overflow: hidden;
    /* 素材为 1920×400 宽幅横幅（与列表页 page-hero 共用同一张图）。
       卡片是窄列，用 16:9 从宽幅中裁出中央区域，主体不会丢；
       页头横幅则完整铺开。 */
    aspect-ratio: 16 / 9; background: #0b1020;
}
.subcat-cover img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
    transition: transform .5s var(--au-ease-out), opacity var(--au-dur) var(--au-ease);
}
.subcat-card:hover .subcat-cover img { transform: scale(1.06); }
/* 未上传封面时的占位渐变：与主题极光风格一致，不会出现破图 */
.subcat-cover-ph {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60% 70% at 22% 28%, rgba(79, 70, 229, .55) 0%, transparent 62%),
        radial-gradient(55% 65% at 82% 74%, rgba(6, 182, 212, .42) 0%, transparent 60%),
        linear-gradient(135deg, #0b1020 0%, #1e1b4b 100%);
}
/* 图片加载失败时（src 为空或 404）同样落到占位渐变上 */
.subcat-cover img:not([src]),
.subcat-cover img[src=""] { opacity: 0; }

.subcat-info { display: block; padding: 15px 18px 17px; }
.subcat-name {
    display: block; font-size: 16px; font-weight: 700; line-height: 1.4;
    color: var(--au-text); margin-bottom: 5px;
    transition: color var(--au-dur) var(--au-ease);
}
.subcat-card:hover .subcat-name { color: var(--au-brand); }
.subcat-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 13.4px; line-height: 1.65; color: var(--au-text-2);
}

/* 子栏目快捷导航（无封面时的紧凑备选样式，保留兼容） */
.subcat-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.subcat-bar a {
    padding: 8px 17px; border-radius: var(--au-radius-full); font-size: 14px; font-weight: 500;
    background: var(--au-surface); border: 1px solid var(--au-border); color: var(--au-text-2);
    transition: all var(--au-dur) var(--au-ease);
}
.subcat-bar a:hover { background: var(--au-gradient); color: #fff; border-color: transparent; transform: translateY(-2px); }

/* ==========================================================
   11. 文章详情
   ========================================================== */
.article-detail { background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-radius-xl); padding: 46px; }
.article-title { font-size: clamp(25px, 3.4vw, 38px); font-weight: 800; line-height: 1.32; letter-spacing: -.02em; margin-bottom: 20px; }
.article-info {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
    padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--au-border);
    font-size: 13.5px; color: var(--au-text-3);
}
.article-info span { display: inline-flex; align-items: center; gap: 6px; }
.article-info svg { width: 15px; height: 15px; opacity: .65; }

/* 富文本正文 */
.article-text { font-size: 16.5px; line-height: 1.92; color: var(--au-text-2); word-wrap: break-word; }
.article-text > * + * { margin-top: 1.15em; }
.article-text h1, .article-text h2, .article-text h3, .article-text h4 { color: var(--au-text); font-weight: 700; line-height: 1.4; margin-top: 1.9em; }
.article-text h1 { font-size: 1.72em; }
.article-text h2 { font-size: 1.44em; padding-bottom: .38em; border-bottom: 1px solid var(--au-border); }
.article-text h3 { font-size: 1.22em; }
.article-text h4 { font-size: 1.08em; }
.article-text a { color: var(--au-brand); text-decoration: underline; text-underline-offset: 3px; }
.article-text ul, .article-text ol { padding-left: 1.5em; }
.article-text ul { list-style: disc; }
.article-text ol { list-style: decimal; }
.article-text li { margin: .45em 0; }
.article-text li::marker { color: var(--au-brand); }
.article-text img { border-radius: var(--au-radius); margin: 1.6em auto; box-shadow: var(--au-shadow); }
.article-text blockquote {
    padding: 16px 22px; border-left: 3px solid var(--au-brand);
    background: var(--au-gradient-soft); border-radius: 0 var(--au-radius) var(--au-radius) 0;
    color: var(--au-text-2);
}
.article-text code {
    padding: 2px 7px; border-radius: 5px; font-size: .88em;
    background: var(--au-bg-soft-2); color: var(--au-brand-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.article-text pre {
    padding: 20px; border-radius: var(--au-radius); overflow-x: auto;
    background: #0b1020; color: #e2e8f5; font-size: 14px; line-height: 1.7;
}
.article-text pre code { background: none; color: inherit; padding: 0; }
.article-text table { border: 1px solid var(--au-border); border-radius: var(--au-radius); overflow: hidden; margin: 1.6em 0; }
.article-text th, .article-text td { padding: 12px 16px; border: 1px solid var(--au-border); text-align: left; }
.article-text th { background: var(--au-bg-soft-2); font-weight: 700; color: var(--au-text); }
.article-text hr { border: none; border-top: 1px solid var(--au-border); margin: 2.4em 0; }

.article-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
/* ⚠️ 同 subcat-grid：标签区内部是 {raw:article_tags_html}，
   无数据时只剩换行缩进空白文本节点，`:empty` 匹配不上。
   改用「有没有真实标签」判定。 */
.article-tags:not(:has(a)) { display: none; }

/* 上下篇导航 */
.article-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px;
    padding-top: 28px; border-top: 1px solid var(--au-border);
}
.article-nav a {
    padding: 15px 19px; border-radius: var(--au-radius); background: var(--au-bg-soft);
    border: 1px solid var(--au-border); font-size: 14.2px; color: var(--au-text-2);
    transition: all var(--au-dur) var(--au-ease);
}
.article-nav a:hover { border-color: var(--au-brand); color: var(--au-brand); background: var(--au-gradient-soft); }
.article-nav .nav-dir { display: block; font-size: 12px; color: var(--au-text-3); margin-bottom: 5px; }
.article-nav .nav-next { text-align: right; }

/* 点赞 / 收藏 / 分享 */
.article-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.action-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
    border: 1px solid var(--au-border); border-radius: var(--au-radius-full);
    background: var(--au-bg-soft); color: var(--au-text-2); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all var(--au-dur) var(--au-ease); user-select: none;
}
.action-btn:hover { border-color: var(--au-brand); color: var(--au-brand); background: var(--au-gradient-soft); transform: translateY(-2px); }
.action-count { font-size: 12.5px; color: var(--au-text-3); }
.action-btn.liked-active { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); color: #ef4444; }
.action-btn.fav-active { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); color: #d97706; }

.related-box { margin-top: 40px; }
.related-list { display: grid; gap: 11px; }
.related-list a {
    display: flex; align-items: baseline; gap: 10px; padding: 12px 16px;
    background: var(--au-bg-soft); border: 1px solid var(--au-border);
    border-radius: var(--au-radius); font-size: 14.5px; color: var(--au-text-2);
    transition: all var(--au-dur) var(--au-ease);
}
.related-list a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--au-gradient); flex-shrink: 0; }
.related-list a:hover { border-color: var(--au-brand); color: var(--au-brand); transform: translateX(4px); }

/* 评论区 */
.comment-section { margin-top: 46px; background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-radius-xl); padding: 38px; }
.comment-item { display: flex; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--au-border); }
.comment-item:last-child { border-bottom: none; }
.comment-avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--au-gradient);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-main { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 7px; flex-wrap: wrap; }
.comment-author { font-weight: 600; color: var(--au-text); }
.comment-time { color: var(--au-text-3); font-size: 12.5px; }
.comment-content { font-size: 14.8px; color: var(--au-text-2); line-height: 1.78; word-wrap: break-word; }

/* 评论列表（CommentModel::renderListHtml 预渲染） */
.comment-list { display: flex; flex-direction: column; }
.no-comments {
    text-align: center; padding: 42px 20px; margin: 0;
    color: var(--au-text-3); font-size: 15px;
    background: var(--au-bg-soft); border: 1px dashed var(--au-border-strong);
    border-radius: var(--au-radius-lg);
}

/* 评论表单（ArticleController::renderCommentForm 预渲染）
   控制器输出的类名为 .comment-form / .input-half / .input-textarea /
   .form-row / .captcha-row / .captcha-input / .captcha-img / .btn-submit */
.comment-form-wrap { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--au-border); }

form.comment-form { display: flex; flex-direction: column; gap: 14px; }
form.comment-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form.comment-form .input-half,
form.comment-form .input-textarea {
    width: 100%; padding: 12px 16px; font-size: 15px; font-family: inherit;
    border: 1px solid var(--au-border); border-radius: var(--au-radius);
    background: var(--au-bg-soft); color: var(--au-text); outline: none;
    transition: border-color var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease),
                box-shadow var(--au-dur) var(--au-ease);
}
form.comment-form .input-textarea {
    resize: vertical; min-height: 108px; line-height: 1.75;
}
form.comment-form .input-half:focus,
form.comment-form .input-textarea:focus {
    border-color: var(--au-brand); background: var(--au-surface);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
form.comment-form .input-half[readonly] {
    background: var(--au-bg-soft-2); color: var(--au-text-2); cursor: default;
}
form.comment-form .input-half::placeholder,
form.comment-form .input-textarea::placeholder { color: var(--au-text-3); }

/* 评论表单内的验证码行：外观同样由全局 .captcha-row 规则提供。 */

form.comment-form .btn-submit {
    align-self: flex-start;
    padding: 13px 34px; font-size: 15px; font-weight: 600;
    border: none; border-radius: var(--au-radius-full); cursor: pointer;
    background: var(--au-gradient); color: #fff; box-shadow: var(--au-shadow-brand);
    transition: transform var(--au-dur) var(--au-ease), box-shadow var(--au-dur) var(--au-ease);
}
form.comment-form .btn-submit:hover {
    transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(79, 70, 229, .55);
}

.au-form { display: flex; flex-direction: column; gap: 16px; }
.au-form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* 仅作用于"字段名"式 label；勾选类 label（.form-check / .guestbook-private-label）
   由各自规则接管，避免被强制成块级导致横向溢出 */
.au-form label:not(.form-check):not(.guestbook-private-label) {
    display: block; font-size: 14px; font-weight: 600; color: var(--au-text-2); margin-bottom: 7px;
}
.au-form .form-tip { font-size: 13px; color: var(--au-text-3); margin-top: 10px; }
.au-form .form-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--au-text-2); }
.au-form .form-check input { width: auto; }

/* 提示条 */
.alert { padding: 14px 20px; border-radius: var(--au-radius); font-size: 14.5px; margin-bottom: 20px; border: 1px solid; }
.alert-success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .35); color: #059669; }
.alert-error { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #dc2626; }
.alert-info { background: var(--au-gradient-soft); border-color: var(--au-border); color: var(--au-text-2); }
.alert:empty { display: none; }

.empty-state { text-align: center; padding: 72px 24px; color: var(--au-text-3); }
.empty-state .empty-icon { font-size: 52px; opacity: .3; margin-bottom: 18px; }
.empty-state h3 { font-size: 18px; color: var(--au-text-2); margin-bottom: 8px; font-weight: 600; }

/* ==========================================================
   12. 分页
   ========================================================== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 40px; height: 40px; padding: 0 13px; border-radius: var(--au-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--au-border); background: var(--au-surface);
    font-size: 14.5px; color: var(--au-text-2); transition: all var(--au-dur) var(--au-ease);
}
.pagination a:hover { border-color: var(--au-brand); color: var(--au-brand); background: var(--au-gradient-soft); transform: translateY(-2px); }
.pagination .current { background: var(--au-gradient); border-color: transparent; color: #fff; font-weight: 700; }
.pagination .disabled { opacity: .42; cursor: not-allowed; }

/* ==========================================================
   13. 下载 / CTA 区
   ========================================================== */
.download-card {
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius-xl); padding: 44px; text-align: center;
    box-shadow: var(--au-shadow-lg);
}
.download-icon {
    width: 84px; height: 84px; border-radius: 24px; margin: 0 auto 24px;
    background: var(--au-gradient); display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: var(--au-shadow-brand);
}
.download-card h3 { font-size: 23px; font-weight: 800; margin-bottom: 9px; }
.download-card .file-size { color: var(--au-text-3); font-size: 14px; margin-bottom: 26px; }
.download-card .btn { font-size: 16px; padding: 15px 34px; }

.cta-band {
    position: relative; overflow: hidden; border-radius: var(--au-radius-xl);
    background: var(--au-gradient); color: #fff; padding: 62px 46px; text-align: center;
    box-shadow: var(--au-shadow-brand); isolation: isolate;
}
.cta-band::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 42px 42px;
}
.cta-band h2 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; color: #fff; }
.cta-band p { font-size: 16.5px; color: rgba(255, 255, 255, .85); max-width: 620px; margin: 0 auto 30px; }
.cta-band .btn-white {
    background: #fff; color: var(--au-brand); font-weight: 700;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35);
}
.cta-band .btn-white:hover { color: var(--au-brand-2); transform: translateY(-2px); }
.cta-band .btn-outline { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(8px); }
.cta-band .btn-outline:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* 版本时间线 */
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--au-border); }
.timeline-item { position: relative; padding-bottom: 38px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: ''; position: absolute; left: -30px; top: 5px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--au-gradient); box-shadow: 0 0 0 4px var(--au-bg-soft);
}
.timeline-item.is-latest::before { box-shadow: 0 0 0 4px var(--au-bg-soft), 0 0 0 8px rgba(79, 70, 229, .16); }
.timeline-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.timeline-version {
    padding: 4px 13px; border-radius: var(--au-radius-full);
    background: var(--au-gradient); color: #fff; font-size: 13px; font-weight: 700;
}
.timeline-date { font-size: 13px; color: var(--au-text-3); }
.timeline-item h4 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.timeline-points { display: grid; gap: 8px; }
.timeline-points li { display: flex; gap: 10px; font-size: 14.6px; color: var(--au-text-2); line-height: 1.7; }
.timeline-points li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--au-brand-3); margin-top: 9px; flex-shrink: 0; }

/* ==========================================================
   14. 相册
   ========================================================== */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.album-card { padding: 0; overflow: hidden; }
.album-card-cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--au-gradient-soft); }
.album-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--au-ease-out); }
.album-card:hover .album-card-cover img { transform: scale(1.07); }
.album-card-body { padding: 20px 22px 24px; }
.album-card-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.album-card-title a { color: var(--au-text); }
.album-card-title a:hover { color: var(--au-brand); }
.album-card-meta { font-size: 13px; color: var(--au-text-3); }
.album-card-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 7px; }
.album-badge { padding: 3px 10px; border-radius: var(--au-radius-full); font-size: 11.5px; font-weight: 600; background: rgba(10, 14, 26, .68); color: #fff; backdrop-filter: blur(6px); }

.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.photo-item { border-radius: var(--au-radius); overflow: hidden; aspect-ratio: 1; border: 1px solid var(--au-border); transition: all var(--au-dur) var(--au-ease); }
.photo-item:hover { transform: translateY(-4px); box-shadow: var(--au-shadow-lg); border-color: var(--au-brand); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   15. 留言板
   ========================================================== */
.guestbook-list { display: flex; flex-direction: column; gap: 18px; }
.guestbook-item {
    display: flex; gap: 16px; padding: 22px; background: var(--au-surface);
    border: 1px solid var(--au-border); border-radius: var(--au-radius-lg);
}
.guestbook-item.guestbook-private { border-color: rgba(245, 158, 11, .42); background: rgba(245, 158, 11, .05); }
.guestbook-avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--au-gradient);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.guestbook-avatar img { width: 100%; height: 100%; object-fit: cover; }
.guestbook-body { flex: 1; min-width: 0; }
.guestbook-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-bottom: 9px; }
.guestbook-author { font-weight: 600; color: var(--au-text); }
.guestbook-time { color: var(--au-text-3); font-size: 12.5px; }
.guestbook-category-badge { padding: 2px 10px; border-radius: var(--au-radius-full); background: var(--au-bg-soft-2); color: var(--au-text-3); font-size: 12px; }
.guestbook-private-badge { padding: 2px 10px; border-radius: var(--au-radius-full); background: rgba(245, 158, 11, .16); color: #d97706; font-size: 12px; }
.guestbook-content { font-size: 15px; color: var(--au-text-2); line-height: 1.78; word-wrap: break-word; }
.guestbook-reply {
    margin-top: 14px; padding: 15px 18px; border-radius: var(--au-radius);
    background: var(--au-bg-soft); border-left: 3px solid var(--au-brand-3);
}
.guestbook-reply-head { font-size: 13px; color: var(--au-text-3); margin-bottom: 7px; }
.guestbook-reply-body { font-size: 14.5px; color: var(--au-text-2); line-height: 1.75; }

/* ==========================================================
   16. 控制器预渲染片段适配
   GuestbookController 输出的 HTML 由后端预渲染，类名固定，
   此处做样式接管，使其与主题设计保持一致。
   ========================================================== */

/* —— 分类筛选器 {raw:filter_html} —— */
.guestbook-filter { margin-bottom: 22px; }
.guestbook-filter select {
    width: auto; min-width: 160px; padding: 9px 38px 9px 16px;
    font-size: 14px; color: var(--au-text);
    background-color: var(--au-surface);
    border: 1px solid var(--au-border); border-radius: var(--au-radius-full);
    cursor: pointer; outline: none; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238592a8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 15px;
    transition: border-color var(--au-dur) var(--au-ease), box-shadow var(--au-dur) var(--au-ease);
}
.guestbook-filter select:hover { border-color: var(--au-border-strong); }
.guestbook-filter select:focus {
    border-color: var(--au-brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* —— 操作反馈 {raw:msg} / {raw:error} —— */
.success-box, .error-box {
    padding: 14px 20px; margin-bottom: 20px; border-radius: var(--au-radius);
    font-size: 14.5px; border: 1px solid; line-height: 1.7;
}
.success-box { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .35); color: #059669; }
.error-box { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #dc2626; }
html[data-theme="dark"] .success-box { color: #34d399; }
html[data-theme="dark"] .error-box { color: #f87171; }
.success-box:empty, .error-box:empty { display: none; }

/* —— 留言空状态（GuestbookTag 输出的 <li class="guestbook-empty">） —— */
.guestbook-list:has(> .guestbook-empty) { list-style: none; }
.guestbook-empty {
    list-style: none; text-align: center; padding: 52px 20px;
    color: var(--au-text-3); font-size: 15px;
    background: var(--au-surface); border: 1px dashed var(--au-border-strong);
    border-radius: var(--au-radius-lg);
}

/* —— 表单控件（控制器输出的 .form-input / .form-textarea / .form-row 等） —— */
.form-row { margin: 0; }
.au-form .form-input,
.au-form .form-textarea,
.au-form .guestbook-category-select {
    width: 100%; padding: 12px 16px; font-size: 15px; font-family: inherit;
    border: 1px solid var(--au-border); border-radius: var(--au-radius);
    background: var(--au-bg-soft); color: var(--au-text); outline: none;
    transition: border-color var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease),
                box-shadow var(--au-dur) var(--au-ease);
}
.au-form .form-textarea { resize: vertical; min-height: 128px; line-height: 1.75; }
.au-form .form-input:focus,
.au-form .form-textarea:focus,
.au-form .guestbook-category-select:focus {
    border-color: var(--au-brand); background: var(--au-surface);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.au-form .form-input[readonly] {
    background: var(--au-bg-soft-2); color: var(--au-text-2); cursor: default;
}
.au-form .form-input::placeholder,
.au-form .form-textarea::placeholder { color: var(--au-text-3); }

.au-form .guestbook-category-select {
    cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238592a8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 16px;
}

/* —— 私密留言勾选项 —— */
.guestbook-private-option { margin: 2px 0; align-self: flex-start; }
/* 覆盖上方通用 `.au-form label` 的 block 规则，改为横向排列 */
.au-form .guestbook-private-label {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    font-size: 14.5px; font-weight: 400; color: var(--au-text-2); margin-bottom: 0;
    width: auto; max-width: 100%;
}
.au-form .guestbook-private-label input[type="checkbox"] {
    width: 17px; height: 17px; flex-shrink: 0; margin: 0;
    accent-color: var(--au-brand); cursor: pointer;
}

/* —— 验证码行 ——
   ⚠️ 后端共有 5 处输出 .captcha-row（留言板 / 评论 / 友链申请 /
   投稿 ContributionController / 会员中心 MemberController），
   其中投稿与会员中心**没有专属的 form 类名**，
   若逐个按 `form.xxx .captcha-input` 写样式，迟早会漏掉（友链就漏过一次，
   导致验证码输入框退化成原生外观：2px 灰边 / 0 圆角 / 0 内边距 / 16px 字号）。

   因此这里定义**全局基准样式**，各表单的 scoped 规则只负责微调布局。 */
.captcha-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.captcha-row .captcha-input {
    flex: 1 1 150px; width: auto; min-width: 0; max-width: 210px;
    padding: 12px 16px; font-size: 15px; font-family: inherit;
    border: 1px solid var(--au-border); border-radius: var(--au-radius);
    background: var(--au-bg-soft); color: var(--au-text); outline: none;
    letter-spacing: .18em;
    transition: border-color var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease),
                box-shadow var(--au-dur) var(--au-ease);
}
.captcha-row .captcha-input:focus {
    border-color: var(--au-brand); background: var(--au-surface);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.captcha-row .captcha-input::placeholder {
    color: var(--au-text-3); letter-spacing: normal;
}
.captcha-row .captcha-img {
    width: 108px; height: 42px; flex-shrink: 0; cursor: pointer;
    border: 1px solid var(--au-border); border-radius: var(--au-radius-sm);
    /* 验证码图片由 /captcha.php 生成（浅底深字），深色模式下同样保持浅底以保证可读 */
    background: #f2f4fa; object-fit: cover; display: block;
    transition: border-color var(--au-dur) var(--au-ease);
}
.captcha-row .captcha-img:hover { border-color: var(--au-brand); }

/* —— 提交按钮 —— */
.au-form .btn-submit {
    padding: 13px 34px; font-size: 15px; font-weight: 600;
    border: none; border-radius: var(--au-radius-full); cursor: pointer;
    background: var(--au-gradient); color: #fff; box-shadow: var(--au-shadow-brand);
    transition: transform var(--au-dur) var(--au-ease), box-shadow var(--au-dur) var(--au-ease);
}
.au-form .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(79, 70, 229, .55); }

/* —— 友情链接申请表单（LinkController::renderForm 预渲染）
   类名体系：.link-apply-form > .form-group > label + .form-control，
   另有 .radio-group / .required / .btn-submit / .captcha-row —— */
form.link-apply-form { display: flex; flex-direction: column; gap: 20px; }
form.link-apply-form .form-group { display: flex; flex-direction: column; }
form.link-apply-form label {
    display: block; font-size: 14px; font-weight: 600;
    color: var(--au-text-2); margin-bottom: 8px;
}
form.link-apply-form label .required { color: var(--au-danger); margin-left: 2px; }
form.link-apply-form .form-control {
    width: 100%; padding: 12px 16px; font-size: 15px; font-family: inherit;
    border: 1px solid var(--au-border); border-radius: var(--au-radius);
    background: var(--au-bg-soft); color: var(--au-text); outline: none;
    transition: border-color var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease),
                box-shadow var(--au-dur) var(--au-ease);
}
form.link-apply-form textarea.form-control { resize: vertical; min-height: 92px; line-height: 1.75; }
form.link-apply-form select.form-control {
    cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238592a8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 16px;
}
form.link-apply-form .form-control:focus {
    border-color: var(--au-brand); background: var(--au-surface);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
form.link-apply-form .form-control::placeholder { color: var(--au-text-3); }

/* 单选组：排除"字段名"式 label，保持横向排列 */
form.link-apply-form .radio-group { display: flex; flex-wrap: wrap; gap: 10px 20px; }
form.link-apply-form .radio-group label {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 14.5px; font-weight: 400; color: var(--au-text-2); margin-bottom: 0;
}
form.link-apply-form .radio-group input[type="radio"] {
    width: 17px; height: 17px; margin: 0; accent-color: var(--au-brand); cursor: pointer;
}

/* 验证码行与输入框的外观由全局 .captcha-row 规则统一提供
   （友链表单的验证码输入框类名是 .captcha-input，不是 .form-control，
    不写这条就会退化成原生 input 外观）。此处无需重复声明。 */

form.link-apply-form .btn-submit {
    align-self: flex-start;
    padding: 13px 34px; font-size: 15px; font-weight: 600;
    border: none; border-radius: var(--au-radius-full); cursor: pointer;
    background: var(--au-gradient); color: #fff; box-shadow: var(--au-shadow-brand);
    transition: transform var(--au-dur) var(--au-ease), box-shadow var(--au-dur) var(--au-ease);
}
form.link-apply-form .btn-submit:hover {
    transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(79, 70, 229, .55);
}

/* ==========================================================
   17. 搜索页
   ========================================================== */
.search-hero { padding: 46px 0; background: var(--au-bg-soft); border-bottom: 1px solid var(--au-border); }
/* 搜索页封面背景：.search-hero 原本是浅色底，
   加封面后改为深色场景，需让输入框等控件在深底上保持可读 */
.search-hero-cover {
    position: relative; overflow: hidden; isolation: isolate;
    border-bottom: none;
    /* 与首页/内页页头统一底色 */
    background: var(--au-hero-bg);
}
.search-hero-cover h1 { color: #fff; }
.search-hero-cover .search-form-big input[type="text"] {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(255, 255, 255, .5);
}
.search-hero-cover .search-form-big select {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(255, 255, 255, .5);
    color: var(--au-text);
}
.search-hero-cover .search-form-big select option { background: #fff; color: var(--au-text); }
.search-form-big { display: flex; gap: 12px; max-width: 660px; }
.search-form-big input[type="text"] {
    flex: 1; padding: 15px 22px; font-size: 16px; border: 1px solid var(--au-border);
    border-radius: var(--au-radius-full); background: var(--au-surface); color: var(--au-text); outline: none;
    transition: all var(--au-dur) var(--au-ease);
}
.search-form-big input[type="text"]:focus { border-color: var(--au-brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.search-form-big select {
    padding: 15px 18px; font-size: 15px; border: 1px solid var(--au-border);
    border-radius: var(--au-radius-full); background: var(--au-surface); color: var(--au-text); outline: none;
}
/* 筛选 Tab：SearchController::buildTabsHtml 输出的是**裸的 .search-tab <a>**，
   外面没有 .search-tabs 容器（我曾按容器写样式，导致换行与间距全部失效，
   按钮行会压在下方卡片上）。因此这里必须用"直接子元素选择器"由父级接管布局：
   .layout-with-side > div 里的第一个 .search-tab 组即 Tab 行。 */
.search-tab {
    display: inline-flex; align-items: center;
    padding: 8px 18px; border-radius: var(--au-radius-full);
    background: var(--au-surface); border: 1px solid var(--au-border);
    color: var(--au-text-2); font-size: 14px; line-height: 1.5;
    margin: 0 8px 14px 0;
    transition: background var(--au-dur) var(--au-ease),
                color var(--au-dur) var(--au-ease),
                border-color var(--au-dur) var(--au-ease),
                transform var(--au-dur) var(--au-ease);
}
.search-tab:hover { border-color: var(--au-brand); color: var(--au-brand); transform: translateY(-1px); }
.search-tab.active, .search-tab.active:hover {
    background: var(--au-gradient); color: #fff; border-color: transparent;
    box-shadow: var(--au-shadow-brand);
}

/* 兼容：若主题内另有 .search-tabs 容器（如将来控制器输出被包裹），一并处理 */
.search-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px; }
/* 搜索结果由 SearchController 预渲染，真实类名为
   .search-item / .search-title / .search-summary / .search-meta /
   .search-tag / .search-empty / .search-avatar / .search-author-info
   ⚠️ 内部结构是「标题 / 摘要 / 元信息」纵向堆叠，
   绝不能给 .search-item 加 flex —— 否则三者挤成一行，
   标题会被压成竖排的细长条（实测标题宽度仅 106px）。 */
.search-item {
    display: block;
    padding: 20px 0; border-bottom: 1px solid var(--au-border);
}
.search-item:last-child { border-bottom: none; }
.search-title { font-size: 17.5px; font-weight: 700; margin-bottom: 8px; line-height: 1.45; }
.search-title a { color: var(--au-text); }
.search-title a:hover { color: var(--au-brand); }
.search-summary {
    font-size: 14.5px; color: var(--au-text-2); line-height: 1.75; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.search-summary mark, .search-title mark {
    background: rgba(245, 158, 11, .28); color: inherit; padding: 1px 4px; border-radius: 3px;
}
.search-meta { font-size: 12.5px; color: var(--au-text-3); display: flex; gap: 14px; flex-wrap: wrap; }
.search-meta .search-tag {
    display: inline-block; padding: 2px 10px; border-radius: var(--au-radius-full);
    background: var(--au-gradient-soft); color: var(--au-brand); font-size: 12px;
}
.search-empty {
    text-align: center; padding: 56px 24px; color: var(--au-text-3); font-size: 15px;
    background: var(--au-bg-soft); border: 1px dashed var(--au-border-strong);
    border-radius: var(--au-radius-lg);
}
/* 作者搜索结果：头像 + 信息，横向排列 */
.search-item.search-author { display: flex; align-items: center; gap: 16px; }
.search-avatar {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
    background: var(--au-gradient-soft); flex-shrink: 0;
}
.search-author-info { flex: 1; min-width: 0; }
.search-author-info .search-title { margin-bottom: 4px; }
.search-author-info .search-summary { font-size: 13.5px; margin-bottom: 6px; }
/* 标签匹配建议 */
.search-tag-match {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 24px; padding: 14px 18px; border-radius: var(--au-radius);
    background: var(--au-gradient-soft); border: 1px solid var(--au-border);
}
.search-tag-match .tag-match-label { font-size: 13.5px; color: var(--au-text-2); flex-shrink: 0; }
.search-tag-match .tag-match-links { display: flex; gap: 8px; flex-wrap: wrap; }
.search-tag-match .tag-match-links a {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
    border-radius: var(--au-radius-full); background: var(--au-surface);
    border: 1px solid var(--au-border); color: var(--au-brand);
    font-size: 13px; text-decoration: none;
    transition: all var(--au-dur) var(--au-ease);
}
.search-tag-match .tag-match-links a:hover {
    background: var(--au-gradient); color: #fff; border-color: transparent;
}
.search-tag-match .tag-match-count {
    font-size: 11px; padding: 0 6px; border-radius: var(--au-radius-full);
    background: var(--au-bg-soft-2); color: var(--au-text-3);
}

/* ==========================================================
   18. 页脚
   ========================================================== */
.site-footer { background: var(--au-bg-soft); border-top: 1px solid var(--au-border); padding: 68px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 44px; padding-bottom: 48px; }
.footer-brand .logo { margin-bottom: 18px; }
.footer-brand p { font-size: 14.3px; color: var(--au-text-2); line-height: 1.82; max-width: 330px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 11px; background: var(--au-surface);
    border: 1px solid var(--au-border); color: var(--au-text-2);
    display: flex; align-items: center; justify-content: center; transition: all var(--au-dur) var(--au-ease);
}
.footer-social a:hover { background: var(--au-gradient); color: #fff; border-color: transparent; transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; }
.footer-col h4 { font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14.2px; color: var(--au-text-2); }
.footer-col a:hover { color: var(--au-brand); }
.footer-contact li { font-size: 14px; color: var(--au-text-2); line-height: 1.7; }

.footer-bottom {
    border-top: 1px solid var(--au-border); padding: 24px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--au-text-3);
    line-height: 1.7;
}
/* 页脚里的行内图标（如公安备案图标）：行内图片会撑高行盒，
   导致左侧 <p> 高度从 23px 暴涨到 62px，
   flex 的 flex-wrap 判定两元素放不下 → 右侧 QQ/邮箱被挤到第二行。
   ⚠️ vertical-align 单独加**无效**（行盒高度由图片本身尺寸决定）。
   正解：`display:inline-block` 脱离基线计算 + 固定 line-height 约束行盒高度。
   ⚠️ 尺寸交给模板的 width/height 属性决定，此处**不要**写 max-height ——
   若按 em 换算（13.5px × 1.35 ≈ 18px）恰好等于属性高度还好，
   但字号一变就会把图标压成细线（实测出现过 1px）。 */
.footer-bottom img {
    display: inline-block; vertical-align: middle;
}
.footer-bottom a { color: var(--au-text-3); }
.footer-bottom a:hover { color: var(--au-brand); }
.footer-bottom-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* 友情链接 */
.link-grid { display: flex; flex-wrap: wrap; gap: 12px; }
/* 申请友链页：提交规则提示
   ⚠️ 这条提示原先写在页头描述里，因文案过长换行成两行，
   把页头撑到 241px、破坏全站统一的 225px。
   故移到表单上方单独一行呈现，页头只留简短说明。 */
.link-apply-note {
    font-size: 14px; line-height: 1.7; color: var(--au-text-2);
    padding: 12px 16px; margin-bottom: 18px;
    background: var(--au-surface-2); border: 1px solid var(--au-border);
    border-left: 3px solid var(--au-brand); border-radius: var(--au-radius-sm);
}
.link-apply-note strong { color: var(--au-text); font-weight: 600; }

/* 友情链接区标题行：标题靠左、「申请友链」靠右。
   ⚠️ .section-head 默认 max-width:680px + margin:0 auto，会把两端的 flex 布局
   压回容器中间（表现为按钮紧跟标题而非靠右），故必须用 max-width:none 解除。 */
.link-head {
    max-width: none; margin-bottom: 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.link-head .section-title { font-size: 20px; margin-bottom: 0; }

/* 「申请友链」入口：与「友情链接」标题并排、靠右。
   用带箭头的胶囊按钮，与下方友链卡片形态区分，提示这是"操作入口"。 */
.footer-link-apply {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--au-radius-full);
    font-size: 13.5px; font-weight: 500; white-space: nowrap;
    color: var(--au-brand); background: var(--au-surface);
    border: 1px solid var(--au-border);
    transition: color var(--au-dur) var(--au-ease),
                border-color var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease),
                transform var(--au-dur) var(--au-ease);
}
.footer-link-apply::after {
    content: '\2192'; font-size: 14px; line-height: 1;
    transition: transform var(--au-dur) var(--au-ease);
}
.footer-link-apply:hover {
    color: #fff; background: var(--au-gradient);
    border-color: transparent; transform: translateX(-2px);
}
.footer-link-apply:hover::after { transform: translateX(2px); }

/* 友情链接（首页）：按后台分组分两行 —— 案例精选 / 友情站点 */
.link-home { padding-top: 52px; padding-bottom: 52px; }
.link-row + .link-row { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--au-border); }
/* 第一行若被 :has() 隐藏，第二行顶上来的边框要一并去掉 */
.link-row:not(:has(.link-card)) + .link-row,
.link-row:not(:has(.link-card)) + .link-row:not(:has(.link-card)) { margin-top: 0; padding-top: 0; border-top: none; }
/* 行标题：左侧品牌色竖条 + 文字，比普通小标题更有层级感 */
.link-row-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; color: var(--au-text);
    margin-bottom: 16px;
}
.link-row-bar {
    width: 3px; height: 15px; border-radius: 2px;
    background: var(--au-gradient); flex-shrink: 0;
}
/* 行标题右侧的细分隔线，让"案例精选"这类行与友链卡片在视觉上分层 */
.link-row-title::after {
    content: ''; flex: 1; height: 1px; margin-left: 6px;
    background: linear-gradient(90deg, var(--au-border), transparent);
}
/* 「友情站点」数量通常较多，网格排布更紧凑 */
.link-row:last-child .link-grid { gap: 10px; }
/* ⚠️ 某分组暂无链接时，parseLinklist() 返回空串 → .link-grid 里没有任何卡片，
   但仍残留换行/缩进空白文本节点，`:empty` 匹配不上。
   故统一用「有没有真实卡片」判定，而不是 `:empty`。 */
.link-row:not(:has(.link-card)) { display: none; }
.link-grid:not(:has(.link-card)) { display: none; }
/* 不支持 :has() 的浏览器降级：至少把空的网格高度收掉 */
.link-grid:empty { display: none; }

.link-card {
    display: flex; align-items: center; gap: 11px; padding: 12px 18px;
    background: var(--au-surface); border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    transition: transform var(--au-dur) var(--au-ease),
                border-color var(--au-dur) var(--au-ease),
                box-shadow var(--au-dur) var(--au-ease),
                background-color var(--au-dur) var(--au-ease);
}
.link-card:hover {
    border-color: var(--au-brand); transform: translateY(-3px);
    box-shadow: var(--au-shadow); background: var(--au-bg-soft);
}
.link-logo { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: var(--au-bg-soft-2); flex-shrink: 0; }

/* 友链是「可点击的站点入口」，站点名应作为链接主视觉呈现 ——
   原先用 --au-text-2（次要文字色），与正文一样淡、辨识度不足。
   改为品牌色 + 稍高字重，悬停时加深并右移，形成方向感。 */
.link-name {
    font-size: 14.6px; font-weight: 600; color: var(--au-brand);
    transition: color var(--au-dur) var(--au-ease),
                transform var(--au-dur) var(--au-ease);
}
.link-card:hover .link-name {
    color: var(--au-brand-2); transform: translateX(2px);
}
/* 无 logo 的纯文字链接：名称本身就是主体，再加一点字间距提升辨识 */
.link-card:not(:has(.link-logo)) .link-name { letter-spacing: .01em; }
.link-card:not(:has(.link-logo)) { padding-left: 16px; }

/* ==========================================================
   19. 回到顶部 / 提示
   ========================================================== */
.to-top {
    position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px;
    border-radius: 50%; background: var(--au-gradient); color: #fff;
    display: flex; align-items: center; justify-content: center; z-index: 800;
    box-shadow: var(--au-shadow-brand); opacity: 0; visibility: hidden;
    transform: translateY(14px); transition: all var(--au-dur) var(--au-ease);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-3px) scale(1.05); }

/* 抽屉打开时锁定 body 滚动：必须用 clip 而非 hidden。
   hidden 会让 body 成为滚动容器并重算文档滚动区域，
   导致 scrollWidth 被撑大出现横向滚动；clip 不创建滚动容器，
   无此副作用且不影响 position:sticky。不支持 clip 的旧浏览器由下方 hidden 兜底。 */
body.nav-locked {
    overflow: hidden;
    overflow: clip;
}
/* ⚠️ 抽屉打开时必须提升 .site-header 的层级。
   抽屉现在留在 header 内（为保住桌面端 flex 布局），而遮罩挂在 body 上，
   两者的层叠比较发生在 header 的层叠上下文**内部**：
   .site-header{z-index:900} < .nav-backdrop{z-index:940}
   → 遮罩反而盖在抽屉之上，表现为"抽屉像蒙了一层灰、点不动"。
   把 header 整体提到遮罩之上（960>940），抽屉与关闭按钮即可正常点击。 */
body.nav-locked .site-header { z-index: 960; }
/* 抽屉打开时锁定 body 滚动时，fixed 元素的定位参照系会变化，
   回到顶部按钮会被推离视口并撑大文档宽度。逻辑上二者也不该同时出现。 */
body.nav-locked .to-top { display: none; }
.to-top svg { width: 20px; height: 20px; }

.toast {
    position: fixed; top: 26px; left: 50%; transform: translateX(-50%) translateY(-16px);
    padding: 12px 26px; border-radius: var(--au-radius-full); z-index: 9999;
    font-size: 14.5px; color: #fff; box-shadow: var(--au-shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: all var(--au-dur) var(--au-ease-out);
}
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--au-success); }
.toast.error { background: var(--au-danger); }
.toast.warn { background: var(--au-warning); }

/* 滚动进场动画 */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--au-ease-out), transform .7s var(--au-ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   20. 响应式
   ========================================================== */
@media (max-width: 1240px) {
    /* 栏目较多时收紧导航间距与字号，避免换行 */
    .main-nav a { padding: 9px 10px; font-size: 14.5px; }
    .nav-search-input { width: 130px; }
    .nav-search-input:focus { width: 165px; }
    .logo-sub { display: none; }
}

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; gap: 52px; }
    .hero-visual { max-width: 560px; }
    .feature-grid, .article-grid, .album-grid { grid-template-columns: repeat(2, 1fr); }
    .showcase { grid-template-columns: 1fr; gap: 40px; }
    .showcase--reverse .showcase-body { order: 0; }
    .layout-with-side { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .stat-strip-item:nth-child(odd)::before { display: none; }
    .photo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    :root { --au-section-y: 62px; --au-gap-lg: 20px; }

    /* 窄屏隐藏头部下载按钮，改由汉堡菜单与 Hero 区承载，避免挤出视口 */
    .nav-actions > .btn { display: none; }

    /* 移动端抽屉式导航
       ⚠️ 关键：关闭态必须用 display:none，不能只靠 transform/visibility。
       position:fixed 元素即使被 translateX 移出视口右缘、且 visibility:hidden，
       其位移后的边界仍会计入文档 scrollWidth，导致移动端出现横向滚动条。
       （实测：translateX(100%) + visibility:hidden 溢出仍有 320px，
         换成 display:none 后归零。）
       另外不可改用 html{overflow-x:hidden/clip} 兜底 ——
       那会让 html 成为滚动容器，导致 position:sticky（吸顶头部/侧栏）失效。 */
    .main-nav {
        display: none;
        /* ⚠️ .main-nav 是 .header-inner（display:flex; align-items:center）的子项。
           即便写了 position:fixed，浏览器仍会用 flex 对齐机制把它当作布局项处理，
           导致：① top:0 不生效（实测 top 偏移到 38px）
                 ② height 被算成内容高度而非视口高度（线上实测仅 120px）
           必须用 position:fixed + align-self:stretch + 显式 height 三重保险。
           dvh 兼容 iOS Safari 地址栏收起/展开。 */
        position: fixed;
        top: 0; right: 0;
        align-self: stretch;
        height: 100vh; height: 100dvh;
        width: min(320px, 84vw); max-width: 100%;
        background: var(--au-surface); border-left: 1px solid var(--au-border);
        box-shadow: var(--au-shadow-lg); padding: 88px 22px 32px;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        margin-left: 0; z-index: 950;
    }
    .main-nav.is-open {
        display: block;
        animation: auNavIn var(--au-dur) var(--au-ease-out);
    }
    @keyframes auNavIn {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }
    /* 关闭动画：JS 先加 .is-closing 播放滑出，结束后再由 JS 移除
       （display:none 无法自身过渡，故需配合 JS，见 main.js 的 close()） */
    .main-nav.is-closing {
        display: block;
        animation: auNavOut var(--au-dur) var(--au-ease-in) forwards;
    }
    @keyframes auNavOut {
        from { transform: translateX(0); }
        to { transform: translateX(100%); }
    }
    /* 抽屉内部的关闭按钮（JS 动态注入）。
       抽屉会盖住 header 里的汉堡按钮，故需在抽屉内提供关闭入口。
       桌面端隐藏由媒体查询外的 `.main-nav-close{display:none}` 负责。 */
    .main-nav-close {
        position: absolute; top: 20px; right: 18px;
        display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; padding: 0;
        border-radius: 50%; border: 1px solid var(--au-border);
        background: var(--au-bg-soft); color: var(--au-text-2);
        cursor: pointer; z-index: 2;
        transition: background-color var(--au-dur) var(--au-ease),
                    color var(--au-dur) var(--au-ease),
                    border-color var(--au-dur) var(--au-ease);
        -webkit-tap-highlight-color: transparent;
    }
    .main-nav-close:hover {
        background: var(--au-gradient); color: #fff; border-color: transparent;
    }
    .main-nav-close svg { width: 19px; height: 19px; }

    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .main-nav a { padding: 12px 14px; font-size: 16px; }
    .main-nav > ul > li > a.active::after { display: none; }
    .main-nav .dropdown-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; background: transparent; padding: 0 0 0 14px;
        display: none;
    }
    .main-nav > ul > li:hover .dropdown-menu { display: block; }
    .nav-toggle { display: flex; }
    .nav-search { display: none !important; }
    .header-inner { justify-content: space-between; gap: 10px; }
    /* Logo 可收缩并省略号截断，右侧操作区固定在视口内 */
    .logo { margin-right: auto; min-width: 0; flex: 0 1 auto; }
    .nav-actions { flex-shrink: 0; gap: 8px; }
    .logo-text { min-width: 0; }
    .article-row { grid-template-columns: 1fr; gap: 18px; }
    .article-detail, .comment-section { padding: 28px 22px; }
    .article-nav { grid-template-columns: 1fr; }
    .article-nav .nav-next { text-align: left; }
    .cta-band { padding: 46px 24px; }
    .download-card { padding: 34px 24px; }
}

@media (max-width: 640px) {
    .container { padding: 0 18px; }
    /* 移动端顶栏仅保留版本徽标与会员入口，隐藏标语，避免横向溢出 */
    .topbar-tagline { display: none; }
    .topbar-links { gap: 13px; }
    .topbar-links > a:nth-child(2),
    .topbar-links > a:nth-child(3) { display: none; }
    .feature-grid, .article-grid, .album-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero { padding: 68px 0 62px; }
    .hero-actions .btn { width: 100%; }
    .hero-meta { gap: 22px; }
    .stat-strip { grid-template-columns: 1fr; gap: 22px; padding: 30px 22px; }
    .stat-strip-item + .stat-strip-item::before { display: none; }
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .topbar .container { justify-content: center; text-align: center; }
    .topbar-links { gap: 14px; justify-content: center; }
    .search-form-big { flex-direction: column; }
    .search-form-big select, .search-form-big .btn { width: 100%; }
    .breadcrumb-bar { padding: 11px 0; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .to-top { right: 16px; bottom: 16px; }
}

/* 打印样式 */
@media print {
    .topbar, .site-header, .site-footer, .sidebar, .article-actions,
    .pagination, .to-top, .nav-toggle, .theme-toggle, .search-hero { display: none !important; }
    body { background: #fff; color: #000; }
    .article-detail { border: none; padding: 0; }
}