html[data-ui='vivid'] .top {position:sticky;top:0;z-index:100;
backdrop-filter:blur(16px) saturate(1.3);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
background:color-mix(in srgb,var(--paper) 78%,transparent);
border-bottom:1px solid transparent;
transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
html[data-ui='vivid'] .top.scrolled {border-bottom-color:var(--line);
box-shadow:0 1px 0 var(--line);}
html[data-ui='vivid'] .top-in {max-width:1100px;margin:0 auto;
padding:0 28px;height:60px;
display:flex;align-items:center;gap:20px;}
html[data-ui='vivid'] .brand {display:flex;align-items:center;gap:10px;
font-weight:700;font-size:15px;letter-spacing:.02em;
transition:transform .5s var(--spring);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .brand:hover {transform:scale(1.04)}
}
/* .av 品牌标记：原来这里是一条 .brand .av 规则，但它被下面 :is(.brand,.dock-brand)
那条同特指度、且位置更靠后的规则完整覆盖了——等于死规则。合并成一条，避免两处漂移。 */
html[data-ui='vivid'] .nav {display:flex;gap:2px;flex:1;justify-content:center}
html[data-ui='vivid'] .nav a {position:relative;font-size:13.5px;font-weight:600;color:var(--soft);
padding:8px 14px;border-radius:999px;
transition:color .25s var(--ease),background .25s var(--ease),transform .5s var(--spring);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .nav a:hover {color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}
}
html[data-ui='vivid'] .nav a.on {color:var(--accent)}
html[data-ui='vivid'] .nav a.on::after {content:"";position:absolute;left:50%;bottom:4px;
width:4px;height:4px;border-radius:50%;
background:var(--accent);transform:translateX(-50%);}
html[data-ui='vivid'] .top-acts {display:flex;align-items:center;gap:6px}
html[data-ui='vivid'] .icon-btn {width:36px;height:36px;border-radius:50%;
display:grid;place-items:center;color:var(--soft);font-size:15px;
transition:background .25s var(--ease),color .25s var(--ease),transform .5s var(--spring);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .icon-btn:hover {background:var(--accent-soft);color:var(--accent);transform:scale(1.08)}
}
/* 手指标准 44px。放这里而不是 tokens.css：那边先导入，同特指度会被上面的 36px 反压 */
@media (pointer: coarse) {
html[data-ui='vivid'] .icon-btn {min-height:44px;width:44px}
}
/* ☰ 只给窄屏。这一条必须在下面的媒体查询之前 —— 媒体查询不加特指度，
写在后面会把 .menu-btn {display:grid} 压掉。 */
html[data-ui='vivid'] .menu-btn {display:none}
@media (max-width:720px) {
/* 顶栏整条在手机上退场：品牌和导航都挪到底部悬浮 dock（参考 innei.in 的
底部胶囊），内容区一寸顶栏都不占。桌面照旧走内联导航。
dock 的 display:flex 在下面 .dock 基准规则之后 —— 同特指度后导入者赢，
写在前面会被 display:none 压掉（chrome.css 老坑）。 */
html[data-ui='vivid'] .top {display:none}
}
/* ---- 窄屏：顶部玻璃条 + 右侧抽屉 ----
条上只留品牌和汉堡（fixed，body 顶部让位），导航收进右侧抽屉：
大字栏目 + 当前项左缘短杠 + mono 英文脚注，底部是明暗切换。
条的 z-index 压在抽屉 scrim 之上：开着时汉堡原位并成 ✕，不消失。 */
html[data-ui='vivid'] .top-m {position:fixed;z-index:120;
top:0;left:0;right:0;
display:none;align-items:center;justify-content:space-between;
padding:max(8px, env(safe-area-inset-top)) 12px 8px;
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--card) 82%,transparent);
backdrop-filter:blur(20px) saturate(1.5);
-webkit-backdrop-filter:blur(20px) saturate(1.5);
transition:transform .28s var(--ease);}
/* 向下滑动自动藏起：transform 滑出屏幕，不占布局本来也不占，纯粹让开视线。
抽屉开着时 JS 保证不加这个类（汉堡是 ✕，不能消失） */
html[data-ui='vivid'] .top-m.bar-hide {transform:translateY(-105%)}
html[data-ui='vivid'] .top-m-brand {display:flex;align-items:center;gap:10px;
font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);}
html[data-ui='vivid'] .top-m-brand .av {width:28px;height:28px;flex:none;color:var(--ink);}
/* 窄屏才摆出来；这条必须压在基准规则（display:none）之后 */
@media (max-width:720px) {
html[data-ui='vivid'] .top-m {display:flex}
/* 内容区顶部让位：条高 = 44 触达 + 16 上下内边距 + 1 发丝线 ≈ 61px */
html[data-ui='vivid'] body {padding-top:calc(max(8px, env(safe-area-inset-top)) + 61px)}
}
/* 抽屉：scrim 全屏淡入，面板从右侧滑入（spring），玻璃面板圆左角 */
html[data-ui='vivid'] .drawer-root {position:fixed;inset:0;z-index:110;}
html[data-ui='vivid'] .drawer-root .scrim {position:absolute;inset:0;
background:color-mix(in srgb,var(--ink) 32%,transparent);}
html[data-ui='vivid'] .drawer {position:absolute;top:0;right:0;bottom:0;
width:min(66vw, 250px);
border-left:1px solid var(--line);
border-radius:24px 0 0 24px;
background:color-mix(in srgb,var(--card) 92%,transparent);
backdrop-filter:blur(28px) saturate(1.6);
-webkit-backdrop-filter:blur(28px) saturate(1.6);
box-shadow:var(--shadow-lg);
display:flex;flex-direction:column;
padding:calc(max(8px, env(safe-area-inset-top)) + 66px) 22px max(14px, env(safe-area-inset-bottom));
overscroll-behavior:contain;
overflow-y:auto;
scrollbar-width:none;}
html[data-ui='vivid'] .drawer:focus {outline:none}
html[data-ui='vivid'] .drawer-nav {display:flex;flex-direction:column;}
html[data-ui='vivid'] .drawer-nav a {position:relative;display:flex;align-items:center;gap:12px;
padding:12px 8px;font-size:16.5px;font-weight:500;letter-spacing:.01em;
line-height:1.3;color:var(--soft);border-radius:10px;
transition:color .3s var(--ease),background-color .3s var(--ease);}
html[data-ui='vivid'] .drawer-nav a .ic {width:21px;height:21px;flex:none;
color:var(--soft);
opacity:.75;
transition:color .3s var(--ease),opacity .3s var(--ease);}
html[data-ui='vivid'] .drawer-nav a.on {color:var(--accent);
background:color-mix(in srgb,var(--accent) 8%,transparent);}
html[data-ui='vivid'] .drawer-nav a.on .ic {color:var(--accent);opacity:1}
/* 当前项的左缘短杠：面板内边距 22px，杠落在离屏边 10px 处 */
html[data-ui='vivid'] .drawer-nav a:active {color:var(--accent);
background:color-mix(in srgb,var(--accent) 8%,transparent);}
html[data-ui='vivid'] .drawer-foot {margin-top:auto;padding-top:16px;
display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
html[data-ui='vivid'] .drawer-foot .chip {padding:6px 14px;border-radius:999px;
border:1px solid var(--line);background:transparent;
font-size:12.5px;font-weight:600;color:var(--soft);cursor:pointer;
transition:color .25s var(--ease),border-color .25s var(--ease);}
html[data-ui='vivid'] .drawer-foot .chip:active {color:var(--accent);border-color:var(--accent)}
html[data-ui='vivid'] .drawer-foot .m-desc {margin:0;font-size:12px;line-height:1.7;
color:var(--muted);}
/* 进：scrim 淡入 + 面板从右侧滑入；出：整块滑回去 */
html[data-ui='vivid'] .v-drawer-enter-active {transition:opacity .3s var(--ease)}
html[data-ui='vivid'] .v-drawer-enter-active .drawer {transition:transform .55s var(--spring),opacity .35s var(--ease)}
html[data-ui='vivid'] .v-drawer-enter-from {opacity:0}
html[data-ui='vivid'] .v-drawer-enter-from .drawer {transform:translateX(60px);opacity:0}
html[data-ui='vivid'] .v-drawer-leave-active {transition:opacity .22s var(--ease)}
html[data-ui='vivid'] .v-drawer-leave-active .drawer {transition:transform .22s var(--ease)}
html[data-ui='vivid'] .v-drawer-leave-to {opacity:0}
html[data-ui='vivid'] .v-drawer-leave-to .drawer {transform:translateX(48px)}
/* 全局 reduce-motion 只把 duration 压扁，delay 会留下来 → 单独清掉 */
@media (prefers-reduced-motion: reduce) {
html[data-ui='vivid'] .v-drawer-enter-active,
html[data-ui='vivid'] .v-drawer-enter-active .drawer {transition-delay:0s !important}
}
/* 品牌位只管尺寸：头像本身已裁成圆（AuthorAvatar 的 img），外面不加光环、
右下角也不加在线点——顶栏要的就是一张干净的圆头像。color 供 LogoMark
回落（未设头像时）着色。只作用于桌面顶栏 .brand：手机标签栏里没有品牌位，
选择器不需要 :is() 兼顾两边。 */
html[data-ui='vivid'] .brand .av {width:30px;height:30px;flex:none;
color:var(--ink);}
/* 短文快发盒（QuickShort）的 vivid 差异：圆角跟自己的半径档走，
FAB 贴到安全区（手机端导航在顶部，底部没有常驻栏要避让） */
html[data-ui='vivid'] .qs-card {border-radius:14px;}
html[data-ui='vivid'] .qs-fab {bottom:max(20px, env(safe-area-inset-bottom));}
html[data-ui='vivid'] .progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
background:transparent;pointer-events:none;}
html[data-ui='vivid'] .progress i {display:block;height:100%;width:0%;
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
transition:width .1s linear;}
html[data-ui='vivid'] .progress-pct {position:fixed;right:22px;top:50%;transform:translateY(-50%);
z-index:90;font-family:var(--mono);font-size:11px;font-weight:700;
color:var(--muted);letter-spacing:.06em;
writing-mode:vertical-rl;
opacity:0;transition:opacity .4s var(--ease);
pointer-events:none;}
html[data-ui='vivid'] .progress-pct.show {opacity:1}
html[data-ui='vivid'] .progress-pct b {color:var(--accent);font-weight:800}
html[data-ui='vivid'] .foot {max-width:1100px;margin:40px auto 0;padding:28px 28px 120px;
border-top:1px solid var(--line);
text-align:center;color:var(--muted);font-size:12.5px;line-height:2;}
html[data-ui='vivid'] .foot a {color:var(--accent);font-weight:600;transition:opacity .25s}
/* 后台入口：版权旁的低调小字，弱化到与版权同行观感，hover 才提亮 */
html[data-ui='vivid'] .foot a.admin-entry {color:var(--muted);font-weight:400;
text-decoration:none;}
html[data-ui='vivid'] .foot a.admin-entry:hover {color:var(--accent)}
/* 页脚社交排：图标居中一行，与 classic 页脚同步 */
html[data-ui='vivid'] .foot-social {display:flex;justify-content:center;align-items:center;
gap:18px;margin:14px 0 18px;}
html[data-ui='vivid'] .foot-social a {color:var(--soft);font-weight:400;
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:8px;transition:color .25s,background .25s;}
html[data-ui='vivid'] .foot-social a:hover {color:var(--accent);background:var(--accent-soft);}
html[data-ui='vivid'] .foot-social svg {width:17px;height:17px;fill:currentColor;}
html[data-ui='vivid'] .foot-social span {font-size:12px;}
/* 页脚明暗切换：手机端顶栏退场后这里补位，桌面隐藏（顶栏有主题键）。
排在 foot-nav 文字行的末尾，做成和相邻链接同观感的小方块；
前面的 · 分隔符跟按钮一起在桌面隐藏，免得尾巴上挂个空点。 */
html[data-ui='vivid'] .foot .theme-toggle,
html[data-ui='vivid'] .foot .theme-sep {display:none}
html[data-ui='vivid'] .foot .theme-toggle {padding:0;width:24px;height:24px;
align-items:center;justify-content:center;
border:0;border-radius:6px;background:transparent;
color:var(--accent);font-size:14px;line-height:1;cursor:pointer;
transition:opacity .25s;}
html[data-ui='vivid'] .foot .theme-toggle:active {opacity:.6}
@media (max-width:720px) {
html[data-ui='vivid'] .foot .theme-toggle {display:inline-flex}
html[data-ui='vivid'] .foot .theme-sep {display:inline}
}
/* 项目信息行：源码入口 + 版权。刻意不并进 .foot-social——那一排是站主的社交
身份，源码是仓库入口，混在一起会让人以为它也是一个社交账号。
放在 .foot a 规则之后：两者特指度相同，靠后者才能压掉默认的强调色。 */
html[data-ui='vivid'] .foot-meta {display:flex;justify-content:center;align-items:center;
gap:8px;margin:16px 0 0;color:var(--muted);}
html[data-ui='vivid'] .foot-meta a {display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:7px;color:var(--soft);font-weight:400;
transition:color .25s,background .25s;}
html[data-ui='vivid'] .foot-meta a:hover {color:var(--accent);background:var(--accent-soft);}
html[data-ui='vivid'] .foot-meta svg {width:15px;height:15px;fill:currentColor;}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .foot a:hover {opacity:.75}
}
html[data-ui='vivid'] .foot .sep {margin:0 8px;opacity:.4}
html[data-ui='vivid'] .foot .quote {font-family:var(--serif);font-style:italic;
color:var(--soft);margin-bottom:8px;font-size:13.5px;}
html[data-ui='vivid'] .switch {position:fixed;z-index:99;left:50%;bottom:18px;transform:translateX(-50%);
display:flex;gap:6px;padding:6px;border-radius:999px;
background:rgba(28,28,30,.88);backdrop-filter:blur(14px);
box-shadow:0 10px 36px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.08);}
html[data-ui='vivid'] .switch button {padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
color:rgba(255,255,255,.55);transition:.2s;}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .switch button:hover {color:#fff;background:rgba(255,255,255,.1)}
}
html[data-ui='vivid'] .switch button.on {background:#fff;color:#111}
html[data-ui='vivid'] .switch .lbl {color:rgba(255,255,255,.35);font-size:11px;align-self:center;padding:0 8px;letter-spacing:.08em}
/* 窄屏的跨模块覆盖（hero/wrap/paper/about-card/toolbar）在 mobile.css ——
那些选择器的基准尺寸定义在 home/article/pages.css，本文件排在它们前面，
同特指度压不住。详见 mobile.css 顶部说明。 */