/* PageZenith 设计系统 —— 2026-08-28 换肤到「单据美学」（设计稿 work/design-v2）
 *
 * 两条不能回退的决定：
 *
 * 1. **不加载网络字体。** 这里原来第一行 @import 了三套 Google Fonts。
 *    @import 在样式表顶部是阻塞渲染的，而国内用户打不开 fonts.googleapis.com ——
 *    等于让本站的目标用户（不翻墙的跨境卖家）盯着白屏等超时。
 *    全部改走系统字体栈：中文标题走宋体、界面走系统黑体、数字走等宽。
 *
 * 2. **变量名一个没改，只换取值。** 全站 9 个页面、约 400 处 var() 引用，
 *    换名字要全量改标记；换值则零风险、一次到位。所以下面会看到
 *    --accent 其实是墨黑、--green 其实也是墨黑 —— 名字是历史包袱，别当真，
 *    以注释为准。
 */

/* DM Sans —— 自托管，不走 Google Fonts。
 * 只包 latin 子集（unicode-range 限定）：中文不会去下载它，
 * 直接落到系统 CJK 字体，所以 108KB 只在真的要显示英文时才生效。
 */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/dm-sans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/dm-sans-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/dm-sans-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* 底色：暖灰纸 + 点阵（点阵在 .dotgrid 里用） */
  --bg:#ECECE9; --dot:#D8D8D3; --card:#FFFFFF; --soft:#E4E4DF; --line:#DEDED8;
  --text:#141414; --muted:#63635E; --faint:#98988F;

  /* 主操作色 = 墨黑。这套设计里按钮是黑的，不是彩色的 */
  --accent:#141414; --accent2:#000000; --accentsoft:#E4E4DF;

  /* 语义色：整体黑白，只有"章"用印泥红。
     成功态用墨黑（靠图形而非颜色表达），警示/错误保留可辨识的暖色 */
  --green:#141414; --greenbg:#E4E4DF; --greenline:#C9C9C2;
  --red:#C2402A;   --redbg:#F6E7E2;   --redline:#E3BCB2;
  --amber:#8A6414; --amberbg:#F1E9D6; --amberline:#DCCBA0;
  --seal:#C2402A;  /* 印泥红：只给审批章 / 退款章，别拿它当强调色 */

  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(15,15,15,.05),0 10px 28px rgba(15,15,15,.08);

  /* 字体：系统栈，零网络请求。
     中文标题用宋体（中文正式文档的惯例），界面用系统黑体，数据用等宽 */
  --font-ui:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* 标题：拉丁走 Times New Roman，中文自动落到宋体 —— 两者本来就是一路 */
  --font-display:"Times New Roman",Times,"Noto Serif SC","Songti SC","STSong",SimSun,serif;
  --font-read:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;color:var(--text);
  /* 点阵纸底：单据美学的底子。纯 CSS，零请求 */
  background:var(--bg) radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:22px 22px;
  font-family:var(--font-ui);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:0;text-wrap:balance;line-height:1.25}
h1{font-size:34px;margin:0 0 10px}
/* 表单里的数字/卡密/点数一律等宽，跟设计稿一致 */
input[type=number],.mono,[data-mono]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:900px;margin:0 auto;padding:24px 20px 100px}
.muted{color:var(--muted)} .small{font-size:12px}

/* 顶部导航 */
.nav{display:flex;align-items:center;gap:12px;max-width:900px;margin:0 auto;padding:18px 20px;border-bottom:1px solid var(--line)}
/* 品牌标：图片位。换 LOGO 只覆盖 web/assets/brand/logo.png，不用动任何页面。
   图没到位时是一块底色，不会出现破图。 */
.nav .logo{width:32px;height:32px;border-radius:8px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.nav .logo img{width:100%;height:100%;object-fit:cover;display:block}
.nav .brand{font-family:var(--font-display);font-weight:600;font-size:16px}
.nav .grow{flex:1}
.nav a.navlink{color:var(--muted);font-size:13px;padding:6px 10px;border-radius:8px}
.nav a.navlink:hover{background:var(--soft);color:var(--text)}
.nav .keybtn{background:transparent;border:1px solid var(--line);border-radius:9px;padding:7px 13px;font-size:13px;cursor:pointer;color:var(--text);font-family:var(--font-ui)}
.nav .keybtn:hover{background:var(--soft)}
.nav .keybtn.warn{border-color:var(--amberline);background:var(--amberbg);color:var(--amber)}

button{background:var(--accent);border:1px solid var(--accent);
  /* 胶囊：v2 的招牌形状。数字用等宽，让"多少点"一眼可辨 */
  border-radius:999px;color:#fff;font-weight:600;font-family:var(--font-ui);
  padding:11px 22px;font-size:14px;cursor:pointer;line-height:1;
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
button:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
button:active{transform:scale(.97)}
button[disabled]{opacity:.45;cursor:not-allowed}
button[disabled]:hover{transform:none;box-shadow:none}
button:hover{background:var(--accent2);border-color:var(--accent2)} button:active{transform:scale(.99)} button:disabled{opacity:.5;cursor:default}
input,select,textarea{background:var(--card);border:1px solid var(--line);border-radius:9px;color:var(--text);
  padding:9px 11px;font-size:14px;outline:none;font-family:var(--font-ui);transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentsoft)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* key 设置弹窗 */
#keys-modal{display:none;position:fixed;inset:0;z-index:50}
#keys-modal .km-bg{position:absolute;inset:0;background:rgba(27,30,24,.42)}
#keys-modal .km-card{position:relative;max-width:440px;margin:8vh auto;background:var(--card);border-radius:var(--radius-lg);
  padding:24px;box-shadow:0 24px 70px rgba(27,30,24,.28);border:1px solid var(--line);
  max-height:84vh;overflow-y:auto}
#keys-modal .km-h{font-family:var(--font-display);font-size:19px;font-weight:600;margin-bottom:6px}
#keys-modal .km-sub{color:var(--muted);font-size:12px;margin:0 0 16px;line-height:1.6}
#keys-modal label{display:block;font-size:12px;font-weight:500;margin:12px 0 5px}
#keys-modal label a{font-weight:400;font-size:11px}
#keys-modal input{width:100%}
#keys-modal .km-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
#keys-modal .km-ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ── 卡密弹窗 / 轻提示（2026-08 卡密化）── */
#card-modal{display:none;position:fixed;inset:0;z-index:50}
#card-modal .km-bg{position:absolute;inset:0;background:rgba(27,30,24,.42)}
#card-modal .km-card{position:relative;max-width:440px;margin:10vh auto;background:var(--card);
  border-radius:var(--radius-lg);border:1px solid var(--line);padding:22px 24px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
#card-modal .km-h{font-family:var(--font-display);font-size:19px;font-weight:600;margin-bottom:6px}
#card-modal .km-sub{color:var(--muted);font-size:12px;margin:0 0 16px;line-height:1.6}
#card-modal label{display:block;font-size:12px;font-weight:500;margin:12px 0 5px}
#card-modal input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
#card-modal .km-msg{min-height:18px;font-size:12px;color:var(--red);margin-top:8px}
#card-modal .km-actions{display:flex;align-items:center;gap:8px;margin-top:18px}
#card-modal .km-buy{font-size:12px}
#card-modal .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
#pz-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;
  pointer-events:none;transition:.25s;background:var(--text);color:#fff;padding:10px 18px;border-radius:8px;
  font-size:13px;z-index:60;max-width:80vw}
#pz-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#pz-toast.err{background:var(--red)}
.pz-balance{font-variant-numeric:tabular-nums}

/* 工具页的「本次消耗 N 点」徽标。由 keys.js 的 paintCosts() 填充；
   取不到价目时保持空白（display:none），不显示错的数字。 */
[data-cost]{display:none;font-size:12.5px;color:var(--muted);margin-left:10px;
  padding:3px 10px;border-radius:999px;background:var(--accentsoft);
  color:var(--accent);white-space:nowrap;vertical-align:middle}
[data-cost].ready{display:inline-block}