/* 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)}
/* FREE 标：免费工具的特殊标记，只有 KDP 包封带 */
.free-tag{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--green);
  border:1px solid rgba(46,139,87,.45);padding:0 4px;margin-left:6px;vertical-align:2px;line-height:1.5}
.nav-r{display:flex;align-items:center;gap:10px}
/* 站内锚点要给 sticky 导航让位：不加这一条，跳到 #startForm 时目标顶部会落到
   导航底下（实测 top=38px，导航高 68px），表单上半截被盖住，看着像"页面上移了"。 */
#startForm,#demos{scroll-margin-top:80px}

/* ---------- 按钮：直角，无阴影 ---------- */
[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:9px;height:34px;padding:0 10px 0 6px;
  border:1px solid transparent;background:transparent;color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.005em;cursor:pointer;
  transition:background .16s ease,border-color .16s ease}
.acct-btn:hover{background:rgba(15,46,61,.05)}
.acct-btn[aria-expanded="true"]{background:rgba(15,46,61,.07)}
/* 下拉提示小箭头：朝下，展开转朝上 */
.acct-btn::after{content:"";width:5px;height:5px;flex:none;margin:-4px 0 0 1px;
  border-right:1.5px solid var(--ink50);border-bottom:1.5px solid var(--ink50);
  transform:rotate(45deg);transition:transform .18s ease,border-color .16s ease}
.acct-btn:hover::after{border-color:var(--ink70)}
.acct-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:2px;border-color:var(--ink70)}
.acct-av{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  border-radius:50%;overflow:hidden;background:var(--primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:0}
.acct-av img{display:block;width:100%;height:100%;object-fit:cover}
/* 名字超长交给 ellipsis 截，不截字符；min-width:0 是 flex 里让 ellipsis 生效的前提 */
.acct-nm{flex:0 1 auto;min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-weight:500}
/* 积分：淡青底小标签、无描边 —— 不跟主按钮抢注意力，但一眼能数 */
.acct-cr{display:inline-flex;align-items:baseline;gap:2px;flex:none;padding:2px 6px;
  background:rgba(8,98,136,.075);color:var(--primary);line-height:1.35}
.acct-cr b{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary)}
.acct-cr em{font-size:10.5px;font-style:normal;font-weight:500;color:var(--ink70)}


.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);
  transform-origin:top right;opacity:0;transform:translateY(-6px) scale(.97);
  pointer-events:none;transition:opacity .14s ease,transform .18s cubic-bezier(.2,.75,.3,1)}
.acct-menu.is-open{opacity:1;transform:none;pointer-events:auto}
.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)}
/* 收起时先 fade-in 一项一项落下：只在打开态生效，关闭时整体淡出更快 */
.acct-menu .acct-item{opacity:0;transform:translateY(-4px);transition:background .12s,opacity .16s ease,transform .18s cubic-bezier(.2,.75,.3,1)}
.acct-menu.is-open .acct-item{opacity:1;transform:none}
.acct-menu.is-open .acct-item:nth-child(1){transition-delay:.02s}
.acct-menu.is-open .acct-item:nth-child(2){transition-delay:.05s}
.acct-menu.is-open .acct-item:nth-child(3){transition-delay:.08s}
.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}
  /* 导航在窄屏折成两行，锚点要让得更多 */
  #startForm,#demos{scroll-margin-top:118px}
  .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}
}