/* ============================================================
 * 台风模拟器 · 独立引导页样式
 * 与主界面(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; }

/* ---------- 使用警示条(红色, 全站统一; 直通《免责说明》《项目使用守则》全文) ---------- */
.lawbar { max-width: 1180px; margin: 16px auto 0; padding: 13px 18px 14px;
  background: linear-gradient(90deg, rgba(180,35,24,.34), rgba(180,35,24,.14));
  border: 1px solid rgba(229,72,77,.55); border-left: 6px solid #e5484d; border-radius: 12px; }
.lawbar .hd { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700;
  color: #ffd0d2; letter-spacing: .3px; }
.lawbar .hd .ico { font-size: 16px; }
.lawbar p { margin: 8px 0 0; font-size: 13.5px; color: #f2c9ca; line-height: 1.75; }
.lawbar b { color: #ff9a9f; }
.lawbar a { color: #ffc9a3; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lawbar a:hover { color: #fff; }
.lawbar ul { margin: 8px 0 0; padding-left: 19px; font-size: 12.8px; color: #e9bfc1; }
.lawbar li { margin: 3px 0; }
.lawbar .go { margin-top: 11px; display: flex; gap: 10px; flex-wrap: wrap; }
.lawbar .go a { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(229,72,77,.6); background: rgba(229,72,77,.16);
  font-size: 12.5px; font-weight: 600; text-decoration: none; }
.lawbar .go a:hover { background: #e5484d; color: #fff; }

/* ---------- 表格 ---------- */
.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; }
.gnote { margin: 6px 0 12px; color: #5b6b7c; font-size: 13px; }
.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; }
}

@media (max-width: 620px) {
  /* ---------- 顶栏: 标题与两个按钮挤不下, 折成两行 ---------- */
  .gtop { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .gtop h1 { font-size: 14.5px; letter-spacing: .5px; }
  .gtop .sp { display: none; }                 /* 撑开用的空位没了, 按钮另起一行靠右 */
  .gtop .back { flex: 1; justify-content: center; min-height: 40px; padding: 8px 12px; }
  .hero { padding: 26px 16px 18px; }
  .hero h2 { font-size: 22px; }
  .hero p { font-size: 13.4px; }
  .wrap { padding: 4px 16px 60px; gap: 18px; }
  .gfoot .in { padding: 18px 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

  /* 目录条: 横向滚动比换行更省高度, 且各项目仍是一整行可点 */
  .snav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .snav::-webkit-scrollbar { display: none; }
  .snav a { flex: none; min-height: 40px; display: flex; align-items: center; padding: 8px 14px; }

  /* ---------- 正文 ---------- */
  .content section { padding: 26px 0 6px; }
  .content h3 { font-size: 17.5px; }
  p, ul, ol { font-size: 13.2px; }
  ul, ol { padding-left: 18px; }
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px 15px; }

  /* 表格: 首列在桌面写死 108/168px, 手机上会吃掉半屏 —— 收窄并允许折行 */
  .gtable, .ftable { font-size: 12.2px; }
  .gtable td, .ftable td { padding: 7px 6px; }
  .gtable td:first-child { width: 64px; }
  .ftable td:first-child { width: 96px; font-weight: 600; }
  .ftable code { font-size: 11.5px; }
  .cat-row { gap: 5px; }
  .tip { font-size: 12.2px; padding: 9px 12px; }
  .lawbar { margin: 12px 14px 0; padding: 11px 13px 12px; }
  .lawbar .hd { font-size: 13.5px; }
  .lawbar p { font-size: 12.8px; }
  .lawbar ul { font-size: 12.2px; padding-left: 17px; }
  .lawbar .go a { min-height: 38px; padding: 8px 13px; }
  .steps li { padding-left: 38px; }
}

/* 横屏刘海: viewport-fit=cover 下左右会被挖孔区压住, 用安全区补回来 */
@supports (padding: env(safe-area-inset-left)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}