/* 起飞的机 · 站点公共样式（三页共用：index / about / terms） */
:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#1c2733; --sub:#5b6b7a;
  --accent:#2563eb; --ok:#059669; --line:#e3e9f0; --warn-bg:#fff7e6; --warn-ink:#8a5a00;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
     background:var(--bg); color:var(--ink); line-height:1.75; padding:16px}
.wrap{max-width:720px; margin:0 auto}

/* ---- 顶部导航 ---- */
.topnav{display:flex; align-items:center; justify-content:space-between;
        background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:10px 14px; margin:0 0 14px; position:sticky; top:10px; z-index:50}
.topnav .nb{display:flex; align-items:center; gap:8px; text-decoration:none}
.topnav .nb svg{width:24px; height:24px; flex:none}
.topnav .nb b{font-size:.95rem; color:var(--ink)}
.topnav .nl{display:flex; gap:4px}
.topnav .nl a{font-size:.85rem; color:var(--sub); text-decoration:none;
              padding:4px 10px; border-radius:8px}
.topnav .nl a:hover{background:var(--bg); color:var(--accent)}
.topnav .nl a.on{color:var(--accent); font-weight:700; background:#e6effe}

/* ---- 页头 ---- */
header{text-align:center; padding:26px 12px 18px}
header .eyebrow{font-size:.7rem; font-weight:700; letter-spacing:1.6px; color:var(--accent); margin-bottom:9px}
.brand{display:flex; align-items:center; justify-content:center; gap:10px}
.brand .logo{width:44px; height:44px; flex:none; filter:drop-shadow(0 4px 10px rgba(37,99,235,.3))}
.brand h1{font-size:1.7rem; font-weight:700; color:#101828; line-height:1.2}
header .claim{display:inline-flex; align-items:center; gap:8px; margin:16px auto 0;
  font-size:1rem; font-weight:700; color:#0b2f6b; letter-spacing:.3px}
header .claim svg{width:15px; height:15px; flex:none; color:var(--accent)}
.perks{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.perks span{display:inline-flex; align-items:center; gap:6px; background:#f3faf6;
  border:1px solid #d6e2d9; color:#17795a; border-radius:8px;
  padding:5px 12px; font-size:.79rem; font-weight:600; white-space:nowrap}
.perks svg{width:11px; height:11px; flex:none}

/* ---- 卡片 ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
      padding:18px 18px 14px; margin:14px 0}
.card h2{font-size:1.05rem; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.card h2 > svg{width:18px; height:18px; flex:none; color:var(--accent)}
.card p{font-size:.92rem; color:var(--sub)}
.card p b{color:var(--ink)}
.card p + p{margin-top:8px}

/* 服务特点三格 / 六宫格 */
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.feat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 10px; text-align:center;
      box-shadow:0 2px 10px rgba(16,42,74,.05)}
.feat .fi{width:26px; height:26px; margin:0 auto 6px; color:var(--accent)}
.feat .fi svg{width:100%; height:100%; display:block}
.feat .ft{font-size:.86rem; font-weight:700; color:var(--ink)}
.feat .fd{font-size:.75rem; color:var(--sub); margin-top:3px; line-height:1.5}

/* 承诺条目 */
.promise{list-style:none}
.promise li{display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line);
            font-size:.92rem; color:var(--sub); align-items:flex-start}
.promise li:last-child{border-bottom:none}
.promise .pi{width:18px; height:18px; flex:none; color:var(--ok); margin-top:3px}
.promise .pi svg{width:100%; height:100%; display:block}
.promise b{color:var(--ink)}

/* 步骤 */
ol.steps{padding-left:0; list-style:none; counter-reset:s}
ol.steps li{counter-increment:s; position:relative; padding:0 0 13px 38px; font-size:.92rem; color:var(--sub)}
ol.steps li b{color:var(--ink)}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:2px;
  width:24px; height:24px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center}

/* 套餐 */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:6px 0 2px}
.plan{position:relative; border:1px solid var(--line); border-radius:14px;
      padding:16px 8px 12px; text-align:center; background:#fff;
      display:flex; flex-direction:column}
.plan.hot{border-color:#bcd4fb; background:#f7faff; box-shadow:0 4px 14px rgba(37,99,235,.09)}
.plan .tag{position:absolute; top:-9px; left:50%; transform:translateX(-50%);
           background:var(--accent); color:#fff; font-size:.66rem; font-weight:700;
           padding:1px 9px; border-radius:999px; white-space:nowrap}
.plan .pn{font-size:.92rem; font-weight:700}
.plan .pp{margin:5px 0 1px; color:#e0403f; font-weight:800; font-size:1.55rem; line-height:1.15}
.plan .pp i{font-size:.86rem; font-style:normal; font-weight:700; margin-right:1px}
.plan .pd{font-size:.72rem; color:var(--sub); margin-bottom:11px; line-height:1.6; flex:1 1 auto}
.plan .pbtn{width:100%; border:none; border-radius:9px; padding:8px 0; margin-top:auto;
            font-family:inherit; font-size:.83rem; font-weight:700; cursor:pointer;
            background:#e6effe; color:var(--accent); transition:transform .12s, background .12s}
.plan.hot .pbtn{background:var(--accent); color:#fff}
.plan .pbtn:active{transform:scale(.97)}
.paynote{font-size:.78rem; color:var(--sub); text-align:center; margin-top:12px; line-height:1.7}

/* 条款区 */
.terms{background:var(--warn-bg); border-radius:12px; padding:14px 16px; margin:14px 0}
.terms h3{font-size:.9rem; color:var(--warn-ink); margin-bottom:8px}
.terms ul{list-style:none; font-size:.85rem; color:var(--warn-ink); line-height:1.85}
.terms li{padding-left:15px; position:relative}
.terms li::before{content:"·"; position:absolute; left:4px; font-weight:700}

/* FAQ */
details{background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:12px 16px; margin:10px 0}
details summary{cursor:pointer; font-weight:600; font-size:.92rem}
details p{color:var(--sub); font-size:.88rem; margin-top:8px}

/* 条款页正文 */
.doc h2{font-size:1.08rem; margin:20px 0 8px; color:var(--ink)}
.doc h2:first-child{margin-top:4px}
.doc p, .doc li{font-size:.92rem; color:var(--sub)}
.doc ul{list-style:none; line-height:1.9}
.doc ul li{padding-left:15px; position:relative}
.doc ul li::before{content:"·"; position:absolute; left:4px; font-weight:700; color:var(--accent)}
.doc .meta{font-size:.8rem; color:var(--sub); background:var(--bg);
           border-radius:10px; padding:8px 14px; margin:12px 0}

footer{text-align:center; color:var(--sub); font-size:.82rem; padding:22px 0 90px; line-height:1.9}
footer b{color:var(--ink)}
footer .fl{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:6px}
footer .fl a{color:var(--accent); text-decoration:none; font-size:.78rem;
             border-bottom:1px dashed var(--accent); padding-bottom:1px}

/* 悬浮客服 */
.qqfab{position:fixed; right:14px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:60;
       display:inline-flex; align-items:center; gap:7px; border:none; border-radius:999px;
       padding:11px 17px; cursor:pointer; background:var(--accent); color:#fff;
       font-size:.9rem; font-weight:700; font-family:inherit;
       box-shadow:0 8px 20px rgba(37,99,235,.36); transition:transform .12s}
.qqfab:active{transform:scale(.95)}
.qqfab svg{width:16px; height:16px; flex:none}
.toast{position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom, 0px));
       transform:translate(-50%,10px); opacity:0; z-index:80; pointer-events:none;
       background:rgba(20,32,48,.95); color:#fff; font-size:.85rem;
       padding:10px 16px; border-radius:12px; max-width:86vw; text-align:center;
       transition:opacity .18s, transform .18s}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* 响应式 */
@media (max-width:480px){ body{padding:10px} .card{padding:15px 13px 11px}
  .feats{gap:8px} .feat{padding:11px 6px}
  .topnav{padding:9px 10px} .topnav .nl a{padding:4px 7px; font-size:.8rem} }
@media (max-width:360px){
  .feats{grid-template-columns:1fr; gap:7px}
  .feat{display:flex; align-items:center; gap:9px; text-align:left; padding:9px 11px}
  .feat .fi{width:20px; height:20px; margin:0; flex:none}
  .feat .fd{margin-top:0}
  .plans{gap:7px} .plan{padding:14px 5px 10px} .plan .pp{font-size:1.4rem}
  .plan .pd{font-size:.68rem} .plan .pbtn{font-size:.78rem}
  .topnav .nl a:not(.on){display:none}
}

/* ===== 首页功能样式（服务条 / 购买 / 教程 / 下载 / 客服） ===== */
/* 应用支持条 */
.svcbar{display:flex; align-items:center; gap:14px; background:var(--card);
        border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin:0 0 12px;
        box-shadow:0 2px 12px rgba(16,42,74,.05)}
.svc-tx{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start;
        justify-content:center; line-height:1.5}
.svc-t1{font-size:.9rem; font-weight:700; color:var(--ink); letter-spacing:.2px; white-space:nowrap}
.svc-t2{font-size:.76rem; color:var(--sub); margin-top:4px; line-height:1.55}
.svc-logos{display:flex; align-items:center; gap:7px; flex:none}
.svc-logos svg{width:26px; height:26px; display:block}
/* 套餐补充 */
.plan .sv{color:var(--ok); font-weight:600}
.plan .pn{color:var(--ink)}
/* 兑换入口（折叠） */
.redeem-mini{margin:16px 0 2px; border-top:1px dashed var(--line); padding-top:13px}
.rm-toggle{width:100%; border:none; background:none; color:var(--sub); font-family:inherit;
           font-size:.85rem; cursor:pointer; padding:0; text-align:center}
.rm-toggle:active{color:var(--accent)}
/* 设备宫格 */
.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:6px 0 18px}
.tile{background:var(--card); border:1px solid var(--line); border-radius:16px;
      padding:22px 12px 16px; text-align:center; cursor:pointer;
      transition:transform .12s, box-shadow .12s; text-decoration:none; display:block}
.tile:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(37,99,235,.12)}
.tile .ic{width:30px; height:30px; margin:0 auto; color:var(--accent)}
.tile .ic svg{width:100%; height:100%; display:block}
.tile .dev{font-size:1.05rem; font-weight:700; margin-top:8px; color:var(--ink)}
.tile .app{font-size:.8rem; color:var(--sub); margin-top:2px}
.tile .go{font-size:.8rem; color:var(--accent); margin-top:10px; font-weight:600}
/* 视图切换（hash 路由） */
.view{display:none}
.view.on{display:block}
.back{display:inline-block; margin:14px 0 4px; font-size:.9rem; color:var(--accent);
      text-decoration:none; border-bottom:1px dashed var(--accent)}
.card h2 .os{font-size:.78rem; font-weight:400; color:var(--sub);
             background:var(--bg); border-radius:10px; padding:2px 10px}
.kbd{background:var(--bg); border:1px solid var(--line); border-radius:6px;
     padding:1px 8px; font-family:inherit; font-size:.85em}
.path{color:var(--accent); font-weight:600}
.tip{color:var(--sub); font-size:.85rem; padding-left:38px; margin-top:-6px}
.ok{color:var(--ok); font-weight:600}
.faqtitle{margin:16px 0 4px; font-size:1.05rem; font-weight:700}
/* 下载 */
.dl{font-size:.85rem; color:var(--sub); margin:-2px 0 12px 38px}
.dl a{color:var(--accent); text-decoration:none; border-bottom:1px dashed var(--accent)}
.dlbtn{display:inline-block; background:var(--accent); color:#fff !important;
       border:none; border-radius:10px; padding:9px 18px; font-size:.9rem; font-weight:700;
       cursor:pointer; margin:2px 8px 6px 0; border-bottom:none !important;
       transition:transform .12s; font-family:inherit}
.dlbtn:active{transform:scale(.97)}
.dlbtn:disabled{background:#94a3b8; cursor:wait}
.dlbtn2{background:none !important; color:var(--accent) !important; border:none !important;
        border-bottom:1px dashed currentColor !important; border-radius:0; padding:2px 0;
        font-size:.85rem; font-weight:400; margin:0 0 0 4px}
.dlprog{margin:-4px 0 14px 38px; font-size:.82rem; color:var(--sub)}
.dlbar{height:8px; background:var(--line); border-radius:6px; overflow:hidden; margin-bottom:5px}
.dlbar>i{display:block; height:100%; width:0; background:var(--ok);
         border-radius:6px; transition:width .25s linear}
/* 稳定运行计时 */
.uptime{display:flex; align-items:center; justify-content:center; gap:7px;
        color:var(--sub); font-size:.82rem; margin-top:26px;
        font-variant-numeric:tabular-nums; white-space:nowrap}
.uptime .dot{width:8px; height:8px; flex:none; border-radius:50%; background:var(--ok);
        box-shadow:0 0 0 3px rgba(5,150,105,.15); animation:uppulse 2s infinite}
@keyframes uppulse{0%,100%{box-shadow:0 0 0 3px rgba(5,150,105,.15)}
                   50%{box-shadow:0 0 0 5px rgba(5,150,105,.07)}}
.uptime b{color:var(--ok); font-weight:700}
/* 下单提示 */
.xptoast{position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom, 0px));
         transform:translate(-50%,10px); opacity:0; z-index:80; pointer-events:none;
         background:rgba(20,32,48,.95); color:#fff; font-size:.85rem; line-height:1.5;
         padding:10px 16px; border-radius:12px; max-width:86vw; text-align:center;
         transition:opacity .18s, transform .18s}
.xptoast.on{opacity:1; transform:translate(-50%,0)}
/* QQ 客服气泡 */
.qqtip{position:fixed; right:14px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); z-index:61; max-width:250px; display:none;
       background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 15px 12px;
       box-shadow:0 12px 30px rgba(15,30,50,.18); font-size:.82rem; color:var(--sub);
       line-height:1.65}
.qqtip.on{display:block}
.qqtip b{color:var(--ink); font-family:ui-monospace,Consolas,monospace; font-size:.95rem; letter-spacing:1px}
.qqtip .qt{display:flex; gap:8px; margin-top:9px}
.qqtip .qt button{flex:1; border:1px solid var(--accent); background:#fff; color:var(--accent);
       border-radius:8px; padding:6px 8px; font-size:.79rem; font-family:inherit; cursor:pointer}
.qqtip .x{position:absolute; top:5px; right:9px; border:none; background:none; color:#a7b4c2;
       font-size:1.05rem; line-height:1; cursor:pointer; padding:0}
@media (min-width:600px){
  .svcbar{gap:16px; padding:16px 20px}
  .svc-logos svg{width:30px; height:30px} .svc-logos{gap:9px}
  .svc-t1{font-size:1rem} .svc-t2{font-size:.82rem}
}
/* 窄屏：服务条改为上图标下文案，避免标题被挤断行 */
@media (max-width:560px){
  .feats{grid-template-columns:repeat(2,1fr); gap:9px}
  .feat{display:block; text-align:center; padding:12px 8px}
  .feat .fi{margin:0 auto 6px; width:24px; height:24px}
  .feat .ft{font-size:.84rem}
  .feat .fd{font-size:.72rem; line-height:1.55}
  .svcbar{flex-direction:column; align-items:stretch; gap:10px; padding:15px 16px 14px}
  .svc-logos{justify-content:center; gap:10px}
  .svc-logos svg{width:28px; height:28px}
  .svc-tx{align-items:center; text-align:center}
  .svc-t1{font-size:.86rem; white-space:normal; line-height:1.4}
  .svc-t2{font-size:.75rem; margin-top:5px; line-height:1.55}
  .plan .pd{line-height:1.7}
  .plan .sv{display:block; margin-top:2px}
  .qqfab{padding:10px 15px; font-size:.85rem}
}
@media (max-width:480px){
  .grid{gap:10px} .tile{padding:18px 8px 12px} }
@media (max-width:360px){
  .svc-t1{font-size:.8rem} .svc-t2{font-size:.68rem}
  .svc-logos svg{width:20px; height:20px} .svc-logos{gap:5px}
  .svcbar{gap:8px; padding:11px 11px}
  .plan .sv{display:none}
}

/* ---- 左侧竖向悬浮：找回订阅 ---- */
.sidebtn{position:fixed; left:0; top:42%; z-index:61; display:flex; flex-direction:column;
  align-items:center; gap:8px; padding:14px 9px 16px; text-decoration:none; color:#fff;
  background:linear-gradient(165deg,#3b82f6 0%,#2563eb 55%,#1d4ed8 100%);
  border-radius:0 15px 15px 0; border:1px solid rgba(255,255,255,.28); border-left:none;
  box-shadow:0 8px 22px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color:transparent}
.sidebtn svg{width:18px; height:18px; flex:none; opacity:.95}
.sidebtn span{writing-mode:vertical-rl; text-orientation:upright; letter-spacing:4px;
  font-size:.87rem; font-weight:700; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.18)}
.sidebtn:active{transform:scale(.96)}
@media (hover:hover){
  .sidebtn:hover{transform:translateX(3px); box-shadow:0 10px 28px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.4)}
}
/* 呼吸光圈，提示可点 */
.sidebtn{animation:sBreathe 3.2s ease-in-out infinite}
@keyframes sBreathe{
  0%,100%{box-shadow:0 8px 22px rgba(37,99,235,.42), 0 0 0 0 rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.35)}
  55%{box-shadow:0 8px 22px rgba(37,99,235,.42), 0 0 0 9px rgba(59,130,246,0), inset 0 1px 0 rgba(255,255,255,.35)}
}
@media (max-width:430px){
  .sidebtn{top:38%; padding:12px 7px 14px; border-radius:0 13px 13px 0}
  .sidebtn span{font-size:.8rem; letter-spacing:3px}
  .sidebtn svg{width:16px; height:16px}
}

/* ---- 教程视频 ---- */
.vbox{margin:12px 0 6px}
.tutvid{display:block; width:auto; max-width:100%; height:auto; max-height:260px;
  margin:0 auto; border-radius:14px;
  background:#0b1220; box-shadow:0 6px 20px rgba(16,42,74,.14); outline:none}
.vcap{text-align:center; font-size:.78rem; color:var(--sub); margin-top:8px}