/* CoverNice — 全站外壳（2026-10-23）
   和 inspiration.html 同一套语言：冷白纸底、深墨字、单一深青主色、直角控件。
   只放「跨页面复用」的东西：token / 导航 / 按钮 / 页脚 / 区块骨架。
   页面自己的排版放各自 <style> 里。 */

:root{
  --ink:#0F2E3D; --ink70:#4A6B7C; --ink50:#7B93A0;
  --bg:#F7FAFC; --bg2:#EAF3F8; --card:#fff; --paper:#FFF8E6;
  --line:rgba(15,46,61,.10); --line2:rgba(15,46,61,.22);
  --primary:#086288; --primary-d:#06506E; --primary-mid:#4D8DBA; --primary-light:#97D7FF; --cream:#FFEFC4;
  --accent2:#B4533A; --green:#2E8B57;
  /* 交互状态只有一套：选中 / 激活 / 主操作 = 主色实心，悬停加深。
     以前各页各写一份（有的深墨、有的主色），KDP 页看起来就像另一个站点。 */
  --on-bg:var(--primary); --on-bg-hover:var(--primary-d); --on-fg:#fff;
  --pad:clamp(20px,4vw,32px); --max:1240px;
  --sans:"Inter","PingFang SC","Noto Sans SC",-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:clip}
a{color:inherit;text-decoration:none}
button,select,input{font-family:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--primary);color:#fff}
.in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- 导航 ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em}
.brand svg{width:26px;height:26px;flex:none;color:var(--ink)}
.nav-l{display:flex;align-items:center;gap:24px;font-size:14px}
.nav-l a{color:var(--ink70);padding:6px 0;border-bottom:1px solid transparent}
.nav-l a:hover{color:var(--ink)}
.nav-l a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.nav-r{display:flex;align-items:center;gap:10px}

/* ---------- 按钮：直角，无阴影 ---------- */
[hidden]{display:none!important} /* .btn 的 display 会压掉 hidden 属性，必须显式 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;
  border:1px solid var(--line2);background:transparent;color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--bg2)}
.btn-ghost{border-color:transparent;color:var(--ink70)}
.btn-ghost:hover{color:var(--ink);background:var(--bg2)}
/* 登录后才出现的「我的封面」：用站点第二强调色（cream）区别于主操作与次级操作 */
.btn-mine{background:var(--cream);border-color:#E3CE96;color:var(--ink)}
.btn-mine:hover{background:#F7E2B0;border-color:#D6BE84;color:var(--ink)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--on-bg-hover);border-color:var(--on-bg-hover);color:#fff}
.btn-lg{height:44px;padding:0 20px;font-size:14px}

/* ---------- 账号入口（登录后：头像 + 名称 + 积分 + 下拉） ---------- */
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 6px;
  border:1px solid #E3CE96;background:var(--cream);color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .15s,border-color .15s}
.acct-btn:hover{background:#F7E2B0;border-color:#D6BE84}
.acct-btn[aria-expanded="true"]{background:#F7E2B0;border-color:#D6BE84}
.acct-av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  background:var(--primary);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:0}
.acct-nm{max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-cr{display:inline-flex;align-items:baseline;gap:3px;padding-left:8px;border-left:1px solid #E3CE96;
  color:var(--ink70)}
.acct-cr b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary)}
.acct-cr em{font-size:11px;font-style:normal;font-weight:500;color:var(--ink50)}

.acct-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:186px;padding:6px;
  background:#fff;border:1px solid var(--line2);box-shadow:0 12px 32px rgba(15,46,61,.12)}
.acct-item{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border:0;
  background:transparent;color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;
  text-align:left;cursor:pointer;transition:background .12s}
.acct-item:hover{background:var(--bg2)}
.acct-out{color:var(--ink70)}
.acct-out:hover{background:#FBEDE8;color:var(--accent2)}


/* ---------- 区块骨架 ---------- */
.sec{padding:clamp(42px,6vw,72px) 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.6fr);gap:24px;align-items:end;margin-bottom:26px}
.sec-head h2{margin:6px 0 0;font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:800}
.sec-head > p{margin:0;color:var(--ink70);font-size:14px;line-height:1.65;max-width:42ch;justify-self:end}
.eyebrow{margin:0;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--primary)}
.kicker{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--primary)}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);padding:28px 0 36px;background:#fff}
footer .in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;justify-content:space-between;font-size:12px;color:var(--ink50)}
footer .fl{display:flex;gap:18px}
footer .fl a:hover{color:var(--ink)}
footer .brand{font-size:14px;font-weight:800;color:var(--ink)}

@media(max-width:900px){
  .nav .in{height:auto;flex-wrap:wrap;gap:8px 12px;padding:10px var(--pad) 0}
  .nav-l{order:3;flex:0 0 100%;gap:18px;overflow-x:auto;border-top:1px solid var(--line);padding:9px 0 10px;scrollbar-width:none}
  .nav-l::-webkit-scrollbar{display:none}
  .sec-head{grid-template-columns:1fr;align-items:start;gap:10px}
  .sec-head p{justify-self:start;max-width:52ch}
}
@media(max-width:680px){
  .nav-r{gap:8px}
  .nav-r .btn{height:34px;padding:0 11px;font-size:12px}
  .nav-r #creditChip{display:none}
  .acct-btn{height:34px;padding:0 9px 0 5px}
  .acct-av{width:24px;height:24px;font-size:11px}
  .acct-nm{max-width:84px;font-size:12px}
  .acct-cr{display:none}
  .brand{font-size:17px}
  .nav-l{gap:18px;font-size:13.5px}
  footer .in{gap:12px 18px}
  footer .fl{flex-wrap:wrap;gap:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* 键盘焦点：用主色细环，不要 Chrome 默认蓝 */
:focus-visible{outline:2px solid rgba(8,98,136,.55);outline-offset:2px}

/* 英文访客软提示条：只在首页、非中文浏览器、未看过时出现；不跳转，不做 cloaking */
.lang-hint{background:var(--primary);color:#fff;font-size:14px}
.lang-hint .in{display:flex;align-items:center;gap:14px;padding:9px var(--pad);max-width:none}
.lang-hint .lh-txt{flex:1;min-width:0;line-height:1.45}
.lang-hint .lh-go{
  flex:none;color:var(--ink);background:var(--cream);border-radius:8px;
  padding:6px 12px;font-weight:700;white-space:nowrap;text-decoration:none;
}
.lang-hint .lh-go:hover{background:#F7E2B0}
.lang-hint .lh-x{
  flex:none;background:transparent;border:0;color:rgba(255,255,255,.8);
  font-size:20px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:6px;
}
.lang-hint .lh-x:hover{color:#fff;background:rgba(255,255,255,.15)}
@media(max-width:640px){
  .lang-hint .in{gap:10px;padding:8px 14px;font-size:13px}
  .lang-hint .lh-txt{font-size:12.5px}
}