/* VOLTFALL 官网 · 法律与支持页
   配色沿用运维后台深色主题（server/ops/web/static/css/tokens.css）：
   冷黑底、金色只做强调、电网青做状态与链接。纯静态，无外部资源。

   语言切换不用脚本：每页三段 <section class="lang" id="zh|en|ja">，
   DOM 顺序 en → ja → zh；默认只显示 zh，地址带 #en / #ja 时显示对应段并隐藏 zh。 */

@font-face { font-family: "Rajdhani"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Rajdhani-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Rajdhani-Bold.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg-0: #0a0d12;
  --bg-1: #11161e;
  --bg-2: #18202b;
  --bg-3: #212b39;
  --bg-sunk: #070a0e;
  --rule: rgba(160, 180, 210, 0.10);
  --ink-1: #eef2f7;
  --ink-2: #bcc6d4;
  --ink-3: #8e9bae;
  --gold: #f0bf4c;
  --gold-ink: #1b1405;
  --gold-soft: rgba(240, 191, 76, 0.13);
  --cyan: #3ee6d2;
  --cyan-soft: rgba(62, 230, 210, 0.12);
  --warn: #ff9f45;
  --warn-soft: rgba(255, 159, 69, 0.12);
  --grid-line: rgba(62, 230, 210, 0.035);
  --cut-s: 5px;
  --cut-m: 9px;
  --cut-l: 14px;
  --font-ui: "PingFang SC", "Hiragino Sans GB", "Hiragino Sans", "Noto Sans SC", "Noto Sans JP", "Microsoft YaHei", "Yu Gothic UI", system-ui, sans-serif;
  --font-num: "Rajdhani", "PingFang SC", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(1200px 520px at 85% -10%, rgba(62, 230, 210, 0.07), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(240, 191, 76, 0.05), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed, fixed, scroll, scroll;
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
:lang(en) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-wrap: break-word; }
:lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; }

/* ---------- 语言段切换 ---------- */
.lang { display: none; }
.lang:target { display: block; }
#zh { display: block; }
#en:target ~ #zh, #ja:target ~ #zh { display: none; }

/* ---------- 版心 ---------- */
.wrap { max-width: 920px; margin: 0 auto; padding: 0 16px; }

/* ---------- 顶栏 ---------- */
.top {
  position: relative;
  border-bottom: 1px solid var(--rule);
  background: rgba(10, 13, 18, 0.82);
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62, 230, 210, 0.55) 30%, rgba(240, 191, 76, 0.55) 70%, transparent);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; padding: 8px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-1); text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: var(--gold); color: var(--gold-ink);
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}
.brand-mark svg { width: 18px; height: 18px; display: block; }
.brand-name { font-family: var(--font-num); font-weight: 700; font-size: 22px; letter-spacing: 0.14em; line-height: 1; }
.brand-sub { font-size: 13px; color: var(--ink-3); letter-spacing: 0.2em; margin-left: 2px; }

.langs { display: flex; gap: 4px; font-size: 13px; }
.langs a {
  color: var(--ink-2); text-decoration: none; padding: 6px 10px; min-height: 32px; display: inline-flex; align-items: center;
  background: var(--bg-2);
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}
.langs a:hover { color: var(--ink-1); background: var(--bg-3); }
.langs a[aria-current="true"] { color: var(--cyan); background: var(--cyan-soft); }

.nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 7px 12px; min-height: 36px;
  display: inline-flex; align-items: center; background: var(--bg-1);
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}
.nav a:hover { color: var(--ink-1); background: var(--bg-2); }
.nav a[aria-current="page"] { color: var(--gold); background: var(--gold-soft); }

/* ---------- 页头 ---------- */
.hero { padding: 36px 0 12px; }
.eyebrow {
  font-family: var(--font-num); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; color: var(--cyan);
  text-transform: uppercase; margin: 0 0 6px;
}
h1 { font-size: 30px; line-height: 1.3; margin: 0 0 12px; letter-spacing: 0.02em; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--ink-3); }
.tag {
  display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; letter-spacing: 0.06em;
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}
.tag-beta { color: var(--warn); background: var(--warn-soft); }
.tag-date { color: var(--ink-2); background: var(--bg-2); }
.lead { color: var(--ink-2); font-size: 16px; margin: 8px 0 0; max-width: 72ch; }
.note-tr {
  margin: 14px 0 0; padding: 10px 14px; font-size: 14px; color: var(--ink-2); background: var(--bg-1);
  border-left: 3px solid var(--cyan);
}

/* ---------- 正文 ---------- */
main { padding-bottom: 24px; }
.card {
  background: var(--bg-1); margin: 16px 0; padding: 20px 20px 18px;
  clip-path: polygon(var(--cut-l) 0, 100% 0, 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, 0 100%, 0 var(--cut-l));
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
h2 { font-size: 20px; line-height: 1.4; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
h2 .no { font-family: var(--font-num); font-weight: 700; color: var(--gold); font-size: 18px; letter-spacing: 0.08em; flex: none; }
h3 { font-size: 16px; margin: 20px 0 8px; color: var(--ink-1); }
p { margin: 0 0 10px; color: var(--ink-2); }
li { color: var(--ink-2); margin: 4px 0; }
ul, ol { padding-left: 1.4em; margin: 0 0 10px; }
strong { color: var(--ink-1); font-weight: 600; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #7ff2e4; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; color: var(--ink-1); background: var(--bg-2); padding: 1px 5px; }
.muted { color: var(--ink-3); font-size: 14px; }
.callout {
  background: var(--bg-2); padding: 12px 14px; margin: 12px 0; color: var(--ink-2);
  border-left: 3px solid var(--gold);
}
.callout p:last-child { margin-bottom: 0; }

/* 表格：容器内横向滚动，页面本身不横向滚动 */
.table-wrap { overflow-x: auto; margin: 10px 0 12px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
th { background: var(--bg-2); color: var(--ink-1); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.015); }
table.narrow-ok td { min-width: 7em; }

/* 首页 */
.home-hero { padding: 48px 0 8px; }
.home-hero h1 { font-size: 38px; }
.home-hero .tagline { font-family: var(--font-num); font-weight: 700; color: var(--gold); letter-spacing: 0.24em; font-size: 15px; margin: 0 0 10px; }
.pitch { font-size: 18px; color: var(--ink-1); max-width: 60ch; margin: 0 0 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 16px 0; }
.tile {
  display: block; text-decoration: none; background: var(--bg-1); padding: 16px 18px; color: var(--ink-1);
  clip-path: polygon(var(--cut-m) 0, 100% 0, 100% calc(100% - var(--cut-m)), calc(100% - var(--cut-m)) 100%, 0 100%, 0 var(--cut-m));
  transition: background 120ms;
}
.tile:hover { background: var(--bg-2); color: var(--ink-1); }
.tile .k { font-family: var(--font-num); font-weight: 700; color: var(--cyan); letter-spacing: 0.2em; font-size: 12px; }
.tile .t { display: block; font-size: 17px; font-weight: 600; margin: 2px 0 4px; }
.tile .d { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.55; }
.grid-art { display: block; width: 100%; height: auto; margin: 8px 0 0; }

.mail {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px;
  background: var(--gold); color: var(--gold-ink); font-weight: 700; text-decoration: none;
  clip-path: polygon(var(--cut-m) 0, 100% 0, 100% calc(100% - var(--cut-m)), calc(100% - var(--cut-m)) 100%, 0 100%, 0 var(--cut-m));
}
.mail:hover { color: var(--gold-ink); filter: brightness(1.08); }

/* FAQ */
details { background: var(--bg-1); margin: 10px 0; clip-path: polygon(var(--cut-m) 0, 100% 0, 100% calc(100% - var(--cut-m)), calc(100% - var(--cut-m)) 100%, 0 100%, 0 var(--cut-m)); }
summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--ink-1); list-style: none; display: flex; gap: 10px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-family: var(--font-num); font-weight: 700; color: var(--gold); width: 1em; flex: none; }
details[open] summary::before { content: "−"; }
details > div { padding: 0 18px 14px 46px; }

/* 许可全文 */
pre.license {
  background: var(--bg-sunk); color: var(--ink-2); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0;
  max-height: 520px; overflow-y: auto;
}

/* 页脚 */
.foot { border-top: 1px solid var(--rule); margin-top: 24px; padding: 20px 0 36px; font-size: 13px; color: var(--ink-3); }
.foot p { color: var(--ink-3); margin: 0 0 6px; }
.foot a { color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; }

/* 404 */
.lost { padding: 72px 0 32px; }
.lost .code { font-family: var(--font-num); font-weight: 700; font-size: 88px; line-height: 1; color: var(--gold); letter-spacing: 0.08em; }

@media (max-width: 600px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }
  .home-hero { padding-top: 32px; }
  .home-hero h1 { font-size: 30px; }
  .pitch { font-size: 16px; }
  .card { padding: 16px 14px 14px; }
  h2 { font-size: 18px; }
  details > div { padding: 0 14px 12px 14px; }
  summary { padding: 12px 14px; }
  .brand-sub { display: none; }
  .lost .code { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 窄屏：文字为主的多列表格折叠成「标签：值」卡片 */
@media (max-width: 600px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.stack td { border: 0; padding: 3px 0; text-align: left; white-space: normal; display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
  table.stack td::before { content: attr(data-label); color: var(--ink-3); font-size: 13px; }
  table.stack td:first-child { color: var(--ink-1); font-weight: 600; }
  table.stack td.num { text-align: left; }
}