/**
 * XBlog / 闲报 — 统一主题样式 (theme.css)
 * --------------------------------------------------------------
 * 单一样式表，取代 style.css / bootstrap.min.css / fluent-ui.css
 * 以及各页面内联 <style>。
 * 设计语言: Windows 10 UWP / Fluent, 主色 = 浅绿 (--accent)
 * MDL2 图标字体只在此处定义一次。
 */

/* =========================================================
 * 1. 设计令牌 (Design Tokens)
 * ======================================================= */
:root{
    /* 主色: 冰云青绿 (Fluent Teal/Cyan) */
    --accent:#0F7B6C;            /* 青绿主色 */
    --accent-hover:#0C6358;      /* hover */
    --accent-soft:rgba(15,123,108,.1);

    /* 中性色 */
    --bg:#F9F8F6;
    --surface:#fff;
    --text:#1F1D1A;
    --muted:#787570;
    --border:#ECEBE8;

    /* 语义色 */
    --danger:#D13438;
    --warning:#FF8C00;
    --success:#107C10;
    --secondary:#6c757d;

    /* 形状 / 字体 / 阴影 */
    --radius:0;                   /* UWP 直角 */
    --font:"Segoe UI",system-ui,-apple-system,sans-serif;
    --shadow-sm:0 1px 2px rgba(0,0,0,.04);
    --shadow-lg:0 2px 8px rgba(0,0,0,.06);
    --shadow:0 1px 4px rgba(0,0,0,.06);

    /* 兼容旧内联样式 / 各页引用的别名 */
    --accent-hover:#0C6358;
    --theme-green:var(--accent);
    --f-text-main:#1A1A1A;
    --text-muted:#787570;
    --border-color:#ECEBE8;
    --fluent-shadow-rest:0 2px 8px rgba(0,0,0,.1);
    --gray:#888;
    --primary:var(--accent);
    --border-hover:#b0b0b0;
    --theme:#0C6358;
}

/* 首页使用单一轻量淡入，避免置顶与正文卡片的级联贝塞尔动画互相抢帧。 */
@keyframes homepageFade{from{opacity:0}to{opacity:1}}
.home-primary .anim-in{opacity:1;animation:homepageFade .18s ease-out both}
.home-primary .video-grid .article-card{opacity:1;animation:none;transform:none}

/* =========================================================
 * 2. 基础重置
 * ======================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);font-size:15px;line-height:1.75;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}
img{max-width:100%;height:auto}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c0c0c0;border-radius:3px}

/* =========================================================
 * 3. MDL2 图标字体 (只定义一次)
 * 同时兼容 .f-icon (style/admin/db_manager) 与 .ic (view/user)
 * ======================================================= */
@font-face{font-family:'MDL2';src:url('./Segoe MDL2 Assets.ttf') format('truetype');font-display:swap}
.f-icon,.ic,.read-icon,.comments-icon,.likes-icon,.author-icon,.back-icon{
    font-family:'MDL2';display:inline-block;vertical-align:middle;font-style:normal;line-height:1;
}
.ic{font-size:16px}
.f-icon--xl,.ic--xl{font-size:40px}

/* 眼睛 / 浏览 */
.f-icon--eye::before,.read-icon::before,.ic--view::before{content:"\E890"}
/* 评论 */
.f-icon--chat::before,.comments-icon::before{content:"\E8F2"}
.ic--chat::before{content:"\E8F2"}
/* 点赞 */
.f-icon--like::before,.likes-icon::before,.ic--like::before{content:"\E8E1"}
/* 用户 */
.f-icon--person::before,.ic--person::before{content:"\E77B"}
/* 退出 */
.f-icon--logout::before,.ic--logout::before{content:"\E8DA"}
/* 首页 */
.f-icon--home::before,.ic--home::before{content:"\E80F"}
/* 返回 */
.ic--back::before{content:"\E76B"}
/* 日历 */
.ic--calendar::before{content:"\E787"}
/* 盾牌(审核) */
.f-icon--shield::before{content:"\E9B5"}
/* 文档 */
.f-icon--document::before,.ic--document::before{content:"\E7C3"}
/* 编辑 */
.f-icon--edit::before,.ic--edit::before{content:"\E70F"}
/* 菜单 */
.f-icon--menu::before{content:"\E700"}
.f-icon--search::before{content:"\E721"}
/* 勾 */
.f-icon--checkmark::before{content:"\E73E"}
/* 取消 */
.f-icon--cancel::before{content:"\E711"}
/* 书籍(内容) */
.ic--book::before{content:"\E736"}
/* 设置 */
.ic--settings::before{content:"\E713"}
/* 警告 */
.ic--warning::before{content:"\E7BA"}
/* 删除 */
.ic--delete::before{content:"\E74D"}
/* 保存 */
.f-icon--save::before{content:"\E74E"}

/* =========================================================
 * 4. 通用组件 — 按钮 (Bootstrap 兼容)
 * ======================================================= */
.btn,.uwp-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 18px;font-size:13px;font-weight:500;font-family:var(--font);
    border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
    transition:all .15s;text-decoration:none;line-height:1.4;white-space:nowrap;
}
.btn-sm,.uwp-btn--sm{padding:4px 12px;font-size:12px}

.btn-primary,.uwp-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover,.uwp-btn--primary:hover{background:var(--accent-hover);color:#fff}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:#0d6510;color:#fff}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning)}
.btn-warning:hover{background:#e07b00;color:#fff}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#b9292d;color:#fff}
.btn-secondary{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.btn-secondary:hover{background:#5a6268;color:#fff}

.btn-outline-primary,.uwp-btn--outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-outline-primary:hover,.uwp-btn--outline:hover{background:var(--accent);color:#fff}
.btn-outline-secondary{background:transparent;color:var(--secondary);border-color:var(--secondary)}
.btn-outline-secondary:hover{background:var(--secondary);color:#fff}
.btn-outline-success{background:transparent;color:var(--success);border-color:var(--success)}
.btn-outline-success:hover{background:var(--success);color:#fff}
.btn-outline-danger,.uwp-btn--danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-outline-danger:hover,.uwp-btn--danger:hover{background:var(--danger);color:#fff}

.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--border)}
.btn-edit{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn-edit:hover{background:var(--accent);color:#fff}
.btn-del{color:var(--danger);text-decoration:none;font-weight:600}
.btn-del:hover{text-decoration:underline}

/* =========================================================
 * 5. 通用组件 — 徽章 (Badge)
 * ======================================================= */
.badge{display:inline-block;padding:3px 8px;font-size:11px;font-weight:600;border-radius:2px}
.bg-danger{background:var(--danger);color:#fff}
.bg-warning{background:var(--warning);color:#fff}
.bg-success{background:var(--success);color:#fff}
.bg-light{background:#f0f0f0;color:var(--text)}
.bg-secondary{background:var(--secondary);color:#fff}
.badge-0{background:rgba(255,140,0,.12);color:#8B5E00}
.badge-1{background:rgba(16,124,16,.12);color:var(--success)}
.badge-2{background:rgba(209,52,56,.12);color:var(--danger)}
.markdown-import{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:12px 0 20px;background:var(--accent-soft);border-left:3px solid var(--accent);font-size:13px}.markdown-import input{margin-left:8px}.inbox-message{padding:16px 18px;margin-top:12px;border:1px solid var(--border);background:var(--surface)}.inbox-message.unread{border-left:3px solid var(--accent)}.inbox-message small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.inbox-message p{margin:12px 0 0;font-size:14px;white-space:normal}
.badge-admin{background:var(--accent-soft);color:var(--accent)}
.badge-user{background:rgba(0,0,0,.05);color:var(--muted)}
.badge-key{background:#fff3cd;color:#856404}
.badge-type{background:#e3f2fd;color:#0d47a1}

/* =========================================================
 * 6. 通用组件 — 表格 / 卡片 / 表单
 * ======================================================= */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:10px 14px;border-bottom:2px solid var(--border);background:#fafafa}
td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:hover td{background:rgba(0,0,0,.02)}
.table-hover tbody tr:hover td{background:rgba(0,0,0,.02)}
.table-light thead th{background:#fafafa}
.align-middle{vertical-align:middle}
.table-responsive{overflow-x:auto}

/* =========================================================
 * 6.5 Fluent 输入框统一 — 悬停高亮 + 聚焦底部中线从中心展开
 * 应用到全站所有 input/textarea/select（利用 background-size
 * 动画实现"从中点铺满"效果，无需包装元素）
 * ======================================================= */
input[type=text],input[type=email],input[type=password],input[type=search],
textarea,select,.form-control,.search-input,.uwp-input,.uwp-textarea{
    /* Fluent 底部强调线: 默认0宽, 聚焦时从中心展开铺满 */
    background-image:linear-gradient(var(--accent),var(--accent));
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:0% 2px;
    transition:background-size .25s cubic-bezier(.1,.9,.2,1),border-color .15s,background-color .15s,box-shadow .15s;
}
/* 悬停: 微微高亮 */
input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,input[type=search]:hover,
textarea:hover,select:hover,.form-control:hover,.search-input:hover,.uwp-input:hover,.uwp-textarea:hover{
    background-color:#fcfcfb;
    border-color:#b8b5b0;
}
/* 聚焦: 中线从中心铺满底部 */
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,
textarea:focus,select:focus,.form-control:focus,.search-input:focus,.uwp-input:focus,.uwp-textarea:focus{
    background-size:100% 2px;
    border-color:var(--accent);
    outline:none;
}
/* CKEditor 内部输入框排除背景线干扰 */
.ck-editor__editable,
.ck-editor__editable:focus,
.ck-editor__editable:hover{
    background-image:none;
}

.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.card.p-0{padding:0}
.card.p-4{padding:16px}

.form-control{width:100%;padding:8px 12px;font-size:14px;border:1px solid var(--border);border-radius:var(--radius);outline:none;font-family:inherit;transition:border-color .15s;background:var(--surface)}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
textarea.form-control{min-height:120px;resize:vertical}
.form-label{font-weight:600;margin-bottom:4px;display:block;font-size:13px;color:var(--muted)}

/* 内容区块排版 (文章正文 / 预览) */
/* 文章正文 — 全面防溢出 */
.article-body,.content{font-size:.95rem;line-height:1.85;color:var(--text);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}
.reading-progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:2000;transition:width .12s linear}.reader-action{display:inline;margin-left:10px}.reader-action .link{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 16px;background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);color:var(--accent);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}.reader-action .link:hover{background:var(--accent);color:#fff}
.article-body img,.article-body video,.article-body iframe,.article-body embed,
.content img{display:block;margin:20px auto;max-width:100%;height:auto}
/* 宽表格: 外层 max-width 裁剪 + 内容可独立滚动 */
.article-body table,.content table{max-width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body td,.article-body th,.content td,.content th{border:1px solid var(--border);padding:8px 12px;word-break:break-word}
/* 代码块不撑破页面 */
.article-body pre,.article-body code,.content pre,.content code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-all;font-size:.85rem}
.article-body blockquote,.content blockquote{border-left:3px solid var(--accent);margin:16px 0;padding:8px 16px;background:var(--accent-soft);color:var(--muted);word-break:break-word}
/* 卡片本身限制宽度 */
:is(.article-body,.article-content,.content,.ck-content) ul{list-style:disc outside;padding-inline-start:1.75em;margin:.75em 0}
:is(.article-body,.article-content,.content,.ck-content) ol{list-style:decimal outside;padding-inline-start:1.75em;margin:.75em 0}
:is(.article-body,.article-content,.content,.ck-content) li{display:list-item;margin:.3em 0;overflow:visible}
:is(.article-body,.article-content,.content,.ck-content) li > :is(ul,ol){margin:.25em 0}
:is(.article-body,.article-content,.content) {display:flow-root}
:is(.article-body,.article-content,.content) figure.image{display:table;max-width:100%;margin:1.25em auto;clear:both}
:is(.article-body,.article-content,.content) figure.image.image_resized{display:block}
:is(.article-body,.article-content,.content) figure.image img{display:block;width:100%;max-width:100%;height:auto;margin:0}
:is(.article-body,.article-content,.content) figure.image figcaption{display:table-caption;caption-side:bottom;font-size:.85em;text-align:center;color:var(--muted);padding:.4em}
:is(.article-body,.article-content,.content) figure.image.image_resized figcaption{display:block}
:is(.article-body,.article-content,.content) .image-style-side,:is(.article-body,.article-content,.content) .image-style-align-right{float:right;margin-left:1.25em;max-width:50%}
:is(.article-body,.article-content,.content) .image-style-align-left{float:left;margin-right:1.25em;max-width:50%}
:is(.article-body,.article-content,.content,.ck-content) audio{display:block;width:100%;max-width:100%;margin:.75em 0}
.ck-editor__editable{overflow-wrap:anywhere}
@media(max-width:600px){:is(.article-body,.article-content,.content) figure.image{max-width:100%}:is(.article-body,.article-content,.content) .image-style-side,:is(.article-body,.article-content,.content) .image-style-align-right,:is(.article-body,.article-content,.content) .image-style-align-left{float:none;margin:1em auto;max-width:100%}}
.wrap .article-card{overflow:hidden}

/* =========================================================
 * 7. 工具类 (Bootstrap 兼容)
 * ======================================================= */
.d-flex{display:flex}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.align-items-center{align-items:center}
.gap-8{gap:8px}.gap-12{gap:12px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}.mb-5{margin-bottom:40px}
.mt-3{margin-top:16px}.mt-4{margin-top:24px}.mt-5{margin-top:40px}
.ms-2{margin-left:8px}.me-2{margin-right:8px}
.p-0{padding:0}.p-4{padding:16px}
.px-4{padding-left:24px;padding-right:24px}
.py-5{padding-top:40px;padding-bottom:40px}
.text-center{text-align:center}.text-end{text-align:right}
.text-muted{color:var(--muted)!important}.text-dark{color:var(--text)}
.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.text-sm{font-size:12px}
.fw-bold{font-weight:600}.w-100{width:100%}
.border{border:1px solid var(--border)}.border-bottom{border-bottom:1px solid var(--border)}
.pb-2{padding-bottom:8px}
.shadow-sm{box-shadow:var(--shadow-sm)}
.d-md-none{display:none}           /* 桌面端隐藏, 移动端显示 (见媒体查询) */
.text-decoration-none{text-decoration:none}

/* =========================================================
 * 8. 首页 navbar-custom + 搜索 + 网格
 * ======================================================= */
.navbar-custom{display:flex;align-items:center;height:60px;padding:0 4%;background:rgba(255,255,255,.75);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;z-index:1000}
.navbar-brand{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;color:var(--text);text-decoration:none!important;flex-shrink:0;margin-right:24px}
.navbar-brand:hover{color:var(--accent)}
.brand-icon{width:32px;height:32px;border-radius:var(--radius)}
.brand-lockup{display:block;position:relative;width:104px;height:42px;overflow:hidden;flex:0 0 104px}
.brand-lockup img{position:absolute;top:-37px;left:-31px;width:164px;max-width:none;height:auto;display:block}
.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}
.nav-actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.nav-auth{margin-left:auto;display:flex;gap:12px;align-items:center}

.search-container{flex:1;max-width:560px;margin:0 24px}
.search-wrapper{position:relative;display:flex;align-items:center}
.search-input{width:100%;height:32px;padding:0 12px;font-size:13px;font-family:var(--font);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:border-color .15s}
.search-input:hover{border-color:#a0a0a0}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.focus-border{display:none}

.main-container{margin-top:40px;padding:0 3vw 48px;font-size:14px}
.home-page{background:#e9eeeb}
.home-wallpaper{position:fixed;inset:0;z-index:-1;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .42s ease;pointer-events:none}
.home-wallpaper::after{content:'';position:absolute;inset:0;background:rgba(241,245,242,.45)}
.home-wallpaper.is-ready{opacity:1}
.home-page .main-container{position:relative}
.home-page .navbar-custom{background:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.62)}
.home-page .video-grid .article-card{background:rgba(255,255,255,.84);border-color:rgba(255,255,255,.68);backdrop-filter:blur(12px) saturate(135%);-webkit-backdrop-filter:blur(12px) saturate(135%)}
.home-page .tag-tabs{width:max-content;max-width:100%;padding:0 8px;background:rgba(255,255,255,.69);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(12px) saturate(135%);-webkit-backdrop-filter:blur(12px) saturate(135%)}
.home-page .home-aside .aside-section{background:rgba(255,255,255,.76);border-color:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.bing-intro-modal{position:fixed;z-index:1100;right:22px;bottom:22px;width:min(340px,calc(100vw - 44px));visibility:hidden;opacity:0;pointer-events:none;transform:translate3d(0,10px,0);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.bing-intro-modal.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:translate3d(0,0,0);transition:opacity .2s ease,transform .2s ease}
.bing-intro-card{position:relative;padding:16px 18px 15px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.72);box-shadow:0 12px 34px rgba(10,20,16,.16);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
.bing-intro-close{position:absolute;top:7px;right:7px;width:26px;height:26px;border:0;background:transparent;color:var(--muted);font:24px/1 var(--font);cursor:pointer;transition:background-color .18s ease,color .18s ease}
.bing-intro-close:hover{background:rgba(31,29,26,.07);color:var(--text)}
.bing-intro-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 26px 6px 0;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.bing-intro-topline time{color:var(--muted);font-weight:600;letter-spacing:.03em;text-transform:none}
.bing-intro-card h2{margin:0;color:var(--text);font-size:16px;line-height:1.35;letter-spacing:-.015em}
.bing-intro-card p{margin:6px 0 0;color:#4b514e;font-size:12px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bing-intro-actions{display:flex;align-items:center;justify-content:flex-end;margin-top:9px}
.bing-intro-actions a{color:var(--accent);font-size:12px;font-weight:700;text-decoration:none;transition:color .18s ease}
.bing-intro-actions a:hover{color:var(--accent-hover);text-decoration:underline}
.home-pinned{margin:0 0 28px}.home-pinned-kicker{padding:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--accent);border-bottom:2px solid var(--text);margin-bottom:16px}.pinned-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tag-tabs{margin:0 0 28px}.tag-tabs .tab{font-weight:600}
.home-feed{transition:opacity .16s ease}.home-feed.is-filtering{opacity:.52;pointer-events:none}
.homepage-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:32px;align-items:start}.home-feed{min-width:0}.home-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;border-left:3px solid var(--accent);padding-left:10px}.home-section-head h2{font-size:1.25rem;margin:0}.home-section-head span{font-size:12px;color:var(--muted)}.home-article-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px;row-gap:24px}
.home-aside{display:grid!important;grid-template-columns:1fr!important;gap:16px;min-width:0}.aside-section{background:var(--surface);border:1px solid var(--border);padding:16px;box-shadow:var(--shadow-sm);position:relative}.aside-section::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent)}.aside-section+.aside-section{margin:0}.aside-title{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}.text-ranking{list-style:none;margin:0;padding:0}.text-ranking li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;padding:9px 0;border-bottom:1px solid var(--border)}.text-ranking li:last-child{border-bottom:0}.text-ranking li span{color:var(--accent);font-weight:800;font-size:12px}.text-ranking a{display:block;color:var(--text);font-size:13px;font-weight:600;line-height:1.45}.text-ranking a:hover{color:var(--accent)}.text-ranking small{grid-column:2;color:var(--muted);font-size:11px;margin-top:2px}
.section-title{font-size:1.1rem;font-weight:700;margin-bottom:16px;padding-left:3px}
.main-container{margin-top:40px;padding:0 3vw 48px}

/* 首页文章卡片 (grid) */
.video-grid .article-card{background:var(--surface);text-decoration:none;color:var(--text);display:flex;flex-direction:column;border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .24s cubic-bezier(.2,.7,.3,1),border-color .24s ease,transform .24s cubic-bezier(.2,.7,.3,1);cursor:pointer;height:100%;overflow:hidden;border:1px solid transparent;position:relative}
.video-grid .article-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .2s;z-index:1}
.video-grid .article-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);color:var(--text);text-decoration:none;border-color:var(--border)}
.video-grid .article-card:hover::before{background:var(--accent)}
.card-cover{width:100%;aspect-ratio:16/9;background:#e8e8e8;overflow:hidden;position:relative}
.card-cover img{width:100%;height:100%;object-fit:cover}
.video-grid .card-cover img{transition:transform .32s cubic-bezier(.2,.7,.3,1);transform-origin:center}
@media(hover:hover) and (pointer:fine){.video-grid .article-card:hover .card-cover img{transform:scale(1.015)}}
.video-grid .card-title{transition:color .2s ease}
.no-cover{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:2rem;font-weight:300}
.card-info{padding:14px;display:flex;flex-direction:column;flex-grow:1}
.card-title{font-size:.95rem;font-weight:700;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-grid .article-card:hover .card-title{color:var(--accent)}
.card-summary{font-size:.78rem;color:var(--muted);margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-author{font-size:.72rem;color:var(--muted);margin-bottom:3px}
.card-meta{display:flex;align-items:center;font-size:.72rem;color:var(--muted);gap:10px;margin-top:auto}
.meta-item{display:flex;align-items:center;gap:3px}

/* 选项卡 (Fluent) */
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border)}
.tab{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;font-size:14px;font-weight:400;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:color .15s,border-color .15s;position:relative;top:1px;text-decoration:none}
.tab:hover{color:var(--text)}
.tab.selected,.tab.active{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}

/* 移动端展开 */
.mobile-top-btn{background:transparent;border:none;color:var(--text);font-size:20px;cursor:pointer}
.mobile-dropdown{position:absolute;top:100%;right:12px;left:12px;background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--border);box-shadow:var(--shadow-lg);transform-origin:top center;transform:scaleY(0);opacity:0;transition:transform .25s ease,opacity .2s;z-index:1200;overflow:hidden}
.mobile-dropdown.open{transform:scaleY(1);opacity:1}
.mobile-auth{padding:12px;border-top:1px solid var(--border);display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* =========================================================
 * 8.5 统一顶栏 .appbar (user / db_manager / manage_users / edit 共用)
 * ======================================================= */
.appbar{display:flex;align-items:center;height:52px;padding:0 20px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;z-index:1000}
.appbar .brand{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:var(--text);text-decoration:none!important}
.appbar .brand:hover{color:var(--accent)}
.appbar .brand img{width:30px;height:30px;border-radius:var(--radius)}
.appbar .spacer{flex:1}
.appbar a.link{color:var(--text);text-decoration:none;font-size:13px;padding:8px 14px;border-radius:var(--radius);transition:background .15s;display:inline-flex;align-items:center;gap:6px;font-weight:600}
.appbar a.link:hover{background:rgba(0,0,0,.04)}
.appbar a.link.active{color:var(--accent);font-weight:600}
.appbar .logout{color:var(--danger)}
.appbar .user{font-size:13px;color:var(--muted);margin-right:10px}
.appbar .nav-sep{width:1px;height:22px;background:var(--border);margin:0 6px}
.appbar .btn-prime{background:var(--accent);color:#fff;padding:6px 16px;border-radius:var(--radius);text-decoration:none;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.appbar .btn-prime:hover{background:var(--accent-hover)}

/* 收敛行内 style 用到的辅助类 */
.mt-24{margin-top:24px}.pt-24{padding-top:24px}
.max-w-300{max-width:300px}.max-w-360{max-width:360px}
.border-top{border-top:1px solid var(--border)}
.text-gray{color:var(--gray)}

/* =========================================================
 * 9. 文章详情页 (view.php)
 * ======================================================= */
.navbar{display:flex;align-items:center;height:48px;padding:0 24px;background:rgba(255,255,255,.75);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.05);position:sticky;top:0;z-index:100}
.navbar a{color:var(--text);text-decoration:none;font-size:13px;padding:6px 14px;border-radius:var(--radius);transition:background .15s;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.navbar a:hover{background:rgba(0,0,0,.04)}
.navbar a.primary{background:var(--accent);color:#fff}.navbar a.primary:hover{background:var(--accent-hover)}
.navbar .spacer{flex:1}
.navbar .user{font-size:13px;color:var(--muted);margin-right:8px}

.wrap{max-width:760px;margin:0 auto;padding:28px 20px 48px}

/* 文章卡片 (详情容器) */
.wrap .article-card{background:var(--surface);border:1px solid var(--border);padding:36px 40px;margin-bottom:24px;box-shadow:var(--shadow)}
.wrap .article-card h1{font-size:1.7rem;font-weight:700;margin-bottom:14px;line-height:1.3;word-break:break-word}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:var(--muted);font-size:.8rem;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--border)}
.article-meta span{display:inline-flex;align-items:center;gap:4px}
.report-link,.comment-report-link{color:var(--muted);font-size:12px;font-weight:500;text-decoration:none;margin-left:7px}.report-link:hover,.comment-report-link:hover{color:var(--danger);text-decoration:underline}

/* 赞赏条 */
.favorite-star{display:inline-block;font-family:system-ui,sans-serif;font-size:1.2em;line-height:1;flex-shrink:0}
.comment-item[id]{scroll-margin-top:5rem}
.comment-item:target{background:var(--accent-soft);outline:1px solid var(--accent);outline-offset:4px}
.like-bar{display:flex;justify-content:center;padding-top:24px;margin-top:32px;border-top:1px solid var(--border)}
.like-bar a{display:inline-flex;align-items:center;gap:8px;padding:10px 28px;font-size:15px;font-weight:500;background:var(--accent);color:#fff;border-radius:var(--radius);text-decoration:none;transition:background .15s}
.like-bar a:hover{background:var(--accent-hover)}
.js-like-action.is-loading{opacity:.68;pointer-events:none}
.like-bar .count{background:rgba(255,255,255,.2);padding:2px 10px;font-size:13px;border-radius:10px}
.reading-related{margin-top:34px;padding-top:22px;border-top:1px solid var(--border)}.reading-related-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}.reading-related-head h2{font-size:1.05rem;line-height:1.3}.reading-related-head span{font-size:12px;color:var(--muted)}.reading-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.wrap .reading-related .article-card{display:flex;min-width:0;height:100%;margin:0;padding:0;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--surface);text-decoration:none}.reading-related-grid .card-cover{flex:0 0 auto;aspect-ratio:16/9}.reading-related-grid .card-info{min-width:0;padding:11px}.reading-related-grid .card-title{font-size:.88rem}.reading-related-grid .card-meta{font-size:.68rem;gap:7px}.reading-related-grid .article-card{animation:none!important;opacity:1!important;transform:none!important}.reading-related-grid .article-card:hover{transform:translateY(-2px)!important}
.reader-report-btn,.comment-btn--report{border-color:var(--border);background:transparent;color:var(--muted)}.reader-report-btn{padding:8px 13px;font:inherit;font-size:13px;cursor:pointer}.reader-report-btn:hover,.comment-btn--report:hover{border-color:var(--danger);color:var(--danger);background:rgba(209,52,56,.06)}
.report-success{margin:0 0 16px;padding:9px 12px;border-left:3px solid var(--success);background:rgba(16,124,16,.08);color:var(--success);font-size:13px}
.report-modal{display:none;position:fixed;inset:0;z-index:2200;align-items:center;justify-content:center;padding:16px;background:rgba(17,24,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.report-modal.open{display:flex}.report-dialog{width:min(460px,100%);background:var(--surface);box-shadow:0 18px 42px rgba(0,0,0,.22);padding:20px}.report-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.report-dialog h3{margin:0;font-size:18px}.report-dialog-head button{border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}.report-dialog p{font-size:13px;color:var(--muted);margin:0 0 12px}.report-dialog textarea{display:block;width:100%;min-height:120px;padding:10px;border:1px solid var(--border);font:inherit;resize:vertical;outline:0}.report-dialog textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.report-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.report-submit{border-color:var(--danger);background:var(--danger);color:#fff}.report-submit:hover{background:#b9292d;color:#fff}

/* 评论区 */
.comment-section{background:var(--surface);border:1px solid var(--border);padding:32px 40px;box-shadow:var(--shadow)}
.comment-section h3{font-size:1.1rem;font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.comment-section h3 .count{color:var(--muted);font-weight:400;font-size:.9rem}
.comment-item{padding:18px 0;border-bottom:1px solid var(--border)}
.comment-item:last-child{border-bottom:none}
.comment-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.comment-name{font-weight:600;font-size:14px}
.comment-meta{font-size:.75rem;color:var(--muted)}
.comment-badge{display:inline-block;padding:1px 8px;font-size:11px;font-weight:600;border-radius:2px;margin-left:6px}
.comment-badge--official{background:rgba(16,124,16,.12);color:var(--success)}
.comment-badge--member{background:var(--accent-soft);color:var(--accent)}
.comment-badge--guest{background:rgba(0,0,0,.05);color:var(--muted)}
.comment-body{font-size:.9rem;line-height:1.7;color:var(--text)}
.comment-foot{display:flex;justify-content:flex-end;margin-top:8px}
.comment-foot a{font-size:.8rem;color:var(--muted);display:inline-flex;align-items:center;gap:4px;transition:color .15s;text-decoration:none}
.comment-foot a:hover{color:var(--accent)}

/* 评论表单 */
.comment-form{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.comment-form h4{font-size:15px;font-weight:600;margin-bottom:16px}
.comment-form .field{margin-bottom:14px}
.comment-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px;font-weight:500}
.comment-form input[type=text],.comment-form textarea{width:100%;padding:8px 12px;font-size:14px;font-family:var(--font);border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:border-color .15s;background:var(--surface)}
.comment-form input[type=text]:focus,.comment-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.comment-form textarea{min-height:110px;resize:vertical}
.comment-form button{padding:8px 24px;font-size:14px;font-weight:500;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-family:var(--font);transition:background .15s}
.comment-form button:hover{background:var(--accent-hover)}
.captcha-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px dashed var(--border);margin-bottom:14px;font-size:13px}
.captcha-row input{width:80px!important;padding:6px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px}

/* =========================================================
 * 10. 管理后台 (admin.php)
 * ======================================================= */
.admin-layout{display:flex;min-height:100vh}
.admin-main{flex:1;padding:24px 28px;overflow-x:auto;background:var(--bg)}
.admin-sidebar{width:220px;flex-shrink:0;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.admin-sidebar-header{padding:20px 16px 12px;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.admin-sidebar .nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--text);text-decoration:none;font-size:13px;font-weight:500;border-left:4px solid transparent;transition:background .15s,border-color .15s}
.admin-sidebar .nav-item:hover{background:var(--accent-soft)}
.admin-sidebar .nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600;border-left-color:var(--accent)}
.admin-sidebar .nav-item .badge{margin-left:auto}
.admin-sidebar-footer{padding:12px 16px;margin-top:auto;border-top:1px solid var(--border)}
.admin-main h3{font-size:18px;font-weight:700;margin-bottom:16px}
.admin-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.admin-card table{width:100%;border-collapse:collapse;font-size:13px}
.admin-card th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:10px 14px;border-bottom:2px solid var(--border);background:#fafafa}
.admin-card td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-card tr:hover td{background:var(--accent-soft)}
.admin-card tr:last-child td{border-bottom:none}
.preview-box{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--surface);min-height:300px}
.admin-sidebar-toggle{display:none;position:fixed;top:12px;left:12px;z-index:1300;background:var(--accent);color:#fff;border:none;width:36px;height:36px;font-size:18px;cursor:pointer;border-radius:var(--radius);transition:left .25s}
.admin-ajax-toast{position:fixed;right:22px;bottom:22px;z-index:2200;max-width:min(360px,calc(100vw - 32px));padding:10px 14px;border:1px solid rgba(15,123,108,.28);background:rgba(247,255,251,.95);color:var(--text);box-shadow:0 8px 24px rgba(20,37,29,.16);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;font-size:13px}.admin-ajax-toast.is-visible{opacity:1;transform:translateY(0)}.admin-ajax-toast.is-error{border-color:rgba(209,52,56,.35);background:rgba(255,247,247,.97);color:#a4262c}
.column-request-meta{color:var(--muted)!important;font-size:11px!important}
.admin-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:1100}

/* =========================================================
 * 11. 用户中心 (user.php)
 * ======================================================= */
.auth-card{background:var(--surface);padding:36px;border:1px solid var(--border);width:360px;margin:64px auto 40px;box-shadow:var(--shadow);border-top:3px solid var(--accent)}
.auth-card h2{font-size:18px;font-weight:700;margin-bottom:20px}
.auth-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px;font-weight:500}
.auth-card input[type=text],.auth-card input[type=password],.auth-card input[type=email]{width:100%;padding:8px 12px;margin-bottom:12px;font-size:14px;font-family:var(--font);border:1px solid var(--border);border-radius:var(--radius);outline:none;background:var(--surface);transition:border-color .15s}
.auth-card input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.auth-card button{width:100%;padding:8px 16px;font-size:14px;font-weight:500;font-family:var(--font);border:none;border-radius:var(--radius);cursor:pointer;transition:background .15s}
.auth-card button[type=submit]{background:var(--accent);color:#fff}.auth-card button[type=submit]:hover{background:var(--accent-hover)}
.auth-card button.secondary{background:var(--bg);color:var(--text);border:1px solid var(--border);width:auto}.auth-card button.secondary:hover{background:var(--border)}
.auth-links{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}.auth-links a{color:var(--accent)}

.dashboard{max-width:960px;margin:24px auto;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.dash-nav{display:flex;justify-content:space-between;border-bottom:1px solid var(--border)}
.dash-nav a{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;font-size:13px;color:var(--text);text-decoration:none;border-bottom:3px solid transparent;transition:all .15s;font-weight:500}
.dash-nav a:hover{background:rgba(0,0,0,.02)}.dash-nav a.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.dash-nav .logout{color:var(--danger)}
.dash-body{padding:28px}
.dash-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.dash-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.dash-section h3{font-size:15px;font-weight:700;margin-bottom:12px}
.dash-body h2{font-weight:700;margin-bottom:8px}
.dash-body input[type=text],.dash-body input[type=password]{width:100%;padding:8px 12px;font-size:14px;font-family:var(--font);border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:border-color .15s;background:var(--surface);max-width:320px}
.dash-body input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.dashboard .btn,.dashboard .action-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.dashboard .btn:hover,.dashboard .action-link:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dashboard .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.dashboard .btn-primary:hover{background:var(--accent-hover);color:#fff}
.dashboard .action-link+.action-link{margin-left:8px}
.action-link{color:var(--accent);font-weight:500;margin-right:12px;font-size:13px;text-decoration:none}.action-link:hover{text-decoration:underline}
.action-danger{color:var(--danger)}
.danger-zone{border:2px solid var(--danger);padding:20px;background:rgba(209,52,56,.02);margin-top:24px}
.danger-zone .title{font-size:15px;font-weight:600;color:var(--danger);margin-bottom:8px}
.ck-editor__editable{min-height:320px!important;border-radius:0!important;border-color:var(--border)!important}
.ck-toolbar{border-radius:0!important;border-color:var(--border)!important;background:#fafafa!important;flex-wrap:wrap}
.ck-balloon-panel,.ck.ck-dropdown__panel{border-radius:0!important}
.ck-editor__editable.ck-focused{border-color:var(--accent)!important;box-shadow:0 0 0 1px rgba(15,123,108,.2)!important}
.ck-editor__editable p{line-height:1.75;margin:0 0 .9em}
/* 列表标记放在列表自己的缩进区内，不能依赖滚动编辑框之外的空间。 */
.ck.ck-editor__editable_inline.ck-content{padding:.5rem 1.25rem}
.ck.ck-editor__editable_inline.ck-content :is(ul,ol){
    padding-inline-start:2.5em;
    padding-inline-end:.25em;
    margin:.65em 0;
    list-style-position:outside;
    overflow:visible;
}
.ck.ck-editor__editable_inline.ck-content li{display:list-item;padding:0;margin:.25em 0;overflow:visible;overflow-wrap:anywhere}
.ck.ck-editor__editable_inline.ck-content li > p{margin:0 0 .35em}
.ck.ck-editor__editable_inline.ck-content li > :is(ul,ol){margin:.25em 0}
@media(max-width:640px){.ck.ck-editor__editable_inline.ck-content{padding:.5rem .875rem}.ck.ck-editor__editable_inline.ck-content li > :is(ul,ol){padding-inline-start:2em}}

/* =========================================================
 * 12. 文章编辑器 (edit.php)
 * ======================================================= */
.container{max-width:1100px;margin:2rem auto;padding:0 20px}
.editor-box{background:var(--surface);padding:20px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:2rem;box-shadow:var(--shadow-sm)}
.ck-editor__editable{min-height:300px}

/* =========================================================
 * 13. 数据库管理器 (db_manager.php)
 * ======================================================= */
.db-grid{display:grid;grid-template-columns:250px 1fr;gap:20px}
.db-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px}
.db-sidebar h3{font-size:14px;color:var(--muted);margin-top:0;text-transform:uppercase}
.table-link{display:block;padding:10px;color:var(--text);text-decoration:none;border-radius:var(--radius);margin-bottom:5px;font-size:14px}
.table-link:hover{background:var(--accent-soft);color:var(--accent)}
.table-link.active{background:var(--accent);color:#fff}
.db-main{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow-sm)}
.db-section-title{font-size:20px;margin-top:0;border-bottom:2px solid var(--accent);display:inline-block;padding-bottom:5px;margin-bottom:20px}
.db-table-wrapper{overflow-x:auto;margin-bottom:30px}

/* =========================================================
 * 14. 用户管理后台 (manage_users.php)
 * ======================================================= */
.admin-login-layout{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box{background:var(--surface);padding:36px;border:1px solid var(--border);width:360px;box-shadow:var(--shadow);border-top:3px solid var(--accent)}
.login-box h2{font-size:18px;font-weight:600;margin-bottom:20px}
.login-message{color:var(--danger);margin-bottom:12px}
.login-box input[type=password],.login-box input[type=text]{width:100%;padding:8px 12px;margin-bottom:12px;font-size:14px;border:1px solid var(--border);border-radius:var(--radius);outline:none}
.login-box input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.login-box button{width:100%;padding:8px 16px;font-size:14px;font-weight:500;border:none;border-radius:var(--radius);cursor:pointer;background:var(--accent);color:#fff;transition:background .15s}
.login-box button:hover{background:var(--accent-hover)}
.management-container{max-width:1100px;margin:24px auto;padding:0 20px}
.flex-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.status-1{color:var(--success);font-weight:600}
.status-0{color:var(--danger);font-weight:600}

/* =========================================================
 * 15. 动画
 * ======================================================= */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp .5s ease forwards}

/* ==========================================
   页面进入级联动画 — 各区块依次流畅浮现
   （respect prefers-reduced-motion）
   ========================================== */
.anim-in{opacity:0;animation:fadeInUp .55s cubic-bezier(.16,1,.3,1) forwards}
.anim-in:nth-of-type(1){animation-delay:.02s}
.anim-in:nth-of-type(2){animation-delay:.08s}
.anim-in:nth-of-type(3){animation-delay:.14s}
.anim-in:nth-of-type(4){animation-delay:.2s}
.anim-in:nth-of-type(5){animation-delay:.26s}
/* 卡片网格级联: 首屏卡片依次滑入 */
.video-grid .article-card{opacity:0;animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) forwards}
.video-grid .article-card:nth-child(1){animation-delay:.05s}
.video-grid .article-card:nth-child(2){animation-delay:.1s}
.video-grid .article-card:nth-child(3){animation-delay:.15s}
.video-grid .article-card:nth-child(4){animation-delay:.2s}
.video-grid .article-card:nth-child(n+5){animation-delay:.25s}
@media(prefers-reduced-motion:reduce){
    .anim-in,.video-grid .article-card{animation:none;opacity:1}
    *{transition-duration:.01ms!important}
}

/* =========================================================
 * 16. 响应式
 * ======================================================= */
/* 首页主容器上边距 */
/* ==========================================
/* ==========================================
   标签筛选系统 (UWP Pill)
   ========================================== */
.tag-card{background:var(--surface);border:1px solid var(--border);padding:14px 18px;margin:48px 0 40px;border-radius:var(--radius)}
.tag-card-header{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.tag-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* 卡片网格: 桌面4列 */
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;row-gap:32px}
.tag-pill{display:inline-block;padding:5px 14px;font-size:13px;font-weight:500;border-radius:20px;text-decoration:none;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:all .15s}
.tag-pill:hover{background:var(--accent-soft);border-color:var(--accent);text-decoration:none}
.tag-pill.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;font-weight:600}
.section-title{font-size:1.2rem;font-weight:700;margin-bottom:20px;padding-left:12px;border-left:3px solid var(--accent);display:flex;align-items:center;gap:8px}
/* ==========================================
   响应式: 平板 (≤900px)
   ========================================== */
@media(max-width:900px){
    .main-container{margin-top:28px;padding:0 16px 36px}
    .video-grid{grid-template-columns:repeat(3,1fr);gap:16px;row-gap:24px}
    .homepage-layout{grid-template-columns:1fr!important}.pinned-grid{grid-template-columns:repeat(3,1fr)}.home-aside{grid-template-columns:repeat(3,1fr)!important}
    .navbar-custom{height:48px;padding:0 12px}
    .appbar{height:48px;padding:0 12px;overflow-x:auto}
    .appbar .brand{font-size:16px}
    .appbar a.link{padding:8px 10px;font-size:12px;white-space:nowrap}
    .appbar .btn-prime{padding:6px 12px;font-size:12px;white-space:nowrap}
    .tag-card{margin:32px 0 28px;padding:12px 14px}
    .wrap{padding:16px 14px 32px}
    .wrap .article-card{padding:22px 18px}.wrap .article-card h1{font-size:1.3rem}
    .comment-section{padding:22px 18px}
}

/* ==========================================
   响应式: 手机 (≤640px) — 单列 + 堆叠
   ========================================== */
@media(max-width:640px){
    .ck-toolbar{padding:4px!important}.ck-editor__editable{min-height:240px!important}
    .main-container{margin-top:16px;padding:0 10px 28px}
    .video-grid{grid-template-columns:repeat(2,1fr);gap:10px;row-gap:14px}
    .home-pinned{margin-bottom:18px}.pinned-grid{grid-template-columns:repeat(2,1fr)}.tag-tabs{margin-bottom:18px}.home-aside{display:block!important}.aside-section+.aside-section{margin-top:14px}
    .card-info{padding:14px}
    .card-title{font-size:.95rem}
    .card-meta{font-size:.72rem;gap:8px}
    .no-cover{font-size:1.5rem}

    .navbar-custom{height:60px;padding:0 14px}
    .brand-icon{width:28px;height:28px}
    .navbar-brand{font-size:16px}
    .search-container{margin:0 6px;flex:1;max-width:100%}
    .search-input{height:32px;font-size:13px}

    .tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .tabs::-webkit-scrollbar{display:none}
    .tab{padding:10px 14px;font-size:13px;white-space:nowrap}
    .tab,.tag-pill,.btn{min-height:44px;display:inline-flex;align-items:center}

    .tag-card{margin:24px 0 20px;padding:10px 12px}
    .section-title{font-size:1.05rem;margin-bottom:14px}
    .d-md-none{display:inline-flex}
    .nav-auth{display:none}
    .nav-actions{margin-left:0}
    .mobile-top-btn{font-size:18px;padding:4px 6px}

    .wrap{padding:12px 10px 24px}
    .wrap .article-card{padding:18px 14px}.wrap .article-card h1{font-size:1.2rem}
    .comment-section{padding:18px 14px}
    .article-meta{gap:8px;font-size:.7rem;flex-direction:column;align-items:flex-start}

    .auth-card{width:auto;margin:24px 10px;padding:24px 16px}
    .dashboard{margin:8px}
    .dash-body{padding:14px;overflow-x:auto}.dash-body table{min-width:460px}
    .dash-nav{flex-wrap:wrap;gap:4px}
    .dash-nav a{padding:10px 14px;font-size:12px;flex:1;justify-content:center}
    .dash-nav .logout{margin-left:auto}

    .admin-sidebar{position:fixed;top:0;left:-240px;width:240px;height:100vh;z-index:1200;transition:left .25s}
    .admin-sidebar.open{left:0}
    .admin-sidebar-toggle{display:flex;align-items:center;justify-content:center}
    .admin-sidebar-toggle.shifted{left:252px}
    .admin-overlay.show{display:block}
    .admin-main{padding:12px;padding-top:50px}
    .admin-card,.card{overflow-x:auto}.admin-main table,.card table{min-width:600px}
    .navbar .user{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .db-grid{grid-template-columns:1fr}
}

/* 小手机 (≤400px) — 更紧凑 */
@media(max-width:400px){
    .card-info{padding:10px}
    .card-title{font-size:.85rem}
    .card-meta{font-size:.65rem;gap:6px}
    .navbar-custom{padding:0 6px}
    .navbar-brand{font-size:15px}
}

/* 桌面 — 隐藏移动端下拉按钮 */
@media(min-width:641px){.mobile-top-btn{display:none}}

/* 后台文章操作区：允许按钮换行，适配窄屏 */
.admin-article-actions{display:flex!important;flex-wrap:nowrap;gap:6px;justify-content:flex-end;min-width:max-content;white-space:nowrap}
.admin-article-actions .btn{white-space:nowrap}
.admin-inline-action{display:inline-flex;margin:0}.article-homepage-status{font-size:12px}.article-homepage-status span{color:var(--danger);font-weight:600}
.crop-modal{display:none;position:fixed;inset:0;background:rgba(17,24,20,.56);z-index:2100;align-items:center;justify-content:center;padding:24px;overflow-y:auto;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.crop-dialog{width:min(960px,100%);max-height:calc(100vh - 48px);padding:20px;background:var(--surface);box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:auto}.crop-dialog h4{font-size:18px;margin:0 0 4px}.crop-dialog .crop-hint{display:block;margin-bottom:14px;color:var(--muted);font-size:13px}.crop-dialog .form-control{width:100%;max-width:360px}.crop-image{display:block;width:100%;max-width:900px;max-height:min(58vh,620px);margin:14px auto;object-fit:contain}.crop-actions{position:sticky;bottom:-20px;display:flex;justify-content:flex-end;gap:8px;padding:14px 0 0;background:var(--surface);border-top:1px solid var(--border)}
@media(max-width:700px){.admin-article-actions{justify-content:flex-start;min-width:max-content}.admin-article-actions .btn{flex:0 0 auto}.crop-image{max-width:calc(100vw - 50px);max-height:58vh}}

/* =========================================================
   首页布局最终覆盖
   旧版的通用 .video-grid 与 900px 平板规则位于本文件中段；
   此处将首页独立布局放在末尾，避免推荐栏被排到文章区下方。
   ======================================================= */
@media (min-width:768px){
    .main-container .homepage-layout{
        display:grid!important;
        grid-template-columns:minmax(0,3fr) minmax(0,1fr)!important;
        grid-template-areas:"feed aside";
        gap:30px;
        align-items:start;
    }
    .main-container .home-primary{grid-area:feed;min-width:0}
    .main-container .home-aside{
        grid-area:aside;
        display:flex!important;
        flex-direction:column;
        /* 独立于文档滚动；网格右列继续预留侧栏空间。 */
        position:fixed;
        top:4.75rem;
        bottom:auto;
        right:max(1.5rem, calc((100% - 87rem) / 2));
        width:calc((min(100%, 90rem) - 4.875rem) / 4);
        height:calc(100vh - 5.75rem);
        height:calc(100dvh - 5.75rem);
        max-height:calc(100dvh - 5.75rem);
        min-height:0;
        z-index:20;
        gap:10px;
        align-content:start;
        min-width:0;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior-y:contain;
        padding-right:4px;
        scrollbar-width:none;
    }
    /* 每组推荐保持内容高度，避免网格压缩并裁掉列表而没有滚动溢出。 */
    .main-container .home-aside > .aside-section{flex:0 0 auto;min-height:min-content}
    .main-container .home-aside::-webkit-scrollbar{display:none}
    .main-container .home-article-grid{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:16px;
        row-gap:24px;
    }
}
@media (max-width:767px){
    .main-container .homepage-layout{display:block!important}
    .main-container .home-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .main-container .home-aside{display:block!important;margin-top:22px}
    .main-container .aside-section+.aside-section{margin-top:14px}
}

/* 首页置顶：一张主卡 + 两张次卡。 */
.pinned-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:32 / 9;gap:16px}
.pinned-grid .pinned-featured{grid-row:1 / span 2;position:relative;aspect-ratio:auto;min-height:0;overflow:hidden}
.pinned-grid .pinned-featured .card-cover{height:100%;aspect-ratio:auto}
.pinned-grid .pinned-featured .card-info{position:absolute;right:0;bottom:0;left:0;padding:38px 16px 13px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
.pinned-grid .pinned-featured .card-title{font-size:1.1rem;color:#fff}.pinned-grid .pinned-featured .card-author,.pinned-grid .pinned-featured .card-summary{display:none}.pinned-grid .pinned-featured .card-meta{color:rgba(255,255,255,.8)}
.pinned-grid .pinned-compact{display:grid;grid-template-columns:48% minmax(0,1fr);min-height:0;overflow:hidden}
.pinned-grid .pinned-compact .card-cover{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;aspect-ratio:auto;align-self:stretch}
.pinned-grid .pinned-compact .card-info{grid-column:2;grid-row:1;min-width:0;overflow:hidden;padding:13px 14px}
.pinned-grid .pinned-compact .card-summary,.pinned-grid .pinned-compact .card-author{display:none}
.home-pinned-kicker{border-bottom:0;margin-bottom:10px}
.pinned-grid{gap:10px}
.pinned-grid .article-card{border:0!important}
.pinned-grid .pinned-featured:hover .card-title,.pinned-grid .pinned-featured:focus .card-title,.pinned-grid .pinned-featured:focus-visible .card-title{color:#fff!important}

/* 右栏采用统一的标题带、柔和投影和可辨识的排行状态。 */
.aside-section{border-radius:0!important;overflow:hidden;box-shadow:0 8px 22px rgba(31,29,26,.055)!important}
.aside-section{padding:13px!important}
.aside-title{margin:-13px -13px 5px!important;padding:9px 12px!important;background:var(--accent-soft);border-bottom:1px solid var(--border);color:var(--text)!important;font-size:15px!important;letter-spacing:.025em!important}
.home-aside .aside-section{border-color:rgba(15,123,108,.14);box-shadow:0 10px 24px rgba(31,29,26,.045)!important}.home-aside .aside-title{display:flex;align-items:center;min-height:38px;font-size:14px!important}.home-aside .text-ranking li{min-height:45px}.home-aside .text-ranking a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-aside .text-ranking li span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--accent-soft);font-variant-numeric:tabular-nums}
/* 侧栏语义主题：热度用琥珀橙，探索用紫色；保留相同版式与文字对比度。 */
.home-aside .aside-section--hot{border-color:rgba(180,83,9,.24)!important}
.home-aside .aside-section--hot::before{background:#b45309}
.home-aside .aside-section--hot .aside-title{background:rgba(245,158,11,.14)}
.home-aside .aside-section--hot .text-ranking li span{background:rgba(245,158,11,.16);color:#92400e}
.home-aside .aside-section--hot .text-ranking a:hover{color:#9a4b08}
.home-aside .aside-section--random{border-color:rgba(109,40,217,.22)!important}
.home-aside .aside-section--random::before{background:#6d28d9}
.home-aside .aside-section--random .aside-title{background:rgba(139,92,246,.12)}
.home-aside .aside-section--random .text-ranking li span{background:rgba(139,92,246,.14);color:#5b21b6}
.home-aside .aside-section--random .text-ranking a:hover{color:#5b21b6}
.article-list-actions,.audit-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;justify-content:flex-end;min-width:max-content;white-space:nowrap}.article-list-actions .action-link,.audit-actions .btn{margin:0!important;white-space:nowrap;min-width:50px}
.favorite-list{display:grid;gap:10px;margin-top:18px}.favorites-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.favorites-heading h2{margin:0;font-size:24px}.favorites-heading>span{color:var(--muted);font-size:13px}.favorite-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;border:1px solid var(--border);background:var(--surface)}.favorite-item-main{min-width:0}.favorite-title{display:block;overflow:hidden;color:var(--text);font-size:16px;font-weight:700;line-height:1.45;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.favorite-title:hover{color:var(--accent)}.favorite-item p{margin:5px 0 0;color:var(--muted);font-size:13px}
.text-ranking li{padding:7px 0!important}
.text-ranking li{transition:background-color .22s cubic-bezier(.2,.7,.3,1)}
.text-ranking a{transition:color .2s ease}
@media(hover:hover) and (pointer:fine){.text-ranking li:hover{background:rgba(15,123,108,.055)}.aside-section--hot .text-ranking li:hover{background:rgba(245,158,11,.075)}.aside-section--random .text-ranking li:hover{background:rgba(139,92,246,.065)}}
.text-ranking li:focus-within{background:var(--accent-soft)}
.text-ranking li:nth-child(1) span{color:#b7791f}.text-ranking li:nth-child(2) span{color:#6b7280}.text-ranking li:nth-child(3) span{color:#a16207}
.home-section-head{margin-bottom:14px}.home-section-head h2{letter-spacing:-.02em}.home-article-grid .article-card:focus-visible,.pinned-grid .article-card:focus-visible,.text-ranking a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.home-article-grid .card-cover{background:#eef1ef}.home-article-grid .card-title{letter-spacing:-.01em}.home-article-grid .card-meta{padding-top:2px}
@media (prefers-reduced-motion:reduce){.video-grid .article-card,.text-ranking li,.mobile-search-popover,.home-aside{transition:none!important;animation:none!important}}
@media(max-width:700px){.article-list-actions,.audit-actions{justify-content:flex-start;flex-wrap:wrap;white-space:normal;min-width:0}.favorite-item{align-items:flex-start;flex-direction:column;gap:10px}.favorite-title{white-space:normal}.reader-action{margin-left:8px}.like-bar{flex-wrap:wrap;gap:8px}.like-bar a,.reader-action .link{min-height:38px;padding:8px 14px}}
@media(max-width:600px){.reading-related{margin-top:28px;padding-top:18px}.reading-related-grid{grid-template-columns:1fr;gap:9px}.wrap .reading-related .article-card{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:76px}.reading-related-grid .card-cover{grid-column:1;grid-row:1;width:112px;height:100%;aspect-ratio:auto}.reading-related-grid .card-info{grid-column:2;grid-row:1;justify-content:center;padding:9px 11px}.reading-related-grid .card-title{font-size:.9rem;margin-bottom:5px}.reading-related-grid .card-meta{margin-top:0;font-size:.68rem}.reading-related-grid .card-meta .meta-item:nth-child(2),.reading-related-grid .card-meta .meta-item:last-child{display:none}}
.mobile-recommendation-btn,.mobile-search-btn,.mobile-drawer-heading,.mobile-drawer-overlay,.mobile-search-popover,.drawer-search-form{display:none}

@media (max-width:767px){
    .navbar-custom{gap:5px}
    .navbar-brand{margin-right:0;gap:6px}
    .brand-lockup{width:88px;height:36px;flex-basis:88px}
    .brand-lockup img{width:139px;top:-31px;left:-26px}
    .search-container{display:none}
    .mobile-recommendation-btn,.mobile-search-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.58);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);color:var(--text);font-size:18px;line-height:1;cursor:pointer;flex:0 0 34px}
    .nav-auth{display:flex!important;margin-left:auto;gap:4px;min-width:0}
    .nav-auth span{display:none}
    .nav-auth a{font-size:12px!important;padding:5px 7px!important;white-space:nowrap;background:rgba(255,255,255,.58)!important;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-color:rgba(15,123,108,.42)!important}
    .mobile-recommendation-btn{margin-left:0}
    .mobile-search-popover{position:fixed;z-index:1350;top:52px;left:10px;right:10px;padding:10px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.72);box-shadow:0 12px 30px rgba(0,0,0,.14);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
    .mobile-search-popover.open{display:block;opacity:1;transform:translateY(0);pointer-events:auto}
    .mobile-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px}
    .mobile-search-form input{min-width:0;height:38px;padding:0 10px;border:1px solid var(--border);background:rgba(255,255,255,.7);font:inherit;color:var(--text);outline:0}
    .mobile-search-form button{height:38px;padding:0 10px;border:1px solid rgba(15,123,108,.45);background:rgba(255,255,255,.58);color:var(--accent);font:inherit;font-size:13px;cursor:pointer}
    .mobile-drawer-overlay{position:fixed;inset:0;background:rgba(18,22,20,.38);z-index:1250;opacity:0;pointer-events:none;transition:opacity .22s ease}
    .mobile-drawer-overlay.open{display:block;opacity:1;pointer-events:auto}
    body.drawer-open{overflow:hidden}
    .main-container .home-aside{
        position:fixed;z-index:1300;top:0;right:0;bottom:auto;left:auto;width:min(88vw,360px);height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0!important;padding:62px 14px 22px;
        display:block!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:rgba(249,248,246,.72);
        box-shadow:-10px 0 30px rgba(0,0,0,.18);transform:translateX(105%);transition:transform .24s ease;
        backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
        scrollbar-width:none;
    }
    .main-container .home-aside::-webkit-scrollbar{display:none}
    .main-container .home-aside.open{transform:translateX(0)}
    .mobile-drawer-heading{display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;height:52px;padding:0 14px;background:rgba(255,255,255,.6);border-bottom:1px solid var(--border);color:var(--text);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
    .mobile-drawer-heading button{width:34px;height:34px;border:0;background:transparent;color:var(--text);font-size:28px;line-height:1;cursor:pointer}
    .drawer-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:2px 0 4px}
    .drawer-search-form input{min-width:0;height:38px;padding:0 10px;border:1px solid var(--border);background:rgba(255,255,255,.68);color:var(--text);font:inherit;outline:0}
    .drawer-search-form input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
    .drawer-search-form button{height:38px;padding:0 12px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:13px;cursor:pointer}
    .main-container .home-aside .aside-section{background:rgba(255,255,255,.62)!important;backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);margin:0 0 10px!important}
    .main-container .home-aside .aside-section+.aside-section{margin-top:0}
    .main-container .home-aside .text-ranking{display:block}
    .main-container .home-aside .text-ranking li{display:grid!important}
    .main-container .home-aside .text-ranking li:nth-child(n+5){display:none}
    .pinned-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;aspect-ratio:auto;gap:10px}
    .pinned-grid .pinned-featured{grid-column:1 / -1;grid-row:auto}
    .pinned-grid .pinned-featured .card-title{font-size:1.05rem}
    .pinned-grid .pinned-compact{display:flex;flex-direction:column;min-width:0}
    .pinned-grid .pinned-compact .card-cover{display:block;width:100%;height:auto;aspect-ratio:16 / 9}
}

/* 首页动效：仅正文卡片与推荐列表使用轻量贝塞尔动画；置顶只淡入。 */
.home-primary .anim-in{animation:none!important;opacity:1}
.home-primary .home-pinned{animation:homepageFade .2s ease-out both!important}
.home-primary .home-article-grid .article-card{
    opacity:0;transform:translate3d(0,8px,0);will-change:opacity,transform;
    animation:fadeInUp .28s cubic-bezier(.16,1,.3,1) forwards!important;
}
.home-primary .home-article-grid .article-card:nth-child(1){animation-delay:.02s!important}
.home-primary .home-article-grid .article-card:nth-child(2){animation-delay:.04s!important}
.home-primary .home-article-grid .article-card:nth-child(3){animation-delay:.06s!important}
.home-primary .home-article-grid .article-card:nth-child(4){animation-delay:.08s!important}
.home-primary .home-article-grid .article-card:nth-child(n+5){animation-delay:.1s!important}
.home-aside .aside-section{opacity:0;transform:translate3d(0,6px,0);will-change:opacity,transform;animation:fadeInUp .24s cubic-bezier(.16,1,.3,1) forwards}
.home-aside .aside-section:nth-of-type(1){animation-delay:.02s}.home-aside .aside-section:nth-of-type(2){animation-delay:.05s}.home-aside .aside-section:nth-of-type(3){animation-delay:.08s}.home-aside .aside-section:nth-of-type(4){animation-delay:.11s}
@media(prefers-reduced-motion:reduce){.home-primary .home-pinned,.home-primary .home-article-grid .article-card,.home-aside .aside-section{animation:none!important;opacity:1;transform:none}}

/* 首页以同一文字尺度约束内容宽度，缩小时不再由 vw 将卡片撑满屏幕。 */
.main-container{font-size:.875rem;width:100%;max-width:90rem;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem}
.main-container .card-info{min-width:0;padding:.875rem}
.main-container .card-title{font-size:.9rem;line-height:1.5;overflow-wrap:anywhere}
.main-container .card-summary{font-size:.78rem;line-height:1.65}
.main-container .card-meta{font-size:.72rem;flex-wrap:wrap;gap:.25rem .625rem}
.main-container .meta-item{min-width:0;white-space:nowrap}
.main-container .home-article-grid{gap:1rem!important;row-gap:1.5rem!important}
.main-container .pinned-grid{aspect-ratio:auto;grid-template-rows:repeat(2,auto);gap:.625rem;align-items:stretch}
.main-container .pinned-featured{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr)}
.main-container .pinned-featured .card-cover{grid-area:1 / 1;aspect-ratio:16/9;height:auto;min-height:100%}
.main-container .pinned-featured .card-cover img{position:absolute;inset:0}
.main-container .pinned-featured .card-info{grid-area:1 / 1;position:relative;align-self:end;padding:2.375rem 1rem .8125rem;z-index:1}
.main-container .pinned-featured .card-title{font-size:1.05rem}
.main-container .pinned-compact{align-items:center}
.main-container .pinned-compact .card-cover{height:auto;aspect-ratio:16/9;align-self:center}
.main-container .pinned-compact .card-info{padding:.625rem;overflow:visible}
@media(min-width:768px){.main-container .homepage-layout{gap:1.875rem;overflow:visible}.main-container .home-primary{overflow:visible}.main-container .home-aside{gap:.625rem}.main-container .home-aside .aside-section{margin:0}}
@media(max-width:767px){.main-container{padding-left:.625rem;padding-right:.625rem}.main-container .pinned-featured{grid-column:1 / -1}.main-container .pinned-compact{align-items:stretch}.main-container .pinned-compact .card-cover{align-self:stretch}.main-container .card-info{padding:.625rem}}
@media(max-width:359px){.main-container .home-article-grid{grid-template-columns:minmax(0,1fr)!important}}
/* 保留旧 UI 的最小功能补丁。 */
.home-index-page{padding-top:60px}.home-index-page .navbar-custom{position:fixed;inset:0 0 auto 0;z-index:1600}.home-index-page .nav-actions{display:flex;align-items:center;gap:5px;margin-left:auto;white-space:nowrap}.home-index-page .btn-admin{display:inline-flex;align-items:center;min-height:30px;padding:5px 9px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none;border:1px solid transparent}.home-index-page .btn-admin.is-active{color:var(--accent);border-bottom-color:var(--accent)}.home-index-page .login-button{border-color:var(--accent);background:var(--accent);color:#fff}.home-index-page .login-button:hover{background:var(--accent-hover);color:#fff}.homepage-layout .home-aside{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 92px);overflow-y:auto;scrollbar-width:none}.homepage-layout .home-aside::-webkit-scrollbar{display:none}
@media(max-width:767px){.home-index-page{padding-top:58px}.home-index-page .navbar-custom{min-height:58px}.home-index-page .nav-actions{overflow-x:auto;max-width:100%;scrollbar-width:none}.homepage-layout .home-aside{position:relative;top:auto;max-height:none;overflow:visible}}

/* 旧 UI 精修：推荐栏保留在网格中。sticky 会在主体末端自动停止，栏内仍可独立滚动。 */
@media(min-width:1100px){
    .main-container .homepage-layout{grid-template-columns:minmax(0,1fr) 300px!important;grid-template-areas:"feed aside";align-items:start}
    .main-container .home-primary{grid-area:feed;min-width:0}
    .main-container .home-aside{grid-area:aside;position:sticky!important;top:76px!important;right:auto!important;bottom:auto!important;width:300px!important;min-width:300px!important;height:auto!important;max-height:calc(100dvh - 92px)!important;display:flex!important;flex-direction:column;gap:10px;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;padding-right:3px;transform:none!important}
}
@media(min-width:768px) and (max-width:1099px){
    .main-container .homepage-layout{grid-template-columns:1fr!important;grid-template-areas:"feed" "aside"}
    .main-container .home-aside{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;width:auto!important;min-width:0!important;height:auto!important;max-height:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible!important;transform:none!important}
}

/* 阅读页始终以正文为唯一视觉中心；文章卡与评论沿用旧版宽度。 */
.reading-wallpaper .reading-shell{display:block!important;width:min(760px,calc(100% - 32px))!important;max-width:760px!important;margin:0 auto!important;padding:28px 0 48px!important}
.reading-wallpaper .reading-main{min-width:0}

/* 归档与动态共用同一条时间轴，月份下的文章保持紧凑可扫描。 */
.timeline-section{max-width:900px;margin:0 auto}.timeline-section>h1{margin:0 0 8px}.section-description{margin:0 0 18px;color:var(--muted);font-size:13px}.content-timeline{position:relative;margin-top:8px;padding-left:30px}.content-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:rgba(15,123,108,.32)}.content-timeline article{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;padding:0 0 22px}.content-timeline article::before{content:"";position:absolute;left:-25px;top:7px;width:9px;height:9px;border:2px solid var(--accent);background:#f6faf8}.content-timeline>article>time{display:flex;flex-direction:column;color:var(--muted);font-size:10px}.content-timeline>article>time b{color:var(--accent);font-size:20px;line-height:1}.content-timeline h2{margin:0 0 5px;font-size:17px}.content-timeline h2 a{color:var(--text);text-decoration:none}.content-timeline h2 a:hover{color:var(--accent)}.content-timeline p{margin:0 0 6px;color:#4f5a55;font-size:13px;line-height:1.65}.content-timeline small{color:var(--muted);font-size:11px}.archive-timeline .timeline-links{list-style:none;margin:8px 0 0;padding:0}.archive-timeline .timeline-links li{display:flex;gap:12px;padding:5px 0;border-top:1px solid rgba(31,29,26,.08)}.archive-timeline .timeline-links time{flex:0 0 88px;color:var(--muted);font-size:11px}.archive-timeline .timeline-links a{min-width:0;color:var(--text);font-size:13px;text-decoration:none}.archive-timeline .timeline-links a:hover{color:var(--accent)}
@media(max-width:767px){.reading-wallpaper .reading-shell{width:calc(100% - 20px)!important;padding-top:12px!important}.content-timeline{padding-left:23px}.content-timeline article{grid-template-columns:48px minmax(0,1fr);gap:9px}.content-timeline p{display:none}.archive-timeline .timeline-links li{gap:8px}.archive-timeline .timeline-links time{flex-basis:76px}}

/* 旧 UI 的收口：侧栏始终属于主网格，不能脱离页面变成 fixed 悬浮层。 */
@media(min-width:1100px){
    .home-index-page .main-container,.home-index-page .homepage-layout{overflow:visible!important}
    .home-index-page .homepage-layout{position:relative;align-items:start}
    .home-index-page .homepage-layout>.home-aside{position:sticky!important;top:var(--aside-sticky-top,76px)!important;bottom:auto!important;left:auto!important;right:auto!important;align-self:start;height:auto!important;max-height:none!important;overflow:visible!important}
}

/* 搜索沿用评论框的直角边框和聚焦底线，而不是独立的胶囊样式。 */
.uwp-search .search-wrapper{height:36px;position:relative;border:1px solid var(--border);background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease}.uwp-search .search-wrapper:hover{border-color:#b8b5b0}.uwp-search .search-wrapper:focus-within{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}.uwp-search .search-input{height:34px;padding:0 12px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.uwp-search .search-input:focus{background:transparent!important;box-shadow:none!important}.uwp-search .focus-border{display:none!important}

/* 相关文章限定三等分与封面高度，避免内容长度把卡片拉得参差。 */
.reading-related-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}.wrap .reading-related .article-card{min-width:0;overflow:hidden}.reading-related-grid .card-cover{aspect-ratio:16/9}.reading-related-grid .card-info{min-height:84px;padding:10px 11px}.reading-related-grid .card-title{font-size:.88rem;line-height:1.45}.reading-related-grid .card-meta{margin-top:auto;gap:6px}.reading-related-grid .card-meta .meta-item:last-child{display:none}

/* UWP 回顶按钮只在阅读页出现，不打断文章操作区。 */
.scroll-top{position:fixed;right:22px;bottom:22px;z-index:1700;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:0;background:rgba(255,255,255,.88);box-shadow:0 4px 14px rgba(20,37,29,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--accent);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,border-color .18s ease}.scroll-top .ic{font-size:17px;transform:rotate(90deg)}.scroll-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.scroll-top:hover{border-color:var(--accent);background:#fff}

/* 顶栏使用新的横向站标；手机只保留 ico，不显示“闲报”文字。 */
.navbar-brand .brand-lockup{display:block;position:relative;width:150px;height:48px;overflow:hidden;flex:0 0 150px}.navbar-brand .brand-lockup img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center}.brand-mobile-icon{display:none!important}
.article-taxonomy-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:12px;background:var(--surface);border:1px solid var(--border)}.article-taxonomy-filters label{display:grid;gap:4px;color:var(--muted);font-size:12px;font-weight:600}.article-taxonomy-filters select{min-width:150px;height:34px;padding:5px 8px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border)}.article-taxonomy-filters .btn{min-height:34px}.article-category-column{color:var(--accent);font-size:12px}.article-taxonomy-line{display:block;margin-top:4px;color:var(--accent);font-size:11px;font-weight:500}
@media(max-width:700px){.article-taxonomy-filters{align-items:stretch;flex-direction:column}.article-taxonomy-filters label,.article-taxonomy-filters select,.article-taxonomy-filters .btn{width:100%}}
.column-request-panel{display:grid;gap:12px;margin:0 0 22px;padding:16px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent)}.column-request-panel h3{font-size:16px;margin:0}.column-request-panel p{margin:3px 0 0;color:var(--muted);font-size:12px}.column-request-form{display:flex;gap:8px;align-items:center}.column-request-form input{min-width:0;flex:1;height:36px;padding:7px 10px}.column-request-form .btn{width:auto;white-space:nowrap}.column-request-list{display:grid;gap:6px;border-top:1px solid var(--border);padding-top:10px}.column-request-list>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.column-request-list small{flex-basis:100%;color:var(--danger);font-size:11px}.column-request-status{padding:2px 6px;font-size:11px;border:1px solid var(--border);color:var(--muted)}.column-request-status--approved{color:var(--success);border-color:rgba(16,124,16,.28)}.column-request-status--rejected{color:var(--danger);border-color:rgba(209,52,56,.28)}
@media(max-width:600px){.column-request-form{align-items:stretch;flex-direction:column}.column-request-form .btn{width:100%}}
.editorial-column-select{display:grid;gap:5px;margin:16px 0 18px}.editorial-column-select label{font-size:13px;font-weight:600;color:var(--muted)}.editorial-column-select select{width:100%;min-height:38px;padding:7px 10px;border:1px solid var(--border);border-radius:0;background:var(--surface);color:var(--text);font:inherit}.editorial-column-select select:disabled{color:var(--muted);background:#f5f5f3}.editorial-column-select small{font-size:11px;color:var(--muted)}.admin-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}.admin-section-heading h4{margin:0;font-size:15px}.admin-section-heading span{color:var(--muted);font-size:12px}
.column-article-browser{max-width:820px;margin-top:16px;padding:16px;background:var(--surface);border:1px solid var(--border)}.column-article-browser-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.column-article-browser h4{margin:0;font-size:17px}.column-article-browser p{margin:3px 0 0;color:var(--muted);font-size:12px}.column-article-list{display:grid;gap:7px}.column-article-list article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border)}.column-article-list article>div{min-width:0}.column-article-list a:first-child{display:block;min-width:0;color:var(--text);text-decoration:none}.column-article-list a:first-child:hover{color:var(--accent)}.column-article-list small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
@media(max-width:600px){.column-article-browser-head{align-items:stretch;flex-direction:column}.column-article-list article{align-items:flex-start;flex-direction:column}}

@media(max-width:767px){
    .home-index-page .navbar-custom{display:flex;min-height:58px;height:58px;padding:0 10px;gap:8px}
    .home-index-page .mobile-recommendation-btn{display:inline-flex;order:-2;width:34px;height:34px;padding:0;align-items:center;justify-content:center;border:1px solid rgba(15,123,108,.28);background:rgba(255,255,255,.72);color:var(--accent);font-size:17px;cursor:pointer;flex:0 0 34px}
    .home-index-page .navbar-brand{order:-1;margin:0;font-size:0;line-height:0;flex:0 0 30px}
    .home-index-page .navbar-brand .brand-lockup{display:none}.home-index-page .navbar-brand .brand-mobile-icon{display:block!important;width:29px;height:29px;border-radius:0}
    .home-index-page .search-container{display:none}
    .home-index-page .nav-actions{margin-left:auto;overflow:visible;max-width:none}
    .home-index-page .nav-actions .btn-admin:not(.login-button){display:none}
    .home-index-page .nav-actions .login-button{display:inline-flex;min-height:32px;padding:5px 11px}
    .home-index-page .homepage-layout>.home-aside{position:fixed!important;z-index:1650;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(88vw,360px)!important;min-width:0!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:62px 14px 22px!important;display:block!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;transform:translateX(105%)!important;transition:transform .24s ease;background:rgba(249,248,246,.84)}
    .home-index-page .homepage-layout>.home-aside.open{transform:translateX(0)!important}
    .mobile-drawer-overlay{position:fixed;z-index:1640;inset:0;display:block;background:rgba(18,22,20,.38);opacity:0;pointer-events:none;transition:opacity .2s ease}.mobile-drawer-overlay.open{opacity:1;pointer-events:auto}
    .mobile-drawer-heading{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 14px;background:rgba(255,255,255,.68);border-bottom:1px solid var(--border);font-size:14px}.mobile-drawer-heading button{display:grid;place-items:center;width:34px;height:34px;border:0;background:transparent;color:var(--text);font-size:18px;cursor:pointer}
    .drawer-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:2px 0 12px}.drawer-search-form input{min-width:0;height:38px;padding:0 10px;border:1px solid var(--border);border-radius:0;background:rgba(255,255,255,.9);font:inherit;color:var(--text)}.drawer-search-form input:focus{border-color:var(--accent);outline:0;box-shadow:inset 0 -2px 0 var(--accent)}.drawer-search-form button{height:38px;padding:0 12px;border:1px solid var(--accent);border-radius:0;background:var(--accent);color:#fff;font:inherit;font-size:13px;cursor:pointer}
    .home-index-page .home-aside .aside-section{margin:0 0 10px!important}.home-index-page .home-aside .text-ranking li:nth-child(n+5){display:none}
    .scroll-top{right:12px;bottom:12px;width:38px;height:38px}
    body.drawer-open{overflow:hidden}
}

.content-kicker{display:inline-block;margin:0 0 5px;color:var(--accent);font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.04em}

/* Mobile full-screen navigation and search: two peer controls, Apple-like hierarchy. */
.mobile-top-actions{display:none}
@media(max-width:767px){
    .mobile-ua.home-index-page .navbar-custom{
        grid-template-columns:minmax(0,1fr) auto!important;
    }
    .mobile-ua.home-index-page .navbar-brand{grid-column:1!important}
    .mobile-ua.home-index-page .nav-actions{display:none!important}
    .mobile-ua.home-index-page .mobile-top-actions{
        display:flex;
        grid-column:2;
        grid-row:1;
        align-items:center;
        justify-content:flex-end;
        gap:4px;
        min-width:0;
    }
    .mobile-ua.home-index-page .mobile-account-button{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:46px;
        height:36px;
        padding:0 8px;
        border:0;
        border-bottom:2px solid var(--accent);
        color:#075f53;
        background:transparent;
        font-size:12px;
        font-weight:700;
        line-height:1;
        text-decoration:none;
        white-space:nowrap;
    }
    .mobile-ua.home-index-page .mobile-menu-toggle,
    .mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-toggle{
        display:grid!important;
        position:relative;
        grid-column:auto;
        grid-row:auto;
        place-items:center;
        width:38px!important;
        height:38px!important;
        margin:0!important;
        padding:0!important;
        border:0;
        border-radius:0;
        background:transparent;
        color:var(--text);
        font-size:18px;
        cursor:pointer;
        touch-action:manipulation;
    }
    .mobile-ua.home-index-page .mobile-menu-toggle:hover,
    .mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-toggle:hover,
    .mobile-ua.home-index-page .mobile-menu-toggle[aria-expanded="true"],
    .mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-toggle[aria-expanded="true"]{
        border:0;
        background:rgba(15,123,108,.09);
        color:var(--accent);
    }
    .mobile-ua.home-index-page .mobile-menu-toggle[aria-expanded="true"] .f-icon--menu::before,
    .mobile-ua.home-index-page .mobile-recommendation-btn[aria-expanded="true"] .f-icon--search::before{content:"\E711"}
    .mobile-ua.home-index-page .mobile-nav-panel{
        position:fixed;
        z-index:1690;
        inset:62px 0 0;
        display:block;
        width:100%;
        height:calc(100dvh - 62px);
        padding:clamp(28px,8vh,64px) clamp(24px,9vw,54px) max(28px,env(safe-area-inset-bottom));
        overflow-y:auto;
        border:0;
        background:rgba(248,251,249,.97);
        box-shadow:none;
        backdrop-filter:blur(24px) saturate(135%);
        -webkit-backdrop-filter:blur(24px) saturate(135%);
        clip-path:inset(0 0 100% 0);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translate3d(0,-12px,0);
        transform-origin:50% 0;
        transition:clip-path .32s cubic-bezier(.28,.11,.32,1),opacity .2s ease,transform .32s cubic-bezier(.28,.11,.32,1),visibility 0s linear .32s;
        overscroll-behavior:contain;
    }
    .mobile-ua.home-index-page .mobile-nav-panel.open{
        clip-path:inset(0 0 0 0);
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translate3d(0,0,0);
        transition-delay:0s;
    }
    .mobile-ua.home-index-page .mobile-nav-links{
        display:grid;
        grid-template-columns:1fr;
        gap:0;
        max-width:560px;
        margin:0 auto;
        border:0;
        background:transparent;
    }
    .mobile-ua.home-index-page .mobile-nav-link{
        justify-content:flex-start;
        min-height:58px;
        padding:8px 4px;
        border-bottom:1px solid rgba(31,41,36,.12);
        background:transparent;
        color:#18201c;
        font-size:clamp(22px,7vw,30px);
        font-weight:650;
        letter-spacing:-.03em;
    }
    .mobile-ua.home-index-page .mobile-nav-link.is-active{
        box-shadow:none;
        background:transparent;
        color:var(--accent);
    }
    .mobile-ua.home-index-page .homepage-layout>.home-aside{
        position:fixed!important;
        z-index:1760!important;
        inset:62px 0 0!important;
        width:100%!important;
        min-width:0!important;
        height:calc(100dvh - 62px)!important;
        max-height:none!important;
        margin:0!important;
        padding:66px 12px max(28px,env(safe-area-inset-bottom))!important;
        overflow-y:auto!important;
        border:0!important;
        background:rgba(246,250,247,.97)!important;
        box-shadow:none!important;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translate3d(0,-12px,0)!important;
        transition:opacity .2s ease,transform .32s cubic-bezier(.28,.11,.32,1),visibility 0s linear .32s!important;
        overscroll-behavior:contain;
    }
    .mobile-ua.home-index-page .homepage-layout>.home-aside.open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translate3d(0,0,0)!important;
        transition-delay:0s!important;
    }
    .mobile-ua.home-index-page .mobile-drawer-overlay{display:none!important}
    .mobile-ua.home-index-page .mobile-drawer-heading{
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:54px;
        padding:0 14px;
        background:rgba(255,255,255,.72);
    }
    .mobile-ua.home-index-page .drawer-search-form{
        position:sticky;
        top:-12px;
        z-index:2;
        grid-template-columns:minmax(0,1fr) auto;
        margin:0 0 10px;
        padding:0 0 10px;
        background:rgba(246,250,247,.95);
    }
    .mobile-ua.home-index-page.menu-open,
    .mobile-ua.home-index-page.drawer-open{overflow:hidden!important;overscroll-behavior:none}
    .mobile-ua.home-index-page .navbar-brand .brand-mobile-icon{
        width:34px!important;
        height:34px!important;
        object-fit:contain!important;
    }
}
@media(max-width:360px){
    .mobile-ua.home-index-page .mobile-top-actions{gap:1px}
    .mobile-ua.home-index-page .mobile-account-button{min-width:42px;padding-inline:5px;font-size:11px}
    .mobile-ua.home-index-page .mobile-menu-toggle,
    .mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-toggle{width:36px!important;height:36px!important}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
    .mobile-ua.home-index-page .mobile-nav-panel,
    .mobile-ua.home-index-page .homepage-layout>.home-aside{transition:none!important}
}

/* 2026-11 mobile navigation: UA 与视口宽度共同启用。 */
.mobile-menu-toggle,.mobile-nav-panel{display:none}
@media(max-width:767px){
    .mobile-ua.home-index-page{padding-top:62px}
    .mobile-ua.home-index-page .navbar-custom{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
        align-items:center;
        width:100%;
        height:62px!important;
        min-height:62px!important;
        padding:0 12px!important;
        gap:8px!important;
        overflow:visible;
        background:rgba(249,252,250,.86);
        border-bottom:1px solid rgba(15,123,108,.16);
        box-shadow:0 5px 18px rgba(20,37,29,.09);
        backdrop-filter:blur(20px) saturate(150%);
        -webkit-backdrop-filter:blur(20px) saturate(150%);
    }
    .mobile-ua.home-index-page .navbar-brand{
        grid-column:1;
        grid-row:1;
        justify-self:start;
        order:initial;
        width:38px;
        height:38px;
        margin:0!important;
        flex:none!important;
        font-size:0;
    }
    .mobile-ua.home-index-page .navbar-brand .brand-lockup{display:none!important}
    .mobile-ua.home-index-page .navbar-brand .brand-mobile-icon{
        display:block!important;
        width:34px!important;
        height:34px!important;
        object-fit:contain;
        border-radius:0;
    }
    .mobile-ua.home-index-page .mobile-menu-toggle{
        display:grid;
        grid-column:2;
        grid-row:1;
        place-items:center;
        justify-self:center;
        width:40px;
        height:40px;
        padding:0;
        border:1px solid rgba(15,123,108,.25);
        border-radius:0;
        background:rgba(255,255,255,.72);
        color:var(--accent);
        font-size:18px;
        cursor:pointer;
        touch-action:manipulation;
        transition:background-color .18s ease,border-color .18s ease,color .18s ease;
    }
    .mobile-ua.home-index-page .mobile-menu-toggle[aria-expanded="true"]{
        border-color:var(--accent);
        background:rgba(15,123,108,.12);
        color:#075f53;
    }
    .mobile-ua.home-index-page .mobile-menu-toggle:focus-visible,
    .mobile-ua.home-index-page .mobile-nav-link:focus-visible,
    .mobile-ua.home-index-page .mobile-search-trigger:focus-visible{
        outline:2px solid var(--accent);
        outline-offset:2px;
    }
    .mobile-ua.home-index-page .search-container{display:none!important}
    .mobile-ua.home-index-page .nav-actions{
        display:flex!important;
        grid-column:3;
        grid-row:1;
        justify-self:end;
        justify-content:flex-end;
        min-width:0;
        max-width:100%;
        margin:0!important;
        overflow:visible!important;
    }
    .mobile-ua.home-index-page .nav-actions .btn-admin{display:none!important}
    .mobile-ua.home-index-page .nav-actions .account-button{
        display:inline-flex!important;
        align-items:center;
        justify-content:center;
        min-width:52px;
        min-height:36px;
        padding:6px 10px!important;
        border:1px solid var(--accent)!important;
        border-radius:0;
        background:var(--accent)!important;
        color:#fff!important;
        font-size:12px;
        line-height:1;
        white-space:nowrap;
    }
    .mobile-ua.home-index-page .mobile-nav-panel{
        position:absolute;
        z-index:1700;
        top:calc(100% + 7px);
        left:12px;
        right:12px;
        display:grid;
        grid-template-rows:auto auto;
        gap:8px;
        padding:10px;
        border:1px solid rgba(15,123,108,.2);
        border-radius:0;
        background:rgba(249,252,250,.92);
        box-shadow:0 15px 34px rgba(13,34,24,.18);
        backdrop-filter:blur(22px) saturate(145%);
        -webkit-backdrop-filter:blur(22px) saturate(145%);
        clip-path:inset(0 0 100% 0);
        opacity:0;
        pointer-events:none;
        transform:translate3d(0,-8px,0) scaleY(.96);
        transform-origin:50% 0;
        transition:clip-path .26s cubic-bezier(.2,.82,.25,1),opacity .18s ease,transform .26s cubic-bezier(.2,.82,.25,1);
    }
    .mobile-ua.home-index-page .mobile-nav-panel.open{
        clip-path:inset(0 0 0 0);
        opacity:1;
        pointer-events:auto;
        transform:translate3d(0,0,0) scaleY(1);
    }
    .mobile-ua.home-index-page .mobile-nav-links{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:1px;
        background:rgba(15,123,108,.14);
        border:1px solid rgba(15,123,108,.14);
    }
    .mobile-ua.home-index-page .mobile-nav-link{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:42px;
        padding:8px 6px;
        background:rgba(255,255,255,.9);
        color:var(--text);
        font-size:13px;
        font-weight:650;
        text-decoration:none;
        touch-action:manipulation;
    }
    .mobile-ua.home-index-page .mobile-nav-link.is-active{
        box-shadow:inset 0 -3px 0 var(--accent);
        background:rgba(15,123,108,.08);
        color:#075f53;
    }
    .mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-trigger{
        display:flex!important;
        align-items:center;
        justify-content:center;
        width:100%!important;
        height:42px!important;
        margin:0!important;
        padding:0 12px!important;
        gap:8px;
        border:1px solid rgba(15,123,108,.3);
        border-radius:0;
        background:rgba(255,255,255,.78);
        color:var(--accent);
        font:inherit;
        font-size:13px;
        font-weight:700;
        cursor:pointer;
        touch-action:manipulation;
    }
    .mobile-ua.home-index-page .main-container{
        margin-top:10px;
        padding-inline:8px;
        padding-bottom:max(44px,env(safe-area-inset-bottom));
    }
    .mobile-ua.home-index-page .home-primary{scroll-margin-top:74px}
    .mobile-ua.home-index-page .homepage-layout>.home-aside{
        z-index:1760!important;
        width:min(92vw,380px)!important;
        padding:58px 10px max(28px,env(safe-area-inset-bottom))!important;
        background:rgba(246,250,247,.92)!important;
        box-shadow:-14px 0 34px rgba(10,25,17,.22)!important;
        transform:translate3d(105%,0,0)!important;
        transition:transform .28s cubic-bezier(.2,.82,.25,1)!important;
        scrollbar-width:none;
    }
    .mobile-ua.home-index-page .homepage-layout>.home-aside.open{transform:translate3d(0,0,0)!important}
    .mobile-ua.home-index-page .mobile-drawer-overlay{z-index:1750;background:rgba(14,25,19,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
    .mobile-ua.home-index-page .mobile-drawer-heading{height:50px;background:rgba(255,255,255,.84)}
    .mobile-ua.home-index-page .drawer-search-form{display:grid;padding:1px 0 9px}
    .mobile-ua.home-index-page .home-aside .aside-section{margin-bottom:8px!important;padding:10px!important}
    .mobile-ua.home-index-page .home-aside .aside-title{min-height:34px;margin:-10px -10px 3px!important;padding:7px 9px!important;font-size:13px!important}
    .mobile-ua.home-index-page .home-aside .text-ranking li{min-height:39px;padding:6px 0!important}
    .mobile-ua.home-index-page .home-aside .text-ranking li:nth-child(n+5){display:none!important}
    .mobile-ua.home-index-page.drawer-open{overflow:hidden!important;overscroll-behavior:none}
}
@media(max-width:360px){
    .mobile-ua.home-index-page .navbar-custom{padding-inline:9px!important}
    .mobile-ua.home-index-page .nav-actions .account-button{min-width:48px;padding-inline:7px!important;font-size:11px}
    .mobile-ua.home-index-page .mobile-nav-panel{left:8px;right:8px}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
    .mobile-ua.home-index-page .mobile-nav-panel,
    .mobile-ua.home-index-page .homepage-layout>.home-aside{transition:none!important}
}

/* 2026-10-31：新首页/壁纸/侧栏改版样式已停用，保留文件以便回溯。
.editorial-column-select{display:grid;gap:6px;margin:14px 0 18px;max-width:520px}.editorial-column-select label{font-size:13px;font-weight:700}.editorial-column-select select{min-height:40px;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text)}.editorial-column-select small{color:var(--muted);font-size:12px}.admin-column-row{display:flex;align-items:center;gap:8px}.admin-column-row .form-control{min-width:180px}.admin-column-form .d-flex{display:flex;gap:8px}
@media(max-width:600px){.admin-column-row{align-items:stretch;flex-direction:column}.admin-column-row .form-control{min-width:0}.admin-column-form .d-flex{flex-direction:column}}
.navbar-custom .btn-admin{display:inline-flex;align-items:center;min-height:30px;padding:5px 9px;border:1px solid transparent;color:var(--text);font-size:13px;font-weight:600;text-decoration:none}.navbar-custom .btn-admin:hover,.navbar-custom .btn-admin.is-active{border-color:var(--accent);color:var(--accent);background:rgba(255,255,255,.38)}.home-page .main-container>.column-directory,.home-page .archive-inline .article-card,.reading-wallpaper .wrap .article-card{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.7);backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%)}.column-directory{margin-bottom:30px}.column-directory .video-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.column-directory .article-card{min-height:118px}.archive-inline{max-width:920px;margin-inline:auto}.archive-inline .article-card{padding:26px 30px}.archive-inline section{padding:13px 0;border-top:1px solid var(--border)}.archive-inline h2{margin:0 0 8px;font-size:16px}.archive-inline ul{list-style:none;margin:0;padding:0}.archive-inline li{display:flex;gap:12px;padding:6px 0}.archive-inline time{width:90px;color:var(--muted);font-size:12px}.archive-inline a{color:var(--text);text-decoration:none}.archive-inline a:hover{color:var(--accent)}.reading-wallpaper .appbar{background:rgba(255,255,255,.82)}

/* 悬停只改变视觉反馈，不挤动列表或与卡片入场位移争用。 */
.main-container .video-grid .article-card:hover,.reading-related-grid .article-card:hover{transform:none!important}
.main-container .video-grid .article-card:hover{box-shadow:0 4px 14px rgba(31,29,26,.075)}
.appbar a.link,.nav-auth a,.reader-action .link,.dashboard .btn,.dashboard .action-link{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
@media(hover:none){.video-grid .article-card:hover{transform:none;box-shadow:var(--shadow-sm)}.main-container .video-grid .article-card:hover{box-shadow:var(--shadow-sm)}}
@media(prefers-reduced-motion:reduce){.video-grid .card-cover img{transition:none;transform:none!important}}

/* 编辑器中的内容类型选择：系统分类与主题标签分开。 */
.editorial-type-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0;padding:0;border:0}.editorial-type-picker legend{grid-column:1/-1;margin-bottom:2px;color:var(--muted);font-size:13px;font-weight:600}.editorial-type-picker label{position:relative;display:block;cursor:pointer}.editorial-type-picker input{position:absolute;opacity:0;pointer-events:none}.editorial-type-picker span{display:block;height:100%;padding:10px 12px;border:1px solid var(--border);background:var(--surface);transition:border-color .18s,background-color .18s,box-shadow .18s}.editorial-type-picker strong,.editorial-type-picker small{display:block}.editorial-type-picker strong{color:var(--text);font-size:13px}.editorial-type-picker small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.45}.editorial-type-picker input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.editorial-type-picker input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:640px){.editorial-type-picker{grid-template-columns:1fr}.editorial-type-picker span{padding:9px 10px}}

/* 首页壁纸的最终层级：环境背景 < 阅读面 < 内容卡片 < 固定工具。 */
.home-page{isolation:isolate}
.home-page .home-wallpaper::after{background:rgba(239,244,241,.64)}
.home-page .navbar-custom{background:rgba(255,255,255,.84);border-bottom-color:rgba(218,226,221,.8);box-shadow:0 2px 12px rgba(20,37,29,.07)}
.home-page .video-grid .article-card{background:rgba(255,255,255,.94);border-color:rgba(221,228,223,.92);box-shadow:0 3px 14px rgba(20,37,29,.065)}
.home-page .video-grid .article-card:hover{box-shadow:0 6px 18px rgba(20,37,29,.11)}
.home-page .tag-tabs{background:rgba(255,255,255,.88);border-color:rgba(218,226,221,.9)}
.home-page .home-section-head{position:relative;z-index:1}
.home-page .home-aside .aside-section{background:rgba(255,255,255,.88);border-color:rgba(221,228,223,.92);box-shadow:0 5px 17px rgba(20,37,29,.075)!important}
.home-page .bing-intro-card{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.86);box-shadow:0 10px 28px rgba(20,37,29,.14)}
@media(min-width:768px){
    .home-page .home-primary{padding:20px;background:rgba(249,251,249,.78);border:1px solid rgba(255,255,255,.76);box-shadow:0 14px 38px rgba(20,37,29,.09);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
    .home-page .home-primary .home-pinned{margin-bottom:22px}
    .home-page .home-primary .tag-tabs{margin-bottom:22px}
}
@media(max-width:767px){
    .home-page .home-wallpaper::after{background:rgba(239,244,241,.7)}
    .home-page .bing-intro-modal{right:12px;bottom:12px;width:min(320px,calc(100vw - 24px));z-index:1200}
    .home-page .bing-intro-card{background:rgba(255,255,255,.9)}
}

/* 筛选是阅读面内的导航线，不再额外形成白色卡片。 */
.home-page .tag-tabs{width:100%;padding:0;background:transparent;border:0;border-bottom:1px solid rgba(112,129,120,.32);backdrop-filter:none;-webkit-backdrop-filter:none}

/* 首页卡片层级：置顶精选 > 正文浏览 > 侧栏发现。 */
.home-page .home-pinned-kicker{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;background:rgba(15,123,108,.11);border-left:3px solid var(--accent);color:#075c50;font-size:11px;letter-spacing:.08em}
.home-page .pinned-grid .pinned-featured{box-shadow:0 10px 26px rgba(20,37,29,.15)!important}
.home-page .pinned-grid .pinned-compact{background:rgba(255,255,255,.92);border:1px solid rgba(221,228,223,.92)!important;box-shadow:0 3px 12px rgba(20,37,29,.06)!important}
.home-page .pinned-grid .pinned-compact .card-title{font-size:.9rem;line-height:1.42}
.home-page .home-feed{position:relative}
.home-page .home-section-head{min-height:30px;margin-bottom:14px;border-left-width:3px}
.home-page .home-section-head h2{font-size:1.05rem;font-weight:800;letter-spacing:-.015em}
.home-page .home-article-grid .article-card{min-width:0}
.home-page .home-article-grid .card-cover{background:#e6ece8}
.home-page .home-article-grid .card-info{padding:13px 14px 11px}
.home-page .home-article-grid .card-title{font-size:.95rem;font-weight:750;line-height:1.45;margin-bottom:6px}
.home-page .home-article-grid .card-author{margin-bottom:5px;font-size:.72rem}
.home-page .home-article-grid .card-summary{margin-bottom:11px;font-size:.78rem;line-height:1.62}
.home-page .home-article-grid .card-meta{padding-top:8px;border-top:1px solid rgba(31,29,26,.09);color:#686d69;font-size:.71rem}
.home-page .home-article-grid .article-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:768px) and (max-width:1100px){
    .main-container .home-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .home-page .home-primary{padding:16px}
}
@media(max-width:540px){
    .home-page .home-article-grid .card-info{padding:10px 10px 9px}
    .home-page .home-article-grid .card-title{font-size:.86rem;line-height:1.42;margin-bottom:4px}
    .home-page .home-article-grid .card-author,.home-page .home-article-grid .card-summary{display:none}
    .home-page .home-article-grid .card-meta{padding-top:7px;font-size:.66rem;gap:.2rem .4rem}
    .home-page .home-article-grid .meta-item:last-child{display:none}
}

/* 移动优先：首页导航、浏览卡片与推荐抽屉。 */
@media(max-width:767px){
    .home-page{background:var(--bg)}
    .home-page .home-wallpaper,.home-page .bing-intro-modal{display:none!important}
    .home-page .navbar-custom{height:58px;padding:0 10px;gap:6px}
    .home-page .brand-lockup{width:76px;height:34px;flex-basis:76px}
    .home-page .brand-lockup img{width:121px;top:-27px;left:-23px}
    .home-page .nav-auth{gap:3px}
    .home-page .nav-auth a{min-height:34px!important;padding:5px 6px!important;font-size:11px!important}
    .home-page .mobile-recommendation-btn{width:38px;height:38px;flex-basis:38px;font-size:19px}
    .home-page .main-container{margin-top:12px;padding-bottom:max(72px,calc(34px + env(safe-area-inset-bottom)))}
    .home-page .home-pinned-kicker{margin-bottom:8px}
    .home-page .home-section-head{margin-top:2px;margin-bottom:10px}
    .home-page .tag-tabs{margin-bottom:15px}
    .home-page .tag-tabs .tab{min-height:40px;padding:8px 12px;font-size:12px}
    .home-page .mobile-drawer-overlay{z-index:1400;background:rgba(15,24,20,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
    /* 抽屉自行滚动；不再锁定整页，避免关闭后或动态地址栏变化时无法到底。 */
    body.drawer-open{overflow-y:auto}
    .home-page .main-container .home-aside{z-index:1450;top:0;bottom:0;height:auto;max-height:none;width:min(90vw,360px);padding:60px 12px max(64px,calc(18px + env(safe-area-inset-bottom)));overflow-y:scroll!important;overscroll-behavior-y:contain;scroll-padding-bottom:max(64px,env(safe-area-inset-bottom));background:rgba(246,249,247,.84);box-shadow:-12px 0 34px rgba(10,25,17,.22)}
    .home-page .main-container .home-aside::after{content:'';display:block;height:max(40px,env(safe-area-inset-bottom));width:100%;pointer-events:none}
    .home-page .mobile-drawer-heading{height:50px;padding:0 12px;background:rgba(255,255,255,.74)}
    .home-page .main-container .home-aside .aside-section{background:rgba(255,255,255,.84)!important;margin-bottom:9px!important}
    .home-page .drawer-search-form{padding-bottom:7px}
}
@media(max-width:359px){
    .home-page .brand-lockup{width:66px;flex-basis:66px}
    .home-page .nav-auth a{padding:5px 4px!important;font-size:10px!important}
    .home-page .mobile-recommendation-btn{width:34px;height:34px;flex-basis:34px}
}

/* 移动端信息密度：两列内优先保留摘要和阅读数据，而不是作者行。 */
@media(max-width:767px){
    .home-page .main-container .home-article-grid{gap:8px!important;row-gap:11px!important}
    .home-page .pinned-grid{gap:8px!important}
    .home-page .pinned-grid .pinned-featured .card-info{padding:1.9rem 12px 10px}
    .home-page .pinned-grid .pinned-featured .card-title{font-size:1rem}
    .home-page .pinned-grid .pinned-compact .card-info{padding:8px 9px}
    .home-page .pinned-grid .pinned-compact .card-title{font-size:.82rem;line-height:1.35}
    .home-page .pinned-grid .pinned-compact .card-meta{font-size:.65rem;gap:5px}
    .home-page .home-article-grid .card-info{padding:10px 10px 9px}
    .home-page .home-article-grid .card-title{font-size:.88rem;line-height:1.4;margin-bottom:4px}
    .home-page .home-article-grid .card-author{display:none}
    .home-page .home-article-grid .card-summary{display:-webkit-box;margin:0 0 7px;font-size:.7rem;line-height:1.5;-webkit-line-clamp:1}
    .home-page .home-article-grid .card-meta{padding-top:6px;font-size:.65rem;gap:4px 7px}
    .home-page .home-article-grid .meta-item:last-child{display:none}
    .home-page .home-section-head h2{font-size:1rem}
    .home-page .home-aside .aside-section{padding:11px!important}
    .home-page .home-aside .aside-title{margin:-11px -11px 4px!important;padding:8px 10px!important}
    .home-page .home-aside .text-ranking li{min-height:41px;padding:6px 0!important}
}
@media(max-width:359px){
    .home-page .main-container .home-article-grid{grid-template-columns:1fr!important;gap:9px!important}
    .home-page .home-article-grid .card-info{padding:11px 12px}
    .home-page .home-article-grid .card-summary{-webkit-line-clamp:2;font-size:.75rem}
}

/* 移动端文章卡：用作者与发布时间替代摘要，便于判断来源与时效。 */
@media(max-width:767px){
    .home-page .home-article-grid .card-summary{display:none!important}
    .home-page .home-article-grid .card-author{display:block;margin:0 0 7px;overflow:hidden;font-size:.7rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
    .home-page .home-article-grid .card-meta{padding-top:6px}
    .home-page .home-article-grid .card-meta .meta-item:nth-child(2){display:none}
    .home-page .home-article-grid .card-meta .meta-item:last-child{display:inline-flex!important;margin-left:auto!important}
}

/* 公共页面三列主区 + 一列侧栏：统一选中态、边界与毛玻璃层级。 */
html,body{max-width:100%;overflow-x:hidden}.home-page .home-wallpaper::after{background:rgba(226,234,229,.28)}
.home-page .navbar-custom{width:100%;max-width:100%;gap:14px;padding-inline:clamp(10px,3vw,46px);background:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.72);box-shadow:0 2px 12px rgba(20,37,29,.08)}
.navbar-custom .navbar-brand{margin-right:0}.navbar-custom .search-container{min-width:160px;margin:0;max-width:420px}.navbar-custom .nav-actions{min-width:0;gap:3px;white-space:nowrap}.navbar-custom .btn-admin{position:relative;flex:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;background:transparent}.navbar-custom .btn-admin:hover{border-color:rgba(15,123,108,.35);background:rgba(255,255,255,.42)}.navbar-custom .btn-admin.is-active,.navbar-custom .btn-admin[aria-current="page"]{border-bottom-color:var(--accent);background:rgba(15,123,108,.11);color:#075f53}.navbar-custom .btn-admin.is-active::after,.navbar-custom .btn-admin[aria-current="page"]::after{content:"";position:absolute;right:7px;top:6px;width:4px;height:4px;background:var(--accent)}
.home-page .main-container{width:min(1440px,100%);margin:26px auto 0;padding-inline:clamp(10px,3vw,44px)}.public-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(230px,1fr);gap:20px;align-items:start;max-width:100%}.public-main-panel{min-width:0;padding:20px;background:rgba(250,252,251,.79);border:1px solid rgba(255,255,255,.76);box-shadow:0 12px 32px rgba(20,37,29,.09);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.public-main-panel .home-pinned{margin-bottom:20px}.public-main-panel .home-pinned-kicker{display:flex;align-items:center;min-height:28px;margin-bottom:10px;padding:0 9px;border:0;border-left:3px solid var(--accent);background:rgba(255,255,255,.48);font-size:12px}.public-main-panel .pinned-grid{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:32/9}.public-main-panel .pinned-featured{grid-row:1/3}.public-main-panel .pinned-compact{grid-column:2}.public-main-panel .pinned-grid .article-card{min-width:0}
.public-sidebar{display:flex!important;position:sticky;top:78px;max-height:calc(100vh - 94px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;flex-direction:column;gap:10px}.public-sidebar::-webkit-scrollbar{display:none}.public-sidebar .aside-section{flex:none;margin:0!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 5px 16px rgba(20,37,29,.08)!important;backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%)}.public-sidebar .aside-section--comments::before{background:#47735f}.public-sidebar .aside-section--comments .aside-title{color:#315b49}.public-sidebar .text-ranking li{min-width:0}.public-sidebar .text-ranking a{min-width:0;overflow:hidden;text-overflow:ellipsis}
.column-directory .section-title,.timeline-section>h1,.archive-inline>h1{margin:0 0 8px}.section-description{margin:0 0 18px;color:var(--muted);font-size:13px}.column-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.column-card{display:flex;min-width:0;min-height:126px;padding:16px;flex-direction:column;border:1px solid rgba(15,123,108,.18);background:rgba(255,255,255,.69);color:var(--text);text-decoration:none;transition:border-color .2s,background-color .2s,box-shadow .2s}.column-card:hover,.column-card:focus-visible{border-color:var(--accent);background:rgba(255,255,255,.9);box-shadow:0 6px 15px rgba(20,37,29,.08)}.column-card strong{font-size:17px}.column-card span{margin-top:8px;color:var(--muted);font-size:12px}.column-card small{margin-top:auto;color:var(--accent);font-weight:700}
.content-timeline{position:relative;margin-top:8px;padding-left:30px}.content-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:rgba(15,123,108,.32)}.content-timeline article{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;padding:0 0 22px}.content-timeline article::before{content:"";position:absolute;left:-25px;top:7px;width:9px;height:9px;border:2px solid var(--accent);background:#f6faf8}.content-timeline time{display:flex;flex-direction:column;color:var(--muted);font-size:10px}.content-timeline time b{color:var(--accent);font-size:20px;line-height:1}.content-timeline h2{margin:0 0 5px;font-size:17px}.content-timeline h2 a{color:var(--text);text-decoration:none}.content-timeline h2 a:hover{color:var(--accent)}.content-timeline p{margin:0 0 6px;color:#4f5a55;font-size:13px;line-height:1.65}.content-timeline small{color:var(--muted);font-size:11px}
.reading-shell{display:grid;grid-template-columns:minmax(0,3fr) minmax(230px,1fr);gap:20px;align-items:start;width:min(1440px,calc(100% - 28px));max-width:none!important}.reading-shell>.reading-main,.reading-shell>.public-sidebar{min-width:0}.reading-main>.article-card,.reading-main>.comment-section{background:rgba(255,255,255,.84);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
@media(max-width:1024px){.home-page .navbar-custom{gap:8px}.navbar-custom .search-container{max-width:240px}.navbar-custom .btn-admin{padding-inline:7px}.public-layout,.reading-shell{grid-template-columns:minmax(0,1fr) 230px}.column-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.home-page .navbar-custom{height:auto;min-height:58px;display:grid;grid-template-columns:auto minmax(0,1fr);padding:7px 10px}.navbar-custom .navbar-brand{grid-column:1}.navbar-custom .search-container{display:none}.navbar-custom .nav-actions{grid-column:2;display:flex;max-width:100%;margin:0;overflow-x:auto;scrollbar-width:none}.navbar-custom .nav-actions::-webkit-scrollbar{display:none}.navbar-custom .nav-back{display:none}.navbar-custom .btn-admin{min-height:38px;padding:8px 9px}.home-page .main-container{margin-top:12px;padding-inline:10px}.public-layout,.reading-shell{display:block}.public-main-panel{padding:11px}.public-main-panel .pinned-grid{aspect-ratio:auto;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto}.public-main-panel .pinned-featured{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}.public-main-panel .pinned-compact{grid-column:auto}.public-sidebar{position:relative;top:auto;max-height:none;margin-top:12px;overflow:visible}.public-sidebar .aside-section{padding:12px}.column-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.column-card{min-height:102px;padding:12px}.content-timeline{padding-left:23px}.content-timeline article{grid-template-columns:48px minmax(0,1fr);gap:9px}.content-timeline p{display:none}.reading-shell{width:calc(100% - 20px)}.reading-shell>.public-sidebar{margin-bottom:20px}}
@media(max-width:380px){.column-card-grid{grid-template-columns:1fr}.content-timeline article{grid-template-columns:42px minmax(0,1fr)}.navbar-custom .navbar-brand{font-size:16px}.navbar-custom .brand-icon{width:28px;height:28px}}

/* 公共顶栏固定在视口顶部，并为正文预留同等高度。 */
.home-index-page{padding-top:60px}.home-index-page .navbar-custom{position:fixed!important;inset:0 0 auto 0;z-index:1600}.reading-wallpaper{padding-top:52px}.reading-wallpaper .appbar{position:fixed!important;inset:0 0 auto 0;width:100%;z-index:1600}
@media(max-width:767px){.home-index-page{padding-top:58px}.home-index-page .navbar-custom{min-height:58px}.reading-wallpaper{padding-top:48px}}

/* UWP 搜索、独立登录按钮、内容区返回与登录壁纸。 */
.uwp-search .search-wrapper{height:34px;background:rgba(255,255,255,.76);border:1px solid rgba(72,82,77,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}.uwp-search .search-wrapper::before{content:"";position:absolute;left:11px;top:9px;width:10px;height:10px;border:1.5px solid #52605a;border-radius:50%;pointer-events:none}.uwp-search .search-wrapper::after{content:"";position:absolute;left:21px;top:20px;width:6px;height:1.5px;background:#52605a;transform:rotate(45deg);transform-origin:left center;pointer-events:none}.uwp-search .search-input{height:32px;padding-left:32px;border:0;border-radius:0;background:transparent;box-shadow:none}.uwp-search .focus-border{display:block;height:2px;background:var(--accent)}.uwp-search .search-input:focus{background:rgba(255,255,255,.92);box-shadow:none}.navbar-custom .login-button{margin-left:4px;border:1px solid var(--accent)!important;border-bottom-width:1px!important;background:var(--accent)!important;color:#fff!important}.navbar-custom .login-button:hover{background:var(--accent-hover)!important;color:#fff!important}
.content-back{display:inline-flex;align-items:center;min-height:32px;margin:0 0 14px;padding:4px 9px;border:1px solid rgba(15,123,108,.3);color:var(--accent);font-size:12px;font-weight:700;text-decoration:none;background:rgba(255,255,255,.55)}.content-back:hover{border-color:var(--accent);background:rgba(255,255,255,.84)}.column-creator-line{margin:-6px 0 16px;color:var(--muted);font-size:12px}.column-card span+span{margin-top:3px;font-size:11px}
.public-sidebar{align-self:start}.auth-wallpaper{min-height:100vh;background:transparent}.auth-wallpaper .auth-card{position:relative;z-index:2;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.76);box-shadow:0 18px 48px rgba(20,37,29,.16);backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%)}.auth-wallpaper .bing-intro-modal{z-index:1500}
@media(max-width:767px){.navbar-custom .login-button{margin-left:2px}.content-back{margin-bottom:10px}.auth-wallpaper{background:var(--bg)}}

/* Fluent 输入框、富文本排版、悬浮返回顶部与侧栏吸附边界。 */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=file],textarea,select,.form-control{border-radius:0!important;border:1px solid var(--border)!important;background:rgba(255,255,255,.88)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)!important;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease!important}input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,input[type=search]:hover,input[type=url]:hover,input[type=number]:hover,input[type=file]:hover,textarea:hover,select:hover,.form-control:hover{border-color:#84938c!important}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,textarea:focus,select:focus,.form-control:focus{border-color:var(--accent)!important;box-shadow:inset 0 -2px 0 var(--accent)!important;background:#fff!important}
.article-content{font-size:16px;line-height:1.9;word-break:break-word;overflow-wrap:anywhere}.article-content>:first-child{margin-top:0}.article-content>:last-child{margin-bottom:0}.article-content h2{margin:1.8em 0 .75em;padding-left:.7em;border-left:3px solid var(--accent);font-size:1.38em;line-height:1.45}.article-content h3{margin:1.45em 0 .65em;font-size:1.16em}.article-content p{margin:.85em 0}.article-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.article-content blockquote{margin:1.2em 0;padding:.75em 1em;border-left:3px solid var(--accent);background:rgba(15,123,108,.06);color:#46524c}.article-content pre{padding:14px;overflow:auto;background:#202622;color:#edf4f0}.article-content table{width:100%;margin:1em 0;background:rgba(255,255,255,.65)}.article-content th{background:rgba(15,123,108,.08)}.article-content :is(iframe,video){display:block;width:100%;max-width:100%;margin:1em auto}.article-content figure.image{background:rgba(255,255,255,.5)}
.public-sidebar{position:sticky!important;top:76px!important;align-self:start;max-height:calc(100dvh - 92px)}.scroll-top{position:fixed;right:22px;bottom:22px;z-index:1700;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.8);border-radius:0;background:rgba(255,255,255,.84);box-shadow:0 8px 22px rgba(20,37,29,.16);backdrop-filter:blur(16px);color:var(--accent);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}.scroll-top .ic{transform:rotate(90deg);font-size:18px}.scroll-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.scroll-top:hover{border-color:var(--accent);background:#fff}.bing-intro-modal{z-index:1750}.reading-wallpaper .appbar{z-index:1800}.appbar .btn-prime{border-radius:0}.appbar .brand .ic{font-size:18px}
@media(max-width:767px){.article-content{font-size:15px;line-height:1.85}.article-content h2{font-size:1.28em}.article-content h3{font-size:1.12em}.public-sidebar{position:relative!important;top:auto!important;max-height:none}.scroll-top{right:12px;bottom:12px;width:38px;height:38px}.bing-intro-modal{display:none!important}}
*/

/* Logo final sizing: 闲报.jpg contains a large white canvas. Crop only that
   canvas in CSS so the complete mark remains visible without stretching it. */
.navbar-custom .navbar-brand .brand-lockup{
    position:relative;
    display:block;
    flex:0 0 150px;
    width:150px;
    height:42px;
    overflow:hidden;
}
.navbar-custom .navbar-brand .brand-lockup img{
    position:absolute;
    display:block;
    width:164px;
    height:auto;
    max-width:none;
    left:-32px;
    top:-36px;
    object-fit:initial;
}
.appbar .reading-home-brand,.appbar .brand{min-width:0}
.appbar .appbar-logo{position:relative;display:block;flex:0 0 118px;width:118px;height:38px;overflow:hidden}
.appbar .appbar-logo img{position:absolute;display:block;width:161px;max-width:none;height:auto;left:-28px;top:-32px}
.appbar .reading-home-brand:hover{background:transparent!important}
@media(max-width:767px){
    .home-index-page .navbar-custom .navbar-brand .brand-lockup{
        display:none;
    }
    .appbar .appbar-logo{flex-basis:96px;width:96px;height:32px}
    .appbar .appbar-logo img{width:136px;left:-24px;top:-27px}
}

/* 内容类型提示，新闻在卡片和时间轴中保持可识别。 */
.content-kicker{display:inline-block;margin:0 0 5px;color:var(--accent);font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.04em}

/* Final mobile overlay precedence. */
.mobile-top-actions{display:none}
@media(max-width:767px){
    .mobile-ua.home-index-page{padding-top:62px}
    .mobile-ua.home-index-page .navbar-custom{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center;height:62px!important;min-height:62px!important;padding:0 12px!important;overflow:visible}
    .mobile-ua.home-index-page .navbar-brand{grid-column:1!important;grid-row:1!important;justify-self:start!important;width:38px;height:38px;margin:0!important;flex:none!important}
    .mobile-ua.home-index-page .navbar-brand .brand-lockup{display:none!important}
    .mobile-ua.home-index-page .navbar-brand .brand-mobile-icon{display:block!important;width:34px!important;height:34px!important;object-fit:contain!important;border-radius:0}
    .mobile-ua.home-index-page .search-container,.mobile-ua.home-index-page .nav-actions{display:none!important}
    .mobile-ua.home-index-page .mobile-top-actions{display:flex!important;grid-column:2;grid-row:1;align-items:center;justify-content:flex-end;gap:4px}
    .mobile-ua.home-index-page .mobile-account-button{display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:36px;padding:0 10px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:12px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap}
    .mobile-ua.home-index-page .mobile-account-button:hover,.mobile-ua.home-index-page .mobile-account-button:focus-visible{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
    .mobile-ua.home-index-page .mobile-menu-toggle,.mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-toggle{display:grid!important;position:relative!important;grid-column:auto!important;grid-row:auto!important;place-items:center;width:38px!important;height:38px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0;background:transparent!important;color:var(--text);font-size:18px;cursor:pointer;touch-action:manipulation}
    .mobile-ua.home-index-page .mobile-menu-toggle[aria-expanded="true"],.mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-toggle[aria-expanded="true"]{background:rgba(15,123,108,.09)!important;color:var(--accent)}
    .mobile-ua.home-index-page .mobile-menu-toggle[aria-expanded="true"] .f-icon--menu::before,.mobile-ua.home-index-page .mobile-recommendation-btn[aria-expanded="true"] .f-icon--search::before{content:"\E711"}
    .mobile-ua.home-index-page .mobile-nav-panel{position:fixed!important;z-index:1690!important;inset:62px 0 0!important;display:block!important;width:100%!important;height:calc(100dvh - 62px)!important;padding:clamp(28px,8vh,64px) clamp(24px,9vw,54px) max(28px,env(safe-area-inset-bottom))!important;overflow-y:auto!important;border:0!important;background:rgba(248,251,249,.97)!important;box-shadow:none!important;backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);clip-path:inset(0 0 100% 0)!important;opacity:0!important;visibility:hidden;pointer-events:none!important;transform:translate3d(0,-12px,0)!important;transform-origin:50% 0;transition:clip-path .32s cubic-bezier(.28,.11,.32,1),opacity .2s ease,transform .32s cubic-bezier(.28,.11,.32,1),visibility 0s linear .32s!important;overscroll-behavior:contain}
    .mobile-ua.home-index-page .mobile-nav-panel.open{clip-path:inset(0 0 0 0)!important;opacity:1!important;visibility:visible;pointer-events:auto!important;transform:translate3d(0,0,0)!important;transition-delay:0s!important}
    .mobile-ua.home-index-page .mobile-nav-links{display:grid!important;grid-template-columns:1fr!important;gap:0!important;max-width:560px;margin:0 auto;border:0!important;background:transparent!important}
    .mobile-ua.home-index-page .mobile-nav-link{display:flex;justify-content:flex-start!important;min-height:58px;padding:8px 4px!important;border-bottom:1px solid rgba(31,41,36,.12);background:transparent!important;color:#18201c;font-size:clamp(22px,7vw,30px)!important;font-weight:650;letter-spacing:-.03em;text-decoration:none}
    .mobile-ua.home-index-page .mobile-nav-link.is-active{box-shadow:none!important;background:transparent!important;color:var(--accent)}
    .mobile-ua.home-index-page .homepage-layout>.home-aside{position:fixed!important;z-index:1760!important;inset:62px 0 0!important;width:100%!important;min-width:0!important;height:calc(100dvh - 62px)!important;max-height:none!important;margin:0!important;padding:66px 12px max(28px,env(safe-area-inset-bottom))!important;display:block!important;overflow-y:auto!important;border:0!important;background:rgba(246,250,247,.97)!important;box-shadow:none!important;opacity:0!important;visibility:hidden;pointer-events:none!important;transform:translate3d(0,-12px,0)!important;transition:opacity .2s ease,transform .32s cubic-bezier(.28,.11,.32,1),visibility 0s linear .32s!important;overscroll-behavior:contain}
    .mobile-ua.home-index-page .homepage-layout>.home-aside.open{opacity:1!important;visibility:visible;pointer-events:auto!important;transform:translate3d(0,0,0)!important;transition-delay:0s!important}
    .mobile-ua.home-index-page .mobile-drawer-overlay{display:none!important}
    .mobile-ua.home-index-page .mobile-drawer-heading{position:absolute;top:0;left:0;right:0;height:54px;padding:0 14px;background:rgba(255,255,255,.72)}
    .mobile-ua.home-index-page .drawer-search-form{display:grid!important;position:sticky;top:-12px;z-index:2;grid-template-columns:minmax(0,1fr) auto;margin:0 0 10px;padding:0 0 10px;background:rgba(246,250,247,.95)}
    .mobile-ua.home-index-page.menu-open,.mobile-ua.home-index-page.drawer-open{overflow:hidden!important;overscroll-behavior:none}
}
@media(max-width:360px){.mobile-ua.home-index-page .mobile-top-actions{gap:1px}.mobile-ua.home-index-page .mobile-account-button{min-width:42px;padding-inline:5px;font-size:11px}.mobile-ua.home-index-page .mobile-menu-toggle,.mobile-ua.home-index-page .mobile-recommendation-btn.mobile-search-toggle{width:36px!important;height:36px!important}}
@media(max-width:767px) and (prefers-reduced-motion:reduce){.mobile-ua.home-index-page .mobile-nav-panel,.mobile-ua.home-index-page .homepage-layout>.home-aside{transition:none!important}}
@media(max-width:767px){
    .appbar .appbar-logo{display:block;flex:0 0 34px;width:34px;height:34px;overflow:hidden}
    .appbar .appbar-logo img{position:static;display:block;width:34px;height:34px;max-width:34px;object-fit:contain;transform:none}
}