/* ─────────────────────────────────────────────────────────────
   base.css —— 四个页面共用的底座
   页面之间只有数值上的差别(底色、玻璃浓度、字号、内距),
   所以这里把差别都收成 CSS 变量,页面自己的 css 只覆盖变量。
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

  --bg: #061520;
  --body-pad: 30px 16px 60px;
  --wrap-w: 880px;

  /* 液态玻璃卡片 */
  --glass-bg: rgba(8,34,52,.34);
  --glass-border: rgba(190,225,245,.22);
  --glass-blur: 28px;
  --glass-sat: 155%;
  --glass-shadow: 0 18px 50px rgba(0,0,0,.34);
  --glass-inset: rgba(220,240,255,.28);
  --glass-radius: 20px;
  --glass-pad: 20px;

  /* 浅底控件上的文字色(按钮、下载键) */
  --ink-on-light: #08202e;
  /* 导出预览弹层的底色 */
  --ov-bg: #0a1c28;

  --h1-size: 24px;
  --h1-mt: 7px;
  --btn-size: 13.5px;
  --btn-pad: 11px 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: #fff;
  min-height: 100vh;
  padding: var(--body-pad);
  background: var(--bg);
}

/* 整幅海面照片,由 js/sea.js 画进来 */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
@supports (height: 100dvh) { #bg { height: 100dvh; } }

.wrap { max-width: var(--wrap-w); margin: 0 auto; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset);
  padding: var(--glass-pad);
}

.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; color: rgba(255,255,255,.55); }
h1 { font-size: var(--h1-size); font-weight: 650; letter-spacing: -.01em; margin-top: var(--h1-mt); }
h2 { font-size: 15px; font-weight: 650; }
.lede, .sub { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.75; margin-top: 8px; }

button {
  font-family: inherit; font-size: var(--btn-size); font-weight: 600; padding: var(--btn-pad);
  border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  background: rgba(255,255,255,.92); color: var(--ink-on-light);
}
button.ghost {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
button:disabled { opacity: .4; cursor: not-allowed; }
.btnrow { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

footer, .foot {
  font-size: 11.5px; color: rgba(255,255,255,.42); line-height: 1.8;
  margin-top: 18px; text-align: center;
}