/* 宁小蜂 · 随手拍 —— 蜂巢 · 琥珀 */
:root {
  --amber: #E89B12;
  --amber-deep: #C97F00;
  --amber-soft: #FDF1DA;
  --ink: #1C2A3F;
  --ink-2: #4A5668;
  --ink-3: #8A93A1;
  --line: #ECE6DC;
  --bg: #FAF7F2;
  --card: #FFFFFF;
  --red: #D93025;
  --orange: #EF6C00;
  --yellow: #C99A00;
  --blue: #1E6FD9;
  --green: #1E9E5A;
  --radius: 16px;
  --tabbar-h: 72px;
  --font: -apple-system, "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: #E9E4DB;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
h2, h3, p { margin: 0; }
.muted { color: var(--ink-3); font-weight: 400; font-size: 13px; }
svg { display: block; }

/* ---------- 设备外框 ---------- */
.device { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.app {
  position: relative; width: 390px; height: 844px; overflow: hidden;
  background: var(--bg); border-radius: 44px;
  box-shadow: 0 0 0 10px #1B1B1F, 0 30px 80px rgba(28, 42, 63, .35);
}
.app { --top: 44px; --chips-top: 92px; --me-top: 96px; }
@media (max-width: 500px) {
  .device { padding: 0; }
  .app { width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none;
    /* 真机里微信自带状态栏和胶囊，去掉模拟的那一套 */
    --top: 0px; --chips-top: 12px; --me-top: 20px; --tabbar-h: calc(64px + env(safe-area-inset-bottom)); }
  .statusbar, .capsule { display: none; }
  .tabbar { padding-bottom: env(safe-area-inset-bottom); }
  input, textarea { font-size: 16px !important; }
}

.statusbar {
  position: absolute; z-index: 700; top: 0; left: 0; right: 0; height: 44px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 28px; font-size: 14px; font-weight: 600; pointer-events: none;
}
.sb-icons { font-size: 12px; letter-spacing: .5px; }
.capsule {
  position: absolute; z-index: 700; top: 50px; right: 12px; height: 32px; width: 87px;
  border-radius: 16px; background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: space-around; padding: 0 10px;
  font-size: 14px; font-weight: 700; backdrop-filter: blur(8px);
}
.capsule i { width: 1px; height: 18px; background: rgba(0,0,0,.12); }
.cap-dot { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ink); }
.page-shoot.is-active ~ .statusbar, .app.dark-top .statusbar { color: var(--ink); }

/* ---------- 页面切换 ---------- */
.page { position: absolute; inset: 0 0 var(--tabbar-h) 0; display: none; }
.page.is-active { display: block; }

/* ---------- TAB 栏 ---------- */
.tabbar {
  position: absolute; z-index: 50; left: 0; right: 0; bottom: 0; height: var(--tabbar-h);
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; padding-top: 8px;
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-3); min-height: 48px; }
.tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tab.is-active { color: var(--ink); font-weight: 600; }
.tab.is-active svg { stroke: var(--amber-deep); fill: var(--amber-soft); }
.tab-shoot { margin-top: -26px; color: var(--ink); font-weight: 600; }
.shoot-btn {
  width: 64px; height: 64px; border-radius: 50%; background: var(--amber);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(232,155,18,.45), 0 0 0 5px #fff;
  transition: transform .15s;
}
.shoot-btn svg { width: 32px; height: 32px; stroke: #fff; stroke-width: 2; fill: none; }
.tab-shoot:active .shoot-btn { transform: scale(.94); }
.tab-shoot.is-active .shoot-btn { background: var(--amber-deep); }
/* 拍照页：快门接管主操作，底栏变暗、中间按钮收平 */
.app.on-shoot .tabbar { background: #0E141D; border-top-color: #0E141D; }
.app.on-shoot .tab { color: rgba(255,255,255,.55); }
.app.on-shoot .tab-shoot { margin-top: 0; color: var(--amber); }
.app.on-shoot .shoot-btn { width: 26px; height: 26px; background: none; box-shadow: none; }
.app.on-shoot .shoot-btn svg { width: 26px; height: 26px; stroke: var(--amber); }

/* ================= 首页 ================= */
.page-home::before, .page-shoot::before {
  content: ""; position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: var(--chips-top); pointer-events: none;
  background: linear-gradient(#FAF7F2 35%, rgba(250,247,242,0));
}
.page-home { --sheet-top: 74%; }
.home-map { position: absolute; z-index: 0; inset: 0 0 auto 0; height: calc(var(--sheet-top) + 46px); background: #EDEAE3; transition: height .3s ease-out; }

.map-ctrl { position: absolute; z-index: 20; right: 12px; top: calc(var(--sheet-top) - 116px); transition: top .3s ease-out; display: flex; flex-direction: column; gap: 10px; }
.ctrl-btn {
  width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(28,42,63,.15); transition: background .15s;
}
.ctrl-btn svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.8; fill: var(--ink); }
.ctrl-btn svg path, .ctrl-btn svg circle:last-child { fill: none; }
.ctrl-btn svg.ico { fill: none; }
.ctrl-btn.is-on { background: var(--ink); }
.ctrl-btn.is-on svg { stroke: #fff; }

/* 修复点图层：我修好的 = 绿色对勾，大家报的 = 灰色小圆点 */
.map-legend-fx {
  position: absolute; z-index: 20; top: var(--chips-top); left: 12px; height: 34px; padding: 0 12px; border-radius: 17px;
  background: rgba(255,255,255,.96); box-shadow: 0 2px 8px rgba(28,42,63,.14);
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.map-legend-fx[hidden] { display: none; }
.map-legend-fx span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend-fx b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rl-k { font-weight: 600; color: var(--ink); }
.rl-mine { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(30,158,90,.35); }
.rl-all { width: 7px; height: 7px; border-radius: 50%; background: #7A8696; opacity: .7; }
.fx-pin {
  width: 26px; height: 26px; border-radius: 50%; background: var(--green); border: 2px solid #fff; box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(28,42,63,.3); display: grid; place-items: center; cursor: pointer;
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1);
}
.fx-pin svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.8; }
.fx-pin.selected { transform: scale(1.3); }
.fx-who { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.fx-name { display: flex; align-items: center; gap: 8px; }
.fx-name .lvl { font-size: 11px; padding: 1px 7px; } .fx-name .lvl::before { width: 6px; height: 6px; }
.fx-thanks { font-size: 13px; color: var(--ink-2); background: var(--tint); border-radius: 10px; padding: 8px 10px; margin-top: 10px; }
.map-chips[hidden], .map-legend[hidden] { display: none; }
.map-legend {
  position: absolute; z-index: 20; left: 12px; top: calc(var(--sheet-top) - 40px); transition: top .3s ease-out;
  background: rgba(255,255,255,.9); border-radius: 10px; padding: 4px 10px;
  font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 5px;
}
.lg { width: 11px; height: 12px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display: inline-block; }
.lg-open { background: var(--amber); } .lg-closed { background: #A9AFB8; margin-left: 6px; }


.home-sheet {
  /* 参照高德：输入框悬浮在地图底边，地图从框后面渐隐到下方面板 */
  position: absolute; z-index: 25; left: 0; right: 0; top: var(--sheet-top); bottom: 0; transition: top .3s ease-out;
  background: linear-gradient(rgba(250,247,242,0) 0, rgba(250,247,242,.85) 30px, var(--bg) 56px);
  padding: 0 14px 12px; overflow-y: auto;
}
.searchbar {
  width: 100%; height: 52px; border-radius: 26px; background: #fff; border: 1.5px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; text-align: left;
  box-shadow: 0 2px 8px rgba(28,42,63,.05);
}
.searchbar .ic { width: 20px; height: 20px; stroke: var(--ink-3); stroke-width: 2; fill: none; flex: none; }
.sb-placeholder { flex: 1; color: var(--ink-3); font-size: 15px; }
.sb-mic { width: 40px; height: 40px; border-radius: 50%; background: var(--amber-soft); display: grid; place-items: center; flex: none; }
.sb-mic svg { width: 22px; height: 22px; stroke: var(--amber-deep); stroke-width: 2; fill: none; }

.chips { display: flex; gap: 8px; margin: 14px 0 4px; overflow-x: auto; scrollbar-width: none; }
.chip {
  flex: none; height: 36px; padding: 0 14px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line);
  font-size: 14px; color: var(--ink-2); transition: background .15s, border-color .15s;
}
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

  width: 100%; text-align: left; background: #fff; border-radius: 14px; padding: 12px 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1.5px solid transparent;
}
.pill { font-size: 12px; border-radius: 6px; padding: 1px 6px; background: #F1EEE8; color: var(--ink-2); }
.pill.open { background: #E3F4EA; color: var(--green); font-weight: 600; }
.pill.closed { background: #F1EEE8; color: var(--ink-3); }
.empty-tip { font-size: 14px; color: var(--ink-3); background: #fff; border-radius: 14px; padding: 14px; }

.bar { height: 6px; border-radius: 3px; background: #F1EEE8; overflow: hidden; margin: 6px 0 2px; }
.bar i { display: block; height: 100%; background: var(--amber); border-radius: 3px; }

/* 驿站详情弹层 */
.station-pop {
  position: absolute; z-index: 40; left: 10px; right: 10px; bottom: 36px;
  background: #fff; border-radius: 20px; padding: 18px 18px 16px; box-shadow: 0 10px 40px rgba(28,42,63,.25);
  animation: up .22s ease-out;
}
.sp-close { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; font-size: 22px; color: var(--ink-3); }
.sp-name { font-size: 18px; font-weight: 700; padding-right: 36px; }
.sp-row { font-size: 14px; color: var(--ink-2); margin-top: 6px; display: flex; gap: 8px; }
.sp-row b { color: var(--ink); font-weight: 600; flex: none; width: 4.2em; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-tags .pill { font-size: 13px; padding: 3px 8px; }
.sp-tags .pill.hl { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }
.sp-actions { display: flex; gap: 10px; margin-top: 14px; }
.sp-actions a, .sp-actions button { flex: 1; height: 48px; border-radius: 24px; display: grid; place-items: center; font-weight: 600; text-decoration: none; }
.sp-nav { background: var(--amber); color: #fff; }
.sp-ask { background: #F1EEE8; color: var(--ink); }
.sp-actions .sp-call { display: flex; align-items: center; justify-content: center; gap: 6px; background: #F1EEE8; color: var(--ink); }
.sp-call .ico { width: 18px; height: 18px; }

@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= 拍照页 ================= */
.page-shoot { background: #0E141D; }
.shoot-map-wrap { position: absolute; left: 0; right: 0; top: 0; height: 38%; }
.shoot-map { position: absolute; z-index: 0; inset: 0; }
.loc-label {
  position: absolute; z-index: 500; left: 12px; bottom: 30px; max-width: 70%;
  background: rgba(255,255,255,.95); border-radius: 10px; padding: 4px 10px; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loc-label small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }

.viewfinder {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(38% - 22px);
  border-radius: 26px 26px 0 0; overflow: hidden; background: #1A212C;
}
.viewfinder video, .vf-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewfinder video { display: none; }
.viewfinder.cam video { display: block; }
.viewfinder.cam .vf-scene { display: none; }
.vf-grid { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% + .5px), transparent calc(66.66% + .5px));
}
.vf-hint {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(14,20,29,.55); color: #fff; font-size: 14px; padding: 6px 14px; border-radius: 16px; white-space: nowrap;
  backdrop-filter: blur(6px);
}
.demo-switch {
  position: absolute; left: 50%; bottom: 126px; transform: translateX(-50%); width: max-content; white-space: nowrap;
  display: flex; gap: 4px; align-items: center; background: rgba(14,20,29,.55); border-radius: 18px; padding: 4px; backdrop-filter: blur(6px);
}
.ds-tag { font-size: 11px; color: var(--amber); padding: 0 6px 0 8px; font-weight: 700; }
.demo-switch button { height: 30px; padding: 0 11px; border-radius: 15px; color: rgba(255,255,255,.75); font-size: 13px; }
.demo-switch button.is-on { background: rgba(255,255,255,.95); color: var(--ink); font-weight: 600; }
.shutter {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 84px; height: 84px; border-radius: 50%; border: 5px solid rgba(255,255,255,.9);
  display: grid; place-items: center; background: rgba(255,255,255,.12);
}
.shutter i { width: 66px; height: 66px; border-radius: 50%; background: var(--amber); transition: transform .12s; }
.shutter:active i { transform: scale(.88); }
.flash { position: absolute; inset: 0; background: #fff; animation: flash .35s ease-out forwards; pointer-events: none; z-index: 5; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }

/* ---------- 上报流程 ---------- */
.flow { position: absolute; inset: 0; z-index: 30; }
.flow-dim { position: absolute; inset: 0; background: rgba(14,20,29,.55); }
.voice-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; background: #141B26; color: #fff;
  border-radius: 26px 26px 0 0; padding: 20px 20px 22px; display: flex; flex-direction: column; align-items: center;
  animation: up .25s ease-out;
}
.vs-thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }
.vs-title { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 10px; }
.vs-transcript { font-size: 20px; font-weight: 600; min-height: 60px; text-align: center; margin: 6px 0 4px; line-height: 1.45; }
.vs-transcript .ph { color: rgba(255,255,255,.4); font-weight: 400; }
.vs-transcript .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--amber); vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wave { display: flex; gap: 4px; align-items: center; height: 34px; margin: 4px 0 10px; }
.wave i { width: 4px; height: 6px; border-radius: 2px; background: var(--amber); opacity: .5; }
.wave.on i { animation: wv 0.9s ease-in-out infinite; opacity: 1; }
.wave.on i:nth-child(2n) { animation-delay: -.3s; } .wave.on i:nth-child(3n) { animation-delay: -.6s; } .wave.on i:nth-child(5n) { animation-delay: -.15s; }
@keyframes wv { 0%,100% { height: 6px; } 50% { height: 30px; } }
.mic-ring { position: relative; width: 96px; height: 96px; }
.mic-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 6; }
.ring-fg { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 0; }
.mic-core { position: absolute; inset: 14px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; }
.mic-core svg { width: 32px; height: 32px; stroke: #fff; stroke-width: 2; fill: none; transform: none; }
.ring-sec { position: absolute; right: -34px; top: 36px; font-size: 14px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.vs-actions { display: flex; gap: 12px; width: 100%; margin-top: 18px; }
.vs-actions button { flex: 1; }
.btn-amber, .btn-ghost, .btn-ghost-dark { height: 52px; border-radius: 26px; font-weight: 700; font-size: 16px; }
.btn-amber { background: var(--amber); color: #fff; }
.btn-amber.big { font-size: 18px; }
.btn-amber:active { background: var(--amber-deep); }
.btn-ghost { background: #F1EEE8; color: var(--ink); }
.btn-ghost-dark { background: rgba(255,255,255,.1); color: #fff; }

.judge { background: #fff; border-radius: 16px; overflow: hidden; }
.j-row { width: 100%; display: flex; align-items: center; min-height: 54px; padding: 0 14px; text-align: left; border-bottom: 1px solid var(--line); gap: 12px; }
.j-row:last-child { border-bottom: 0; }
.j-k { width: 5em; font-size: 14px; color: var(--ink-3); flex: none; }
.j-v { flex: 1; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
.j-v .addr { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-edit { font-size: 13px; color: var(--amber-deep); font-weight: 600; }
.lvl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 8px; color: #fff; }
.lvl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.9); }
.lvl.red { background: var(--red); } .lvl.orange { background: var(--orange); } .lvl.yellow { background: var(--yellow); } .lvl.blue { background: var(--blue); }
.j-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; background: #FBF9F5; border-bottom: 1px solid var(--line); }
.j-options button { height: 36px; padding: 0 12px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line); font-size: 14px; }
.j-options button.is-on { border-color: var(--amber); background: var(--amber-soft); font-weight: 600; }

.hive { width: 180px; height: 196px; position: relative; margin: 4px 0 6px; flex: none; }
.hive .cell { position: absolute; width: 54px; height: 62px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: #EDE6D8; }
.hive .cell.filled { background: var(--amber); }
.hive .cell.new { background: #EDE6D8; animation: fillcell .7s .25s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes fillcell { 0% { transform: scale(.4); background: var(--amber); } 100% { transform: scale(1); background: var(--amber); } }
.plus { font-size: 30px; font-weight: 800; color: var(--amber-deep); font-variant-numeric: tabular-nums; animation: rise .4s .15s ease-out both; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= 我的 ================= */
.page-me { overflow-y: auto; padding: var(--me-top) 16px 0; }
.me-head { display: flex; gap: 14px; align-items: center; }
.me-id { flex: 1; min-width: 0; }
.me-name { font-size: 20px; font-weight: 800; }
.me-title { font-size: 14px; color: var(--ink-2); }
.sec-title { font-size: 17px; margin: 22px 2px 10px; }
.history { display: flex; flex-direction: column; gap: 8px; }
.hi { background: #fff; border-radius: 16px; overflow: hidden; }
.hi-main { width: 100%; display: flex; gap: 12px; padding: 12px; text-align: left; align-items: center; }
.hi-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: none; background: #ddd; }
.hi-thumb img, .hi-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.hi-txt { flex: 1; min-width: 0; }
.hi-type { font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.hi-type .lvl { font-size: 11px; padding: 1px 7px; } .hi-type .lvl::before { width: 6px; height: 6px; }
.hi-loc { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 12px; flex: none; }
.status.s0, .status.s1 { background: #EEF2F8; color: var(--blue); }
.status.s2, .status.s3 { background: var(--amber-soft); color: var(--amber-deep); }
.status.s4 { background: #E3F4EA; color: var(--green); }
.hi-detail { padding: 0 14px 14px; display: none; }
.hi.open .hi-detail { display: block; }
.timeline { list-style: none; margin: 4px 0 0; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 0 0 12px 20px; font-size: 14px; color: var(--ink-3); }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #D9D3C7; }
.timeline li::after { content: ""; position: absolute; left: 4.5px; top: 18px; bottom: 0; width: 1px; background: #E2DCD0; }
.timeline li:last-child::after { display: none; }
.timeline li.done { color: var(--ink); }
.timeline li.done::before { background: var(--amber); }
.timeline time { color: var(--ink-3); font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.compare figure { margin: 0; }
.compare .ph { height: 96px; border-radius: 10px; overflow: hidden; }
.compare .ph svg { width: 100%; height: 100%; }
.compare figure { min-width: 0; }
.compare .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.station-pop .compare { margin-top: 10px; }
.compare figcaption { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 2px; }
.thanks { margin-top: 10px; background: var(--amber-soft); color: var(--amber-deep); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; }

/* ================= AI 客服 ================= */
.chat { position: absolute; inset: 0 0 var(--tabbar-h) 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; animation: up .2s ease-out; }
.chat[hidden] { display: none; }
.chat-head { height: calc(var(--top) + 48px); padding: var(--top) 16px 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--line); flex: none; }
.chat-back { width: 40px; height: 40px; font-size: 30px; line-height: 1; margin-left: -10px; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; font-size: 16px; line-height: 1.5; padding: 10px 13px; border-radius: 16px; }
.msg.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.msg.bot b { color: var(--ink); }
.msg .src { display: block; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.typing { display: flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.chat-quick { display: flex; gap: 8px; overflow-x: auto; padding: 6px 14px; flex: none; scrollbar-width: none; }
.chat-quick button { flex: none; height: 34px; padding: 0 12px; border-radius: 17px; background: #fff; border: 1.5px solid var(--line); font-size: 14px; color: var(--ink-2); }
.chat-input { display: flex; gap: 8px; padding: 8px 12px 10px; flex: none; }
.ci-mic { width: 46px; height: 46px; border-radius: 50%; background: var(--amber-soft); display: grid; place-items: center; flex: none; }
.ci-mic svg { width: 22px; height: 22px; stroke: var(--amber-deep); stroke-width: 2; fill: none; }
.ci-send { height: 46px; padding: 0 16px; border-radius: 23px; background: var(--amber); color: #fff; font-weight: 700; flex: none; }
.listening { position: absolute; inset: 0; background: rgba(14,20,29,.75); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 6px; }
.listening[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================= 头像 ================= */
.avatar { position: relative; width: 76px; height: 76px; flex: none; }
.avatar svg { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(28,42,63,.15); }

/* ================= 上报对话 ================= */
.rchat { inset: 0; z-index: 600; }
.rchat .chat-head { background: var(--bg); }
.sysmsg { align-self: center; font-size: 12px; color: var(--ink-3); background: #EFEAE1; border-radius: 10px; padding: 3px 10px; }
.msg.me.photo { padding: 4px; }
.msg.me.photo img { display: block; width: 168px; height: 126px; object-fit: cover; border-radius: 12px; }
.voice-row { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.voice-row .vbars { display: flex; gap: 2px; align-items: center; }
.voice-row .vbars i { width: 3px; border-radius: 2px; background: var(--amber); }
.voice-txt { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.15); font-size: 15px; color: rgba(255,255,255,.9); }
.msg.bot.wide { max-width: 92%; width: 92%; }
.rc-card { margin-top: 10px; }
.rc-card .judge { border: 1.5px solid var(--line); }
.rc-card .j-row { min-height: 48px; }
.rc-card .j-v { font-size: 16px; }
.rc-card.locked .j-edit { display: none; }
.rc-card.locked .j-row { cursor: default; }
.rc-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 10px; }
.rc-actions button { height: 46px; }
.rc-done { margin-top: 10px; text-align: center; font-size: 13px; color: var(--green); font-weight: 700; }
.succ-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 2px; }
.succ-card .hive { width: 108px; height: 118px; margin: 2px 0 0; }
.succ-card .hive .cell { width: 32px; height: 37px; }
.succ-card .plus { font-size: 26px; line-height: 1.2; }
.succ-card .plus small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.succ-card h3 { font-size: 18px; margin-top: 2px; }
.succ-card p { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.succ-card .rc-actions { width: 100%; grid-template-columns: 1fr 1fr; }
.progress-msg { display: flex; gap: 8px; align-items: flex-start; }
.progress-msg .status { margin-top: 1px; }

/* ================= 地图标点 ================= */
/* 驿站针 */
.st-pin { position: relative; width: 34px; height: 42px; transform-origin: 50% 95%; transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); cursor: pointer; }
.st-pin svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(28, 42, 63, .28)); }
.st-pin .pin-body { stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
.st-pin.open .pin-body { fill: url(#pinOpen); }
.st-pin.closed .pin-body { fill: url(#pinClosed); }
.st-pin .pin-icon { fill: #fff; }
.st-pin .pin-psy { fill: #E2557A; stroke: #fff; stroke-width: 1.8; }
.st-pin.closed { transform: scale(.8); }
.st-pin.closed svg { filter: drop-shadow(0 1px 2px rgba(28, 42, 63, .2)); }
.st-pin:hover { transform: scale(1.08); }
.st-pin.closed:hover { transform: scale(.9); }
.st-pin.selected { transform: scale(1.3); }
.pin-shadow { position: absolute; left: 50%; bottom: -1px; width: 12px; height: 4px; margin-left: -6px; border-radius: 50%; background: rgba(28, 42, 63, .35); filter: blur(1.5px); }
.pin-label {
  position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%) scale(.77); transform-origin: 50% 100%;
  display: none; white-space: nowrap; align-items: center; gap: 6px;
  background: var(--ink); color: rgba(255, 255, 255, .75); font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 12px; box-shadow: 0 4px 12px rgba(28, 42, 63, .3);
}
.pin-label b { color: #fff; font-size: 13px; }
.pin-label::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.st-pin.selected .pin-label { display: flex; animation: labelIn .2s ease-out; }
.st-pin.selected .pin-shadow { width: 16px; margin-left: -8px; }
@keyframes labelIn { from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(.77); } }

/* 我的位置 */
.me-loc { position: relative; width: 64px; height: 64px; pointer-events: none; }
.me-cone {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -64px 0 0 -32px;
  transform-origin: 50% 100%; transform: rotate(28deg);
  background: radial-gradient(circle at 50% 100%, rgba(30, 111, 217, .38), rgba(30, 111, 217, 0) 70%);
  clip-path: polygon(50% 100%, 18% 0, 82% 0);
}
.me-halo { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(30, 111, 217, .35); animation: halo 2.2s ease-out infinite; }
.me-core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: linear-gradient(#3B8BF0, #1E6FD9); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(28, 42, 63, .35); }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* 拍照页中心针 */
.center-pin { position: absolute; z-index: 500; left: 50%; top: 50%; width: 36px; height: 47px; margin: -47px 0 0 -18px; pointer-events: none; }

.lg-psy { width: 9px; height: 9px; border-radius: 50%; background: #E2557A; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); display: inline-block; margin-left: 6px; }

/* ================= 最近驿站（紧凑） ================= */
.nr-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nr-dot.open { background: var(--green); box-shadow: 0 0 0 3px #E3F4EA; }
.nr-dot.closed { background: #B5BBC4; }
.nr-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nr-psy { width: 7px; height: 7px; border-radius: 50%; background: #E2557A; flex: none; }
.nr-dist { width: 52px; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }

/* ================= 天气情境卡 ================= */
.wx { margin-top: 12px; border-radius: 16px; padding: 12px 14px; position: relative; }
.wx-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 24px; display: grid; place-items: center; background: rgba(255,255,255,.7); flex: none; }
.wx-demo { position: absolute; right: 10px; top: 10px; font-size: 10px; font-weight: 700; color: var(--ink-3); border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; }
.wx-top { display: flex; gap: 10px; align-items: center; }
.wx-head { display: flex; flex-direction: column; min-width: 0; }
.wx-head b { font-size: 18px; line-height: 1.3; }
.wx-head span { font-size: 13px; color: var(--ink-2); }
.wx-lead { font-size: 14px; font-weight: 700; margin-top: 10px; }
.wx-st { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.wx-st button { flex: none; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.85); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wx-st button b { font-size: 14px; color: var(--ink); max-width: 7.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-tip { font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.wx-hot { background: linear-gradient(135deg, #FFE7C2, #FFD3B0); }
.wx-hot .wx-head b { color: #B54708; }
.wx-cold { background: linear-gradient(135deg, #E3EEFB, #D3E3F8); }
.wx-cold .wx-head b { color: #1E5BB5; }
.wx-rain { background: linear-gradient(135deg, #E4E9F0, #D6DEE8); }
.wx-rain .wx-head b { color: var(--ink); }

/* ================= 驿站门面照片 ================= */
.sp-main { display: flex; gap: 12px; align-items: flex-start; }
.sp-info { flex: 1; min-width: 0; }
.sp-info .sp-row { flex-wrap: wrap; }
.sp-info .sp-row b { width: 2.6em; }
.sp-photo { position: relative; margin: 8px 0 0; width: 108px; height: 96px; flex: none; border-radius: 12px; overflow: hidden; background: #EFEAE1; box-shadow: 0 0 0 1px rgba(28,42,63,.06); }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-photo figcaption { position: absolute; right: 5px; bottom: 5px; font-size: 10px; color: #fff; background: rgba(14,20,29,.55); padding: 0 5px; border-radius: 5px; }
.sp-photo.empty { display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--ink-3); border: 1.5px dashed #D9D2C5; box-shadow: none; background: #FBF9F5; }

/* ================= 积分 + 季节活动细条 ================= */
.strip { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 12px; }
.strip-pts { display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: rgba(255,255,255,.7); }
.strip-season { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 12px 30px 12px 14px; border-radius: 16px; background: #fff; min-width: 0; }
.strip-season:active, .strip-pts:active { transform: scale(.98); }
.sp-k { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-pts .sp-k { color: rgba(255,255,255,.6); }
.sp-k em { font-style: normal; font-weight: 800; color: var(--amber-deep); margin-left: 6px; }
.sp-k strong { color: var(--ink); font-size: 15px; }
.sp-v { font-size: 13px; white-space: nowrap; }
.sp-v b { font-size: 24px; color: var(--amber); font-variant-numeric: tabular-nums; margin-right: 4px; }
.strip-season .bar { height: 7px; margin: 7px 0 5px; }
.sp-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sp-more { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-3); }

/* ================= 行动详情 ================= */
.action-page { position: absolute; inset: 0 0 var(--tabbar-h) 0; z-index: 46; background: var(--bg); display: flex; flex-direction: column; animation: up .2s ease-out; }
.ap-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.ap-hero { background: linear-gradient(150deg, #1C2A3F, #2B3F5C); color: #fff; border-radius: 20px; padding: 18px 18px 16px; }
.ap-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.ap-status.live { background: var(--amber); color: #fff; }
.ap-hero h2 { font-size: 21px; margin-top: 8px; }
.ap-period { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 2px; }
.ap-num { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.ap-num b { font-size: 30px; color: var(--amber); letter-spacing: -.5px; }
.ap-num span { margin-left: auto; font-size: 18px; font-weight: 800; color: #fff; }
.bar.big { height: 10px; border-radius: 5px; background: rgba(255,255,255,.15); margin-top: 6px; }
.ap-people { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 8px; }
.ap-card { background: #fff; border-radius: 16px; padding: 14px 16px; margin-top: 10px; }
.ap-card p { font-size: 15px; line-height: 1.55; margin-bottom: 10px; }
.ap-card p:last-child { margin-bottom: 0; }
.ap-k { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.ap-reward { background: var(--amber-soft); }
.ap-reward p { font-weight: 700; color: var(--amber-deep); }
.ap-street { display: grid; grid-template-columns: 6.2em 1fr 3em; white-space: nowrap; align-items: center; gap: 10px; font-size: 14px; margin-top: 8px; }
.ap-street .bar { margin: 0; }
.ap-street b { text-align: right; font-variant-numeric: tabular-nums; }
.ap-go { width: 100%; margin-top: 14px; }
.ap-more-title { font-size: 16px; margin: 22px 2px 8px; }
.ap-more { background: #fff; border-radius: 16px; overflow: hidden; }
.ap-mini { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.ap-mini:last-child { border-bottom: 0; }
.am-ic { width: 40px; height: 40px; border-radius: 12px; background: #F4F1EB; display: grid; place-items: center; font-size: 20px; flex: none; }
.am-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.am-txt b { font-size: 15px; }
.am-txt span { font-size: 12px; color: var(--ink-3); }
.am-go { font-size: 22px; color: var(--ink-3); }

/* ================= AI 助手入口 ================= */
.askbar {
  width: 100%; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 9px; text-align: left;
  background: #fff; border-radius: 30px; border: 0;
  box-shadow: 0 8px 28px rgba(28, 42, 63, .16), 0 1px 3px rgba(28, 42, 63, .08);
}
.askbar:active { box-shadow: 0 4px 16px rgba(28, 42, 63, .18), 0 0 0 2px var(--amber); }
.ask-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--amber-soft); display: grid; place-items: center; flex: none; }
.ask-ava svg { width: 32px; height: 32px; }
.ask-txt { flex: 1; min-width: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; font-size: 16px; }
.ask-k { color: var(--ink-2); font-weight: 600; flex: none; }
.ask-q { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; transition: opacity .25s, transform .25s; }
.ask-q.out { opacity: 0; transform: translateY(-6px); }

/* ================= 地图浮层筛选 + 最近一个驿站 ================= */
.map-chips { position: absolute; z-index: 20; top: var(--chips-top); left: 0; right: 0; margin: 0; padding: 0 12px; }
.map-chips .chip { height: 34px; background: rgba(255,255,255,.96); border-color: transparent; box-shadow: 0 2px 8px rgba(28,42,63,.14); font-weight: 600; }
.map-chips .chip.is-on { background: var(--ink); color: #fff; }
.near-one { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; margin-top: 10px; background: #fff; border-radius: 14px; text-align: left; }
.no-k { font-size: 12px; color: var(--ink-3); flex: none; }
.near-one .nr-dist { margin-left: auto; }
.no-go { font-size: 20px; color: var(--ink-3); margin-left: -2px; }

/* ================= 我的鼓楼足迹（参照高德足迹卡） ================= */
.foot-card {
  position: relative; margin-top: 16px; height: 176px; border-radius: 22px; overflow: hidden; color: #fff;
  padding: 16px 18px 14px; display: flex; flex-direction: column;
  background:
    linear-gradient(100deg, rgba(14,20,29,.82) 0%, rgba(14,20,29,.5) 45%, rgba(14,20,29,.08) 80%),
    linear-gradient(0deg, rgba(14,20,29,.55) 0%, rgba(14,20,29,0) 45%),
    url("../assets/me/fuzimiao.jpg") center 40% / cover;
  box-shadow: 0 10px 28px rgba(28,42,63,.22);
}
.fc-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); }
.fc-title svg { width: 20px; height: 20px; fill: var(--amber); }
.fc-hero { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.fc-hero b { font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: #FFD27A; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.fc-hero span { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.9); }
.fc-stats { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; }
.fc-stats b { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; margin-left: 2px; }
.fc-stats i { width: 1px; height: 14px; background: rgba(255,255,255,.35); }
.fc-pill { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #E5484D; border-radius: 9px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }
.fc-pending { display: block; position: absolute; left: 18px; bottom: 44px; font-style: normal; font-size: 11px; font-weight: 700; color: #1C2A3F; background: #FFD27A; border-radius: 8px; padding: 1px 7px; }
.fc-place { position: absolute; right: 12px; top: 14px; font-size: 11px; color: rgba(255,255,255,.85); background: rgba(14,20,29,.35); border-radius: 10px; padding: 2px 8px; backdrop-filter: blur(4px); }

/* ================= 我的 · 图标入口 ================= */
.me-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; padding: 14px 4px 10px; background: #fff; border-radius: 18px; }
.me-grid button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); min-height: 64px; }
.me-grid svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.me-grid svg .ac { fill: var(--amber-soft); stroke: var(--amber-deep); }
.me-grid svg .dash { stroke: var(--amber-deep); }
.me-grid button:active svg { transform: scale(.92); }
.badge { position: absolute; top: -4px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center; border: 2px solid #fff; box-sizing: content-box; }
.badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: -1px; left: calc(50% + 12px); }

/* ================= 骑手任务 ================= */
.task-card { margin-top: 12px; background: #fff; border-radius: 18px; padding: 14px 0 10px; }
.tc-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.tc-head h2 { font-size: 17px; }
.tc-head button { font-size: 13px; color: var(--ink-3); }
.tc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tc-track::-webkit-scrollbar { display: none; }
.tc-item { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.tc-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-deep); display: grid; place-items: center; font-size: 18px; flex: none; }
.tc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-txt b em { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 13px; }
.tc-txt span { font-size: 13px; color: var(--amber-deep); font-weight: 600; }
.tc-go { flex: none; height: 36px; padding: 0 14px; border-radius: 18px; background: #F4F1EB; font-size: 14px; font-weight: 700; }
.tc-dots { display: flex; justify-content: center; gap: 5px; padding-top: 6px; }
.tc-dots i { width: 5px; height: 5px; border-radius: 3px; background: #DDD6CA; transition: width .2s; }
.tc-dots i.on { width: 14px; background: var(--ink-3); }

/* ================= 二级页 ================= */
.sub-balance { display: flex; align-items: baseline; gap: 8px; background: var(--ink); color: rgba(255,255,255,.7); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; font-size: 13px; }
.sub-balance b { font-size: 28px; color: var(--amber); font-variant-numeric: tabular-nums; }
.sub-balance em { font-style: normal; font-size: 12px; font-weight: 700; color: #1C2A3F; background: #FFD27A; border-radius: 8px; padding: 1px 7px; margin-left: auto; }
.rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rw { text-align: left; background: #fff; border-radius: 14px; padding: 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; }
.sub-note { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 12px; }
.sub-note.top { text-align: left; margin: 0 2px 8px; }
.coupons { display: flex; flex-direction: column; gap: 8px; }
.rules { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.rules td { padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.rules td:last-child { text-align: right; font-weight: 800; color: var(--amber-deep); font-variant-numeric: tabular-nums; }
.rules .lvl { font-size: 11px; padding: 1px 7px; }
.rules .lvl::before { width: 5px; height: 5px; }

/* ================= 兑换码 ================= */
.code-sheet { position: absolute; inset: 0; z-index: 650; display: grid; place-items: center; }
.cs-dim { position: absolute; inset: 0; background: rgba(14,20,29,.55); }
.cs-card { position: relative; width: 300px; background: #fff; border-radius: 22px; padding: 20px 20px 18px; text-align: center; animation: up .22s ease-out; }
.cc-head { font-size: 12px; color: var(--green); font-weight: 700; }
.cc-name { font-size: 18px; font-weight: 800; margin-top: 2px; }
.cc-qr { width: 176px; height: 176px; margin: 12px auto 6px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--line); }
.cc-qr svg { width: 100%; height: 100%; }
.cc-code { font-size: 20px; font-weight: 800; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.cc-tip { font-size: 12px; color: var(--ink-3); margin: 6px 0 14px; line-height: 1.6; }
.cs-card .btn-amber { width: 100%; }

/* ================= 现代化：统一图标与卡片 ================= */
:root {
  --tint: #F3F0EA;
  --shadow-card: 0 0 0 1px rgba(28,42,63,.04), 0 1px 2px rgba(28,42,63,.04), 0 4px 12px rgba(28,42,63,.04);
}
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-tile { width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--ink); display: grid; place-items: center; flex: none; }
.ico-tile .ico { width: 22px; height: 22px; }
.ico-tile.sm { width: 28px; height: 28px; border-radius: 9px; }
.ico-tile.sm .ico { width: 16px; height: 16px; }
button, .rw-btn, .tk-show { transition-property: transform, background-color, color, box-shadow; transition-duration: .15s; transition-timing-function: ease-out; }
.me-grid button:active, .rw-btn:active, .tk-show:active, .tc-go:active, .strip-pts:active, .strip-season:active, .ap-mini:active, 
/* 我的 · 图标入口 */
.me-grid { box-shadow: var(--shadow-card); }
.me-grid .ico { width: 26px; height: 26px; stroke-width: 1.6; color: var(--ink); }
.me-grid button:active svg { transform: none; }
.fc-place { display: inline-flex; align-items: center; gap: 3px; }
.fc-place .ico { width: 12px; height: 12px; stroke-width: 2; }

/* 骑手任务 */
.task-card { box-shadow: var(--shadow-card); }
.tc-head button { display: inline-flex; align-items: center; }
.tc-head .ico { width: 14px; height: 14px; }
.tc-txt span { color: var(--ink-2); font-weight: 500; }
.tc-go { background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; height: 32px; }

/* 积分兑换 */
.sub-balance { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink-3); box-shadow: var(--shadow-card); padding: 16px; border-radius: 18px; }
.sub-balance > div { display: flex; flex-direction: column; }
.sub-balance span { font-size: 12px; }
.sub-balance b { font-size: 30px; line-height: 1.1; color: var(--ink); letter-spacing: -.5px; }
.sub-balance em { margin-left: 0; align-self: flex-end; margin-bottom: 4px; background: var(--amber-soft); color: var(--amber-deep); }
.sub-balance button { margin-left: auto; display: inline-flex; align-items: center; font-size: 13px; color: var(--ink-3); }
.sub-balance button .ico { width: 14px; height: 14px; }
.rewards { gap: 10px; }
.rw { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 18px; box-shadow: var(--shadow-card); }
.rw .ico-tile { margin-bottom: 8px; }
.rw > b { font-size: 15px; }
.rw small { font-size: 12px; color: var(--ink-3); line-height: 1.4; min-height: 2.8em; }
.rw-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rw-cost { font-size: 12px; color: var(--ink-3); }
.rw-cost b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 1px; }
.rw-btn { height: 30px; padding: 0 14px; border-radius: 15px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.rw-lack { font-size: 12px; color: var(--ink-3); }

/* 卡券：票券样式 */
.coupons { gap: 10px; }
.tk { display: grid; grid-template-columns: 1fr auto; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); }
.tk-main { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 14px; min-width: 0; }
.tk-txt { display: flex; flex-direction: column; min-width: 0; }
.tk-txt b { font-size: 16px; display: flex; align-items: baseline; gap: 6px; }
.tk-txt b em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--tint); border-radius: 6px; padding: 0 6px; }
.tk-txt > span { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk-soon { font-style: normal; font-size: 11px; font-weight: 600; color: #C2410C; background: #FFF1E6; border-radius: 5px; padding: 0 5px; }
.tk-side { position: relative; display: grid; place-items: center; padding: 0 14px; border-left: 1.5px dashed #E4DED3; }
.tk-side::before, .tk-side::after { content: ""; position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); }
.tk-side::before { top: -7px; } .tk-side::after { bottom: -7px; }
.tk-show { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--tint); color: var(--ink); font-size: 13px; font-weight: 600; }
.tk-show .ico { width: 15px; height: 15px; }

/* 兑换码 */
.cc-name { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* 常去驿站 / 记录 / 规则卡片 */

/* 行动详情 */
.ap-hero h2 { display: flex; align-items: center; gap: 10px; }
.ap-ico { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.ap-ico .ico { width: 20px; height: 20px; color: var(--amber); }
.am-go { display: grid; color: var(--ink-3); }
.am-go .ico { width: 18px; height: 18px; }

/* 天气 */
.wx-ic { background: rgba(255,255,255,.75); }
.wx-ic .ico { width: 24px; height: 24px; }
.wx-hot .wx-ic { color: #C2410C; } .wx-cold .wx-ic { color: #1E5BB5; } .wx-rain .wx-ic { color: var(--ink-2); }

/* 上报对话 */
.sysmsg { display: inline-flex; align-items: center; gap: 4px; }
.sysmsg .ico { width: 12px; height: 12px; stroke-width: 2; }
.rc-done { display: flex; align-items: center; justify-content: center; gap: 4px; }
.rc-done .ico { width: 16px; height: 16px; stroke-width: 2.2; }

/* ================= 小蜂助手（现代 AI 对话） ================= */
.ai-head { gap: 10px; }
.ah-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--amber-soft); display: grid; place-items: center; flex: none; }
.ah-ava svg { width: 26px; height: 26px; }
.ah-t { display: flex; flex-direction: column; line-height: 1.25; }
.ah-t b { font-size: 16px; }
.ah-t small { font-size: 11px; font-weight: 400; color: var(--ink-3); }

#chat .chat-body { padding: 16px 16px 8px; gap: 16px; }
#chat .msg { max-width: none; padding: 0; border-radius: 0; font-size: 15.5px; line-height: 1.6; }
#chat .msg.me { align-self: flex-end; max-width: 78%; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 18px 18px 6px 18px; }
#chat .msg.bot { align-self: stretch; background: none; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.b-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--amber-soft); display: grid; place-items: center; }
.b-ava svg { width: 21px; height: 21px; }
.b-body { min-width: 0; padding-top: 2px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.b-body p { margin: 0; }
.b-body b { font-weight: 700; }
#chat .msg.is-typing .typing { padding: 8px 0 0; }

/* 欢迎区 */
.welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 4px 8px; }
.w-ava { width: 64px; height: 64px; border-radius: 22px; background: var(--amber-soft); display: grid; place-items: center; }
.w-ava svg { width: 46px; height: 46px; }
.welcome h3 { font-size: 22px; margin-top: 14px; }
.welcome p { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.w-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.w-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); text-align: left; }
.w-grid button .ico-tile { margin-bottom: 8px; }
.w-grid button b { font-size: 14px; }
.w-grid button > span:last-child { font-size: 12px; color: var(--ink-3); }
.w-grid button:active { transform: scale(.96); }

/* 驿站列表 */
.ans-list { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }
.ans-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.ans-row:last-child { border-bottom: 0; }
.ans-row:active { background: var(--tint); }
.ar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ar-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-txt span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-dist { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-go { width: 16px; height: 16px; color: var(--ink-3); }

/* 步骤 */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: flex; flex-direction: column; }
.steps li { counter-increment: st; position: relative; padding: 0 0 12px 34px; display: flex; flex-direction: column; line-height: 1.5; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.steps li::after { content: ""; position: absolute; left: 10.5px; top: 27px; bottom: 3px; width: 1px; background: var(--line); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps b { font-size: 15px; }
.steps span { font-size: 14px; color: var(--ink-2); }

/* 热线 */
.tels { display: flex; flex-wrap: wrap; gap: 8px; }
.tel { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); }
.tel .ico { width: 16px; height: 16px; color: var(--green); }
.tel b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tel span { font-size: 12px; color: var(--ink-3); }
.tel:active { transform: scale(.96); }

/* 信息条 */
.infos { display: flex; flex-direction: column; gap: 8px; }
.infos div { background: #fff; border-radius: 14px; padding: 11px 14px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.infos b { font-size: 15px; }
.infos span { font-size: 13px; color: var(--ink-3); }

#chat .src { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: var(--ink-3); }
#chat .src .ico { width: 13px; height: 13px; }
.ans-act { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.ans-act .ico { width: 18px; height: 18px; }

/* 危机兜底 */
#chat .msg#chat .msg.crisis .b-body { background: #FFF4F2; border-radius: 16px; padding: 12px 14px; }
.crisis-btns { display: flex; flex-direction: column; gap: 8px; }
.crisis-btns a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 23px; font-weight: 700; text-decoration: none; }
.crisis-btns .ico { width: 18px; height: 18px; }
.cr-main { background: var(--red); color: #fff; }
.cr-alt { background: #fff; color: var(--red); box-shadow: inset 0 0 0 1.5px #F3C3BE; }

/* 快捷问题 + 输入框 */
#chat .chat-quick { padding: 4px 14px 8px; }
#chat .chat-quick button { height: 32px; border: 0; background: #fff; box-shadow: var(--shadow-card); font-size: 13px; color: var(--ink-2); }
.ai-input { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 6px; background: #fff; border-radius: 28px; box-shadow: 0 6px 24px rgba(28,42,63,.12), 0 1px 3px rgba(28,42,63,.08); }
.ai-input input { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--ink); }
.ai-input input::placeholder { color: var(--ink-3); }
.ai-mic, .ai-send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ai-mic { background: var(--tint); color: var(--ink); }
.ai-send { background: var(--amber); color: #fff; }
.ai-send .ico { stroke-width: 2.2; }
.ai-mic:active, .ai-send:active { transform: scale(.96); }

/* 小蜂标志：自带六边形底，不再套圆形底色 */
.ask-ava, .ah-ava, .b-ava, .w-ava { background: none; border-radius: 0; }
.ask-ava { width: 42px; height: 42px; }
.ask-ava svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 4px rgba(224,143,0,.25)); }
.ah-ava svg { width: 32px; height: 32px; }
.b-ava svg { width: 26px; height: 26px; }
.w-ava { width: 72px; height: 72px; }
.w-ava svg { width: 68px; height: 68px; filter: drop-shadow(0 6px 14px rgba(224,143,0,.3)); }

/* ================= 精修：字重、导航、按钮、留白 ================= */
.sec-title, .tc-head h2, .ap-more-title { font-weight: 600; }
.me-name { font-weight: 650; }
.ap-hero h2, .welcome h3, .sp-name { font-weight: 600; }
.fc-hero b { font-weight: 700; }
.btn-amber, .btn-ghost, .btn-ghost-dark { font-weight: 600; }
.btn-amber.big { font-size: 17px; }

/* 导航栏：标题居中、返回键用图标，贴近小程序原生导航 */
.chat-head { position: relative; justify-content: center; font-weight: 600; font-size: 17px; }
.chat-head .chat-back { position: absolute; left: 4px; bottom: 2px; width: 44px; height: 44px; margin: 0; display: grid; place-items: center; color: var(--ink); }
.chat-back .ico { width: 24px; height: 24px; stroke-width: 2; }
.ai-head { justify-content: flex-start; padding-left: 52px; }

/* 二级页底部给悬浮拍照键让位 */
.ap-body { padding-bottom: 56px; }

/* 驿站标签 */
.sp-tags .pill { background: var(--tint); color: var(--ink-2); font-size: 12.5px; padding: 3px 9px; border-radius: 8px; }
.sp-tags .pill.hl { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }

/* 语音倒计时放到圆环下方 */
.ring-sec { right: auto; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: 12px; }
.ring-sec::after { content: "″"; }
.vs-actions { margin-top: 30px; }

/* 天气卡：去渐变，用浅色纯底 */
.wx-hot { background: #FFF2E3; box-shadow: inset 0 0 0 1px #FBE1C3; }
.wx-cold { background: #EDF3FC; box-shadow: inset 0 0 0 1px #D7E4F7; }
.wx-rain { background: #EFF2F6; box-shadow: inset 0 0 0 1px #DEE4EC; }
.wx-head b { font-weight: 650; }

/* 奖励提示：正文不用琥珀粗体 */
.ap-reward .ap-k { color: var(--amber-deep); }
.ap-reward p { font-weight: 500; color: var(--ink); }

/* 足迹卡"待点亮"去掉刺眼红 */
.fc-pill { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

.map-legend { font-size: 11px; padding: 3px 9px; gap: 4px; }
.avatar svg { box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(28,42,63,.1); }

/* 上报对话：和小蜂助手统一成"头像 + 正文" */
#rchat .chat-body { padding: 16px 16px 8px; gap: 14px; }
#rchat .msg.bot { max-width: none; align-self: stretch; background: none; padding: 0; border-radius: 0; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.6; }
#rchat .msg.bot.wide { width: auto; }
#rchat .msg.is-typing .typing { padding: 8px 0 0; }
#rchat .rc-card { margin-top: 0; }
#rchat .rc-card .judge { box-shadow: var(--shadow-card); border: 0; }
.succ-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px 16px 16px; }
.succ-card h3 { font-weight: 600; }
.succ-card .plus { color: var(--ink); }

/* ================= 精修 2：标签、状态、对话、拍照页 ================= */
/* 紧急程度：实心色块改为浅底 + 色点，信息不变、视觉降噪 */
.lvl { gap: 5px; font-size: 13px; font-weight: 600; padding: 2px 9px 2px 8px; border-radius: 7px; }
.lvl::before { width: 6px; height: 6px; }
.lvl.red { background: #FDECEA; color: #C5281C; } .lvl.red::before { background: #D93025; }
.lvl.orange { background: #FFF0E3; color: #C25400; } .lvl.orange::before { background: #EF6C00; }
.lvl.yellow { background: #FBF3D9; color: #8A6A00; } .lvl.yellow::before { background: #C99A00; }
.lvl.blue { background: #E8F0FC; color: #1A5BB8; } .lvl.blue::before { background: #1E6FD9; }
.status { font-weight: 600; font-size: 12.5px; padding: 3px 9px; border-radius: 8px; }
.ap-status, .ap-status.live { font-weight: 600; border-radius: 7px; }

/* 判定卡 */
.j-k { font-size: 13.5px; }
.j-v { font-size: 16px; font-weight: 600; }
.j-edit { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.j-options button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }

/* 数字字重统一到 700 */
.mc-num, .ap-num b, .sp-v b, .rw-cost b, .sub-balance b, .plus, .cc-code, .fc-stats b { font-weight: 700; }

/* 上报对话：用户气泡和小蜂助手一致 */
#rchat .msg.me { max-width: 78%; border-radius: 18px 18px 6px 18px; background: var(--ink); }
#rchat .msg.me.photo { padding: 4px; border-radius: 18px 18px 6px 18px; }
#rchat .msg.me.photo img { border-radius: 14px 14px 4px 14px; width: 188px; height: 140px; }
.voice-row { font-weight: 600; font-size: 14px; }
.voice-txt { font-size: 15px; line-height: 1.55; }
.rc-actions button { height: 46px; font-size: 15px; }
.rc-done { color: var(--ink-3); font-weight: 500; }
.rc-done .ico { color: var(--green); }
.progress-msg { align-items: center; font-size: 14px; color: var(--ink-2); }

/* 成功卡：蜂巢收小，层级更清楚 */
.succ-card .hive { transform: scale(.8); margin: -6px 0 -10px; }
.succ-card .plus { font-size: 24px; animation: none; }
.succ-card .plus small { font-weight: 500; }
.succ-card p { color: var(--ink-3); font-size: 13px; }

/* 拍照页：演示切换降级为角落小控件 */
.demo-switch { bottom: auto; top: 58px; left: auto; right: 12px; transform: none; padding: 3px; gap: 2px; background: rgba(14,20,29,.45); }
.ds-tag { color: rgba(255,255,255,.55); font-weight: 600; font-size: 10px; padding: 0 4px 0 6px; }
.demo-switch button { height: 24px; padding: 0 8px; font-size: 12px; }
.vf-hint { font-size: 13px; padding: 5px 12px; }
.loc-label { font-weight: 600; }

/* 首页与弹层按钮 */
.sp-actions a, .sp-actions button { font-weight: 600; }
.sp-nav { background: var(--ink); }
.sp-name { font-size: 17px; }
.strip-pts .sp-v b { font-size: 22px; }

/* ================= 交付：相册、打字、引导、演示面板 ================= */
.toast { top: calc(var(--top) + 56px); }
.vf-side { position: absolute; left: 28px; bottom: 44px; width: 52px; height: 52px; border-radius: 16px; background: rgba(14,20,29,.5); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 10px; backdrop-filter: blur(6px); }
.vf-side .ico { width: 22px; height: 22px; }
.vf-side:active { transform: scale(.96); }
.vs-switch { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; font-size: 13px; color: rgba(255,255,255,.6); }
.vs-switch .ico { width: 16px; height: 16px; }
.vs-actions { margin-top: 16px; }
.vs-typeform { width: 100%; margin-top: 12px; }
.vs-typeform textarea { width: 100%; resize: none; border: 0; outline: none; border-radius: 16px; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.5; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.vs-typeform textarea:focus { box-shadow: inset 0 0 0 1.5px var(--amber); }
.vs-typeform textarea::placeholder { color: rgba(255,255,255,.35); }

.guide, .demo-panel { position: absolute; inset: 0; z-index: 800; display: grid; place-items: center; padding: 20px; }
.guide-card, .dp-card { position: relative; width: 100%; max-width: 340px; background: #fff; border-radius: 24px; padding: 24px 20px 18px; animation: up .22s ease-out; }
.guide-card { text-align: center; }
.g-ava svg { width: 56px; height: 56px; filter: drop-shadow(0 6px 14px rgba(224,143,0,.3)); }
.guide-card h3 { font-size: 20px; font-weight: 600; margin-top: 10px; }
.g-sub { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.g-steps { list-style: none; padding: 0; margin: 18px 0 18px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.g-steps li { display: flex; gap: 12px; align-items: flex-start; }
.g-steps .ico-tile { margin-top: 2px; }
.g-steps div { display: flex; flex-direction: column; }
.g-steps b { font-size: 15px; font-weight: 600; }
.g-steps div span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.guide-card .btn-amber { width: 100%; }
.g-note { font-size: 11px; color: var(--ink-3); margin-top: 10px; }
.dp-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.dp-k { display: block; font-size: 12px; color: var(--ink-3); margin: 12px 0 6px; }
.dp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-row button { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--tint); font-size: 14px; font-weight: 500; }
.dp-row button:active { transform: scale(.96); }
.dp-card .btn-ghost { width: 100%; margin-top: 18px; height: 46px; }
.demo-fab { position: absolute; z-index: 60; left: 12px; bottom: calc(var(--tabbar-h) + 12px); height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(28,42,63,.75); color: #fff; font-size: 12px; font-weight: 600; }

/* 真机：去掉模拟状态栏和胶囊（放在最后，覆盖前面的 display） */
@media (max-width: 500px) {
  .statusbar, .capsule { display: none; }
}
.ai-wait { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); padding-top: 4px; }
.ai-wait .typing { padding: 0 !important; }
.wave.live i { opacity: 1; transition: height .08s linear; }
.vt-wait { color: rgba(255,255,255,.55); }

/* ================= 高德矢量地图 ================= */
.home-map, .shoot-map { background: #F2F2F0; }
.amap-logo { opacity: .5; transform: scale(.75); transform-origin: left bottom; }
.amap-copyright { display: none !important; }
.home-map .amap-logo { bottom: auto !important; top: calc(var(--chips-top) + 44px); left: 8px !important; }
.amap-marker-label { border: 0; }

/* ================= 我的南京足迹：蜂巢点亮 ================= */
.foot-card { cursor: pointer; }
.foot-card:active { transform: scale(.98); }
.app.dark-top .statusbar { color: #fff; }
.app.dark-top .capsule { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.15); color: #fff; }
.app.dark-top .cap-dot { border-color: #fff; }
.glow { position: absolute; inset: 0; z-index: 690; background: #0B1626; animation: glowIn .35s ease-out; }
@keyframes glowIn { from { opacity: 0; } }
.glow-map { position: absolute; inset: 0; background: #0B1626; }
.glow-map .amap-logo { opacity: .35; }
.glow-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#0B1626 0, rgba(11,22,38,.85) calc(var(--top) + 150px), rgba(11,22,38,0) calc(var(--top) + 230px)),
              linear-gradient(0deg, #0B1626 0, rgba(11,22,38,.9) 230px, rgba(11,22,38,0) 330px); }
.glow-head { position: absolute; left: 0; right: 0; top: var(--top); height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; font-weight: 600; }
.glow-back { position: absolute; left: 4px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.glow-back .ico { width: 24px; height: 24px; stroke-width: 2; }
.glow-hero { position: absolute; left: 22px; right: 22px; top: calc(var(--top) + 58px); color: #fff; pointer-events: none; }
.gh-k { font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: .5px; }
.gh-num { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.gh-num b { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -2px; color: #FFD27A; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(247,185,62,.55); }
.gh-num span { font-size: 17px; font-weight: 600; color: rgba(255,255,255,.85); }
.gh-sub { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 6px; font-variant-numeric: tabular-nums; }
.glow-panel { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 16px 16px 12px; border-radius: 22px;
  background: rgba(20,32,52,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.35); }
.gp-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: rgba(255,255,255,.6); }
.gp-count { color: rgba(255,255,255,.6); }
.gp-count b { font-size: 20px; color: #FFD27A; font-variant-numeric: tabular-nums; }
.gp-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin: 8px 0 12px; }
.gp-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #F7B93E, #FFD27A); box-shadow: 0 0 10px rgba(247,185,62,.6); transition: width .35s ease-out; }
.gp-streets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.gp-streets::-webkit-scrollbar { display: none; }
.gs { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); text-align: left; transition-property: background-color, color, box-shadow; transition-duration: .2s; }
.gs b { font-size: 14px; font-weight: 600; }
.gs span { font-size: 11px; }
.gs.on { background: rgba(247,185,62,.16); color: #FFD27A; box-shadow: inset 0 0 0 1px rgba(247,185,62,.35); }
.gs.on span { color: rgba(255,210,122,.75); }
.gs.sel { box-shadow: inset 0 0 0 1.5px #fff; }
.gs:active { transform: scale(.96); }
.gp-next { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.gp-next:empty { display: none; }
.gp-next .ico-tile { background: rgba(255,255,255,.08); color: #FFD27A; }
.gn-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gn-txt b { font-size: 14px; font-weight: 600; }
.gn-txt span { font-size: 12px; color: rgba(255,255,255,.55); }
.gn-go { height: 32px; padding: 0 14px; border-radius: 16px; background: #F7B93E; color: #1C2A3F; font-size: 13px; font-weight: 700; }
.gn-go:active { transform: scale(.96); }
.gp-note { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.4); }
.lg-dot { width: 9px; height: 10px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display: inline-block; }
.lg-dot.on { background: #F7B93E; } .lg-dot.half { background: rgba(247,185,62,.4); margin-left: 6px; }

/* 首页地图：最近 3 个驿站常驻名字（浅色小标签），选中的用深色气泡 */
.st-pin.tagged .pin-label { display: flex; background: #fff; color: var(--ink-3); box-shadow: 0 2px 8px rgba(28,42,63,.18); transform: translateX(-50%) scale(.86); }
.st-pin.tagged .pin-label b { color: var(--ink); }
.st-pin.tagged .pin-label::after { border-top-color: #fff; }
.st-pin.selected .pin-label { background: var(--ink); color: rgba(255,255,255,.75); }
.st-pin.selected .pin-label b { color: #fff; }
.st-pin.selected .pin-label::after { border-top-color: var(--ink); }

/* ================= 拍照页：默认相机 + 下拉展开地图 ================= */

.vf-handle { position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); width: 180px; height: 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; color: rgba(255,255,255,.75); }
.vf-handle i { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.7); }
.vf-handle span { font-size: 11px; }
.vf-hint { top: 44px; }
.demo-switch { top: 82px; }

.vf-empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.75); background: radial-gradient(circle at 50% 40%, #243145, #121A26 70%); }
.vf-empty .ico { width: 40px; height: 40px; stroke-width: 1.4; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.vf-empty p { font-size: 16px; font-weight: 600; color: #fff; }
.vf-empty span { font-size: 13px; }
.viewfinder.is-camera:not(.cam) .vf-empty { display: flex; }
.viewfinder.is-camera .vf-scene { display: none; }

.vf-locbar { position: absolute; z-index: 4; left: 16px; right: 16px; top: 34px; display: flex; flex-direction: column; gap: 2px; color: #fff; pointer-events: none; }
.vl-k { font-size: 12px; color: rgba(255,255,255,.6); }
.vf-locbar b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-locbar .btn-amber { margin-top: 10px; height: 48px; }

.map-expand { position: absolute; z-index: 500; right: 12px; bottom: 34px; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--ink); box-shadow: 0 2px 10px rgba(28,42,63,.18); }
.map-expand .ico { width: 20px; height: 20px; }
.vf-locbar .btn-amber { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vf-locbar .btn-amber .ico { width: 20px; height: 20px; stroke-width: 2; }

/* ================= 拍照页：跟手拖拽 ================= */
/* --split：地图可见区域的底边（px）；--p：0=相机，1=地图展开。由 JS 每帧写入 */
.page-shoot { --split: 38%; --p: 0; }
.shoot-map-wrap { height: 100%; }
.viewfinder { top: calc(var(--split) - 22px); touch-action: none; will-change: top; }
.center-pin { top: calc((var(--split) - 22px) / 2); }
.loc-label, .map-expand { bottom: auto; top: calc(var(--split) - 22px - 52px); }
.map-expand { top: calc(var(--split) - 22px - 54px); }
.viewfinder video, .vf-scene { filter: blur(calc(var(--p) * 12px)) brightness(calc(1 - var(--p) * .45)); transform: scale(calc(1 + var(--p) * .08)); }
.vf-grid, .vf-hint, .demo-switch, .shutter, .vf-side, .vf-empty, .vf-handle span { opacity: calc(1 - var(--p) * 2.5); }
.vf-locbar { opacity: calc((var(--p) - .55) * 2.5); }
.page-shoot.map-open .vf-grid, .page-shoot.map-open .vf-hint, .page-shoot.map-open .demo-switch, .page-shoot.map-open .shutter,
.page-shoot.map-open .vf-side, .page-shoot.map-open .vf-empty { pointer-events: none; }
.page-shoot.map-open .vf-locbar { pointer-events: auto; }
.vf-handle i { transition: width .2s ease-out, background-color .2s ease-out; }
.page-shoot.dragging .vf-handle i { width: 48px; background: #fff; }

/* 定位针：拖地图时抬起，松手落下回弹（之前误删，补回） */
.cp-body { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(28,42,63,.3)); transition: transform .18s ease-out; }
.cp-shadow { position: absolute; left: 50%; bottom: -3px; width: 14px; height: 5px; margin-left: -7px; border-radius: 50%; background: rgba(28,42,63,.4); filter: blur(1.5px); transition: transform .18s ease-out, opacity .18s; }
.center-pin.lift .cp-body { transform: translateY(-12px); }
.center-pin.lift .cp-shadow { transform: scale(1.5); opacity: .45; }
.center-pin.drop .cp-body { animation: pinDrop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes pinDrop { 0% { transform: translateY(-12px); } 60% { transform: translateY(1px) scaleY(.94); } 100% { transform: none; } }

/* 回答里的功能直达按钮 */
.ans-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ans-act { background: #fff; color: var(--ink); box-shadow: var(--shadow-card); }
.ans-act.primary { background: var(--ink); color: #fff; box-shadow: none; }
.ans-act:active { transform: scale(.96); }
.w-grid { grid-template-columns: 1fr 1fr; }
.w-grid button { padding: 12px 14px; }
.welcome { padding-top: 12px; }
.welcome .w-grid { margin-top: 16px; }

/* ================= 上报成功：蜂巢飞入 ================= */
.succ-mini { position: relative; display: block; width: 100%; height: 200px; margin: -2px 0 12px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #16263F, #0B1626 70%); }
.succ-mini:active { transform: scale(.98); }
.sm-map, .sm-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-map .hx { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.12); stroke-width: 1.2; transition: fill .4s ease-out, fill-opacity .4s ease-out; }
.sm-map .hx.lit { fill: #F7B93E; fill-opacity: .85; stroke: #FFD27A; }
.sm-map .hx.half { fill: #F7B93E; fill-opacity: .38; stroke: #F7B93E; stroke-opacity: .8; }
.sm-map .hx.landed { fill-opacity: .6; stroke: #FFD27A; stroke-width: 2; }
.sm-map .bd { fill: none; stroke: #F7B93E; stroke-opacity: .45; stroke-width: 2; }
.sm-map .ring { fill: none; stroke: #FFD27A; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ringOut 1.3s ease-out forwards; }
@keyframes ringOut { from { transform: scale(.5); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.sm-tag { position: absolute; z-index: 2; right: 10px; top: 9px; font-size: 11px; color: rgba(255,255,255,.55); }
.sm-cap { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.8); text-align: left; opacity: 0; transform: translateY(6px); transition: opacity .3s ease-out, transform .3s ease-out; }
.sm-cap b { color: #FFD27A; font-weight: 600; }
.sm-cap span { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.5); }
.sm-cap.show { opacity: 1; transform: none; }
.fly-hex { position: absolute; z-index: 650; width: 26px; height: 30px; margin: -15px 0 0 -13px; pointer-events: none; filter: drop-shadow(0 0 8px rgba(247,185,62,.95)); }
.fly-hex i { display: block; width: 100%; height: 100%; background: linear-gradient(#FFE29A, #E89B12); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.succ-mini .sm-cap b { color: #FFD27A; }

/* ================= 数字滚动 ================= */
.roll { display: inline-flex; align-items: flex-end; }
.dg { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: bottom; }
.dg-col { display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.dg-sep { display: inline-block; line-height: 1.1em; }

/* ================= 加载占位 ================= */
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.sk { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px; }
.sk i { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #ECE7DE 25%, #F7F3EC 50%, #ECE7DE 75%); background-size: 300% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.sk-card { margin-top: 8px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); }
.ai-wait { font-size: 13px; color: var(--ink-3); }
/* 地图骨架：底色上一道柔光扫过，加载完淡出 */
.home-map::after, .shoot-map::after, .glow-map::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%), #EFEEEA;
  background-size: 250% 100%, auto; animation: shimmer 1.6s ease-in-out infinite; transition: opacity .4s ease-out; }
.glow-map::after { background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 70%), #0B1626; background-size: 250% 100%, auto; }
.home-map.ready::after, .shoot-map.ready::after, .glow-map.ready::after { opacity: 0; animation: none; }
.sp-photo { background: linear-gradient(90deg, #ECE7DE 25%, #F7F3EC 50%, #ECE7DE 75%); background-size: 300% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.sp-photo.empty { animation: none; }
@media (prefers-reduced-motion: reduce) { .dg-col { transition: none; } }
/* 滚动数字的每一位继承外层数字的字号，不吃到父级 span 规则 */
b.roll span, .roll .dg, .roll .dg-sep { font-size: inherit; color: inherit; font-weight: inherit; }

/* ================= 首页输入框：麦克风淡化 + 通话按钮 ================= */
.ask-mic { width: 36px; height: 40px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.ask-mic .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.ask-call { width: 44px; height: 44px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; flex: none;
  box-shadow: 0 4px 12px rgba(232,155,18,.35); transition: transform .15s ease-out; }
.ask-call .ico { width: 21px; height: 21px; stroke-width: 2; }
.ask-call:active { transform: scale(.96); }

/* ================= 通话界面 ================= */
.call { --lv: 0; position: absolute; inset: 0; z-index: 720; display: flex; flex-direction: column; align-items: center; color: #fff;
  background: radial-gradient(120% 70% at 50% 32%, #1E2F4A 0%, #0E1828 60%, #0A111D 100%); animation: glowIn .3s ease-out; }
.cl-head { width: 100%; height: calc(var(--top) + 52px); padding: var(--top) 16px 0; display: flex; align-items: center; justify-content: center; position: relative; flex: none; }
.cl-min { position: absolute; left: 6px; bottom: 4px; width: 44px; height: 44px; display: grid; place-items: center; color: rgba(255,255,255,.75); }
.cl-min .ico { width: 24px; height: 24px; transform: rotate(90deg); stroke-width: 2; }
.cl-time { font-size: 15px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.cl-demo { position: absolute; right: 108px; bottom: 15px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 0 5px; }
.cl-orb { position: relative; width: 220px; height: 220px; margin-top: 4vh; display: grid; place-items: center; flex: none; }
.cl-orb span { position: absolute; inset: 0; margin: auto; border-radius: 50%; }
.cl-orb .o1 { width: 120px; height: 120px; background: radial-gradient(circle, rgba(247,185,62,.55), rgba(247,185,62,0) 70%); transform: scale(calc(1 + var(--lv) * .55)); }
.cl-orb .o2 { width: 170px; height: 170px; border: 1.5px solid rgba(247,185,62,.28); transform: scale(calc(1 + var(--lv) * .3)); }
.cl-orb .o3 { width: 214px; height: 214px; border: 1px solid rgba(247,185,62,.14); transform: scale(calc(1 + var(--lv) * .18)); }
.cl-orb .o-bee { position: relative; width: 92px; height: 92px; filter: drop-shadow(0 0 calc(10px + var(--lv) * 24px) rgba(247,185,62,.7)); transform: scale(calc(1 + var(--lv) * .08)); }
/* 3D 小蜂：模型加载好之前显示原来的图标，加载好后淡入替换 */
.cl-bee { position: absolute; left: 50%; top: -26px; width: 270px; height: 250px; transform: translateX(-50%); opacity: 0; transition: opacity .45s ease-out;
  -webkit-mask-image: linear-gradient(#000 72%, transparent 97%); mask-image: linear-gradient(#000 72%, transparent 97%); }
.cl-bee canvas { display: block; }
.cl-orb.has-bee .cl-bee { opacity: 1; }
.cl-orb.has-bee .o-bee { display: none; }
.cl-orb.has-bee .o1 { width: 200px; height: 200px; }
.call[data-state="connecting"] .cl-orb .o2 { animation: ringPulse 1.6s ease-out infinite; }
.call[data-state="thinking"] .cl-orb .o2 { border-style: dashed; animation: spin 6s linear infinite; }
@keyframes ringPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.cl-name { font-size: 22px; font-weight: 600; margin-top: 2px; }
.cl-state { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 4px; min-height: 20px; }
.call[data-state="speaking"] .cl-state { color: #FFD27A; }
.cl-caps { width: 100%; padding: 0 26px; margin-top: 18px; min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.cap { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.55); animation: up .2s ease-out; }
.cap b { font-weight: 600; margin-right: 8px; font-size: 12px; color: rgba(255,255,255,.45); }
.cap:last-child { color: #fff; }
.cap.bot b { color: #FFD27A; }
.cl-cards { width: 100%; padding: 0 16px; margin-top: 12px; flex: 1; min-height: 0; overflow-y: auto; }
.cl-cards.show > * { animation: up .25s ease-out; }
.cl-cards .ans-list { background: rgba(255,255,255,.96); }
.cl-cards .ans-row { color: var(--ink); }
.cl-draft { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.96); color: var(--ink); }
.cd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-txt b { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.cd-txt b .lvl { font-size: 11px; padding: 1px 7px; }
.cd-txt span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-go { height: 34px; padding: 0 14px; border-radius: 17px; background: var(--amber); color: #fff; font-size: 13px; font-weight: 700; flex: none; }
.cl-ctrl { width: 100%; display: flex; justify-content: space-around; padding: 14px 24px calc(28px + env(safe-area-inset-bottom)); flex: none; }
.cl-ctrl button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.7); }
.cl-ctrl i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); transition: background-color .15s ease-out, transform .15s ease-out; }
.cl-ctrl .ico { width: 26px; height: 26px; stroke-width: 1.8; color: #fff; }
.cl-ctrl button:active i { transform: scale(.96); }
.cl-ctrl button.on i { background: #fff; }
.cl-ctrl button.on .ico { color: var(--ink); }
.cl-ctrl .end i { background: #E5484D; }
.cl-ctrl .end .ico { transform: rotate(135deg); }
.cl-log { font-size: 14px; color: var(--ink-2); margin: 2px 0; }
.cl-log b { font-size: 12px; color: var(--ink-3); margin-right: 6px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .cl-orb span, .cl-orb .o-bee { transform: none !important; } }

/* 驿站周边 */
.station-pop { max-height: calc(100% - 110px); overflow-y: auto; overscroll-behavior: contain; }
.sp-near { margin-top: 14px; padding-top: 12px; box-shadow: inset 0 1px 0 rgba(28,42,63,.07); }
.spn-head { display: flex; align-items: center; gap: 10px; }
.spn-head > b { font-size: 14px; font-weight: 600; flex: none; }
.spn-search { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 17px; background: var(--tint); }
.spn-search .ico { width: 16px; height: 16px; color: var(--ink-3); stroke-width: 2; flex: none; }
.spn-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); outline: none; }
.spn-search input::-webkit-search-cancel-button { display: none; }
.spn-cats { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.spn-cats::-webkit-scrollbar { display: none; }
.spn-cats button { flex: none; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px rgba(28,42,63,.12); transition: background-color .15s ease-out, color .15s ease-out, transform .15s ease-out; }
.spn-cats button.on { background: var(--ink); color: #fff; box-shadow: none; }
.spn-cats button:active { transform: scale(.96); }
.spn-list { list-style: none; margin: 8px 0 0; padding: 0; min-height: 60px; }
.spn-list li { display: flex; align-items: center; gap: 6px; }
.spn-list li + li { box-shadow: inset 0 1px 0 rgba(28,42,63,.06); }
.spn-row { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 4px; text-align: left; border-radius: 10px; transition: background-color .15s ease-out; }
.spn-row.on { background: var(--amber-soft); }
.spn-row b { font-size: 14px; font-weight: 600; color: var(--ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spn-row span { font-size: 12px; color: var(--ink-3); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.spn-go { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.spn-go .ico { width: 18px; height: 18px; stroke-width: 1.8; }
.spn-go:active { background: var(--tint); }
.spn-empty { font-size: 13px; color: var(--ink-3); padding: 14px 4px; }
.spn-skel { height: 44px; margin: 6px 0; border-radius: 10px; background: linear-gradient(90deg, #F1EEE8 25%, #F8F6F1 50%, #F1EEE8 75%); background-size: 300% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.poi-pin { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.poi-pin span { font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 8px; white-space: nowrap; box-shadow: 0 4px 12px rgba(28,42,63,.25); }
.poi-pin i { width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(28,42,63,.3); }
@media (prefers-reduced-motion: reduce) { .spn-skel { animation: none; } }