/* ============================================================
 * 乐游香山 · 一码游香山  移动导览（C端 H5 原型）
 * ============================================================ */
:root{
  --ink:#1b2c3e; --brick:#b5532e; --brick2:#c0563f; --gold:#c9a35b; --gold2:#d9bd86;
  --jade:#3f7a6d; --sky:#4f9bd9; --amber:#e0913f;
  --paper:#f6efe2; --paper2:#fffaf1; --card:#fff;
  --text:#26333f; --soft:#71808c; --line:rgba(27,44,62,.10);
  --shadow:0 6px 20px rgba(27,44,62,.10); --shadow-lg:0 12px 30px rgba(27,44,62,.16);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  background:#d9cdb8; color:var(--text); line-height:1.6; overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:"STSong","Songti SC","SimSun",serif;font-weight:700}
.serif{font-family:"STSong","Songti SC","SimSun",serif}
img{max-width:100%;display:block}

/* 手机框：移动满屏，桌面居中成手机样 */
.phone{
  max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper);position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.25);overflow:hidden;
}
.scroll{padding-bottom:calc(78px + var(--safe-b));min-height:100vh}

/* 顶栏 */
.mhead{
  position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--ink),#22384e);
  color:#fff;padding:14px 18px;display:flex;align-items:center;gap:10px;
}
.mhead .seal{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brick),var(--amber));display:grid;place-items:center;font-family:serif;font-weight:700;font-size:17px;border:1.5px solid var(--gold2)}
.mhead .t{font-family:serif;font-size:17px;font-weight:700}
.mhead .s{font-size:10.5px;color:var(--gold2);letter-spacing:1px}
.mhead .back{margin-left:auto;font-size:13px;color:#cdd8e3;cursor:pointer;display:none}

/* 页面切换 */
.page{display:none;animation:fade .35s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* HERO */
.hero{position:relative;padding:22px 18px 44px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#2a4a63,#1b2c3e 70%);}
.hero::after{content:"";position:absolute;right:-30px;bottom:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(201,163,91,.28),transparent 70%)}
.hero .badge{display:inline-block;font-size:11px;background:rgba(201,163,91,.25);color:var(--gold2);border:1px solid rgba(201,163,91,.4);padding:3px 10px;border-radius:20px}
.hero h1{font-size:27px;margin:10px 0 4px;letter-spacing:1px}
.hero .slg{font-size:12.5px;color:#cdd8e3}

/* 卡片通用 */
.sec{padding:16px 16px 0}
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:15px;border:1px solid var(--line)}
.ctitle{font-family:serif;font-size:16px;color:var(--ink);font-weight:700;margin:18px 4px 10px;display:flex;align-items:center;gap:8px}
.ctitle::before{content:"";width:13px;height:13px;border-radius:3px;background:var(--gold);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--gold)}
.ctitle .more{margin-left:auto;font-size:12px;color:var(--brick);font-weight:400;cursor:pointer}

/* 进度卡 */
.prog{background:linear-gradient(135deg,#fff,#fdf6ea);border-radius:16px;padding:16px;box-shadow:var(--shadow);border:1px solid var(--line);margin:-26px 16px 0;position:relative;z-index:5}
.prog .pt{display:flex;align-items:center;justify-content:space-between}
.prog .pl{font-family:serif;font-size:15px;font-weight:700;color:var(--ink)}
.prog .pv{font-family:serif;font-size:15px;color:var(--brick)}
.prog .pv b{font-size:24px}
.prog .bar{height:12px;background:var(--paper);border-radius:8px;overflow:hidden;margin-top:10px}
.prog .fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--gold),var(--brick));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.prog .hint{font-size:11.5px;color:var(--soft);margin-top:8px}

/* 快捷入口 */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qbtn{background:var(--card);border-radius:14px;padding:14px 8px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--line);cursor:pointer;transition:.15s}
.qbtn:active{transform:scale(.96)}
.qbtn .qi{font-size:26px}
.qbtn .qn{font-size:12px;font-weight:600;color:var(--ink);margin-top:5px}

/* 专线横滑 */
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{display:none}
.route-c{flex:0 0 78%;scroll-snap-align:start;border-radius:16px;padding:16px;color:#fff;position:relative;overflow:hidden;min-height:118px;display:flex;flex-direction:column}
.route-c .ri{font-size:26px}
.route-c h3{font-size:16px;margin:6px 0 3px}
.route-c .rs{font-size:11.5px;opacity:.92;margin-top:auto}
.route-c .rsell{font-size:11.5px;font-weight:700;margin-top:6px;background:rgba(255,255,255,.2);padding:4px 9px;border-radius:8px;align-self:flex-start}

/* 筛选 chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 10px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:12.5px;padding:7px 14px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--soft);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 实地模式控制条 */
.geobar{display:flex;align-items:center;gap:10px;padding:0 16px 12px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;color:var(--ink);font-weight:600}
.switch input{display:none}
.switch .track{width:38px;height:22px;border-radius:20px;background:#cfc4b2;position:relative;transition:.2s;flex:0 0 38px}
.switch .track::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked+.track{background:var(--brick)}
.switch input:checked+.track::after{transform:translateX(16px)}
.locbtn{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 13px;font-size:12.5px;font-family:inherit;cursor:pointer;color:var(--ink)}
.locbtn:active{transform:scale(.96)}
.locstatus{font-size:11.5px;color:var(--soft);flex:1 1 100%}
.dist{font-size:11px;color:#fff;background:var(--sky);border-radius:20px;padding:1px 8px;font-weight:700;white-space:nowrap}
.dist.near{background:var(--jade)}
.dist.far{background:#9aa7b5}

/* 详情地理行 */
.dgeo{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.dgeo .dnav-link{font-size:13px;color:var(--brick);font-weight:700;text-decoration:none;background:rgba(181,83,46,.08);border:1px solid rgba(181,83,46,.2);padding:7px 13px;border-radius:20px}
.dgeo .ddist{font-size:12.5px;color:var(--ink);font-weight:600}
.dgeo .ddist .m{color:var(--brick)}

/* 点位列表 */
.stoplist{padding:0 16px}
.scard{display:flex;gap:12px;background:var(--card);border-radius:14px;padding:12px;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:10px;cursor:pointer;transition:.15s;position:relative}
.scard:active{transform:scale(.98)}
.scard .num{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:linear-gradient(135deg,var(--ink),#2c4663);color:var(--gold2);display:grid;place-items:center;font-family:serif;font-size:18px;font-weight:700}
.scard .sinfo{min-width:0;flex:1}
.scard .snm{font-family:serif;font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px}
.scard .scat{font-size:10px;color:#fff;background:var(--jade);border-radius:5px;padding:1px 7px}
.scard .stag{font-size:11.5px;color:var(--soft);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.scard .stars{color:var(--gold);font-size:10px;margin-top:3px}
.scard .done{position:absolute;right:10px;top:10px;font-size:11px;color:#fff;background:var(--brick);border-radius:20px;padding:2px 8px;font-weight:700}
.scard.q15::after{content:"研";position:absolute;right:10px;bottom:10px;font-size:9px;color:var(--sky);border:1px solid var(--sky);border-radius:5px;padding:0 4px;font-weight:700}

/* 详情面板 */
.detail{position:fixed;inset:0;z-index:60;background:var(--paper);max-width:480px;margin:0 auto;display:none;flex-direction:column}
.detail.show{display:flex;animation:slideup .3s ease}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.detail .dhead{background:linear-gradient(135deg,#2a4a63,#1b2c3e);color:#fff;padding:16px 18px}
.detail .dclose{font-size:22px;cursor:pointer;float:right;line-height:1}
.detail .dnum{font-family:serif;font-size:13px;color:var(--gold2)}
.detail .dnm{font-family:serif;font-size:22px;font-weight:700;margin:3px 0}
.detail .dmeta{font-size:12px;color:#cdd8e3;display:flex;gap:10px;align-items:center}
.detail .dbody{flex:1;overflow-y:auto;padding:18px}
.detail .dscript{font-size:15px;line-height:2;color:var(--text);background:#fff;border-radius:14px;padding:16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.detail .dtag{font-size:12px;color:var(--brick);font-weight:600;margin-top:12px;background:rgba(181,83,46,.08);padding:8px 12px;border-radius:10px}
.detail .dfoot{padding:12px 16px calc(14px + var(--safe-b));display:flex;gap:10px;border-top:1px solid var(--line);background:var(--paper2)}
.dbtn{flex:1;border:none;border-radius:12px;padding:13px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.dbtn.tts{background:#fff;color:var(--ink);border:1px solid var(--line)}
.dbtn.tts.on{background:var(--jade);color:#fff}
.dbtn.checkin{background:var(--brick);color:#fff}
.dbtn.checkin.done{background:var(--jade)}
.detail .dnav{display:flex;justify-content:space-between;margin-top:14px;font-size:13px;color:var(--brick)}
.detail .dnav span{cursor:pointer;padding:6px 4px}
.detail .dnav span.disabled{color:var(--soft);opacity:.5}

/* 寻踪集章网格 */
.stampwrap{padding:0 16px}
.stamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.stamp{aspect-ratio:1;border-radius:14px;background:#fff;border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;cursor:pointer;position:relative;transition:.2s}
.stamp .si{font-size:24px;filter:grayscale(1);opacity:.45}
.stamp .snm{font-size:10.5px;color:var(--soft);margin-top:3px;line-height:1.2}
.stamp.got{border:2px solid var(--brick);background:linear-gradient(135deg,#fff,#fdeede)}
.stamp.got .si{filter:none;opacity:1}
.stamp.got .snm{color:var(--ink);font-weight:600}
.stamp.got::after{content:"✓";position:absolute;top:4px;right:6px;color:var(--brick);font-weight:700;font-size:13px}

/* 证书 */
.cert{margin:14px 16px;border-radius:16px;background:linear-gradient(160deg,#fffaf0,#f7ead2);border:2px solid var(--gold);box-shadow:var(--shadow-lg);padding:22px 18px;text-align:center;position:relative;overflow:hidden}
.cert .seal2{position:absolute;right:14px;top:14px;width:46px;height:46px;border-radius:50%;border:2px solid var(--brick);color:var(--brick);display:grid;place-items:center;font-family:serif;font-size:11px;font-weight:700;transform:rotate(-12deg);opacity:.85}
.cert .ct{font-size:13px;color:var(--brick);letter-spacing:3px}
.cert .cmain{font-family:serif;font-size:30px;font-weight:700;color:var(--ink);margin:14px 0}
.cert .cdesc{font-size:12.5px;color:var(--soft);line-height:1.8}
.cert .cname{font-family:serif;font-size:18px;color:var(--brick);font-weight:700;border-bottom:1.5px solid var(--gold);display:inline-block;padding:0 16px 2px;margin:6px 0}
.cert.locked{filter:grayscale(.6);opacity:.7}
.cert .lockmsg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.55);font-size:13px;color:var(--ink);font-weight:600;gap:6px}

/* 我的 */
.me-top{background:linear-gradient(135deg,#2a4a63,#1b2c3e);color:#fff;padding:24px 18px;text-align:center}
.me-top .av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--brick),var(--amber));display:grid;place-items:center;font-size:30px;margin:0 auto 8px;border:2px solid var(--gold2)}
.me-top .nick{font-family:serif;font-size:19px;font-weight:700}
.me-top .nick .edit{font-size:12px;color:var(--gold2);margin-left:6px;cursor:pointer}
.me-top .sub{font-size:12px;color:#cdd8e3;margin-top:3px}
.melist{padding:8px 16px}
.merow{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:14px;box-shadow:var(--shadow);border:1px solid var(--line);margin-top:10px;cursor:pointer}
.merow .mi{font-size:20px}.merow .mt{font-weight:600;font-size:14px;color:var(--ink)}
.merow .ma{margin-left:auto;color:var(--soft)}
.qrbox{text-align:center;padding:10px}
.qrbox img{width:180px;height:180px;margin:8px auto;border:8px solid #fff;border-radius:12px;box-shadow:var(--shadow)}

/* 底部导航 */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:30;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:flex;padding-bottom:var(--safe-b)}
.tab{flex:1;text-align:center;padding:9px 0 10px;cursor:pointer;color:var(--soft);transition:.15s}
.tab .ti{font-size:21px;line-height:1}
.tab .tn{font-size:10.5px;margin-top:2px}
.tab.on{color:var(--brick)}
.tab.on .ti{filter:drop-shadow(0 2px 4px rgba(181,83,46,.4))}

/* 通用 */
.intro{font-size:13px;color:var(--soft);line-height:1.85}
.pill{display:inline-block;background:rgba(181,83,46,.09);color:var(--brick);border:1px solid rgba(181,83,46,.2);border-radius:20px;padding:4px 11px;font-size:12px;margin:0 6px 8px 0}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:rgba(27,44,62,.94);color:#fff;padding:10px 18px;border-radius:24px;font-size:13px;z-index:80;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}
.spacer{height:8px}