/* ==========================================================================
   我的旅行 · 共享样式表
   新增页面只需：<link rel="stylesheet" href="assets/style.css">
   ========================================================================== */

:root{
  --bg:#f1f5f9; --card:#ffffff; --ink:#0f172a; --muted:#64748b;
  --sea:#0e7490; --sea2:#0284c7; --deep:#0b2545; --deep2:#13315c;
  --amber:#b45309; --amber-bg:#fffbeb; --amber-line:#fcd34d;
  --green:#047857; --green-bg:#ecfdf5; --line:#e2e8f0;
  --rose:#be123c; --rose-bg:#fff1f2; --violet:#6d28d9; --violet-bg:#f5f3ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
}
.wrap{max-width:820px;margin:0 auto;padding:0 16px 64px}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--deep) 0%,var(--deep2) 55%,var(--sea) 130%);
  color:#fff; padding:40px 0 36px; position:relative; overflow:hidden;
}
.hero.tone-hk{background:linear-gradient(160deg,#3b0d5c 0%,#7c2d6b 60%,#be185d 130%)}
.hero.tone-sg{background:linear-gradient(160deg,#7c2d12 0%,#b91c1c 55%,#f59e0b 140%)}
.hero.tone-jp{background:linear-gradient(160deg,#450a0a 0%,#991b1b 55%,#e11d48 140%)}
.hero.tone-cn{background:linear-gradient(160deg,#7f1d1d 0%,#b91c1c 50%,#f59e0b 140%)}
.hero.tone-kr{background:linear-gradient(160deg,#0c1a3d 0%,#1e3a8a 55%,#c2410c 140%)}
.hero .wrap{padding-bottom:0}
.hero .kicker{font-size:12.5px;letter-spacing:.35em;opacity:.75;text-transform:uppercase}
.hero h1{font-size:clamp(25px,6vw,36px);font-weight:800;margin:9px 0 6px;letter-spacing:.02em}
.hero .sub{font-size:14.5px;opacity:.86}
.hero .route{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;flex-wrap:wrap}
.hero .stop{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 14px;backdrop-filter:blur(4px)}
.hero .arrow{opacity:.6}
.hero .meta{margin-top:14px;font-size:12.5px;opacity:.62}

/* ---------- 面包屑 / 返回 ---------- */
.crumb{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border-radius:999px;padding:4px 12px;margin-bottom:14px}
.crumb:hover{background:rgba(255,255,255,.2)}

/* ---------- 全局导航 ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-bottom:22px}
.nav .wrap{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;scrollbar-width:none;max-width:820px}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{flex:none;font-size:13.5px;color:var(--muted);text-decoration:none;padding:6px 13px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:#e0f2fe;color:var(--sea)}
.nav a.active{background:var(--deep);color:#fff}

/* ---------- 标题 ---------- */
section{margin-top:32px}
h2{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:4px}
h2 .bar{width:5px;height:21px;border-radius:3px;background:linear-gradient(180deg,var(--sea2),var(--sea));display:inline-block}
h3{font-size:16.5px;font-weight:800;margin:18px 0 8px}
.h2sub{color:var(--muted);font-size:13.5px;margin-bottom:16px;padding-left:15px}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card.tight{padding:14px 16px}

/* ---------- 天数 / 段落卡 ---------- */
.day{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--card);margin-bottom:16px}
.day-head{padding:16px 18px 14px;color:#fff}
.day-head.d1{background:linear-gradient(135deg,#0e7490,#0284c7)}
.day-head.d2{background:linear-gradient(135deg,#155e75,#0891b2)}
.day-head.d3{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}
.day-head.d4{background:linear-gradient(135deg,#7c2d12,#ea580c)}
.day-head .dlabel{font-size:12px;letter-spacing:.25em;opacity:.8}
.day-head h3{font-size:18.5px;font-weight:800;margin:2px 0 0}
.day-head .w{margin-top:8px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 12px;font-size:12.5px}
.day-body{padding:6px 18px 16px}

/* ---------- 时间轴 ---------- */
.tl{list-style:none}
.tl li{display:flex;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.tl li:last-child{border-bottom:none}
.tl .t{flex:none;width:52px;font-weight:700;color:var(--sea);font-variant-numeric:tabular-nums;font-size:13.5px;padding-top:1px}
.tl .c b{font-weight:700}
.tl .c .note{color:var(--muted);font-size:13px;display:block;margin-top:2px}

/* ---------- 标签 ---------- */
.tag{display:inline-block;font-size:12px;border-radius:6px;padding:1px 8px;margin-right:6px;vertical-align:1px}
.tag.blue{background:#e0f2fe;color:#075985}
.tag.green{background:var(--green-bg);color:var(--green)}
.tag.amber{background:var(--amber-bg);color:var(--amber)}
.tag.rose{background:var(--rose-bg);color:var(--rose)}
.tag.violet{background:var(--violet-bg);color:var(--violet)}

/* ---------- 提示块 ---------- */
.callout{border-radius:12px;padding:13px 15px;font-size:13.5px;margin:12px 0}
.callout.warn{background:var(--amber-bg);border:1px solid var(--amber-line);color:#78350f}
.callout.ok{background:var(--green-bg);border:1px solid #a7f3d0;color:#065f46}
.callout.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.callout.bad{background:var(--rose-bg);border:1px solid #fecdd3;color:#881337}
.callout b{font-weight:800}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--card)}
th,td{padding:9px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap;background:#f8fafc}
tr:last-child td{border-bottom:none}
td .sm{color:var(--muted);font-size:12px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.scroll-x table{min-width:560px}
.scroll-x.narrow table{min-width:420px}
.scroll-x table th:first-child,.scroll-x table td:first-child{padding-left:14px}
.scroll-x table th:last-child,.scroll-x table td:last-child{padding-right:14px}

/* ---------- 小卡网格 ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.mini{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;display:block;transition:border-color .15s,transform .15s}
a.mini:hover{border-color:var(--sea2);transform:translateY(-1px)}
.mini .k{font-size:12px;color:var(--muted)}
.mini .v{font-size:16px;font-weight:800;margin-top:2px}
.mini .s{font-size:12px;color:var(--muted);margin-top:3px}
.mini .big{font-size:22px}

/* ---------- 入口卡（导航到各段） ---------- */
.entry{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;margin-bottom:12px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.entry:hover{border-color:var(--sea2);transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.08)}
.entry .ico{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;background:#e0f2fe}
.entry .ico.sg{background:#fee2e2}.entry .ico.hk{background:#ede9fe}
.entry .ico.jp{background:#ffe4e6}.entry .ico.cn{background:#fef3c7}
.entry .ico.kr{background:#dbeafe}.entry .ico.yd{background:#cffafe}
.entry .bd{flex:1;min-width:0}
.entry .tt{font-size:15.5px;font-weight:800}
.entry .dd{font-size:13px;color:var(--muted);margin-top:2px}
.entry .go{flex:none;align-self:center;color:var(--muted);font-size:18px}

/* ---------- 推荐度徽章 ---------- */
.badge{display:inline-block;font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
.badge.top{background:#dcfce7;color:#166534}
.badge.mid{background:#fef3c7;color:#92400e}
.badge.low{background:#fee2e2;color:#991b1b}

/* ---------- 决策框 ---------- */
.decide{border:1.5px solid var(--sea2);background:#f0f9ff;border-radius:16px;padding:16px 18px;margin-top:14px}
.decide h4{font-size:15px;color:#075985;margin-bottom:8px}

/* ---------- 列表 ---------- */
ul.plain,ol.plain{padding-left:20px;font-size:14px}
ul.plain li,ol.plain li{margin:6px 0}
ul.clean{list-style:none}
ul.clean li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
ul.clean li:last-child{border-bottom:none}
a.link{color:var(--sea2);word-break:break-all}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--sea);color:#fff;text-decoration:none;
  border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:600;margin-top:8px}
.btn.ghost{background:transparent;color:var(--sea);border:1px solid var(--sea)}

/* ---------- 页脚 ---------- */
footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.8}
footer a{color:var(--sea2)}

/* ---------- 回到顶部 ---------- */
.top-btn{position:fixed;right:16px;bottom:20px;width:40px;height:40px;border-radius:50%;background:var(--deep);color:#fff;
  display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 12px rgba(11,37,69,.35);font-size:16px;z-index:40}

/* ---------- 页内锚点行（非吸顶） ---------- */
.anchors{display:flex;gap:6px;overflow-x:auto;padding:0 0 6px;margin:0 0 6px;scrollbar-width:none}
.anchors::-webkit-scrollbar{display:none}
.anchors a{flex:none;font-size:12.5px;color:var(--sea);text-decoration:none;background:#e0f2fe;
  border-radius:999px;padding:5px 12px;white-space:nowrap}
.anchors a:hover{background:#bae6fd}

/* ---------- 占位（待补充） ---------- */
.placeholder{border:2px dashed var(--line);border-radius:16px;padding:28px 20px;text-align:center;color:var(--muted);font-size:14px;background:var(--card)}
