/* 墨林官网主题 · 版式取自官网单页（编辑风：纸白 / 石墨字 / 赭色点睛） */
:root{
  --paper:#FAFAF8; --ink:#1B1C1E; --muted:#85837E; --rule:#E5E3DE; --accent:#B96A2E;
  --ink-soft:#2A2B2E; --on-ink:#D8D6D0; --on-ink-2:#C9C7C0;
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,Georgia,serif;
  --font-sans:"Inter","Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--paper);}
body{font-family:var(--font-serif);color:var(--ink);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;}
.page{max-width:1480px;margin:0 auto;padding:62px 96px 72px;}

/* 页头 */
header{display:flex;align-items:baseline;justify-content:space-between;gap:24px;}
.wordmark{font-size:42px;line-height:1;letter-spacing:.02em;text-decoration:none;color:var(--ink);}
.wordmark .en{font-family:var(--font-sans);font-size:15px;letter-spacing:.22em;color:var(--muted);margin-left:14px;}
.topnav{display:flex;gap:34px;font-family:var(--font-sans);font-size:14px;letter-spacing:.2em;align-items:baseline;}
.topnav a{color:var(--ink);text-decoration:none;transition:color .2s ease;}
.topnav a:hover,.topnav a.active{color:var(--accent);}
/* 登录态那两项比导航轻一档，别跟主入口抢视线 */
.topnav .quiet{color:var(--muted);font-size:13px;letter-spacing:.14em;}
.topnav .quiet:hover{color:var(--accent);}
.nav-logout{display:inline;margin:0;}
.nav-logout button{font-family:var(--font-sans);font-size:13px;letter-spacing:.14em;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;}
.nav-logout button:hover{color:var(--accent);}
/* 二级菜单（后台菜单编辑器里挂的子项）：桌面悬停/聚焦展开，移动端走浮层平铺 */
.topnav .nav-item{position:relative;display:flex;align-items:baseline;}
.subnav{position:absolute;top:calc(100% + 14px);left:-18px;z-index:5;min-width:160px;display:flex;flex-direction:column;gap:11px;
  padding:13px 18px;background:#fff;border:1px solid var(--rule);box-shadow:0 16px 36px rgba(27,28,30,.07);
  font-size:13px;letter-spacing:.14em;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;}
.topnav .nav-item:hover .subnav,
.topnav .nav-item:focus-within .subnav{opacity:1;visibility:visible;transform:none;}
.subnav a{color:var(--muted);white-space:nowrap;}
.subnav a:hover{color:var(--accent);}
.overlay-nav .sub{font-size:17px;letter-spacing:.14em;color:var(--muted);}
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:20px;padding:0;background:none;border:0;cursor:pointer;position:relative;z-index:60;}
/* 触控区扩到 44px，肉眼看到的仍是两根线 */
.menu-btn::before{content:'';position:absolute;inset:-12px;}
.menu-btn span{display:block;height:1.6px;width:100%;background:var(--ink);transition:transform .28s ease;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3.3px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg);}
hr.rule{border:0;border-top:1px solid var(--rule);margin-top:26px;}

/* 移动端浮层 */
/* 模糊只挂在 .open 上：关着的时候还留着 backdrop-filter（或 transform），Chromium 会把整页当成
   一个 backdrop 图层不再重绘 —— 往下滚动就是一片空白。改这里先去浏览器里滚一遍再说。 */
.overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(250,250,248,.52);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s;}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto;
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);}
.overlay::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 40%);}
.overlay-nav{display:flex;flex-direction:column;align-items:center;gap:30px;}
.overlay-nav a{position:relative;font-family:var(--font-serif);font-size:26px;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;}
.overlay-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:-2px;height:2px;
  background:var(--accent);transition:left .22s ease,right .22s ease;}
.overlay-nav a:hover::after,.overlay-nav a.active::after{left:8px;right:8px;}
/* 浮层里的「退出」：长得跟同排链接一样，但它是 POST 表单 */
.overlay-logout{margin:0;}
.overlay-logout button{font-family:var(--font-serif);font-size:26px;letter-spacing:.06em;color:var(--ink);
  background:none;border:0;padding:0;cursor:pointer;}
.overlay-logout button:hover{color:var(--accent);}

/* hero */
.hero{margin-top:78px;}
.eyebrow{font-family:var(--font-sans);font-size:13px;letter-spacing:.24em;color:var(--muted);}
h1.hero-title{margin-top:26px;font-size:76px;font-weight:400;line-height:1.22;letter-spacing:.01em;max-width:1000px;}
h1.hero-title .accent{color:var(--accent);}
.lead{margin-top:32px;font-size:21px;line-height:1.9;letter-spacing:.01em;color:var(--ink-soft);max-width:660px;}
.cta{margin-top:40px;display:flex;gap:18px;font-family:var(--font-sans);}
.cta a{font-size:14px;letter-spacing:.14em;padding:14px 30px;text-decoration:none;transition:all .2s ease;}
.cta .primary{background:var(--ink);color:var(--paper);}
.cta .primary:hover{background:var(--accent);}
.cta .ghost{color:var(--ink);border:1px solid var(--rule);}
.cta .ghost:hover{border-color:var(--accent);color:var(--accent);}
.underline{margin-top:34px;width:96px;height:3px;background:var(--accent);}

/* 主视觉 */
.herofig{margin-top:84px;padding-top:30px;border-top:1px solid var(--rule);}
.herofig .frame{border:1px solid var(--rule);background:#fff;overflow:hidden;}
.herofig .frame img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 58%;}
.herofig .cap{margin-top:16px;font-family:var(--font-sans);font-size:12px;letter-spacing:.2em;color:var(--muted);display:flex;justify-content:space-between;}

/* 栏目骨架 */
.sec{margin-top:96px;}
.sec-lab{font-family:var(--font-sans);font-size:12px;letter-spacing:.2em;color:var(--muted);}
.sec-h{margin-top:18px;font-size:34px;font-weight:400;line-height:1.35;letter-spacing:.01em;max-width:760px;}
.sec-p{margin-top:14px;font-family:var(--font-sans);font-size:15px;line-height:1.85;color:var(--muted);max-width:620px;}

/* 界面展示 */
.shots{margin-top:34px;border-top:1px solid var(--rule);}
.shot{padding:34px 0 40px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:96px 1fr;gap:34px;}
.shot .num{font-family:var(--font-sans);font-size:13px;letter-spacing:.18em;color:var(--muted);}
.shot h3{font-size:24px;font-weight:400;line-height:1.4;}
.shot p{margin-top:10px;font-family:var(--font-sans);font-size:15px;line-height:1.8;color:var(--muted);max-width:620px;}
.shot .fig{margin-top:22px;border:1px solid var(--rule);background:#fff;overflow:hidden;}
.shot .fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;}

/* 后台两栏 */
.admin{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:34px;}
.admin .fig{border:1px solid var(--rule);background:#fff;overflow:hidden;}
.admin .fig img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;}
.admin .cap{margin-top:14px;font-family:var(--font-sans);font-size:13px;letter-spacing:.1em;color:var(--muted);}

/* App 专区 */
.appwrap{margin-top:34px;display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start;border-top:1px solid var(--rule);padding-top:40px;}
.appwrap .phones{display:flex;gap:22px;}
.phone{border:1px solid var(--rule);background:#fff;overflow:hidden;flex:1;}
.phone img{width:100%;aspect-ratio:1080/2400;object-fit:cover;object-position:top center;}
.applist{margin-top:26px;}
.applist li{list-style:none;padding:14px 0;border-top:1px solid var(--rule);font-family:var(--font-sans);font-size:15px;line-height:1.7;color:var(--ink-soft);display:grid;grid-template-columns:18px 1fr;gap:12px;}
.applist li span{color:var(--accent);}
.appnote{margin-top:18px;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.06em;color:var(--muted);}

/* WHY */
.why-grid{margin-top:30px;border-top:1px solid var(--rule);}
.feat{display:grid;grid-template-columns:96px 1fr;gap:34px;padding:34px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
.feat .num{font-family:var(--font-sans);font-size:13px;letter-spacing:.18em;color:var(--accent);}
.feat h2{font-size:26px;font-weight:400;line-height:1.4;}
.feat p{margin-top:12px;font-size:17px;line-height:1.85;color:var(--muted);font-family:var(--font-sans);max-width:620px;}

/* 演示块 */
.demo{margin-top:96px;background:var(--ink);color:var(--paper);padding:56px 64px;display:flex;align-items:center;justify-content:space-between;gap:60px;}
.demo .d-lab{font-family:var(--font-sans);font-size:12px;letter-spacing:.24em;color:var(--on-ink);}
.demo h2{margin-top:20px;font-size:32px;font-weight:400;line-height:1.35;letter-spacing:.01em;max-width:520px;}
.demo p{margin-top:16px;font-size:15.5px;line-height:1.85;color:var(--on-ink-2);font-family:var(--font-sans);max-width:520px;}
.demo .go{flex:0 0 auto;background:var(--accent);color:#FAF3EC;font-family:var(--font-sans);font-size:14px;letter-spacing:.14em;padding:16px 34px;text-decoration:none;}

/* 承诺 */
.promise{margin-top:96px;border-top:1px solid var(--rule);}
.promise h2{margin-top:28px;font-size:30px;font-weight:400;line-height:1.4;}
.promise .grid4{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);}
.promise .item{padding:26px 26px 26px 0;border-right:1px solid var(--rule);}
.promise .item:last-child{border-right:0;}
.promise .k{font-family:var(--font-sans);font-size:12px;letter-spacing:.18em;color:var(--muted);}
.promise .v{margin-top:12px;font-size:19px;line-height:1.5;}

/* 页脚 */
footer{margin-top:104px;padding-top:28px;border-top:1px solid var(--rule);display:flex;align-items:baseline;justify-content:space-between;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.06em;color:var(--muted);}
footer a{color:var(--muted);text-decoration:none;}
footer a:hover{color:var(--accent);}

/* 预热弹窗 */
.warmup{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(27,28,30,.26);opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;}
.warmup.open{opacity:1;visibility:visible;}
.warmup-card{width:min(88vw,420px);background:var(--paper);border:1px solid var(--rule);padding:42px 40px 34px;text-align:center;}
.warmup-card h3{font-size:26px;font-weight:400;letter-spacing:.04em;}
.warmup-card p{margin-top:14px;font-family:var(--font-sans);font-size:15px;line-height:1.85;color:var(--muted);}
.warmup-ok{margin-top:28px;font-family:var(--font-sans);font-size:13px;letter-spacing:.14em;padding:12px 36px;background:var(--ink);color:var(--paper);border:0;cursor:pointer;}
.warmup-card .warmup-qnum{margin-top:16px;color:var(--ink);font-size:14px;}
.warmup-card .warmup-qnum span{color:var(--accent);font-weight:600;letter-spacing:.06em;}
.warmup-card .warmup-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:18px;}
.warmup-card .warmup-actions .warmup-copy,.warmup-card .warmup-actions .warmup-ok{display:inline-flex;align-items:center;justify-content:center;height:42px;margin:0;}
.warmup-card .warmup-copy{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.12em;padding:0 18px;background:none;color:var(--muted);border:1px solid var(--rule);cursor:pointer;transition:color .2s ease,border-color .2s ease;}
.warmup-card .warmup-copy:hover{color:var(--accent);border-color:var(--accent);}
.warmup-card .warmup-actions .warmup-ok{padding:0 30px;}

/* ===== 内页：文章 / 独立页 / 归档 / 404 ===== */
.crumb{margin-top:64px;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.14em;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--accent);}
.crumb .sep{color:var(--rule);}

.entry{margin-top:34px;max-width:760px;}
.entry .kicker{font-family:var(--font-sans);font-size:12px;letter-spacing:.2em;color:var(--muted);}
.entry h1{margin-top:18px;font-size:52px;font-weight:400;line-height:1.3;letter-spacing:.01em;}
.entry .meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--font-sans);font-size:13px;letter-spacing:.08em;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;}
.entry .meta a{color:var(--muted);text-decoration:none;}
.entry .meta a:hover{color:var(--accent);}

.prose{margin-top:44px;max-width:720px;font-size:18px;line-height:2;color:var(--ink-soft);}
.prose > * + *{margin-top:1.35em;}
.prose h2{margin-top:2.2em;font-size:30px;font-weight:400;line-height:1.4;color:var(--ink);}
.prose h3{margin-top:1.9em;font-size:23px;font-weight:400;line-height:1.45;color:var(--ink);}
.prose h4{margin-top:1.7em;font-size:19px;font-weight:600;color:var(--ink);}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(185,106,46,.35);}
.prose a:hover{border-bottom-color:var(--accent);}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li+li{margin-top:.5em;}
.prose blockquote{margin:2em 0;padding:6px 0 6px 22px;border-left:2px solid var(--accent);color:var(--muted);font-style:normal;}
.prose img{margin:2em 0;border:1px solid var(--rule);}
.prose figure{margin:2em 0;}
.prose figcaption{margin-top:10px;font-family:var(--font-sans);font-size:13px;color:var(--muted);text-align:center;}
.prose code{font-family:"JetBrains Mono",Consolas,monospace;font-size:.86em;background:#F1EFEA;padding:.15em .4em;}
.prose pre{margin:2em 0;padding:20px 22px;background:#232426;color:#E8E6E0;overflow:auto;font-size:14px;line-height:1.75;}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit;}
.prose hr{margin:2.6em 0;border:0;border-top:1px solid var(--rule);}
.prose table{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:15px;}
.prose th,.prose td{padding:12px 10px;border-bottom:1px solid var(--rule);text-align:left;}
.prose th{color:var(--muted);font-weight:500;letter-spacing:.06em;}

/* 归档列表：跟首页「截图」一样按行排 */
.list{margin-top:34px;border-top:1px solid var(--rule);}
.list-item{display:grid;grid-template-columns:96px 1fr auto;gap:28px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
.list-item .num{font-family:var(--font-sans);font-size:13px;letter-spacing:.18em;color:var(--muted);}
.list-item h2{font-size:26px;font-weight:400;line-height:1.4;}
.list-item h2 a{text-decoration:none;color:var(--ink);transition:color .2s ease;}
.list-item h2 a:hover{color:var(--accent);}
.list-item p{margin-top:10px;font-family:var(--font-sans);font-size:15px;line-height:1.8;color:var(--muted);max-width:720px;}
.list-item .date{font-family:var(--font-sans);font-size:13px;letter-spacing:.1em;color:var(--muted);white-space:nowrap;}
.list-item .tags{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.08em;}
.list-item .tags a{color:var(--muted);text-decoration:none;}
.list-item .tags a:hover{color:var(--accent);}

.pager{margin-top:52px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-sans);font-size:13px;letter-spacing:.14em;color:var(--muted);}
.pager a{color:var(--ink);text-decoration:none;padding:10px 0;}
.pager a:hover{color:var(--accent);}
.pager .empty{visibility:hidden;}

.notfound{margin-top:96px;max-width:640px;}
.notfound .code{font-family:var(--font-sans);font-size:13px;letter-spacing:.3em;color:var(--accent);}
.notfound h1{margin-top:20px;font-size:64px;font-weight:400;line-height:1.2;}
.notfound p{margin-top:22px;font-family:var(--font-sans);font-size:16px;line-height:1.85;color:var(--muted);}
.notfound .back{display:inline-block;margin-top:34px;font-family:var(--font-sans);font-size:14px;letter-spacing:.14em;padding:14px 30px;background:var(--ink);color:var(--paper);text-decoration:none;}
.notfound .back:hover{background:var(--accent);}

@media (max-width:1100px){
  .appwrap{grid-template-columns:1fr;gap:34px;}
  .promise .grid4{grid-template-columns:1fr 1fr;}
  .list-item{grid-template-columns:64px 1fr;gap:18px;}
  .list-item .date{grid-column:2;margin-top:6px;}
}
@media (max-width:768px){
  .topnav{display:none;}
  .menu-btn{display:inline-flex;}
  .admin{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .page{padding:28px 22px 44px;}
  .wordmark{font-size:30px;}
  .wordmark .en{font-size:12.5px;margin-left:8px;letter-spacing:.18em;}
  .hero{margin-top:52px;}
  .eyebrow{font-size:12px;letter-spacing:.16em;}
  h1.hero-title{font-size:42px;line-height:1.28;margin-top:20px;}
  .lead{margin-top:22px;font-size:16px;line-height:1.85;}
  .cta{margin-top:28px;flex-direction:column;gap:12px;}
  .cta a{padding:14px 0;text-align:center;}
  .herofig{margin-top:56px;padding-top:22px;}
  .herofig .frame img{aspect-ratio:4/3;}
  .sec,.demo,.promise{margin-top:64px;}
  .sec-h{font-size:24px;}
  .shot{grid-template-columns:44px 1fr;gap:16px;padding:24px 0 30px;}
  .shot h3{font-size:20px;}
  .shot p{font-size:14px;}
  .feat{grid-template-columns:44px 1fr;gap:16px;padding:24px 0;}
  .feat h2{font-size:22px;}
  .feat p{font-size:15px;}
  .demo{padding:40px 28px;flex-direction:column;align-items:flex-start;gap:26px;}
  .demo h2{font-size:26px;}
  .demo .go{width:100%;text-align:center;}
  .promise h2{font-size:22px;}
  .promise .grid4{grid-template-columns:1fr;}
  .promise .item{border-right:0;border-bottom:1px solid var(--rule);padding:20px 0;}
  .appwrap .phones{gap:14px;}
  footer{flex-direction:column;gap:10px;align-items:flex-start;margin-top:64px;}
  .crumb{margin-top:36px;}
  .entry{margin-top:24px;}
  .entry h1{font-size:34px;}
  .prose{margin-top:32px;font-size:17px;line-height:1.95;}
  .prose h2{font-size:24px;}
  .prose h3{font-size:20px;}
  .list-item{grid-template-columns:44px 1fr;gap:14px;padding:22px 0;}
  .list-item h2{font-size:21px;}
  .list-item p{font-size:14px;}
  .notfound{margin-top:56px;}
  .notfound h1{font-size:40px;}
}