/* 对外主页（home.html）：简洁版，居中一句标题、一个输入框；颜色和应用、法律页（legal.css）一致，跟随深浅色。 */
/* 标题用的英文衬线字体（home.html 里预加载）；中文衬线在 fonts.css，后台加载。 */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/SourceSerif4-var.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #111111;
  --panel: #1b1b1c;
  --line: #2f2f2d;
  --text: #efeee9;
  --muted: #9d9d96;
  --accent: #4f7dff;
  --accent-text: #78a4ff;
  --button-bg: #efeee9;
  --button-text: #111111;
  --serif: "Source Serif 4", "Noto Serif SC", Georgia, serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f6f6f4;
  --line: #e4e4e0;
  --text: #1b1b1a;
  --muted: #6b6b66;
  --accent: #2563eb;
  --accent-text: #2563eb;
  --button-bg: #1b1b1a;
  --button-text: #ffffff;
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 顶栏 ---- */

/* 顶部让出状态栏（iOS 原生壳里网页铺满全屏；浏览器里安全区是 0，不变）。 */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1120px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 24px 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 22px/1 var(--serif); }
.brand img { border-radius: 8px; }
.topnav { display: flex; align-items: center; gap: 6px; }
.nav-link { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 15px; text-decoration: none; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); }
.lang { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 36px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.lang[hidden] { display: none; }
.lang:hover { color: var(--text); }
.lang svg { width: 18px; height: 18px; flex-shrink: 0; }
.lang select { field-sizing: content; max-width: 160px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; cursor: pointer; appearance: none; -webkit-appearance: none; outline: 0; }
.lang select option { background: var(--bg); color: var(--text); }
.button { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--button-bg); color: var(--button-text); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.button:hover { opacity: .88; }
.button.is-disabled { background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: default; }
.button.is-disabled:hover { opacity: 1; }

/* ---- 三个视图：首页 / 功能 / 价格（home.js 一次只显示一个；没有 JS 时全部显示） ---- */

main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* 只显示 <html data-page> 对应的那一部分（home.html 头部的内联脚本在第一帧前设好，home.js 切换时更新）。 */
html.views .view { display: none; }
html.views[data-page="home"] #home { display: flex; }
html.views[data-page="features"] #features, html.views[data-page="pricing"] #pricing { display: block; }

.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0 12vh; text-align: center; }
h1 { margin: 0; font: 500 clamp(44px, 6vw, 72px)/1.08 var(--serif); letter-spacing: -.01em; }
h1 span { color: var(--accent-text); }
.lead { max-width: 560px; margin: 18px 0 32px; color: var(--muted); font-size: 18px; }

.ask { position: relative; width: 100%; max-width: 680px; padding: 14px 60px 14px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); text-align: start; }
.ask:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.ask textarea { display: block; width: 100%; min-height: 52px; max-height: 200px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; line-height: 1.55; resize: none; }
.ask textarea::placeholder { color: var(--muted); }
.ask-send { position: absolute; inset-inline-end: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
.ask-send:disabled { background: var(--line); color: var(--muted); cursor: default; }
.ask-send svg { width: 20px; height: 20px; stroke-width: 2.2; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 680px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.chip:hover { color: var(--text); background: var(--panel); }
.chip svg { width: 16px; height: 16px; }

.section { padding: 56px 0 72px; }
.section h2 { margin: 0 0 10px; font: 500 clamp(32px, 4vw, 44px)/1.15 var(--serif); text-align: center; }
.section-lead { margin: 0 0 8px; color: var(--muted); text-align: center; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.card { padding: 24px; border: 1px solid var(--line); border-radius: 18px; }
.card > svg { width: 26px; height: 26px; color: var(--accent-text); }
.card h3 { margin: 14px 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.plan { display: flex; flex-direction: column; }
.plan h3 { margin-top: 0; }
.price { margin: 4px 0 14px !important; color: var(--muted); }
.price strong { color: var(--text); font-size: 32px; }
.plan ul { flex: 1; margin: 0 0 22px; padding-inline-start: 18px; color: var(--muted); font-size: 15px; }
.plan li { margin: 4px 0; }
.fine-print { max-width: 640px; margin: 22px auto 0; color: var(--muted); font-size: 13px; text-align: center; }

/* ---- 页脚 ---- */

.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 20px 24px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer a { text-decoration: none; }
.footer .mobile-only { display: none; }
.footer a:hover { color: var(--text); }
.footer p { margin: 0; }

/* 没有 JS（home.js 没加上 .views）时三部分从上到下全部显示。 */
html:not(.views) .home { flex: none; padding-bottom: 48px; }

/* ---- 手机 ---- */

@media (max-width: 760px) {
  .topbar { padding: max(14px, env(safe-area-inset-top)) 16px 14px; gap: 8px; }
  .brand { font-size: 20px; }
  .topnav { gap: 2px; }
  /* 顶栏只留 logo、语言、开始使用；功能、价格挪到页脚。 */
  .topnav .nav-link { display: none; }
  /* 语言菜单只显示地球图标，点开是系统自带的语言列表。 */
  .lang { padding: 0 8px; }
  .lang select { position: absolute; inset: 0; width: 100%; max-width: none; opacity: 0; }
  .button { height: 36px; padding: 0 14px; font-size: 14px; }
  main { padding: 0 16px; }
  .home { justify-content: flex-start; padding: 12vh 0 48px; }
  .lead { font-size: 16px; margin-bottom: 26px; }
  .cards { grid-template-columns: 1fr; }
  .footer { padding: 18px 16px 24px; }
  .footer .mobile-only { display: inline; }
}