/* ============================================================================
   永利北旅 AI 一码通 · 手机端样式
   ----------------------------------------------------------------------------
   设计语言：东港的海。
     深海蓝作主色、落日的珊瑚橙只留给「此刻」（会过期的东西才配醒目色）、
     沙白底 + 白卡片 + 极细描边，纸感而不是科技感 —— 来东港的人是来放松的，
     不是来操作系统的。

   几条写在这里就不许破的规矩：
     · 零外部资源（国内服务器铁律）：不用 Google Fonts，图标全用 CSS 画的
     · 任何地方都不出现公开计数（赞数/收藏数/阅读量）
     · 不出现年龄/收入/职业等推断信息 —— 「为什么给你看」只写行为事实
     · 缩略图统一 16:10，卡片圆角 16，间距 8 的倍数 —— 全局只有一套尺度
   ========================================================================== */

:root {
  --ink:      #0E1418;
  --ink-2:    #4B565F;
  --ink-3:    #8B959D;
  --line:     #E9ECEF;
  --line-2:   #F1F3F5;
  --bg:       #F4F5F7;
  --card:     #FFFFFF;
  --brand:    #0A6E9E;
  --brand-2:  #1287B8;
  --brand-3:  #E8F1F5;
  --accent:   #FF5B2E;
  --accent-2: #FFF1EA;
  --gold:     #D9A21B;
  --gold-2:   #FBF3DF;
  --teal:     #12A87B;
  --teal-2:   #EAF4F0;
  --sky:      #2E90D8;
  --sky-2:    #EAF2F8;
  --violet:   #7C5CE6;
  --violet-2: #F0EEF6;
  --ok:       #2E7D5B;
  --warn:     #B4553F;

  --r:   16px;
  --r-s: 10px;
  --r-p: 999px;
  --sh:  0 1px 2px rgba(16,36,46,.04), 0 8px 24px -16px rgba(16,36,46,.18);
  --sh-2:0 2px 6px rgba(16,36,46,.06), 0 18px 40px -20px rgba(16,36,46,.28);
  --pad: 16px;
  --tabbar-h: 58px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.62 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
body.lock { overflow: hidden; }

a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -.2px; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.shell {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  background: var(--bg);
  position: relative;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 560px) {
  body { background: #E7EDEF; }
  .shell { box-shadow: var(--sh-2); min-height: 100vh; }
}

/* 卡片角上的「不感兴趣」小叉（弹层详情下线后挪到卡片上） */
.card { position: relative; }
.card-x {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(22,50,61,.055); color: #8598A2;
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
  opacity: .75;
}
.card-x:active { opacity: 1; background: rgba(22,50,61,.12); }

/* ── 顶栏 ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: 10px var(--pad) 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFDF5 100%);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.tb-row { display: flex; align-items: center; gap: 10px; }
.tb-place { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tb-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--brand-2);
  box-shadow: 0 0 0 4px var(--brand-3);
}
.tb-name {
  font-weight: 700; font-size: 16px; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-search {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 10px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-p); color: var(--ink-2); font-size: 13px;
}
.tb-search-ic {
  width: 13px; height: 13px; flex: none;
  border: 1.8px solid var(--ink-3); border-radius: 50%; position: relative;
}
.tb-search-ic::after {
  content: ""; position: absolute; right: -4px; bottom: -3px;
  width: 6px; height: 1.8px; background: var(--ink-3);
  transform: rotate(45deg); border-radius: 2px;
}
.tb-live {
  margin-top: 9px; display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.tb-live-k {
  flex: none; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums;
}
.tb-live-v { min-width: 0; }
.tb-live-v b { color: var(--ink); font-weight: 600; }

/* ── 信息流 ─────────────────────────────────────────────────────────── */
.feed { padding: 12px var(--pad) 4px; }
.feed-greet {
  color: var(--ink-2); font-size: 13px;
  padding: 2px 2px 12px; letter-spacing: .1px;
}
.feed-item { margin-bottom: 12px; animation: rise .34s cubic-bezier(.22,.8,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.feed-end {
  text-align: center; color: var(--ink-3); font-size: 12.5px;
  padding: 22px 0 30px;
}

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); overflow: hidden;
}

/* 此刻卡 —— 唯一允许用醒目色的卡 */
.card-live {
  border: none; color: #fff; padding: 18px 18px 16px;
  background: linear-gradient(142deg, #0B4F6C 0%, #12718F 52%, #2A9BB5 100%);
  box-shadow: 0 12px 30px -14px rgba(11,79,108,.6);
}
.live-head { display: flex; align-items: center; gap: 7px; font-size: 12px; opacity: .92; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #FFD9A0; flex: none;
  box-shadow: 0 0 0 0 rgba(255,217,160,.75); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,217,160,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(255,217,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,217,160,0); }
}
.live-k { letter-spacing: .4px; }
.live-title { font-size: 22px; line-height: 1.34; margin: 10px 0 8px; letter-spacing: -.5px; }
.live-text { font-size: 13.5px; opacity: .9; }
.live-bar { margin: 14px 0 8px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.live-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FFD9A0, #FFB067); }
.live-meta {
  display: flex; justify-content: space-between; font-size: 11.5px; opacity: .82;
  font-variant-numeric: tabular-nums;
}
.card-live .tags { margin-top: 10px; }
.card-live .tag { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }

/* 视频卡 */
.v-wrap { position: relative; aspect-ratio: 16 / 10; background: #DCE6EA; }
.v-wrap img { width: 100%; height: 100%; object-fit: cover; }
.v-wrap::after {
  content: ""; position: absolute; inset: 40% 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(6,26,35,.72));
}
.v-play {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 6px 20px rgba(6,26,35,.35);
}
.v-play::after {
  content: ""; position: absolute; left: 21px; top: 16px;
  border-left: 15px solid var(--brand); border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.v-dur {
  position: absolute; right: 10px; top: 10px; z-index: 1;
  background: rgba(6,26,35,.62); color: #fff; font-size: 11px;
  padding: 3px 7px; border-radius: var(--r-p);
}
.v-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: #fff; }
.v-k { font-size: 11.5px; opacity: .86; }
.v-cap h3 { font-size: 16.5px; line-height: 1.4; margin-top: 3px; letter-spacing: -.3px; }
.v-foot { padding: 11px 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 攻略卡 */
.card-route { padding: 15px 16px 13px; }
.rt-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--brand-2); font-weight: 600; }
.rt-sq {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  border: 1.8px solid var(--brand-2); position: relative;
}
.rt-sq::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--brand-2);
}
.rt-title { font-size: 17px; margin: 9px 0 0; letter-spacing: -.3px; }
.rt-sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.rt-cover { margin: 11px 0 0; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16 / 9; background: #DCE6EA; }
.rt-cover img { width: 100%; height: 100%; object-fit: cover; }
.rt-step { display: flex; gap: 9px; font-size: 13px; color: var(--ink-2); padding: 5px 0 0; }
.rt-tm { flex: none; width: 46px; color: var(--brand-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }

/* 承接卡 */
.card-svc, .card-store { position: relative; }
.card-store { border-color: var(--gold-2); background: linear-gradient(180deg, #FFFDF7, #FFFFFF 46%); }
.st-badge {
  position: absolute; left: 0; top: 14px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: var(--gold); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px 3px 8px; border-radius: 0 8px 8px 0; letter-spacing: .4px;
}
.st-badge em { font-style: normal; font-weight: 400; opacity: .85; }
.sv-row { display: flex; gap: 13px; padding: 14px; }
.sv-img { flex: none; width: 92px; height: 92px; border-radius: var(--r-s); overflow: hidden; background: #DCE6EA; }
.sv-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sv-info h3 { font-size: 16px; letter-spacing: -.3px; line-height: 1.35; }
.sv-sub {
  font-size: 12.5px; color: var(--ink-2); margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-bot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 8px; }
.sv-price { color: var(--warn); font-size: 12px; line-height: 1; }
.sv-price b { font-size: 22px; letter-spacing: -.6px; }
.sv-price small { color: var(--ink-3); font-size: 12px; }
.sv-nego { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.sv-btn {
  flex: none; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r-p); letter-spacing: .2px;
  box-shadow: 0 6px 16px -8px rgba(11,79,108,.8);
}
.sv-btn:active { transform: scale(.97); }

/* ═══ 头条对齐细化（2026-10-06 老大 9 张截图当规格）═══ */
/* 列表 meta：来源 · 相对时间（#9B9B9B 为头条实测值） */
.rd-meta { color: #9B9B9B; font-size: 12px; margin-top: 5px; line-height: 1.4; }
/* 作者行（截图 6-7） */
.byline { display: flex; align-items: center; gap: 9px; margin: 2px 0 13px; }
.by-ava { width: 34px; height: 34px; border-radius: 50%; background: #F2F3F5; color: #FF403A;
  font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.by-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.by-txt b { font-size: 14.5px; color: #333333; font-weight: 500; }
.by-txt span { font-size: 11.5px; color: #9B9B9B; margin-top: 1px; }
.by-badge { font-size: 10.5px; color: #FF403A; border: 1px solid #FF403A; border-radius: 3px;
  padding: 2px 6px; flex: 0 0 auto; }
/* AI 生成标识（截图 8 同款，铁律 4 合规亮牌） */
.ai-mark { display: inline-block; font-size: 10.5px; color: #9B9B9B; background: #F2F3F5;
  border-radius: 3px; padding: 3px 7px; margin: 0 0 10px; }
/* 底部图标操作条（截图 6-7） */
.dt-bar { padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
.dt-ic { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 5px 0 3px; color: #333333; cursor: pointer; }
.dt-ic svg { width: 21px; height: 21px; }
.dt-ic span { font-size: 10.5px; line-height: 1; }
.dt-ic.dt-fav.on { color: #FF403A; }
.dt-ic.dt-fav.on svg { fill: #FF403A; }
.dt-ic:active { opacity: .6; }
.dt-ic.dt-ic-main { color: #FFFFFF; background: #FF403A; border-radius: 20px; flex: 1.5;
  flex-direction: row; gap: 6px; padding: 10px 0; margin-left: 6px; }
.dt-ic.dt-ic-main svg { width: 17px; height: 17px; }
.dt-ic.dt-ic-main span { font-size: 13.5px; }
/* 视频卡（截图 1/3）：标题图下黑字，时长黑底白字右下角 */
.v-below { padding: 10px 12px 12px; }
.v-below h3 { font-size: 17px; line-height: 1.45; color: #333333; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-below .rd-meta { margin-top: 6px; }
.v-dur { right: 8px; bottom: 8px; left: auto; top: auto; background: rgba(0,0,0,.55);
  color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; letter-spacing: .04em; }
.v-play { width: 46px; height: 46px; background: rgba(255,255,255,.88); border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 2px 14px rgba(0,0,0,.3); }
.v-play::after { border-left: 15px solid rgba(20,20,20,.82); margin-left: 5px; }
/* ── 头条式大图流：图文卡满幅无缝 ────────────────────────────── */
.feed-item:has(> .card-read) { margin-bottom: 0; }
.feed .card-read {
  border: none; border-radius: 0; box-shadow: none;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.feed .card-read .rd-img { aspect-ratio: 3 / 2; }
.feed .card-read .rd-body { padding: 12px 2px 0; }
.feed .card-read .rd-body h3 {
  font-size: 17.5px; line-height: 1.4; letter-spacing: -.4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed .card-read .rd-body > p {
  -webkit-line-clamp: 1; margin-top: 5px; white-space: normal;
}
.feed .card-read .tags { margin-top: 8px; }
.feed .card-read .rd-foot { margin-top: 8px; }
.rd-img .ctype-chip {
  position: absolute; top: 10px; left: 10px; z-index: 3; margin-bottom: 0;
  box-shadow: 0 2px 10px rgba(6,26,35,.22);
}

/* 图文卡 */
.rd-img { position: relative; aspect-ratio: 16 / 10; background: #DCE6EA; }
.rd-img-wide { aspect-ratio: 4 / 3; }
.rd-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.rd-badge {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(6,26,35,.6); color: #fff; font-size: 11px;
  padding: 3px 8px; border-radius: var(--r-p); letter-spacing: .3px;
}
.rd-body { padding: 13px 15px 12px; }
.rd-body h3 { font-size: 16.5px; letter-spacing: -.3px; line-height: 1.42; }
.rd-body > p {
  font-size: 13px; color: var(--ink-2); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }
.rd-loc { font-size: 12px; color: var(--ink-3); }
.card-read:not(:has(.rd-img)) .rd-body { padding-top: 15px; }

/* 标签 / 为什么给你看 / 行动文案 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  font-size: 11.5px; color: var(--ink-2); background: var(--bg);
  border: 1px solid var(--line); padding: 2px 8px; border-radius: var(--r-p);
}
.tag-hot { color: var(--brand); background: var(--brand-3); border-color: #D3E5EC; }
.why { font-size: 11.5px; color: var(--brand-2); white-space: nowrap; }
.link-go {
  font-size: 12.5px; color: var(--brand-2); font-weight: 600; flex: none;
  border-bottom: 1px solid #CBE0E8; padding-bottom: 1px;
}
.link-go:active { opacity: .6; }

/* ── 底部导航 ───────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: 520px; margin: 0 auto;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.5) blur(12px);
  border-top: 1px solid var(--line-2);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 11px; color: var(--ink-3); letter-spacing: .3px;
}
.tab.on { color: var(--brand); font-weight: 600; }
/* 底栏图标：内联 SVG（2026-10-06 晚换掉原来那四个 CSS 小方块 —— 19px 见方画不出形，
   缩在底栏像四个残角）。颜色吃 currentColor，选中自动变红；线宽在末尾选中态里加粗。 */
.tab-ic { width: 22px; height: 22px; display: block; }
.tab-ic svg { width: 100%; height: 100%; display: block; }

/* ── 「此刻」页 ─────────────────────────────────────────────────────── */
.now-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); padding: 16px 16px 13px; margin-bottom: 12px;
}
.now-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; color: var(--brand); }
.now-head .live-dot { background: var(--accent); animation: none; box-shadow: 0 0 0 4px var(--accent-2); }
.now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 13px; background: var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.now-cell { background: #FBFCFC; padding: 11px 12px; }
.now-cell b { display: block; font-size: 15px; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.now-cell span { font-size: 11.5px; color: var(--ink-3); }
.now-note { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }

/* ── 「我的东港」页 ─────────────────────────────────────────────────── */
.mine-sec { margin-bottom: 22px; }
.mine-h { font-size: 14px; color: var(--ink-2); margin: 0 2px 10px; letter-spacing: .2px; }
.mine-links { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.mine-links a { display: block; padding: 14px 15px; font-size: 14px; color: var(--ink-2); }
.mine-links a::after { content: "›"; float: right; color: var(--ink-3); }
.mine-foot { text-align: center; font-size: 11.5px; color: var(--ink-3); padding: 8px 10px 26px; line-height: 1.8; }
/* 界面版本水印：只为对账用 —— 手机上显示旧号，说明拿到的是缓存旧页面 */
.mine-foot .ver { display: block; margin-top: 4px; font-size: 10.5px; color: #A9B7BE; letter-spacing: .3px; }

.ord {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: 13px 14px; margin-bottom: 8px;
}
.ord-l { min-width: 0; }
.ord-l b { display: block; font-size: 14.5px; }
.ord-l span { font-size: 12px; color: var(--ink-3); }
.ord-r { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-p); }
.ord-s0 { color: var(--warn); background: #FDF0EC; }
.ord-s1 { color: var(--brand); background: var(--brand-3); }
.ord-s2 { color: var(--ok); background: #EBF5F0; }
.ord-s3 { color: var(--ink-3); background: var(--bg); }

.empty {
  text-align: center; color: var(--ink-3); font-size: 13px; line-height: 1.9;
  padding: 28px 20px; background: var(--card);
  border: 1px dashed var(--line); border-radius: var(--r);
}
.empty b { color: var(--ink-2); display: block; margin-bottom: 2px; }

/* ── 浮层（详情 / 下单） ────────────────────────────────────────────── */
.sheet-mask {
  position: fixed; inset: 0; z-index: 60; background: rgba(10,30,40,.44);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.sheet-mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 520px; margin: 0 auto;
  background: var(--card); border-radius: 20px 20px 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  transform: translateY(101%); transition: transform .28s cubic-bezier(.22,.86,.3,1);
  box-shadow: 0 -14px 44px -18px rgba(10,30,40,.5);
}
.sheet.on { transform: none; }
.sheet-h {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--line-2);
}
.sheet-h::before {
  content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 4px;
  margin-left: -19px; border-radius: 4px; background: var(--line);
}
.sheet-t { font-size: 12.5px; color: var(--ink-3); }
.sheet-close {
  margin-left: auto; width: 30px; height: 30px; border: none; background: var(--bg);
  border-radius: 50%; position: relative; flex: none;
}
.sheet-close::before, .sheet-close::after {
  content: ""; position: absolute; left: 8px; top: 14px; width: 14px; height: 1.8px;
  background: var(--ink-2); border-radius: 2px;
}
.sheet-close::before { transform: rotate(45deg); }
.sheet-close::after  { transform: rotate(-45deg); }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px 8px; }
.sheet-img { border-radius: var(--r-s); overflow: hidden; background: #DCE6EA; margin-bottom: 14px; }
.sheet-img img { width: 100%; }
.sheet-h1 { font-size: 21px; line-height: 1.38; letter-spacing: -.5px; }
.sheet-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin-top: 9px; }
.sheet-body .art-p { font-size: 15px; line-height: 1.85; color: #23383F; margin-top: 14px; }
.sheet-body .tags { margin-top: 14px; }
.sheet-act { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.abtn {
  flex: 1; min-width: 96px; text-align: center; font-size: 13.5px; font-weight: 600;
  padding: 11px 12px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: #FBFCFC; color: var(--ink-2);
}
.abtn:active { opacity: .7; }
.abtn-main { background: var(--brand); border-color: var(--brand); color: #fff; }
.abtn-on { background: var(--accent-2); border-color: #F6CDB9; color: var(--accent); }
.sheet-foot {
  flex: none; padding: 10px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-2); background: #FCFDFD;
}
.sheet-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; text-align: center; }

/* 图集：详情里横向翻图 */
.gal { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.gal img { flex: none; width: 84%; border-radius: var(--r-s); scroll-snap-align: center; }

/* 表单 */
.fld { margin-bottom: 12px; }
.fld label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }
.fld input, .fld textarea, .fld select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: #FBFCFC; outline: none;
}
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--brand-2); background: #fff; }
.fld-row { display: flex; gap: 10px; }
.fld-row .fld { flex: 1; }
.fld textarea { min-height: 66px; resize: vertical; }
.price-line { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 2px 4px; }
.price-line b { font-size: 22px; color: var(--warn); letter-spacing: -.6px; }
.price-line span { font-size: 12.5px; color: var(--ink-3); }

/* 提示条 */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 22px); z-index: 90;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: rgba(16,36,46,.94); color: #fff; font-size: 13px;
  padding: 9px 16px; border-radius: var(--r-p); max-width: 82vw; text-align: center;
  transition: opacity .2s, transform .2s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── 搜索页 ─────────────────────────────────────────────────────────── */
.search-top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 10px var(--pad) 11px; background: #fff; border-bottom: 1px solid var(--line-2);
}
.search-back { flex: none; width: 30px; height: 30px; position: relative; }
.search-back::before {
  content: ""; position: absolute; left: 7px; top: 9px; width: 10px; height: 10px;
  border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); border-radius: 1px;
}
.search-form { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-p); padding: 0 12px; height: 38px; }
.search-form input { flex: 1; border: none; background: none; outline: none; font-size: 15px; min-width: 0; }
.search-go { flex: none; font-size: 13px; color: var(--brand); font-weight: 600; }
.sug { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sug a {
  font-size: 13px; color: var(--ink-2); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-p); padding: 7px 13px;
}
.sres { display: flex; gap: 12px; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); padding: 11px; margin-bottom: 10px; }
.sres img { flex: none; width: 76px; height: 58px; border-radius: var(--r-s); object-fit: cover; background: #DCE6EA; }
.sres-d { min-width: 0; }
.sres-d h4 { font-size: 14.5px; letter-spacing: -.2px; }
.sres-d p { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.search-tip { font-size: 12.5px; color: var(--ink-3); padding: 4px 2px 12px; line-height: 1.8; }

/* ── 详情页（content.php，分享落地） ────────────────────────────────── */
.art-hero { position: relative; aspect-ratio: 4 / 3; background: #DCE6EA; overflow: hidden; }
.art-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.art-wrap { padding: 16px var(--pad) 8px; }
.art-wrap h1 { font-size: 23px; line-height: 1.36; letter-spacing: -.6px; }
.art-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.art-body { padding: 4px var(--pad) 10px; }
.art-body p { font-size: 16px; line-height: 1.9; color: #23383F; margin: 14px 0 0; }
.friend-banner {
  margin: 12px var(--pad) 0; display: flex; align-items: center; gap: 8px;
  background: var(--brand-3); border: 1px solid #D3E5EC; color: var(--brand);
  font-size: 13px; padding: 10px 13px; border-radius: var(--r-s);
}
.friend-banner b { font-weight: 700; }

/* ── 说明页（about.php） ───────────────────────────────────────────── */
.doc { padding: 16px var(--pad) 40px; }
.doc h1 { font-size: 22px; letter-spacing: -.5px; margin-bottom: 4px; }
.doc h2 { font-size: 16px; margin: 24px 0 8px; letter-spacing: -.2px; }
.doc p, .doc li { font-size: 14.5px; line-height: 1.9; color: #2C4149; }
.doc ul { padding-left: 20px; margin: 6px 0; }
.doc .doc-lead { color: var(--ink-2); font-size: 14px; }
.doc .doc-note {
  margin-top: 26px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px; font-size: 13px; color: var(--ink-2); line-height: 1.8;
}

/* 骨架屏（首屏加载时 JS 用得到，避免白屏闪） */
.sk { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.sk-i { aspect-ratio: 16 / 10; background: linear-gradient(90deg, #E9EEF0, #F4F7F8, #E9EEF0); background-size: 200% 100%; animation: shim 1.4s infinite; }
.sk-b { padding: 14px; }
.sk-l { height: 13px; border-radius: 6px; background: linear-gradient(90deg, #E9EEF0, #F4F7F8, #E9EEF0); background-size: 200% 100%; animation: shim 1.4s infinite; }
.sk-l + .sk-l { margin-top: 8px; width: 62%; }
@keyframes shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   2026-10-06 · 一主四辅升级
   ----------------------------------------------------------------------------
   · 纸感米白底 + 墨青文字（全局高级感的底子）
   · 功能色只上「小标签 / 小图标 / 淡染底」：珊瑚=此刻 天青=图文 雾紫=攻略
     海藻青=溯源/已核验 沙金=本店/商业徽章
   · 沉浸式详情页：全幅头图 + 悬浮返回 + 底部固定操作条 + 继续看
   ========================================================================== */

/* ── 品牌横幅（首页 topbar 之下，推荐流之上；不是内容卡，不占"第一条"）── */
.brand-hero {
  margin: 10px 12px 0; border-radius: 16px; color: #fff; position: relative;
  background: linear-gradient(118deg, #0B4F6C 0%, #11607F 52%, #1A7A8C 100%);
  padding: 16px 18px 18px; overflow: hidden;
}
.brand-hero .bh-name { font-size: 19px; font-weight: 800; letter-spacing: 1px; }
.brand-hero .bh-slog { font-size: 12px; opacity: .82; margin-top: 3px; }
.brand-hero svg { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 22px; }

/* ── 卡型小徽标（功能路标色）── */
.ctype-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: 7px; margin-bottom: 8px;
}
.ctype-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-read   { color: #3A6E96; background: var(--sky-2); }
.chip-video  { color: #9A4E8C; background: #F6ECF4; }
.chip-route  { color: #5F5590; background: var(--violet-2); }
.chip-svc    { color: #8A6D0B; background: var(--gold-2); }
.chip-live   { color: #fff; background: var(--accent); }

/* ── 本店卡金色淡染（更贵气一点）── */
.card-store { background: linear-gradient(180deg, #FFFCF2, #FFF9EA); border-color: #E8D9A8; }

/* ── 沉浸式详情页 ── */
/* 头图：封面是 720×1080 的竖图，塞进 264px 扁框会被裁成一条，看着又小又不对。
   改成竖版大图（4:5，屏高 72% 封顶），竖图只裁上下一点，横图自动被 cover 收进来。
   object-position 偏上 42%：AI 生成的封面主体（人物/地平线）多在中上部，别裁掉脸。 */
.page-detail .art-hero {
  margin: 0; border-radius: 0; height: auto; aspect-ratio: 4 / 5;
  max-height: 72vh; background: #DDE6E4; overflow: hidden;
}
.page-detail .art-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.dt-back {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; z-index: 60;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(22,50,61,.22);
  display: flex; align-items: center; justify-content: center;
}
.dt-back::before {
  content: ""; width: 10px; height: 10px;
  border-left: 2.4px solid var(--brand); border-bottom: 2.4px solid var(--brand);
  transform: rotate(45deg); margin-left: 3px;
}
.page-detail .shell { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
.dt-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px; align-items: stretch;
  box-shadow: 0 -6px 24px -18px rgba(22,50,61,.4);
}
.dt-bar .abtn { flex: 1; margin: 0; padding: 11px 0; text-align: center; font-size: 14px; }
.dt-bar .abtn-main { flex: 1.6; }
.dt-fav.on { background: var(--accent-2); color: var(--accent); border-color: var(--accent); }
.page-detail .art-wrap { padding-top: 18px; }

/* ── 溯源档案块（海藻青底 + 沙金徽章；数据分级：没真货的行不渲染）── */
.trace-block {
  margin: 14px 16px; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, #0E3A52, #0B4F6C); padding: 15px 16px 16px;
}
.trace-block .tb-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.trace-block .tb-seal {
  font-size: 10px; color: #F0D98C; border: 1px solid var(--gold);
  background: rgba(201,162,39,.16); border-radius: 6px; padding: 2px 8px; font-weight: 600;
}
.trace-steps { display: flex; margin-top: 15px; }
.trace-steps .ts { flex: 1; text-align: center; position: relative; font-size: 10.5px; color: #9DB6C4; }
.trace-steps .ts .nd {
  width: 13px; height: 13px; border-radius: 50%; background: #123B52;
  border: 2px solid rgba(201,162,39,.5); margin: 0 auto 6px; position: relative; z-index: 1;
}
.trace-steps .ts:not(:last-child)::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 100%;
  height: 2px; background: rgba(201,162,39,.32);
}
.trace-steps .ts.done { color: #F0D98C; }
.trace-steps .ts.done .nd { background: var(--gold); border-color: var(--gold); }
.trace-facts {
  margin-top: 13px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  padding: 10px 12px; font-size: 12.5px; line-height: 2; color: #D5E4EC;
}
.trace-facts b { color: #fff; font-weight: 600; }

/* ── 原「继续看」两条卡片 + .next-feed / .nx-* 已于 2026-10-06 晚下线 ──
   老大叫停："底部二条"不要了，换成正文后面直接接的连续流（见文件末尾「连续流 v4」）。
   回退提示：git/备份里取回本块 + content.php 里恢复 .next-feed 标记即可。 */

/* ── 东港好物（货架页，2026-10-06 加）── */
.gl-h {
  font-size: 16px; margin: 18px 2px 10px; color: var(--ink);
}
.page-goodslist .gl-h:first-child { margin-top: 14px; }
.gl-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px; margin-bottom: 10px; box-shadow: var(--sh);
  color: inherit; text-decoration: none;
}
.gl-img { width: 84px; height: 84px; object-fit: cover; border-radius: 11px; flex-shrink: 0; background: var(--brand-3); }
.gl-body { flex: 1; min-width: 0; }
.gl-body h3 { font-size: 15px; font-weight: 700; line-height: 1.4; }
.gl-sub {
  font-size: 12px; color: var(--ink-3); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.gl-price { font-size: 15px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.gl-trace {
  font-size: 10.5px; color: #0E6B57; background: #E8F4EE;
  border-radius: 6px; padding: 3px 8px; font-weight: 600;
}
.gl-svc-chip {
  font-size: 10.5px; color: #5F5590; background: #F1EEF9;
  border-radius: 6px; padding: 3px 8px; font-weight: 600;
}
.gl-go {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 1.6px solid var(--line); position: relative;
}
.gl-go::before {
  content: ""; position: absolute; left: 10px; top: 8px;
  width: 6px; height: 6px; border-right: 1.8px solid var(--ink-3);
  border-top: 1.8px solid var(--ink-3); transform: rotate(45deg);
}

/* ── 时令历（此刻页正当时区 + 好物页正肥章）── */
.se-cat { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.se-cat-k {
  flex-shrink: 0; width: 74px; font-size: 12px; color: var(--ink-2);
  font-weight: 700; padding-top: 4px;
}
.se-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.se-chip {
  font-size: 12.5px; padding: 5px 11px; border-radius: 9px;
  background: var(--brand-3); color: var(--brand); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.se-chip.se-peak { background: var(--gold-2); color: #8A6D0B; }
.se-chip i {
  font-style: normal; font-size: 10px; color: #fff; background: var(--gold);
  border-radius: 5px; padding: 1.5px 5px; font-weight: 700;
}
.gl-peak {
  font-size: 10.5px; color: #8A6D0B; background: var(--gold-2);
  border: 1px solid var(--gold); border-radius: 6px; padding: 2px 7px; font-weight: 700;
}

/* ============================================================================
   亮肤版 v2026-10-06 —— 老大反馈：闷、程序化。三刀：提亮 / 收密度 / 加动效
   整块为「追加式覆盖」，不接受旧规则的地方一律以本块为准。
   回退方式：删掉本块（往下到文件末尾）即可恢复旧皮肤。
   ========================================================================== */

/* 顶栏：白底、更硬的对比，滚动时收紧 */
.topbar {
  padding: 9px 14px 10px;
  background: rgba(255,255,255,.93);
  border-bottom: 1px solid #EDF0F2;
}
.topbar.scrolled {
  padding-top: 5px; padding-bottom: 5px;
  box-shadow: 0 8px 20px -16px rgba(14,20,24,.5);
}
.tb-name { font-weight: 700; color: #0E1418; letter-spacing: .2px; }

/* 首屏横幅压成细条 —— 屏幕第一眼就是内容，不是招牌 */
.brand-hero {
  margin: 8px 12px 0; padding: 11px 14px 12px; border-radius: 12px;
  background: linear-gradient(112deg, #0A6E9E 0%, #1490C6 68%, #2BB0D8 100%);
}
.brand-hero .bh-name { font-size: 15px; letter-spacing: .4px; }
.brand-hero .bh-slog { font-size: 11px; margin-top: 1px; opacity: .88; }
.brand-hero svg { display: none; }

/* 信息流：收紧节奏、去描边阴影（头条的"无缝感"） */
.feed { padding: 8px 12px 4px; }
.feed-item { margin-bottom: 8px; }
.card { border: none; box-shadow: none; }
.feed .card-read .rd-img { border-radius: 12px; }
.feed .card-read .rd-body { padding: 10px 2px 0; }
.feed .card-read .rd-body h3 { font-size: 18px; line-height: 1.36; letter-spacing: -.5px; }
.feed .card-read .rd-body > p { font-size: 13.5px; color: #6B7680; margin-top: 4px; }
.feed .card-read .tags { margin-top: 7px; }
.feed .tag { font-size: 11px; }
.feed .ctype-chip { font-size: 10.5px; padding: 3px 8px; }
.feed .why { font-size: 11px; }

/* 此刻卡：提亮后的海（唯一允许醒目的卡） */
.card-live {
  background: linear-gradient(142deg, #0A6E9E 0%, #1490C6 52%, #37B7DE 100%);
  box-shadow: 0 14px 32px -18px rgba(10,110,158,.6);
}

/* 动效三件：图片淡入上浮 / 卡片按压 / 底部 tab 弹跳 */
.rd-img img, .v-wrap img, .rt-cover img, .sv-img img, .gl-card img {
  animation: imgIn .5s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes imgIn {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}
.card { transition: transform .16s ease; }
.card:active { transform: scale(.988); }
.tab { transition: transform .16s ease, color .16s ease; }
.tab:active .tab-ic { transform: scale(.86); }
.tab.on .tab-ic { animation: tabPop .34s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes tabPop { 0% { transform: scale(.84); } 60% { transform: scale(1.14); } 100% { transform: none; } }
.tabbar { background: rgba(255,255,255,.9); border-top: 1px solid #EDF0F2; }
.tab.on { color: #0A6E9E; }

/* 详情页正文：更黑的字，读得进去 */
.art-body p { color: #1E272C; }

/* ════════════════════════════════════════════════════════════════════════════
   头条皮肤 v2026-10-06 —— 老大要求对齐今日头条
   色值/排版全部按实测（playwright 读头条计算样式）：
     bodyBg #FFFFFF · 标题 #333333（强调 #222222）· 次要 #9B9B9B · 次次 #6F7073
     品牌红 #FF403A · 正文 16px/22px · 列表缩略图 156×104（3:2）
   回退：删掉本块即可（往上到「头条皮肤」标题为止）
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:       #FFFFFF;
  --card:     #FFFFFF;
  --ink:      #333333;
  --ink-2:    #6F7073;
  --ink-3:    #9B9B9B;
  --line:     #EEEEEE;
  --line-2:   #F5F5F5;
  --brand:    #FF403A;
  --brand-2:  #FF403A;
  --brand-3:  #FFF1F0;
  --accent:   #FF403A;
  --accent-2: #FFF1F0;
  --ok:       #2E7D5B;
  --warn:     #FF403A;
}
html, body { background: #FFFFFF; color: #333333; }

/* 顶栏：白底 + 灰底圆角搜索框（头条顶栏结构） */
.topbar { padding: 8px 12px 0; background: #FFFFFF; border-bottom: none; }
.topbar.scrolled { box-shadow: none; border-bottom: 1px solid var(--line-2); }
.tb-name { font-size: 17px; font-weight: 600; color: #222222; letter-spacing: 0; }
.tb-dot { width: 7px; height: 7px; background: #FF403A; box-shadow: none; }
.tb-search {
  background: #F5F5F5; border: none; border-radius: 16px; height: 32px;
  padding: 0 12px; gap: 6px; color: #9B9B9B; font-size: 13px;
}
.tb-search-ic { border-color: #9B9B9B; }
.tb-search-tx { color: #9B9B9B; }

/* 频道条 .ch-bar / .ch 已于 2026-10-06 晚下线 —— 与底部 tabbar 重复，
   老大叫停。回退：从 _bak/app.css.bak_tab_* 取回本块 + index.php 恢复 <nav class="ch-bar">。 */

/* 信息流：白底、无缝、细线分隔（头条列表节奏） */
.brand-hero { display: none; }
.feed { padding: 0 12px 4px; background: #FFFFFF; }
.feed-greet { font-size: 13px; color: #9B9B9B; padding: 10px 2px 8px; }
.feed-item { margin-bottom: 0; }
.card { border: none; box-shadow: none; border-radius: 0; background: #FFFFFF; }
.feed .card + * { }

/* 左文右图（头条列表主样式） */
.card-row { border-bottom: 1px solid var(--line-2) !important; }
.card-row .rd-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; }
.card-row .rd-txt { flex: 1; min-width: 0; }
.card-row .rd-txt h3 {
  font-size: 16.5px; line-height: 1.42; font-weight: 500; color: #333333; letter-spacing: -.2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-row .rd-meta { font-size: 12px; color: #9B9B9B; margin-top: 7px; }
.card-row .rd-thumb {
  flex: none; width: 112px; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #F5F5F5;
}
.card-row .rd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-row .why { display: block; font-size: 11px; color: #FF403A; padding-bottom: 11px; }
.card-row .card-x { top: 6px; right: 6px; width: 21px; height: 21px; font-size: 10px; opacity: .5; background: rgba(255,255,255,.72); }

/* 图集/大图卡（沉浸）保持大图，只换皮肤 */
.feed .card-read .rd-img { border-radius: 8px; }
.feed .card-read .rd-body { padding: 10px 2px 12px; }
.feed .card-read .rd-body h3 { font-size: 17px; font-weight: 500; color: #333333; }
.feed .card-read .rd-body > p { font-size: 13px; color: #9B9B9B; }
.ctype-chip { border-radius: 4px; }
.chip-read { color: #FF403A; background: #FFF1F0; }

/* 此刻卡：头条「要闻」条那种白底 + 红标（不再用深海块） */
.card-live {
  background: #FFFFFF; color: #333333; padding: 14px 14px 12px;
  border: 1px solid #F0F0F0; border-radius: 8px; box-shadow: none;
}
.live-head { opacity: 1; }
.live-dot { background: #FF403A; box-shadow: 0 0 0 3px rgba(255,64,58,.14); animation: none; }
.live-k { color: #FF403A; font-weight: 600; }
.live-title { font-size: 19px; font-weight: 600; color: #222222; letter-spacing: -.3px; }
.live-text { font-size: 13.5px; color: #6F7073; opacity: 1; }
.live-bar { background: #F0F0F0; }
.live-bar i { background: #FF403A; }
.live-meta { color: #9B9B9B; }
.card-live .tag { background: #F5F5F5; color: #6F7073; border-color: transparent; }

/* 本店卡 / 服务卡：白底细线，价格黑字（头条里价格也不是红的） */
.card-store { background: #FFFFFF; border: 1px solid #F0F0F0; border-radius: 8px; }
.card-svc { border: 1px solid #F0F0F0; border-radius: 8px; }
.st-badge span { background: #FF403A; }
.sv-price { color: #222222; }
.sv-btn { background: #FF403A; box-shadow: none; }
.tag { background: #F5F5F5; color: #6F7073; border-color: transparent; font-size: 11.5px; padding: 3px 8px; }
.tag-hot { background: #FFF1F0; color: #FF403A; border-color: transparent; }
.link-go { color: #FF403A; border-bottom-color: #FFD9D6; }
.why { color: #FF403A; }

/* 底部 tab：选中红（头条没有底栏，这排先留着让老大比对） */
.tabbar { background: rgba(255,255,255,.94); border-top: 1px solid var(--line-2); }
.tab { color: #9B9B9B; }
.tab.on { color: #FF403A; }

/* 详情页：白底、黑标题、正文 17/30（头条的阅读版心） */
.page-detail { background: #FFFFFF; }
.art-body { padding: 6px 16px 10px; }
.art-body h1 { font-size: 22px; font-weight: 600; color: #222222; line-height: 1.4; }
.art-body p { font-size: 17px; line-height: 30px; color: #333333; margin-top: 16px; }
.art-body .rd-meta, .art-body .dt-sub { color: #9B9B9B; }
.dt-bar { background: rgba(255,255,255,.96); border-top: 1px solid #EEEEEE; backdrop-filter: blur(12px); }
.dt-bar .abtn { color: #6F7073; }
.dt-fav.on { color: #FF403A; }
.dt-back { background: rgba(255,255,255,.86); }

/* 右滑返回跟手时给页面一点阴影，像头条那样"往回推" */
body.swiping { box-shadow: 8px 0 24px -12px rgba(0,0,0,.35); }

/* ═══ 沉浸 v3（2026-10-06）：多图卡 / 上滑切条 ═══
     原第①条「顶栏铺满状态栏与灵动岛」已于 2026-10-06 下午老大叫停并撤回 ——
     顶栏回到头条 v2 的白底样式（见上文「顶栏：白底 + 灰底圆角搜索框」），
     不再吃 env(safe-area-inset-top)，不再铺红。 */

/* ② 多图卡 */
.card-multi, .card-big, .card-gallery { padding: 13px 12px 14px; }
.mi-title { font-size: 17px; line-height: 1.45; color: #333333; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-grid { display: grid; gap: 4px; margin: 9px 0 7px; }
.mi-2 { grid-template-columns: repeat(2, 1fr); }
.mi-3 { grid-template-columns: repeat(3, 1fr); }
.mi-cell { position: relative; overflow: hidden; border-radius: 4px; background: #F2F3F5; }
.mi-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-2 .mi-cell { aspect-ratio: 3 / 2; }
.mi-3 .mi-cell { aspect-ratio: 1 / 1; }
.mi-hero { position: relative; margin: 9px 0 7px; border-radius: 4px; overflow: hidden; background: #F2F3F5; }
.mi-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* 图集横滑：一条内容也能左右滑着看 */
.mi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mi-num { font-size: 12px; color: #9B9B9B; }
.mi-scroll { display: flex; gap: 6px; overflow-x: auto; margin: 9px 0 7px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mi-scroll::-webkit-scrollbar { display: none; }
.mi-slide { flex: 0 0 76%; scroll-snap-align: start; border-radius: 4px; overflow: hidden; background: #F2F3F5; }
.mi-slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.mi-slide:last-child { margin-right: 12px; }

/* ③ 原「上滑看下一条」的黑色提示条 .up-next 与切条淡出 body.jumping
      已于 2026-10-06 晚整块下线 —— 老大说那条浮出来的提示就是"下一条"（勘误"吓一跳"），
      不要；改成往下滚自然续（见文件末尾「连续流 v4」）。 */

/* ════════════════════════════════════════════════════════════════════════════
   连续流 v4（2026-10-06 晚）—— 详情页下滑无穷尽
   ----------------------------------------------------------------------------
   老大原话（含勘误）：
     「不想要现在就显示【下一条】（勘误：原打字为"吓一跳"）和【底部二条】。
       我需要和头条一样的，下滑无穷尽那种。然后不想看了，右滑，再回到刚才进入位置。」
   做法：正文读完直接接信息流卡片（与首页同一套卡。card_html），
        滚到近底自动续下一批 —— 没有提示条、没有按钮、没有断点、没有页码。
        那一条浅灰带是唯一的分节，跟头条文章尾接推荐流一个意思。
   回退：删掉本块 + 恢复 content.php 的 .next-feed 标记 + 恢复 app.js swipeNext()
   ══════════════════════════════════════════════════════════════════════════ */
.nf-stream {
  padding: 0 12px 4px; background: #FFFFFF;
  border-top: 8px solid #F2F3F5;
}
.nf-stream .feed-item { margin-bottom: 0; }
.nf-stream .card-row { border-bottom: 1px solid #F1F3F5 !important; }
.nf-load {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; background: #FFFFFF; color: #9B9B9B; font-size: 12.5px;
}
.nf-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.8px solid #E6E6E6; border-top-color: #FF403A;
  animation: nfSpin .8s linear infinite;
}
@keyframes nfSpin { to { transform: rotate(360deg); } }
.nf-end {
  background: #FFFFFF; text-align: center; color: #B8B8B8;
  font-size: 12.5px; padding: 22px 16px 30px; line-height: 1.7;
}
.nf-end b { display: block; color: #9B9B9B; font-weight: 500; margin-bottom: 3px; }
/* 返回钮让路：下滑淡出缩小、回滚浮现（头条同款） */
.dt-back { transition: opacity .24s ease, transform .24s ease; }
.dt-back.off { opacity: 0; transform: scale(.82); pointer-events: none; }

/* ── 底栏图标收尾（2026-10-06 晚）────────────────────────────────────────
   未选中线条略收，选中加粗 + 深一号色 —— 头条/微信那种"重一点"的手感。 */
.tab-ic svg { opacity: .9; transition: opacity .16s ease, stroke-width .16s ease; }
.tab.on .tab-ic svg { opacity: 1; stroke-width: 2.05; }
/* 频道条撤掉后，首页顶栏原来靠它撑的底距会塌（.topbar padding-bottom:0）*/
.page-feed .topbar { padding-bottom: 10px; }
/* 连续流里的卡片不弹入场动画 —— 一批批冒出来时不该一排排往上跳 */
.nf-stream .feed-item { animation: none; }

/* ── 「我的」· 内容纠错（2026-10-06 晚 老大要求：报错从详情页挪到这儿）─────
   报错是本地系统的自净机制（内容过期是死因），不是互动 —— 所以它不占详情页
   的互动位。这一块只在「我的」露头，平时不打扰。 */
.rep-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 15px 15px;
}
.rep-tip { font-size: 12.5px; line-height: 1.75; color: var(--ink-3); margin: 0 0 12px; }
.rep-lb { display: block; font-size: 12px; color: var(--ink-3); margin: 0 0 6px; letter-spacing: .2px; }
.rep-sel, .rep-ta {
  width: 100%; box-sizing: border-box; font-size: 14px; line-height: 1.6; color: #333333;
  background: #F7F8F9; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; margin-bottom: 12px; font-family: inherit;
}
.rep-sel { -webkit-appearance: none; appearance: none; }
.rep-ta { resize: none; }
.rep-sel:focus, .rep-ta:focus { outline: none; border-color: #FF403A; background: #FFFFFF; }
.rep-btn {
  width: 100%; border: none; border-radius: 20px; background: #FF403A; color: #FFFFFF;
  font-size: 15px; font-weight: 600; padding: 12px 0; cursor: pointer; font-family: inherit;
}
.rep-btn:active { opacity: .82; }
.rep-btn:disabled { opacity: .5; }
.rep-note { font-size: 11.5px; color: #A9B7BE; line-height: 1.7; margin: 10px 0 0; }


/* ── 顶栏 v4（2026-10-06）：小北头像居左 · 大搜索框撑满 ·「● 东港」挪右 ──
   头条顶栏节奏：头像 + 全宽搜索框 + 右侧地点。搜索框从 32px 小胶囊
   变成 flex:1 的大框，按钮态头像点击有缩放反馈。 */
.tb-ai {
  width: 34px; height: 34px; flex: none; order: 1;
  padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 50%; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.tb-ai img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tb-ai:active { transform: scale(.93); transition: transform .12s; }
.tb-row .tb-search { flex: 1 1 auto; min-width: 0; order: 2; margin-left: 0; height: 35px; border-radius: 18px; }
.tb-place { flex: none; order: 3; }
.tb-place .tb-name { max-width: 96px; }

/* 小北名片抽屉（点顶栏头像弹出） */
.xb-card { text-align: center; padding: 8px 4px 2px; }
.xb-av { width: 64px; height: 64px; border-radius: 50%; display: block; margin: 2px auto 12px; }
.xb-say { font-size: 17px; font-weight: 700; color: #222222; margin: 0; }
.xb-sub { font-size: 13px; color: #6F7073; line-height: 1.75; margin: 8px 0 0; }
.xb-tip { font-size: 12px; color: #9B9B9B; line-height: 1.7; margin: 8px 0 0; }
.xb-go {
  display: block; height: 42px; line-height: 42px; border-radius: 21px;
  background: #FF403A; color: #FFFFFF; font-size: 14.5px; font-weight: 600;
  text-align: center; text-decoration: none;
}
.xb-go:active { opacity: .85; }


/* ════════════════════════════════════════════════════════════════════════════
   字号 v5（2026-10-06）· 整体放大一档，对齐头条的阅读量级
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「感觉首页包括所有内容什么的整体字体偏小，我要求和头条一样大。」
   放大原则：正文/标题 +1~1.5px，辅助行 +1px，字重普遍提一档（500 → 600）——
   头条的"大"不只来自字号，更来自字重和行高的呼吸感。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 首页信息流 ─────────────────────────────────────────────────────── */
.card-row .rd-txt h3 { font-size: 18px; line-height: 1.44; font-weight: 600; }
.card-row .rd-meta { font-size: 13px; margin-top: 8px; }
.card-row .rd-thumb { width: 118px; }
.card-row .why { font-size: 12px; }
.mi-title { font-size: 18px; line-height: 1.44; font-weight: 600; }
.mi-num { font-size: 12.5px; }
.v-below h3 { font-size: 18px; font-weight: 600; }
.v-dur { font-size: 12px; }
.rt-title { font-size: 18px; }
.rt-sub { font-size: 14px; }
.rt-step { font-size: 14px; }
.sv-info h3 { font-size: 17px; }
.sv-sub { font-size: 13.5px; }
.sv-nego { font-size: 14px; }
.sv-btn { font-size: 14px; }
.gl-body h3 { font-size: 16px; }
.gl-price { font-size: 16px; }
.feed-greet { font-size: 14px; }
.tag { font-size: 12.5px; padding: 4px 9px; }
.feed .tag { font-size: 12.5px; }   /* .feed .tag 特异性更高，原 11px 会压住上面那行 */
.ctype-chip { font-size: 11.5px; padding: 3px 9px; }
.why { font-size: 12px; }

/* ── 此刻卡 ────────────────────────────────────────────────────────── */
.live-title { font-size: 20.5px; line-height: 1.36; }
.live-text { font-size: 15px; }
.live-head { font-size: 12.5px; }
.live-meta { font-size: 12.5px; }

/* ── 详情页（阅读版心：正文 18/32，头条的阅读量级）───────────────────── */
.art-body h1 { font-size: 23.5px; line-height: 1.38; }
.art-body p { font-size: 18px; line-height: 32px; }
.art-meta { font-size: 13px; }
.by-txt b { font-size: 15.5px; }
.by-txt span { font-size: 12.5px; }
.by-badge { font-size: 11.5px; }
.ai-mark { font-size: 11.5px; }
.dt-ic span { font-size: 11.5px; }
.dt-ic.dt-ic-main span { font-size: 14px; }
.v-cap h3 { font-size: 17.5px; }

/* ── 搜索页 ────────────────────────────────────────────────────────── */
.search-form input { font-size: 16px; }
.sres-d h4 { font-size: 15.5px; }
.sres-d p { font-size: 13px; }
.search-tip { font-size: 13.5px; }

/* ── 我的页 ────────────────────────────────────────────────────────── */
.mine-h { font-size: 14.5px; }
.mine-links a { font-size: 15px; }
.ord-l b { font-size: 15.5px; }
.ord-l span { font-size: 13px; }

/* ── 底栏（11px 实在太小，头条底栏文字 12px 起）─────────────────────── */
.tab { font-size: 12px; gap: 3px; }
.tab-ic { width: 23px; height: 23px; }

/* ── 顶栏 ──────────────────────────────────────────────────────────── */
.tb-name { font-size: 17.5px; }
.tb-row .tb-search { font-size: 14px; }


/* ── 顶栏「东港今日」热点条（2026-10-06）──────────────────────────────
   头条热榜同款结构：红徽标 + 无缝横滚。纯 CSS 动画（GPU 合成），零 JS。
   数据只来自系统真实信号（潮汐/日出日落/天气/最新内容），一条不编。 */
.ticker {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; height: 30px; overflow: hidden;
}
.tk-badge {
  flex: none; font-size: 12px; font-weight: 700; color: #FF403A;
  background: #FFF1F0; border-radius: 6px; padding: 4px 8px; letter-spacing: .5px;
}
.tk-win {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.tk-run {
  display: inline-flex; align-items: center; white-space: nowrap;
  animation: tkrun 26s linear infinite; will-change: transform;
}
.tk-run:hover, .tk-run:active { animation-play-state: paused; }
.tk-item { font-size: 13.5px; color: #6F7073; text-decoration: none; flex: none; }
.tk-item:active { color: #FF403A; }
.tk-sep { flex: none; color: #D9DEE2; margin: 0 11px; font-size: 12px; }
@keyframes tkrun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-run { animation: none; } }

/* 详情页视频（真实视频才渲染；16:9，不再用图文的 4/5 竖幅裁它） */
.art-video { aspect-ratio: 16 / 9; max-height: 56vh; background: #000; }
.art-video video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }

/* ════════════════════════════════════════════════════════════════════════════
   卡片文字量 v6（2026-10-06 15:20）—— 标题放到 3 行 + 摘要上屏
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「首页 图文或视频 不光有 标题 字数多一些 最多可以三行
             不然太空了 要头条那种」
   实测为什么"空"：120 条标题中位 10 字、最长 16 字 —— 掐 2 行根本用不满
              （绝大多数只占 1 行），右半张卡就空着；而 120 条**全都有一条
              好副标题**（「先弄清楚你站在哪儿」这类一句话钩子），
              后端一直有数据，只是从来没往卡上印。
   两手一起上：
     ① 标题 -webkit-line-clamp 2 → 3（老大点名的"最多三行"）
     ② .rd-sub = 那条 subtitle，请出来当摘要行（view.php 里条件渲染）
   分档：图在上、字在下的卡（视频/多图/一图/图集）摘要给 2 行；
        左文右图卡右边的图只有 118px 高，标题 3 行 + 摘要 1 行到顶，摘要限 1 行。
   回退：删掉本块 → 标题回 2 行、摘要行仍在（只是没样式），
        或连 view.php 那三处一起回滚（_bak 里有备份）。
   ══════════════════════════════════════════════════════════════════════════ */
.card-row .rd-txt h3 { -webkit-line-clamp: 3; }
.mi-title { -webkit-line-clamp: 3; }
.v-below h3 { -webkit-line-clamp: 3; }

.rd-sub {
  font-size: 13.5px; line-height: 1.5; color: #6F7073; font-weight: 400;
  letter-spacing: -.1px; margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 左文右图：图矮，摘要只给一行，免得整张卡被文字撑成"图贴边" */
.card-row .rd-sub { -webkit-line-clamp: 1; }
.mi-title + .rd-sub, .v-below .rd-sub { margin-top: 7px; }


/* ════════════════════════════════════════════════════════════════════════════
   此刻卡 v7（2026-10-06 15:35）—— 酷炫醒目 + 跟内容卡彻底分家
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「首页 那个此刻 应该 酷炫醒目些 相对 独立些
             不然 有人 以为是 文章 还去点击」
   实测根因：上一版白底要闻条，跟文章卡同为白底 / 8px 圆角 / 无阴影 ——
            长得一样被当文章点；点了又没反应（cid=0），更像坏了。
   三件事：
     ① 恢复深海蓝渐变 —— 白卡海里唯一一块深色，天然分家
        （「醒目色只留给此刻」的体系不变；酷炫靠层次和仪表，不靠花）
     ② 环境数据瓦片（满潮时刻/日落/日出/天气，玻璃小格 + 大数字）——
        只有环境卡才有"仪表"，文章卡没有，一眼分清
     ③ 点击进「此刻」页（完整潮汐 + 时令历）—— 误点变入口，不再点了没反应
   回退：删掉本块 + view.php / index.php / app.js 对应段（_bak 有备份）。
   ══════════════════════════════════════════════════════════════════════════ */
.card-live {
  background: linear-gradient(152deg, #062B3E 0%, #0B4F6C 52%, #16809A 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  color: #fff;
  padding: 16px 16px 13px;
  box-shadow: 0 16px 36px -18px rgba(6, 43, 62, .68);
  position: relative; overflow: hidden;
}
/* 水面落日光斑 —— 纯 CSS，零外部资源 */
.card-live::before {
  content: ""; position: absolute; right: -44px; top: -56px;
  width: 172px; height: 172px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 103, .30), transparent 66%);
  pointer-events: none;
}
.live-head { gap: 7px; font-size: 12.5px; }
.live-k { color: #FF8E80; font-weight: 600; }  /* 深蓝底上的红要提亮一档，闷红看不清 */
.live-dot {
  background: #FFB067; animation: pulse 2.4s infinite;
  box-shadow: 0 0 0 0 rgba(255, 217, 160, .75);
}
.live-live {
  margin-left: auto; font-size: 10px; letter-spacing: 2px; color: #FFD9A0;
  border: 1px solid rgba(255, 217, 160, .45); border-radius: 20px;
  padding: 2px 7px 2px 9px; flex: none;
}
.live-title { color: #fff; font-size: 20.5px; font-weight: 600; letter-spacing: -.3px; }
.live-text { color: rgba(255, 255, 255, .78); font-size: 13.5px; opacity: 1; }

/* 环境瓦片 —— 此刻卡独有的"仪表" */
.live-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 13px 0 3px; }
.lt {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px; padding: 8px 4px 7px; text-align: center; min-width: 0;
}
.lt b {
  display: block; font-size: 17px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lt:first-child b { color: #FFD9A0; }  /* 潮汐转折是主角 */
.lt span {
  display: block; font-size: 10px; color: rgba(255, 255, 255, .62); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-bar { height: 5px; background: rgba(255, 255, 255, .16); margin: 13px 0 7px; }
.live-bar i { background: linear-gradient(90deg, #FFD9A0, #FFB067); box-shadow: 0 0 9px rgba(255, 193, 120, .8); }
.live-meta { color: rgba(255, 255, 255, .55); font-size: 11.5px; opacity: 1; }
.live-go { color: #FFD9A0; }
.card-live .tag { background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent; }

/* 跟下一条拉开一个气口 —— 独立感一半来自留白 */
.fi-live { margin-bottom: 18px; }


/* ════════════════════════════════════════════════════════════════════════════
   热点条 · 信息流内版（2026-10-06 15:45）
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「热点 放到 第一条 图文下方  不放在顶部」
   改动：`ticker_html` 从 <header> 摘出，移进 feed 循环 —— 落在第一条图文卡下方。
   样式：原版在顶栏里（margin-top 9px / 高 30px / 透明底）。
        进信息流后做成一条独立浅灰圆角条：跟上下白卡有个分隔感，
        又不是"又一块内容卡"。滚动动画、红徽标、数据源一律没动。
   ══════════════════════════════════════════════════════════════════════════ */
.feed .ticker {
  margin: 12px 2px 14px;
  height: 34px; padding: 0 10px;
  background: #F7F8FA; border-radius: 10px;
}
.feed .ticker .tk-badge { background: #FFF1F0; }


/* ════════════════════════════════════════════════════════════════════════════
   下拉刷新指示条（2026-10-06 15:55）
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「咱们的首页 不能 也搞个 下滑屏幕刷新内容吗 现在是 一直上滑 是不是」
   高度由 JS 给（跟手拖动），0 = 收起来；零外部资源，转圈用 CSS border。
   ★ 顺带关掉系统的整页回弹（overscroll）—— 我们自己做的就是下拉刷新，
     再叠一层浏览器原生橡皮筋会打架（iOS 会先把页面拽走再回弹，指示条跟着抖）。
   ══════════════════════════════════════════════════════════════════════════ */
html, body { overscroll-behavior-y: contain; }
.ptr {
  height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 13px; color: #9B9B9B; transition: height .2s ease;
}
.ptr-spin {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid #E8EAEC; border-top-color: #FF403A;
}
.ptr.busy .ptr-spin { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.busy .ptr-spin { animation: none; } }


/* ════════════════════════════════════════════════════════════════════════════
   图集 v2：满幅 + 计数器 + 自动滑；详情页图区（2026-10-06 16:05）
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「图集 别还漏一个第二张图一半 就大大方方 满幅图 自动滑动」
             「图文详情页 全部文字在上面 图片都在下面 和头条一样」
   原来 `.mi-slide { flex: 0 0 76% }` —— 右边永远漏出下一张的 1/4。
   现在一台一张：满幅、无缝、计数器落在右下角（头条也是这个位置）。
   自动滑不在 CSS 里，在 app.js 的 galAuto()（手指一碰就停 9 秒）。
   ══════════════════════════════════════════════════════════════════════════ */
.mi-galbox { position: relative; margin: 9px 0 7px; }
.mi-galbox .mi-scroll { margin: 0; gap: 0; }
.mi-galbox .mi-slide { flex: 0 0 100%; border-radius: 6px; }
.mi-galbox .mi-slide:last-child { margin-right: 0; }
.mi-galnum {
  position: absolute; right: 8px; bottom: 8px;
  padding: 0 8px; border-radius: 11px;
  background: rgba(0, 0, 0, .42); color: #FFFFFF;
  font-size: 11.5px; line-height: 19px; letter-spacing: .5px;
  pointer-events: none;
}

/* 详情页图区：满幅贴边、无圆角 —— 正文读完接着看图（头条的组图也是贴边的） */
.art-gal { margin: 6px 0 2px; background: #F2F3F5; }
.art-gal .mi-galbox { margin: 0; }
.art-gal .mi-slide { border-radius: 0; }
.art-gal .mi-slide img { aspect-ratio: 3 / 2; }

/* ════════════════════════════════════════════════════════════════════════════
   视频卡播放钮 · 纯白实心三角（2026-10-06 老大点菜）
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「白色圈和黑色播放按钮 我不是让你直接 上下左右居中 用一个 白的播放按钮吗」
   病根：① 白圈 46px rgba(255,255,255,.88)+圆角50% 还在；② 三角黑色 rgba(20,20,20,.82)；
   ③ 191 行 margin:-26px 0 0 -26px 没删、296 行 translate(-50%,-50%) 又叠上 ——
   两个叠加 = -49px，按钮实际偏左上 26px（"我不是让你居中吗"的真正原因）。
   改法：去圈去底，只留白色实心三角，几何居中 + 三角视觉重心 2px 补偿；
   亮封面靠双层 drop-shadow 浮起（YouTube 同款思路，零外部资源）。
   ════════════════════════════════════════════════════════════════════════════ */
.v-wrap .v-play {
  left: 50%; top: 50%; width: 46px; height: 46px;
  margin: 0; transform: translate(-50%, -50%);
  background: none; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(6,26,35,.55)) drop-shadow(0 3px 10px rgba(6,26,35,.45));
}
.v-wrap .v-play::after {
  left: 50%; top: 50%; margin: 0;
  transform: translate(-44%, -50%);
  border-left: 20px solid #FFFFFF;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
/* @@playbtn_v2@@ */


/* ════════════════════════════════════════════════════════════════════════════
   功能卡色底 + 攻略卡表头对齐（2026-10-06 老大点菜）
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「攻略 是不是[该有个]背景色 比如 米白 有个区分 还有 商品 服务 都有个 背景色
             是不是 界面好看些 清晰些 显得高级些
             现在攻略呢个文字 和右侧的 照着走就行 不平行 难看」

   量到的病根（playwright 真渲染，不是猜）：
   ① 攻略/商品/服务/本店全是白底 —— 880~886 行那批「头条化」覆盖块
      （`.card{background:#FFFFFF}` / `.card-store{background:#FFFFFF}`）
      把 603 行本店卡的金色淡染一起刷白了：付费商业位的视觉标识被吞了；
   ② `.rt-head` 里「攻略」徽章中心比「照着走就行」高 3.5px —— 根因是
      `.ctype-chip{margin-bottom:8px}` 在 flex align-items:center 下把徽章顶高 4px。

   规矩：白底留给主力内容（图文/视频/图集）；只给三类功能卡极淡染色 + 圆角成块，
   色源与卡型徽标同系（不是彩虹）。左侧 3px 内嵌色条当路标 —— 一眼分得清，
   又不会把整屏染花。三类卡的类名由 inc/view.php 出（svc-goods / svc-serve）。
   本块必须在文件最末尾：前面 842/885/886 行的白底覆盖块权重相同、靠后即赢。
   ══════════════════════════════════════════════════════════════════════════ */

/* ① 攻略卡表头：徽章的下外边距在行内 flex 里是多余的，去掉才跟「照着走就行」齐 */
.rt-head .ctype-chip { margin-bottom: 0; }

/* ② 攻略卡 —— 米白纸感（老大点名的色） */
.card-route {
  background: #FAF7F2; border: none; border-radius: 12px;
  box-shadow: inset 3px 0 0 #8B80C4;
}
.feed .card-route { margin: 8px 0; }
.feed .card-route .rt-title { color: #333333; }

/* ③ 商品卡 —— 冷青白（海货的色系） */
.card-svc.svc-goods {
  background: #F3F8FA; border: none; border-radius: 12px;
  box-shadow: inset 3px 0 0 #4E9CBF;
}
.feed .card-svc.svc-goods { margin: 8px 0; }

/* ④ 服务卡 —— 暖金白（预约 / 人工服务） */
.card-svc.svc-serve {
  background: #FFFAF0; border: none; border-radius: 12px;
  box-shadow: inset 3px 0 0 #C79A2E;
}
.feed .card-svc.svc-serve { margin: 8px 0; }

/* ⑤ 本店卡 —— 把被刷掉的金色底找回来（付费商业位，最显眼的一档） */
.card-store {
  background: linear-gradient(180deg, #FFF9E8, #FFFDF6);
  border: 1px solid #EFDFB0; border-radius: 12px;
  box-shadow: inset 4px 0 0 #D4A017;
}
.feed .card-store { margin: 8px 0; }


/* ════════════════════════════════════════════════════════════════════════════
   全局左右边距校准 + 攻略/商品去左侧色条（2026-10-06 老大点菜）
   ──────────────────────────────────────────────────────────────────────────
   老大原话：「系统整体 左右边距 都按照 此刻 那个校准」
             「攻略 商品 不要 左侧 那些 颜色线条」
   实测：基准 12px（此刻卡与 feed 全部卡型都是 12）。
   不齐四处：顶栏/搜索/详情文字区走 --pad=16px；热点条与 .mine-h 带 2px 外边距成 14px；
   攻略/商品左侧 3px 色条不要了（服务/本店保留，本店色条=付费位标识）。
   ════════════════════════════════════════════════════════════════════════════ */
:root { --pad: 12px; }
.feed .ticker { margin-left: 0; margin-right: 0; }
.mine-h { margin-left: 0; margin-right: 0; }
.card-route { box-shadow: none; }
.card-svc.svc-goods { box-shadow: none; }
/* @@margins_v1@@ */

/* ════════════════════════════════════════════════════════════════════════════
   三连修（2026-10-06 老大看图点菜）
   ──────────────────────────────────────────────────────────────────────────
   ①「商品什么的 左侧那个 金边 都不要」—— 服务/本店卡的左侧内嵌金条摘掉；
      本店金渐变底与淡金边框保留（付费位的底色区分还在，只不要那道边）。
   ②「视频和图文 边距不一样 按照 视频边距」—— 实测视频图左右 12px（容器级），
      图集/多图/一图大卡的图左右 24px（卡 padding 12 + 容器 12 叠加）。
      改法：媒体块左右负拉 12px 贴到容器边；卡 overflow 放开（负 margin 不被裁）；
      图集贴边后滑块圆角归零，与视频图一致。
   ③「详情页 去预约 不板正 错位」—— .dt-ic-main 没设 justify-content，
      图标+文字全挤在按钮左侧、右边空 47px（playwright 实测）。居中即正。
   ════════════════════════════════════════════════════════════════════════════ */
.card-svc.svc-serve { box-shadow: none; }
.card-store { box-shadow: none; }
.feed .card-read { overflow: visible; }
.feed .card-gallery .mi-galbox { margin-left: -12px; margin-right: -12px; }
.feed .card-gallery .mi-slide { border-radius: 0; }
.feed .card-multi .mi-grid { margin-left: -12px; margin-right: -12px; }
.feed .card-big .mi-hero { margin-left: -12px; margin-right: -12px; }
.dt-bar .dt-ic.dt-ic-main { justify-content: center; }
/* @@fix3@@ */

/* ════════════════════════════════════════════════════════════════════════════
   隐私说明页重写（2026-10-06 晚 老大点菜）
   ──────────────────────────────────────────────────────────────────────────
   ① 文案重写：只讲「你为什么可以放心」，不讲系统内部怎么算（见 about.php 顶部注释）。
   ② 底部「回东港首页」链接删掉 —— 换成一个底部居中的圆形关闭钮 X。
      进来说明页的人想「看完就走」，关闭 = 回到来的地方，不该再给一个跳首页的出口。
      固定定位 + 让开安全区；正文留出下巴，别被钮压住。
   ════════════════════════════════════════════════════════════════════════════ */
.page-about .doc { padding-bottom: 108px; }
.page-about .doc-closewrap {
  position: fixed; left: 0; right: 0; z-index: 45;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; pointer-events: none;
}
.page-about .doc-closewrap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78px;
  background: linear-gradient(to top, rgba(255,255,255,.97) 34%, rgba(255,255,255,0));
  pointer-events: none;
}
.page-about .doc-close {
  pointer-events: auto; position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #333333; border: 1px solid #E6EAEC;
  box-shadow: 0 4px 14px rgba(11,79,108,.14), 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .16s ease;
}
.page-about .doc-close svg { width: 18px; height: 18px; display: block; }
.page-about .doc-close:active { transform: scale(.93); box-shadow: 0 2px 8px rgba(11,79,108,.16); }
@media (hover: hover) {
  .page-about .doc-close:hover { box-shadow: 0 6px 18px rgba(11,79,108,.2); }
}
/* @@about_privacy_v2@@ */

/* ── 微信分享缩略图占位（2026-10-06）：隐藏的第一张大图，给微信抓 ── */
.share-first { position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; }
/* @@share_img_v1@@ */

/* 此刻卡徽章·推算态（2026-10-06）：金边「实时」只留给实测数据，
   推算用灰白弱化 —— 让人一眼看出"这条是估的"，不喧宾、也不冒充。 */
.card-live .live-live.ll-calc {
  color: rgba(255, 255, 255, .78);
  border-color: rgba(255, 255, 255, .34);
  letter-spacing: 1.5px;
}

/* ════════════════════════════════════════════════════════════════════════════
   此刻页 v2（2026-10-06 晚）── 老大原话：「这个 此刻的东港 是不是 应该 好好设计设计」
   ──────────────────────────────────────────────────────────────────────────
   跟首页此刻卡 v7 同一设计语言：深蓝渐变面板 + 玻璃瓦片 + 金色主角。
   潮汐双主角（现在 / 下一个转折），日出日落·天气·季节退到瓦片位。
   事实一个没改，只换排版。零外部资源。 */
.nh-hero {
  background: linear-gradient(152deg, #062B3E 0%, #0B4F6C 52%, #16809A 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; color: #fff;
  padding: 16px 16px 13px;
  box-shadow: 0 16px 36px -18px rgba(6, 43, 62, .68);
  position: relative; overflow: hidden;
}
/* 水面落日光斑 —— 跟首页此刻卡同款，认得出是一家人 */
.nh-hero::before {
  content: ""; position: absolute; right: -44px; top: -56px;
  width: 172px; height: 172px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 103, .30), transparent 66%);
  pointer-events: none;
}
.nh-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; color: #fff; }
.nh-head .live-dot {
  background: #FFB067; animation: pulse 2.4s infinite;
  box-shadow: 0 0 0 0 rgba(255, 217, 160, .75);
}
.nh-badge {
  margin-left: auto; font-size: 10px; letter-spacing: 2px; color: #FFD9A0;
  border: 1px solid rgba(255, 217, 160, .45); border-radius: 20px;
  padding: 2px 7px 2px 9px; flex: none;
}
.nh-badge.nh-calc { color: rgba(255, 255, 255, .66); border-color: rgba(255, 255, 255, .28); }
.nh-hero-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255, 255, 255, .14); border-radius: 12px; overflow: hidden;
  margin-top: 14px;
}
.nh-hcell { background: rgba(255, 255, 255, .07); padding: 12px 14px 11px; min-width: 0; }
.nh-k { display: block; font-size: 11px; color: rgba(255, 255, 255, .62); letter-spacing: .5px; }
.nh-hcell b {
  display: block; margin-top: 4px; font-size: 21px; font-weight: 700;
  letter-spacing: -.3px; color: #fff; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nh-hcell b.nh-gold { color: #FFD9A0; text-shadow: 0 0 14px rgba(255, 193, 120, .35); }
.nh-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 9px; }
.nht {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px; padding: 9px 4px 8px; text-align: center; min-width: 0;
}
.nht b {
  display: block; font-size: 14.5px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nht span {
  display: block; font-size: 10px; color: rgba(255, 255, 255, .62); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nh-meta { color: rgba(255, 255, 255, .55); font-size: 11px; margin-top: 11px; }

/* 正当时：金头 + 四类小注；芯片放大一号（这是给游客挑东西的，别太 shy） */
.nh-season-head { color: #8A6D0B; font-size: 15px; }
.nh-season-sub {
  margin-left: auto; font-size: 10.5px; color: var(--ink-3);
  font-weight: 500; letter-spacing: 1.5px;
}
.nh-season .se-chip { font-size: 13px; padding: 6px 12px; border-radius: 10px; }
.nh-season .se-cat { margin-top: 14px; }
.nh-season .se-cat-k { color: var(--ink-2); padding-top: 5px; border-left: 2.5px solid var(--gold-2); padding-left: 8px; margin-left: -8px; }

/* ════════════════════════════════════════════════════════════════════════════
   好物页 v2（2026-10-06 晚）—— 分类条 / 溯源横幅 / 新生意预告卡
   老大拍板：货架按平台真正的生意摆。追加式覆盖，回退 = 删掉本块。
   ════════════════════════════════════════════════════════════════════════════ */

/* 分类条：横向滑，pill 高亮（头条频道条的规矩，但这是货架，选中给红底） */
.gl-chips {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 8px -12px 0; padding: 6px 12px 8px;
  scrollbar-width: none;
}
.gl-chips::-webkit-scrollbar { display: none; }
.glc {
  flex: none; font-size: 13px; color: #333333; background: #F5F5F5;
  padding: 6px 14px; border-radius: 17px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.glc.on { background: #FF403A; color: #FFFFFF; font-weight: 600; }

/* 分区标题：主标题 + 一句人话小注；锚点落点给顶栏让位 */
.gl-h { scroll-margin-top: 78px; }
.gl-hsub {
  display: block; font-size: 11.5px; color: #9B9B9B; font-weight: 400;
  margin-top: 3px; letter-spacing: 0;
}

/* 溯源横幅：跟首页此刻卡（nh-hero）一个家族 —— 深海 + 金码 */
.gl-tracebar {
  display: flex; align-items: center; gap: 13px;
  margin: 8px 0 4px; padding: 13px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgb(6, 43, 62) 0%, rgb(11, 68, 96) 100%);
  border: 1px solid rgba(255, 217, 160, .38);
  box-shadow: 0 14px 30px -20px rgba(6, 43, 62, .7);
  position: relative; overflow: hidden; scroll-margin-top: 78px;
}
.gl-tracebar::before {
  content: ""; position: absolute; right: -40px; top: -52px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 103, .26), transparent 66%);
  pointer-events: none;
}
.gt-qr { width: 40px; height: 40px; flex: none; }
.gt-tx { min-width: 0; }
.gt-tx b { display: block; font-size: 14.5px; font-weight: 600; color: #FFFFFF; letter-spacing: -.2px; }
.gt-tx span { display: block; font-size: 11px; color: rgba(255, 255, 255, .62); margin-top: 4px; }

/* 新生意预告卡：虚线框 = 还没开张，跟实货一眼区分开 */
.gl-soon {
  border: 1.5px dashed #D9DEE3; border-radius: 14px;
  background: #FBFCFD; padding: 13px 14px 14px; margin-bottom: 10px;
}
.gs-top { display: flex; align-items: center; gap: 8px; }
.gs-badge {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #8A6D0B; background: #FBF3DF; border: 1px solid #D9A21B;
  border-radius: 6px; padding: 2px 7px;
}
.gs-top h3 { font-size: 15px; font-weight: 700; color: #333333; }
.gs-desc { font-size: 12.5px; color: #6F7073; line-height: 1.85; margin-top: 7px; }
.gs-act { margin-top: 9px; }
.gs-btn {
  font-size: 13px; font-weight: 600; color: #FF403A; background: #FFF1F0;
  border: none; border-radius: 16px; padding: 7px 16px;
}
.gs-btn:active { background: #FFE4E2; }
.gs-form { display: flex; gap: 8px; }
.gs-form[hidden] { display: none; }
.gs-mob {
  flex: 1; min-width: 0; height: 36px; border: 1px solid #E5E8EB; border-radius: 8px;
  padding: 0 10px; font-size: 13.5px; background: #FFFFFF; color: #333333;
}
.gs-mob:focus { outline: none; border-color: #FF403A; }
.gs-go {
  flex: none; height: 36px; padding: 0 14px; border: none; border-radius: 8px;
  background: #FF403A; color: #FFFFFF; font-size: 13px; font-weight: 600;
}
.gs-go:disabled { opacity: .55; }
.gs-done { display: block; font-size: 12.5px; font-weight: 600; color: #2E7D5B; }
.gs-done[hidden] { display: none; }
.gs-err { display: block; font-size: 12px; color: #FF403A; margin-top: 6px; }
.gs-err[hidden] { display: none; }

@media (min-width: 560px) {
  .gl-tracebar { margin: 8px 2px 4px; }
}