/* ============================================================
 * 游友 · 跟着游轮看世界 —— H5 轻量版样式（移动优先 360–430px）
 * 视觉口径（对齐原型红线）：
 *   · 白天模式：淡天蓝底 #eaf3fb / 白卡片 / 深蓝 #0b4d7a / 暖橙 #f58220
 *   · 按钮立体感：上沿高光 + 下沿暗边 + 投影（Walkman 实体键思路）
 *   · 触控 ≥44px；正文 ≥14px；无 hover-only 交互
 *   · 安全区 env(safe-area-inset-*)；100dvh；禁滚动穿透
 * ============================================================ */
:root{
  --blue-900:#0b3a5c; --blue-800:#0b4d7a; --blue-700:#1a6fb5; --blue-100:#dcebf8;
  --orange:#f58220; --orange-l:#ffb457; --orange-d:#dd6a0d;
  --ink:#16283a; --muted:#54677a; --faint:#8a99a6;
  --card:#ffffff; --line:#d9e4ee; --bg:#eaf3fb;
  --r-s:10px; --r-m:14px; --r-l:20px;
  --shadow:0 6px 20px rgba(11,61,92,.12);
  --shadow-lg:0 12px 36px rgba(11,61,92,.22);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  color:var(--ink);font-size:14px;line-height:1.5;overscroll-behavior:none;}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0;}
input,select{font-family:inherit;font-size:15px;} /* ≥15px 防 iOS 聚焦自动放大 */

/* ============ 应用骨架 ============ */
#app{position:fixed;inset:0;display:flex;flex-direction:column;}
.tabPage{position:absolute;inset:0;display:none;flex-direction:column;}
.tabPage.on{display:flex;}
#pageRoute{background:var(--bg);}

/* ============ 品牌栏（常驻左上，对齐原型 #appTitle） ============ */
.brandbar{position:absolute;z-index:30;top:calc(8px + var(--safe-t));left:10px;
  display:flex;align-items:center;gap:6px;pointer-events:none;
  background:rgba(255,255,255,.92);border:1px solid #c3c8cd;border-radius:12px;
  padding:6px 12px;box-shadow:0 4px 14px rgba(0,0,0,.22),inset 0 1px 0 #fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.brandbar .bShip{font-size:16px;}
.brandbar .bBrand{font-size:14px;font-weight:800;color:var(--blue-800);letter-spacing:.3px;white-space:nowrap;}
.brandbar .bSlogan{font-size:11px;font-weight:500;color:#3a6ea5;white-space:nowrap;}

/* 路线键（右上） */
.routeChip{position:absolute;z-index:30;top:calc(8px + var(--safe-t));right:10px;
  display:flex;align-items:center;gap:6px;min-height:34px;max-width:46vw;
  background:rgba(255,255,255,.94);border:1px solid #c3c8cd;border-radius:17px;
  padding:5px 12px;box-shadow:0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 #fff;
  font-size:12.5px;font-weight:700;color:var(--blue-800);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.routeChip .rcDot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.routeChip .rcTxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ============ 地球画布 ============ */
#globeHost{position:absolute;inset:0;touch-action:none;}
.globeTip{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:12;
  font-size:11.5px;color:#5a6b7c;background:rgba(255,255,255,.85);padding:4px 12px;border-radius:12px;
  white-space:nowrap;pointer-events:none;transition:opacity .4s;}

/* ============ 讲解控制区（播放中） ============ */
/* 讲解细带：一行 = 交通标签 + 第N/M站 + 起止港 + 情绪 + ⏱/📅 */
.guideChip{position:absolute;z-index:25;left:10px;right:10px;top:calc(52px + var(--safe-t));
  display:none;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;
  background:linear-gradient(180deg,#fbfbfc 0%,#e9ebed 100%);
  border:1px solid #c0c6cc;border-radius:12px;padding:6px 10px;
  font-size:12px;color:#1b1e23;box-shadow:0 6px 22px rgba(0,0,0,.28),inset 0 1px 0 #fff;}
.guideChip.on{display:flex;}
.guideChip .gNo{font-size:12.5px;font-weight:800;color:#8a4a10;flex:0 0 auto;}
.guideChip .gPort{font-size:12.5px;font-weight:700;color:#a8550a;flex:0 0 auto;}
.guideChip .gArrow{font-size:11px;color:#b08a5a;flex:0 0 auto;}
.guideChip .gTag{font-size:10.5px;padding:1px 7px;border-radius:20px;flex:0 0 auto;white-space:nowrap;}
.gTag.fly{background:rgba(20,90,150,.12);color:#0b4d7a;border:1px solid rgba(20,90,150,.35);}
.gTag.land{background:rgba(180,120,40,.12);color:#8a4a10;border:1px solid rgba(180,120,40,.35);}
.gTag.cruise{background:rgba(200,120,30,.14);color:#a8550a;border:1px solid rgba(200,120,30,.35);}
.gTag.sea{background:rgba(20,120,150,.12);color:#0b6a7a;border:1px solid rgba(20,120,150,.35);}
.guideChip .gMood{font-size:10.5px;padding:1px 7px;border-radius:9px;font-weight:700;flex:0 0 auto;white-space:nowrap;}
.gMood.home{background:rgba(255,168,96,.22);color:#a04a00;}
.gMood.go{background:rgba(160,205,255,.22);color:#0b4d7a;}
.gMood.land{background:rgba(226,206,168,.24);color:#7a5a1a;}
.guideChip .gReadout{margin-left:auto;display:inline-flex;align-items:center;gap:0;flex:0 0 auto;
  background:rgba(255,255,255,.92);border:1px solid rgba(20,90,150,.3);border-radius:20px;padding:1px 10px;white-space:nowrap;}
.gReadout .gTh{font-size:10.5px;color:#0b8a4a;font-weight:700;padding-right:8px;border-right:1px solid rgba(20,90,150,.22);}
.gReadout .gAh{font-size:10.5px;color:#0b4d7a;font-weight:700;padding-left:8px;}

/* 字幕条（讲解词，袁哥克隆音素材未投放时显字） */
.subtitle{position:absolute;z-index:24;left:12px;right:12px;bottom:calc(150px + var(--safe-b));
  display:none;background:rgba(11,42,60,.82);color:#eaf4ff;border-radius:12px;text-align:center;
  padding:8px 12px;font-size:13.5px;line-height:1.55;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 6px 18px rgba(0,0,0,.3);}
.subtitle.on{display:block;animation:subIn .3s ease;}
@keyframes subIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* 行程日条：D1…Dn 横滑，点天直达 */
.dayStrip{position:absolute;z-index:23;left:0;right:0;bottom:calc(102px + var(--safe-b));
  display:none;gap:7px;padding:4px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;}
.dayStrip.on{display:flex;}
.dayStrip::-webkit-scrollbar{display:none;}
.dayChip{flex:0 0 auto;min-width:46px;min-height:34px;padding:5px 10px;border-radius:17px;
  background:rgba(255,255,255,.9);border:1px solid #c3c8cd;color:var(--blue-800);
  font-size:12.5px;font-weight:700;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.dayChip.sea{color:#0b6a7a;}
.dayChip.cur{background:linear-gradient(180deg,var(--orange-l),var(--orange));border-color:var(--orange-d);
  color:#2a1403;box-shadow:0 2px 0 #6d3a0b,0 3px 8px rgba(245,130,32,.4),inset 0 1px 0 rgba(255,255,255,.7);}
.dayChip.past{opacity:.55;}

/* 播放主控条（Walkman 实体键） */
.playDock{position:absolute;z-index:26;left:50%;transform:translateX(-50%);
  bottom:calc(58px + var(--safe-b));display:none;align-items:center;gap:7px;
  background:linear-gradient(180deg,#33383f 0%,#1b1e23 100%);
  padding:6px 9px;border-radius:12px;border:1px solid #565c65;
  box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);white-space:nowrap;}
.playDock.on{display:flex;}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:44px;height:32px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:700;
  border:1px solid #8d949d;border-top-color:#c8cdd4;
  background:linear-gradient(180deg,#d8dce1 0%,#a8aeb6 52%,#8b9199 100%);
  color:#1b1e23;text-shadow:0 1px 0 rgba(255,255,255,.55);
  box-shadow:0 2px 0 #4b5057,0 3px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.85);}
.pbtn:active{transform:translateY(2px);box-shadow:0 0 0 #4b5057,inset 0 2px 5px rgba(0,0,0,.35);}
.pbtn.main{background:linear-gradient(180deg,#ffb457 0%,#f58220 52%,#dd6a0d 100%);
  border-color:#8a4a10;border-top-color:#ffd08a;color:#2a1403;min-width:76px;
  box-shadow:0 2px 0 #6d3a0b,0 3px 8px rgba(245,130,32,.4),inset 0 1px 0 rgba(255,255,255,.7);}
.pbtn.voice{background:linear-gradient(180deg,#4a9fd8 0%,#2b7bbd 52%,#1f6aa8 100%);
  border-color:#0b4d7a;border-top-color:#8fc4ee;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);}
.pbtn.voice.on{background:linear-gradient(180deg,#ffcf7a 0%,#f0a02c 52%,#d4841a 100%);color:#2a1403;text-shadow:0 1px 0 rgba(255,255,255,.4);}
.pbtn[disabled]{opacity:.45;pointer-events:none;}
.psep{width:1px;height:22px;background:linear-gradient(180deg,transparent,#5a606a,transparent);margin:0 2px;}

/* 开始讲解大键（选中航线后） */
.playCta{position:absolute;z-index:22;left:50%;transform:translateX(-50%);
  bottom:calc(70px + var(--safe-b));display:none;}
.playCta.on{display:block;}
.ctaBtn{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 26px;border-radius:26px;
  background:linear-gradient(180deg,#ffb457 0%,#f58220 52%,#dd6a0d 100%);
  border:1px solid #8a4a10;border-top-color:#ffd08a;color:#2a1403;
  font-size:16px;font-weight:800;letter-spacing:.5px;
  box-shadow:0 3px 0 #6d3a0b,0 8px 22px rgba(245,130,32,.45),inset 0 1px 0 rgba(255,255,255,.7);}
.ctaBtn:active{transform:translateY(2px);box-shadow:0 0 0 #6d3a0b,inset 0 2px 6px rgba(0,0,0,.3);}
.ctaBtn .winLogo{width:18px;height:18px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.ctaBtn[disabled]{opacity:.5;filter:grayscale(.35);cursor:not-allowed;box-shadow:none;}
.ctaBtn[disabled]:active{transform:none;}
.ctaCap{margin-top:9px;text-align:center;font-size:12px;font-weight:600;color:#5f7186;
  letter-spacing:.3px;text-shadow:0 1px 2px rgba(255,255,255,.75);}

/* ============ 底部 Tab ============ */
.tabbar{position:absolute;z-index:40;left:0;right:0;bottom:0;
  display:flex;background:rgba(255,255,255,.96);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.tabItem{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;padding:4px 0;color:var(--muted);font-size:10.5px;font-weight:600;}
.tabItem svg{width:23px;height:23px;}
.tabItem.on{color:var(--blue-800);}
.tabItem.on .tabIco{background:var(--blue-100);}
.tabIco{display:grid;place-items:center;width:40px;height:26px;border-radius:13px;transition:background .15s;}

/* ============ 底部抽屉 / 卡片 ============ */
.sheetMask{position:absolute;inset:0;z-index:45;background:rgba(11,42,60,.4);opacity:0;pointer-events:none;transition:opacity .25s;}
.sheetMask.on{opacity:1;pointer-events:auto;}
.sheet{position:absolute;z-index:46;left:0;right:0;bottom:0;max-height:86vh;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:var(--shadow-lg);
  transform:translateY(102%);transition:transform .3s cubic-bezier(.32,.72,.35,1);
  padding-bottom:calc(12px + var(--safe-b));}
.sheet.on{transform:none;}
.sheetHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;}
.sheetTitle{font-size:16.5px;font-weight:800;color:var(--blue-800);}
.sheetClose{width:34px;height:34px;border-radius:17px;display:grid;place-items:center;
  background:#eef3f8;color:var(--muted);font-size:15px;}
.sheetBody{overflow-y:auto;padding:4px 16px 8px;-webkit-overflow-scrolling:touch;}

/* 航线卡 */
.routeCard{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow);}
.routeCard:active{transform:scale(.99);}
/* 当前选中航线：蓝描边 + 右上角「在看」徽章（2026-10-20 袁哥质量红线：选没选中要一眼看出） */
.routeCard.on{border-color:var(--blue-500);box-shadow:0 0 0 2px rgba(25,118,210,.18),var(--shadow);position:relative;}
.routeCard.on::after{content:'在看';position:absolute;top:10px;right:12px;font-size:10.5px;font-weight:800;
  color:#fff;background:var(--blue-500);border-radius:8px;padding:2px 8px;letter-spacing:.5px;}
.routeCard.on .rtTop{padding-right:46px;}   /* 给「在看」徽章让位，长航线名不重叠 */
/* 七大洲关联：点洲名后，经过该洲的航线高亮（袁哥 2026-10-29） */
.routeCard.hot{border-color:var(--orange);box-shadow:0 0 0 2px rgba(245,130,32,.25),var(--shadow);background:linear-gradient(180deg,#fff,#fff6ec);}
.routeCard.hot::before{content:'🌍 经过此洲';position:absolute;top:10px;right:12px;font-size:10.5px;font-weight:800;
  color:#fff;background:var(--orange);border-radius:8px;padding:2px 8px;letter-spacing:.5px;}
.routeCard .rtTop{display:flex;align-items:center;gap:8px;}
.rtDot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(20,90,150,.12);}
.rtName{font-size:15px;font-weight:800;color:var(--ink);line-height:1.35;}
.routeCard .rtTag{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;color:var(--blue-700);
  background:var(--blue-100);border-radius:9px;padding:2px 9px;}
.routeCard .rtMeta{margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.6;}
.routeCard .rtWhy{margin-top:6px;font-size:12.5px;color:var(--ink);line-height:1.6;}
.routeCard .rtGo{margin-top:9px;display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:800;color:var(--orange-d);}

/* 到站卡 */
.arrPort{font-size:19px;font-weight:800;color:var(--blue-800);}
.arrDay{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;background:var(--blue-700);
  border-radius:9px;padding:2px 9px;margin-left:8px;vertical-align:3px;}
.arrBlock{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--ink);}
.arrBlock .lb{font-weight:800;color:var(--blue-800);}
.arrSub{margin-top:10px;background:#f2f7fc;border-left:3px solid var(--orange);border-radius:0 10px 10px 0;
  padding:9px 12px;font-size:13px;line-height:1.65;color:#3a4a5a;}
.arrActs{display:flex;gap:9px;margin-top:14px;}
.arrActs .btn{flex:1;}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  padding:0 18px;border-radius:12px;font-size:14.5px;font-weight:800;
  border:1px solid #8d949d;border-top-color:#c8cdd4;
  background:linear-gradient(180deg,#d8dce1 0%,#a8aeb6 52%,#8b9199 100%);color:#1b1e23;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  box-shadow:0 2px 0 #4b5057,0 3px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.85);}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 #4b5057,inset 0 2px 5px rgba(0,0,0,.3);}
.btn.primary{background:linear-gradient(180deg,#ffb457 0%,#f58220 52%,#dd6a0d 100%);
  border-color:#8a4a10;border-top-color:#ffd08a;color:#2a1403;
  box-shadow:0 2px 0 #6d3a0b,0 3px 8px rgba(245,130,32,.4),inset 0 1px 0 rgba(255,255,255,.7);}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--blue-800);
  box-shadow:0 2px 6px rgba(11,61,92,.08);text-shadow:none;}
.btn.sm{min-height:36px;font-size:13px;padding:0 14px;border-radius:10px;}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* ============ 通用面板页（丈量世界/我的心愿/我的） ============ */
.pageScroll{flex:1;overflow-y:auto;padding:calc(60px + var(--safe-t)) 14px calc(84px + var(--safe-b));
  -webkit-overflow-scrolling:touch;}
.pageTitle{font-size:21px;font-weight:800;color:var(--blue-800);margin:2px 2px 12px;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);
  padding:14px;margin-bottom:12px;}

/* 丈量世界 */
.statRow{display:flex;gap:9px;}
.statCell{flex:1;background:linear-gradient(180deg,#f4f9fd,#e8f1f9);border:1px solid var(--line);
  border-radius:var(--r-m);padding:12px 8px;text-align:center;}
.statCell b{display:block;font-size:23px;font-weight:800;color:var(--blue-800);}
.statCell span{font-size:11.5px;color:var(--muted);}
.syncLine{margin-top:9px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.syncDot{width:8px;height:8px;border-radius:50%;background:#0b8a4a;}
.syncDot.pend{background:var(--orange);}
.fpItem{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #edf2f7;}
.fpItem:last-child{border-bottom:none;}
.fpItem img,.fpPh{width:74px;height:74px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#e6eef5;}
.fpPh{display:grid;place-items:center;color:var(--faint);font-size:20px;}
.fpMeta{flex:1;min-width:0;}
.fpMeta b{font-size:14px;color:var(--ink);}
.fpMeta .d{font-size:11.5px;color:var(--blue-700);font-weight:700;margin-left:5px;}
.fpMeta .n{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;word-break:break-all;}
.fpMeta .t{font-size:10.5px;color:var(--faint);margin-top:3px;}
.fpOps{flex:0 0 auto;align-self:flex-start;display:flex;flex-direction:column;align-items:center;gap:6px;}
.fpPub{font-size:11px;font-weight:700;color:var(--blue-700);background:#eaf3fb;border:1px solid #cfe4f5;
  border-radius:9px;padding:4px 9px;white-space:nowrap;}
.fpPub:disabled{opacity:.55;}
.fpDel{flex:0 0 auto;align-self:flex-start;width:30px;height:30px;border-radius:15px;display:grid;place-items:center;
  background:#f4f6f9;color:var(--faint);font-size:13px;}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:34px 20px;line-height:1.7;}
.empty .eIco{font-size:34px;display:block;margin-bottom:8px;}

/* ============ 心声面板 ============ */
.wTabs{display:flex;gap:6px;background:#e8eef5;border-radius:12px;padding:4px;margin-bottom:14px;}
.wTab{flex:1;min-height:38px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--muted);}
.wTab.on{background:#fff;color:var(--blue-800);box-shadow:0 2px 6px rgba(11,61,92,.12);}
.wPane{display:none;flex-direction:column;}
.wPane.on{display:flex;}
.wLab{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin:13px 0 6px;}
.wHint{font-size:11px;font-weight:500;color:var(--faint);margin-left:4px;}
.wSel,.wInp{width:100%;min-height:44px;border:1px solid var(--line);border-radius:11px;
  padding:0 13px;background:#fff;color:var(--ink);}
.wInp:focus,.wSel:focus{outline:none;border-color:var(--blue-700);box-shadow:0 0 0 3px rgba(26,111,181,.14);}
.wChips{display:flex;flex-wrap:wrap;gap:7px;}
.wChip{min-height:34px;padding:5px 13px;border-radius:17px;background:#fff;border:1px dashed #b9c9d8;
  color:var(--muted);font-size:12.5px;font-weight:600;}
.wChip.on{background:var(--blue-100);border:1px solid var(--blue-700);color:var(--blue-800);font-weight:800;}
.wExs{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.wEx{min-height:28px;padding:3px 10px;border-radius:14px;background:#f5f8fb;border:1px dashed #c8d6e2;
  color:var(--blue-700);font-size:11.5px;}
.wRow{display:flex;gap:9px;}
.wRow>div{flex:1;min-width:0;}
.wActs{display:flex;gap:9px;margin-top:18px;}
.wActs .btn{flex:1;}
.wMsg{min-height:18px;font-size:12.5px;color:#0b8a4a;margin-top:9px;font-weight:600;}
.wMatchHead{font-size:13px;color:var(--muted);margin-bottom:11px;line-height:1.6;}
.wRoute{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);
  padding:13px;margin-bottom:11px;}
.wRouteTop{display:flex;align-items:center;gap:8px;font-size:14px;}
.wRouteTop b{line-height:1.4;}
.wDot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.wRouteTag{display:inline-block;margin-top:7px;font-size:11px;font-weight:700;color:var(--blue-700);
  background:var(--blue-100);border-radius:9px;padding:2px 9px;}
.wWhy{margin-top:9px;font-size:12.5px;line-height:1.65;color:var(--ink);}
.wSp{margin-top:7px;font-size:12.5px;line-height:1.65;color:var(--muted);}
.wRoute .btn{margin-top:11px;width:100%;}
.wEmpty{font-size:13px;color:var(--muted);line-height:1.8;padding:26px 10px;text-align:center;}
.wPreview{white-space:pre-wrap;font-size:12.5px;line-height:1.75;background:#f7fafc;border:1px solid var(--line);
  border-radius:11px;padding:12px;color:var(--ink);}

/* ============ 我的 ============ */
.meRow{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid #edf2f7;}
.meRow:last-child{border-bottom:none;}
.meRow .mIco{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;background:var(--blue-100);
  font-size:17px;flex:0 0 auto;}
.meRow .mTxt{flex:1;min-width:0;}
.meRow .mTxt b{display:block;font-size:14.5px;color:var(--ink);}
.meRow .mTxt span{font-size:11.5px;color:var(--muted);}
.meRow .mVal{font-size:12.5px;color:var(--muted);font-weight:700;}
.switch{width:48px;height:28px;border-radius:15px;background:#cfd9e3;position:relative;transition:background .2s;flex:0 0 auto;}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:12px;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s;}
.switch.on{background:#0b8a4a;}
.switch.on::after{transform:translateX(20px);}
.aboutText{font-size:12.5px;color:var(--muted);line-height:1.8;}
.verLine{margin-top:12px;font-size:11px;color:var(--faint);text-align:center;}

/* ============ 地球 HTML 覆盖层（globe.js 注入） ============ */
.gl-label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;pointer-events:auto;cursor:pointer;
  background:rgba(255,255,255,.94);border:1px solid rgba(20,90,150,.22);border-radius:14px;
  padding:2px 9px;font-size:11.5px;font-weight:700;color:#0b3a5c;
  box-shadow:0 2px 8px rgba(0,0,0,.22);transform:translate(-50%,-130%);}
.gl-label .ld{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.gl-label.curEndpoint{border-color:var(--orange);color:#8a4a10;
  box-shadow:0 0 0 3px rgba(255,206,138,.35),0 3px 10px rgba(0,0,0,.3);z-index:998;font-size:12.5px;}
.gl-label.dim{opacity:.45;}
/* 七大洲标签（袁哥 2026-10-29）：比港口标签更弱化，点一下筛出经过该洲的航线 */
.gl-cont{display:inline-block;white-space:nowrap;pointer-events:auto;cursor:pointer;
  background:rgba(11,58,92,.78);border:1px solid rgba(255,255,255,.35);border-radius:12px;
  padding:3px 10px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);transform:translate(-50%,-140%);backdrop-filter:blur(2px);}
.gl-cont:hover{background:rgba(245,130,32,.92);}
.gl-cont.on{background:var(--orange);border-color:#fff;box-shadow:0 0 0 3px rgba(255,206,138,.45),0 3px 10px rgba(0,0,0,.35);}
.gl-arrow{pointer-events:none;font-size:12px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.gl-spark{pointer-events:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,236,190,.98) 0%,rgba(245,170,60,.9) 45%,rgba(245,130,32,0) 72%);
  box-shadow:0 0 14px 4px rgba(255,190,90,.55);}
.gl-spark .ic{filter:drop-shadow(0 1px 2px rgba(120,60,0,.5));}
/* 载具/标记 SVG sprite（替代 emoji） */
.ic-svg{display:inline-block;width:18px;height:18px;vertical-align:middle;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(80,40,0,.45));}
.gl-spark .ic-svg{width:20px;height:20px;}
.gl-label .ic-svg{width:14px;height:14px;color:#0b3a5c;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.gTag .ic-svg{width:12px;height:12px;vertical-align:-2px;margin-right:2px;color:inherit;}
/* 飞机 PNG（袁哥给的透明图）与邮轮 🛳️ 真实图标 —— 2026-10-28 验收反馈替换抽象 SVG */
.ic-plane{display:inline-block;width:18px;height:auto;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}
.gl-spark .ic-plane{width:32px;height:auto;}                 /* 飞行轨迹上的飞机，袁哥要求按轨迹优化大小 */
.gl-label .ic-plane{width:16px;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.gTag .ic-plane{width:14px;height:auto;vertical-align:-3px;margin-right:2px;}
.ic-ship{display:inline-block;line-height:1;vertical-align:middle;}
.gl-spark .ic-ship{font-size:23px;}
.gl-label .ic-ship{font-size:14px;}
.gTag .ic-ship{font-size:12px;vertical-align:-2px;margin-right:2px;}
.gl-spark.fly{background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(190,220,250,.9) 45%,rgba(160,200,240,0) 72%);
  box-shadow:0 0 14px 4px rgba(190,220,250,.6);}
.gl-spark.land{background:radial-gradient(circle,rgba(240,236,220,.98) 0%,rgba(214,196,150,.9) 45%,rgba(214,196,150,0) 72%);
  box-shadow:0 0 14px 4px rgba(214,196,150,.5);}
.gl-ring{pointer-events:auto;cursor:pointer;width:26px;height:26px;border-radius:50%;
  border:3px solid #ffce8a;background:rgba(255,206,138,.18);box-shadow:0 0 14px 4px rgba(255,206,138,.45);
  display:grid;place-items:center;transform:translate(-50%,-50%);animation:none;}
.gl-ring::after{content:'▶';font-size:10px;color:#ffce8a;line-height:1;}
.gl-ringLbl{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;pointer-events:none;
  padding:3px 10px;border-radius:20px;transform:translate(-50%,-160%);
  background:linear-gradient(180deg,rgba(255,206,138,.97),rgba(245,170,60,.97));
  border:1px solid #8a4a10;box-shadow:0 3px 10px rgba(0,0,0,.5);}
.gl-ringLbl .rlTag{font-size:10px;font-weight:700;color:#5a2c00;opacity:.8;}
.gl-ringLbl b{font-size:12.5px;font-weight:800;color:#3a1b02;letter-spacing:.3px;}

/* ============ toast ============ */
#toast{position:fixed;left:50%;top:calc(16px + var(--safe-t));transform:translateX(-50%);z-index:99;
  background:rgba(20,20,25,.92);color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);max-width:80vw;opacity:0;transition:opacity .25s;pointer-events:none;}
#toast.on{opacity:1;}

/* 大屏（iPad/PC）也能用：地球居中留边 */
@media (min-width:700px){
  .guideChip{left:50%;right:auto;transform:translateX(-50%);max-width:640px;}
  .subtitle{left:50%;right:auto;transform:translateX(-50%);max-width:640px;}
  .dayStrip{left:50%;right:auto;transform:translateX(-50%);max-width:640px;}
  .tabbar{left:50%;right:auto;transform:translateX(-50%);max-width:640px;border-radius:18px 18px 0 0;}
  .playDock{max-width:640px;}
}

/* ============ 小程序 web-view 环境适配 ============ */
/* 小程序内顶部有导航栏、底部有 tabBar → H5 内容整体上下留出安全区 */
body.inMini .topbar{padding-top:calc(12px + var(--safe-t) + 15px);}
body.inMini .tabbar{padding-bottom:calc(var(--safe-b) + 22px);}
body.inMini .playDock{bottom:calc(78px + var(--safe-b));}
body.inMini .guideChip{top:calc(58px + var(--safe-t));}
body.inMini .subtitle{bottom:calc(150px + var(--safe-b));}
body.inMini .dayStrip{bottom:calc(104px + var(--safe-b));}

/* 分享引导条（小程序右上角分享） */
.miniShareTip{position:fixed;left:50%;top:calc(64px + var(--safe-t));transform:translate(-50%,-16px);
  z-index:120;background:rgba(11,61,94,.94);color:#fff;font-size:13px;font-weight:600;
  padding:9px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(11,61,94,.3);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;}
.miniShareTip.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}

/* ============================================================
 * 行前算算（汇率 / 小费 / 船上花费 / 母港选船）—— 2026-10-20 新增
 * ============================================================ */
.calcPage{padding-bottom:6px;}
.calcTitle{font-size:21px;font-weight:800;color:var(--blue-800);margin:2px 2px 8px;}
.calcIntro{font-size:13px;color:var(--muted);line-height:1.75;margin:0 2px 14px;}

.calcHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:11px;}
.calcHead b{font-size:15.5px;font-weight:800;color:var(--blue-800);}
.calcSub{font-size:11.5px;color:var(--faint);}
.calcFoot{margin-top:11px;padding-top:9px;border-top:1px dashed #dde6ee;
  font-size:11.5px;color:var(--muted);line-height:1.7;}

/* —— 汇率 —— */
.fxGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fxRow{display:flex;align-items:center;gap:7px;padding:8px 9px;background:#f5f9fc;
  border:1px solid #e2ecf4;border-radius:10px;}
.fxSym{font-size:15px;font-weight:800;color:var(--orange-d);flex:0 0 auto;min-width:22px;text-align:center;}
.fxName{font-size:12.5px;font-weight:600;color:var(--ink);flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fxName i{font-style:normal;font-size:10px;color:var(--faint);font-weight:600;}
.fxRate{font-size:12.5px;font-weight:800;color:var(--blue-700);flex:0 0 auto;white-space:nowrap;}

/* —— 表单 —— */
.fld{display:block;margin-bottom:9px;}
.fld>span{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:5px;}
.fld select,.fld input{width:100%;min-height:44px;padding:0 12px;border-radius:10px;
  border:1px solid #c6d4e0;background:#fff;font-size:15px;color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(11,61,92,.06);}
.fld select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#5a6b7c 50%),linear-gradient(135deg,#5a6b7c 50%,transparent 50%);
  background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:32px;}
.fldRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.fld.sm>span{font-size:11.5px;}
.fld.sm input{text-align:center;}

/* —— 小费结果 —— */
.tipOut{background:linear-gradient(180deg,#fff8ef 0%,#fdeeda 100%);border:1px solid #f3d9b4;
  border-radius:var(--r-m);padding:13px;margin-top:4px;}
.tipBig{text-align:center;margin-bottom:10px;}
.tipBig b{display:block;font-size:30px;font-weight:800;color:var(--orange-d);letter-spacing:-.5px;line-height:1.15;}
.tipBig span{display:block;font-size:11.5px;color:#8a6a44;margin-top:2px;}
.tipBig div{font-size:15px;font-weight:800;color:var(--orange-d);}
.tipNote2{font-size:12.5px;color:#7a5a34;line-height:1.7;}
.tipGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tipGrid>div{background:rgba(255,255,255,.8);border:1px solid #f0dcc0;border-radius:9px;padding:7px 9px;}
.tipGrid i{display:block;font-style:normal;font-size:10.5px;color:#9a7a52;margin-bottom:2px;}
.tipGrid b{font-size:12.5px;font-weight:800;color:#7a4a10;}

/* —— 船上花费 —— */
.costList{display:flex;flex-direction:column;gap:1px;}
.costRow{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid #eef3f8;}
.costRow:last-child{border-bottom:none;}
.costL{flex:1 1 auto;min-width:0;}
.costL b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.costL span{font-size:11.5px;color:var(--muted);line-height:1.65;display:block;}
.costR{flex:0 0 auto;text-align:right;min-width:78px;}
.costR b{display:block;font-size:12.5px;font-weight:800;color:var(--blue-700);}
.costR span{font-size:11.5px;color:var(--orange-d);font-weight:700;}

/* —— 母港三船 —— */
.shipList{display:flex;flex-direction:column;gap:11px;}
.shipCard{border:1px solid #dbe6ef;border-radius:var(--r-m);padding:12px;background:linear-gradient(180deg,#fbfdff 0%,#f4f9fd 100%);}
.shipTop{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.shipFlag{font-size:22px;flex:0 0 auto;}
.shipName b{display:block;font-size:15.5px;font-weight:800;color:var(--blue-800);}
.shipName span{font-size:11.5px;color:var(--muted);}
.shipSpec{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px;}
.shipSpec span{background:#fff;border:1px solid #e3ecf4;border-radius:9px;padding:6px 8px;font-size:11.5px;
  font-weight:700;color:var(--ink);text-align:center;line-height:1.35;}
.shipSpec i{display:block;font-style:normal;font-size:10px;color:var(--faint);font-weight:600;margin-bottom:1px;}
.shipBest{background:#fff7ec;border:1px solid #f6dcb8;border-radius:9px;padding:8px 10px;margin-bottom:9px;
  font-size:12.5px;color:#7a5a34;line-height:1.65;}
.shipBest b{display:block;font-size:11px;color:var(--orange-d);font-weight:800;margin-bottom:2px;letter-spacing:.3px;}
.shipCol{margin-bottom:8px;}
.shipCol b{display:block;font-size:12px;color:var(--blue-800);font-weight:800;margin-bottom:4px;}
.shipCol ul{margin:0;padding-left:17px;}
.shipCol li{font-size:12.5px;color:#3d5266;line-height:1.75;}
.shipNote{font-size:11.5px;color:var(--muted);line-height:1.7;padding-top:8px;border-top:1px dashed #dde6ee;}

/* —— 问答 —— */
.qaList{display:flex;flex-direction:column;gap:10px;}
.qaItem b{display:block;font-size:13.5px;font-weight:800;color:var(--blue-800);margin-bottom:3px;}
.qaItem p{margin:0;font-size:12.5px;color:#3d5266;line-height:1.8;}

/* 抽屉更高（行前算算内容长） */
.sheet.tall{max-height:92vh;}
.sheet.tall .sheetBody{padding-bottom:18px;}

/* 小屏适配 */
@media (max-width:360px){
  .fxGrid{grid-template-columns:1fr;}
  .fldRow{grid-template-columns:1fr 1fr;}
  .tipGrid{grid-template-columns:1fr;}
  .shipSpec{grid-template-columns:1fr;}
}

/* —— 航线页「行前算算」快捷入口（右侧，避开天数条/字幕/播放条） —— */
.calcQuick{position:absolute;z-index:27;right:10px;bottom:calc(146px + var(--safe-b));
  min-height:36px;padding:0 14px;border-radius:18px;font-size:12.5px;font-weight:800;color:#0b4d7a;
  background:linear-gradient(180deg,#ffffff 0%,#e6f0f9 100%);border:1px solid #b9cbdc;
  box-shadow:0 4px 12px rgba(11,61,92,.2),inset 0 1px 0 #fff;}
.calcQuick:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(11,61,92,.18);}
/* 小程序 web-view 内顶部导航更高，往上挪 */
body.inMini .calcQuick{bottom:calc(192px + var(--safe-b));}

/* 袁哥 2026-10-27：首页隐藏悬浮「行前算算」「选择航线」按钮（改由底部菜单/图层进入） */
.calcQuick{display:none !important;}
.routeChip{display:none !important;}

/* 航线选择面板：占地球约 2/3、半透明、可滚动、不全屏铺开（袁哥 2026-10-27，2026-10-29 改为桌面端居中收窄） */
.sheet.routePicker{
  left:12px;right:12px;top:calc(54px + var(--safe-t));bottom:auto;margin-left:auto;margin-right:auto;max-width:460px;
  max-height:62vh;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(156,201,236,.65);border-radius:16px;
  box-shadow:0 12px 40px rgba(13,55,95,.25);
  transform:translateY(-12px) scale(.985);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.32,.72,.35,1);
}
.sheet.routePicker.on{transform:none;opacity:1;pointer-events:auto;}
.sheet.routePicker .sheetBody{max-height:calc(62vh - 56px);}
.sheetMask.light{background:rgba(11,42,60,.06);}

/* ============================================================
 * 价保 · 早订 vs 现订（2026-10-21 新增）
 * 涨=红 / 降=绿 / 平=灰（中国习惯）
 * ============================================================ */
.priceHead{margin-bottom:10px;}
.priceSrc{font-size:11.5px;color:var(--faint);line-height:1.65;background:#f5f9fc;
  border:1px solid #e3ecf4;border-radius:10px;padding:8px 11px;margin-bottom:9px;}
.priceTip{font-size:12.5px;color:var(--muted);line-height:1.7;background:#fff7ec;
  border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:9px 12px;}
.priceTip b{color:var(--orange-d);}
.priceChips{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:2px 0 8px;}
.priceChips::-webkit-scrollbar{display:none;}
.priceChip{flex:0 0 auto;min-height:36px;padding:5px 13px;border-radius:18px;background:#fff;
  border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700;white-space:nowrap;}
.priceChip.on{background:linear-gradient(180deg,var(--orange-l),var(--orange));border-color:var(--orange-d);
  color:#2a1403;box-shadow:0 2px 0 #6d3a0b,0 3px 8px rgba(245,130,32,.35),inset 0 1px 0 rgba(255,255,255,.7);}
.priceRoute{margin-top:2px;}
.prTitle{font-size:17px;font-weight:800;color:var(--blue-800);}
.prSub{font-size:11.5px;color:var(--muted);margin:3px 0 12px;}
.priceRow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;margin-bottom:9px;box-shadow:var(--shadow);}
.priceRow .prL{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:54px;}
.prCode{font-size:15px;font-weight:800;color:var(--ink);}
.prOcc{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px;}
.prMid{flex:1 1 auto;min-width:0;}
.prLine{display:flex;align-items:baseline;gap:6px;line-height:1.5;}
.prLine .prK{font-size:11px;color:var(--faint);width:30px;flex:0 0 auto;}
.prLine .prV{font-size:13.5px;font-weight:700;color:var(--ink);}
.prLine.now .prV{color:var(--blue-800);}
.prR{flex:0 0 auto;text-align:right;min-width:78px;}
.prArrow{display:block;font-size:12px;font-weight:800;}
.prDiff{display:block;font-size:14.5px;font-weight:800;margin-top:1px;}
.priceRow.up .prArrow,.priceRow.up .prDiff{color:#e2402f;}
.priceRow.down .prArrow,.priceRow.down .prDiff{color:#0b8a4a;}
.priceRow.flat .prArrow,.priceRow.flat .prDiff{color:var(--faint);}
.priceRow.up{border-color:rgba(226,64,47,.42);}
.priceRow.down{border-color:rgba(11,138,74,.42);}