/* ============================================================
 * 台风模拟器 · 独立引导页样式
 * 与主界面(css/style.css)同一套配色, 但为整页滚动式布局
 * ============================================================ */
:root {
  --bg: #0b1d33;
  --panel-border: rgba(120, 190, 255, .25);
  --text: #dce9f5;
  --muted: #8aa4bd;
  --accent: #3fa9f5;
  --accent2: #ffc83d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); line-height: 1.7;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    radial-gradient(1200px 620px at 18% -12%, #163f65 0%, rgba(11,29,51,0) 60%),
    radial-gradient(900px 500px at 105% 0%, #1b2f52 0%, rgba(11,29,51,0) 55%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--accent); }

/* ---------- 顶栏 ---------- */
.gtop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 12px 28px; background: rgba(8,20,36,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(120,190,255,.18); }
.gtop .logo { font-size: 22px; }
.gtop h1 { font-size: 16px; margin: 0; letter-spacing: 1px; }
.gtop h1 span { display: block; font-weight: 400; font-size: 11px; color: var(--accent); }
/* 第三行: 企划归属(比英文名再小一档、更淡) */
.gtop h1 span.org { font-size: 9.5px; letter-spacing: .3px; color: #9fc4e6; }
.gtop h1 .ver { font-style: normal; font-weight: 500; font-size: 10px; letter-spacing: .5px;
  color: #9fc4e6; border: 1px solid var(--panel-border, rgba(255,255,255,.14));
  border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.gtop .sp { flex: 1; }
.gtop .back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, #1c7ed6, #3fa9f5); padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 18px rgba(28,126,214,.35); white-space: nowrap; }
.gtop .back:hover { filter: brightness(1.1); }
/* 顶栏"返回封面": 次要按钮, 与主按钮"进入模拟器"成对 */
.gtop .back.ghost { background: rgba(255,255,255,.07); color: #d7e6f6;
  border: 1px solid rgba(255,255,255,.2); box-shadow: none; }
.gtop .back.ghost:hover { background: rgba(255,255,255,.14); filter: none; }

/* ---------- 英雄区 ---------- */
.hero { max-width: 1180px; margin: 0 auto; padding: 54px 28px 26px; }
.hero h2 { font-size: 34px; margin: 0 0 12px; letter-spacing: 1px; line-height: 1.25; }
.hero h2 .grad { background: linear-gradient(90deg, #3fa9f5, #7ee0c0, #ffc83d);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: #a9c1d8; max-width: 760px; font-size: 14px; margin: 0 0 18px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { font-size: 11.5px; color: #cfe0ef; background: rgba(63,169,245,.12);
  border: 1px solid rgba(120,190,255,.28); padding: 4px 12px; border-radius: 999px; }

/* ---------- 主体: 左侧目录 + 右侧内容 ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 6px 28px 90px;
  display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 30px; }
.snav { position: sticky; top: 78px; align-self: start; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 8px; border: 1px solid rgba(120,190,255,.16); border-radius: 12px;
  background: rgba(9,20,36,.6); }
.snav .st { font-size: 12px; font-weight: 700; color: #fff; padding: 4px 10px 10px; }
.snav a { text-decoration: none; color: var(--muted); font-size: 12.5px; padding: 8px 12px; border-radius: 8px; }
.snav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.snav a.on { background: rgba(63,169,245,.16); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }

.content section { padding: 34px 0 8px; scroll-margin-top: 78px;
  border-top: 1px dashed rgba(255,255,255,.1); }
.content section:first-child { border-top: none; padding-top: 8px; }
.content h3 { font-size: 20px; margin: 0 0 6px; }
.content .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
h4.sec { font-size: 13.5px; color: var(--accent); margin: 22px 0 8px; }
p { margin: 8px 0; font-size: 13.4px; color: #cfdeee; }
ul, ol { margin: 8px 0; padding-left: 20px; font-size: 13.4px; color: #cfdeee; }
li { margin: 4px 0; }
b { color: #fff; }

/* ---------- 卡片 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 14px; margin: 18px 0 4px; }
.card { background: rgba(13,26,45,.7); border: 1px solid rgba(120,190,255,.18);
  border-radius: 14px; padding: 16px 18px; transition: border-color .18s, transform .18s; }
.card:hover { border-color: rgba(120,190,255,.42); transform: translateY(-2px); }
.card .ic { font-size: 22px; }
.card h4 { margin: 8px 0 6px; font-size: 13.5px; color: #fff; }
.card p { margin: 0; font-size: 12.5px; color: #a9c1d8; }

/* ---------- 提示框 ---------- */
.tip { margin-top: 16px; padding: 10px 14px; border-left: 3px solid var(--accent2);
  background: rgba(255,200,61,.08); border-radius: 0 8px 8px 0; font-size: 12.6px;
  color: #e7d9b0; }
.tip.warn { border-left-color: #e5484d; background: rgba(229,72,77,.1); color: #f0c3c5; }

/* ---------- 表格 ---------- */
.gtable { width: 100%; border-collapse: collapse; font-size: 12.8px; margin: 10px 0; }
.gtable td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.07);
  vertical-align: middle; color: #c9d9ea; }
.gtable td:first-child { width: 108px; text-align: center; color: #fff; }
.gtable tr:last-child td { border-bottom: none; }

/* ---------- 符号 / 图例 ---------- */
.gic { width: 34px; height: 34px; display: block; margin: 0 auto; }
.gico { display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; }
.gico.dist { background: #fff; border: 1.5px solid #b9cbd9; box-shadow: inset 0 0 0 3px rgba(0,0,0,.22); }
.gico.td { background: #5aa7e8; border: 1.5px solid #3f86bd; box-shadow: inset 0 0 0 3px rgba(255,255,255,.85); }
.gico.rem { background: rgba(255,255,255,.22); border: 1.6px dashed #fff; }
.gtxt { font-weight: 700; font-size: 11.5px; color: #e5484d; }
.linec { display: inline-block; width: 48px; height: 0; border-top: 2px solid #fff; vertical-align: middle; }
.gdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.gsel { display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid var(--accent2); box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
.cat-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cat-row .c { padding: 3px 11px; border-radius: 999px; color: #fff; font-size: 11.5px;
  font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
.cat-note { color: var(--muted); font-size: 12px; }

/* ---------- 功能一览表(首列较宽, 左对齐) ---------- */
.ftable { width: 100%; border-collapse: collapse; font-size: 12.8px; margin: 10px 0; }
.ftable td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.07);
  vertical-align: top; color: #c9d9ea; }
.ftable td:first-child { width: 168px; color: #fff; font-weight: 600; }
.ftable tr:last-child td { border-bottom: none; }
.ftable code { font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }

/* ---------- 快速上手步骤 ---------- */
.steps { counter-reset: st; list-style: none; padding-left: 0; margin: 12px 0; }
.steps li { position: relative; padding: 9px 0 9px 42px; border-bottom: 1px solid rgba(255,255,255,.06); }
.steps li:last-child { border-bottom: none; }
.steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 8px;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1c7ed6, #3fa9f5); color: #fff; font-size: 12px; font-weight: 700; }

/* ---------- 页脚 ---------- */
.gfoot { border-top: 1px solid rgba(120,190,255,.16); background: rgba(6,16,30,.6); }
.gfoot .in { max-width: 1180px; margin: 0 auto; padding: 22px 28px; display: flex;
  flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 12px; }

@media (max-width: 820px) {
  .wrap { grid-template-columns: 1fr; }
  .snav { position: static; flex-direction: row; flex-wrap: wrap; }
  .snav .st { display: none; }
  .hero h2 { font-size: 26px; }
}