/* ==================================================================
   SIAS 2026 逛展助手 —— 手机优先
   视觉线索取自 SIAS 标识本身的竖条（电平条）：
   区位 A/B/C 用 1/2/3 格电平条编码 —— 是信息，不是装饰。
   展台等级三级：标准 → 特邀 → 总冠名，在徽章和地图上用同一套语言表达。
   ================================================================== */

:root{
  color-scheme:light;   /* 只做亮色，不跟随系统深色 */
  --paper:#FFF6F3;
  --card:#FFFFFF;
  --ink:#1C0910;
  --ink-70:#5E3B45;
  --ink-45:#916F78;
  --line:#F1DED8;
  --line-2:#E6CCC5;

  --crimson:#E4123F;
  --rose:#FF5C86;
  --plum:#7E2280;
  --areaA:#E4123F;
  --areaB:#B81A63;
  --areaC:#7E2280;

  --signal:#0E9C84;
  --amber:#B07A00;
  --pick:#FF7A00;        /* 地图当前选中 */
  --pick-2:#C25400;

  --r:14px;
  --sp:16px;
  --stickTop:0px;
  --shadow:0 1px 2px rgba(28,9,16,.05), 0 8px 24px -12px rgba(28,9,16,.18);

  --font:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Source Han Sans SC",-apple-system,
         BlinkMacSystemFont,"Segoe UI",system-ui,"Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
/* 必须在所有组件规则之前：.sheet / .view 等自带 display，
   会盖掉浏览器对 hidden 属性的 display:none —— 隐藏的全屏遮罩会吃掉全部点击 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:15px; line-height:1.55;
  padding-bottom:calc(62px + env(safe-area-inset-bottom));
}
body.locked{overflow:hidden}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.015em}
p{margin:0}
button,input{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--crimson); outline-offset:2px; border-radius:6px}

/* ================= 顶栏（随滚动收起） ================= */
.head-stack{
  position:sticky; top:0; z-index:40; background:var(--paper);
  transition:transform .22s ease;
}
/* 收起一律用 transform，绝不改文档高度 ——
   一旦文档变矮，浏览器会回夹 scrollY，方向判断就会误判成上滑，来回抖。 */
/* 手机：整块顶栏移出 */
body.nav-mode-all.nav-up .head-stack{transform:translateY(-100%)}
/* 平板：整块上移一个搜索框的高度，同时把标识栏原地拉回来，搜索框就滑到它背后 */
body.nav-mode-search.nav-up .head-stack{transform:translateY(calc(-1 * var(--searchH,60px)))}
body.nav-mode-search.nav-up .topbar{transform:translateY(var(--searchH,60px))}
/* 桌面：不收（JS 不会给 body 加 nav-up） */
@media (prefers-reduced-motion:reduce){.head-stack,.topbar{transition:none}}

.topbar{
  position:relative; z-index:2;   /* 盖住滑到背后的搜索框 */
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px var(--sp); background:var(--card); border-bottom:1px solid var(--line);
  transition:transform .22s ease;
}
.brandmark{display:flex; align-items:center; gap:10px; min-width:0}
.sig{display:flex; align-items:flex-end; gap:2.5px; height:20px}
.sig i{width:3px; background:var(--crimson); border-radius:2px; display:block}
.sig i:nth-child(1){height:8px}
.sig i:nth-child(2){height:14px}
.sig i:nth-child(3){height:20px}
.sig i:nth-child(4){height:13px}
.sig i:nth-child(5){height:6px}
.brandtext{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brandtext b{font-size:16px; font-weight:900; letter-spacing:.04em}
.brandtext .ed{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0;
  color:var(--crimson); vertical-align:2px}
.brandtext .sub{font-size:10.5px; color:var(--ink-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meta{display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right}
.status{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap}
.status-open{background:color-mix(in srgb,var(--signal) 14%,transparent); color:var(--signal)}
.status-soon{background:color-mix(in srgb,var(--crimson) 12%,transparent); color:var(--crimson)}
.status-closed{background:var(--line); color:var(--ink-45)}
.counts{font-size:10.5px; color:var(--ink-45); font-variant-numeric:tabular-nums}

/* ================= 搜索 ================= */
.searchwrap{position:relative; z-index:1; padding:9px var(--sp); background:var(--paper)}
.search{display:flex; align-items:center; gap:8px; background:var(--card);
  border:1.5px solid var(--line-2); border-radius:99px; padding:0 14px; height:42px; box-shadow:var(--shadow)}
.search:focus-within{border-color:var(--crimson)}
.search .ico{width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-45); stroke-width:2; stroke-linecap:round}
.search input{flex:1; min-width:0; border:0; background:none; outline:none; font-size:15px}
.search input::-webkit-search-cancel-button{display:none}
.qclear{width:24px; height:24px; border-radius:99px; color:var(--ink-45); font-size:19px; line-height:1; flex:none; display:none}
body.searching .qclear{display:block}

/* 结果面板绝对定位 —— 不撑高顶栏，筛选栏的吸顶位置才不会跳 */
.results{position:absolute; left:var(--sp); right:var(--sp); top:100%; z-index:5;
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; max-height:66vh; overflow-y:auto}
.res-sec h4{font-size:11px; letter-spacing:.1em; color:var(--ink-45); padding:10px 14px 6px; font-weight:800}
.res-row{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 14px; border-top:1px solid var(--line)}
.res-row:hover,.res-row:focus-visible{background:color-mix(in srgb,var(--crimson) 6%,transparent)}
.res-code{font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--crimson); white-space:nowrap}
.res-name{flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res-name em{font-style:normal; font-size:11px; color:var(--ink-45)}
.res-go{font-size:11px; color:var(--ink-45); border:1px solid var(--line-2); border-radius:99px; padding:1px 8px}
.res-empty{padding:18px 16px}
.res-empty .note{font-size:12.5px; color:var(--ink-45); margin-top:6px}
body.searching main{opacity:.2; pointer-events:none}

/* ============ 区位图标：展馆三个区块的缩略平面，点亮所在那格 ============
   左=A（西，主入口）中=B 右=C（东）—— 和真实馆内顺序一致            */
.zone{display:inline-flex; gap:1.5px; flex:none; padding:1.5px;
  border:1px solid currentColor; border-radius:3px; opacity:.8}
.zone i{width:3px; height:7px; border-radius:.5px; background:currentColor; opacity:.3}
.zone i.on{opacity:1}
.zone-A{color:var(--areaA)} .zone-B{color:var(--areaB)} .zone-C{color:var(--areaC)}

/* ================= 筛选栏（吸顶） ================= */
main{padding:0 var(--sp) 24px}
.filterbar{
  position:sticky; top:var(--stickTop); z-index:30;
  margin:0 calc(var(--sp) * -1); padding:6px var(--sp) 0;
  background:var(--paper); border-bottom:1px solid var(--line);
  transition:top .22s ease;
}
@media (prefers-reduced-motion:reduce){.filterbar{transition:none}}
.pillbar{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--sp) * -1); padding:2px var(--sp) 7px}
.pillbar::-webkit-scrollbar{display:none}
.pill{white-space:nowrap; border:1.5px solid var(--line-2); background:var(--card);
  border-radius:99px; padding:6px 12px; font-size:13px; font-weight:700; color:var(--ink-70)}
.pill b{font-family:var(--mono); font-weight:700; font-size:11px; color:var(--ink-45); margin-left:2px}
.pill.is-on{background:var(--crimson); border-color:var(--crimson); color:#fff}
.pill.is-on b{color:rgba(255,255,255,.72)}
.pill-sm{padding:4px 10px; font-size:12px}
.pill-clear{background:var(--pick); border-color:var(--pick); color:#fff}
.subbar{display:flex; align-items:center; gap:10px}
.subbar .pillbar{min-width:0; flex:1}
.switch{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-45);
  white-space:nowrap; flex:none; padding-bottom:5px}
.switch input{accent-color:var(--crimson); width:15px; height:15px}

/* 结果计数条：一行搞定，不占额外高度 */
.head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:11px 0 9px}
.head .bh-title{font-size:15px; font-weight:800; letter-spacing:-.02em}
.head .bh-count{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--crimson)}
.head .bh-hint{font-size:11.5px; color:var(--ink-45); margin-left:auto}
@media (max-width:519px){.head .bh-hint{display:none}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid var(--line-2); background:var(--card); border-radius:99px;
  padding:11px 18px; font-size:14px; font-weight:700; text-decoration:none; color:var(--ink-70)}
.btn-primary{background:var(--crimson); border-color:var(--crimson); color:#fff}
.btn-quiet{color:var(--ink-45)}

/* ================= 品牌列表（紧凑行） ================= */
.grid{display:grid; gap:7px; grid-template-columns:1fr}
@media (min-width:720px){.grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}}
@media (min-width:1240px){main,.searchwrap{max-width:1240px; margin-inline:auto}}

.card{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:0 9px;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:10px 8px 10px 12px; cursor:pointer;
  transition:border-color .14s, background .14s;
}
.card:hover{border-color:var(--crimson)}
.card.is-crown{border-color:color-mix(in srgb,var(--crimson) 45%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--crimson) 7%,var(--card)),var(--card) 62%)}
.card.is-dealer{background:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--ink) 3%,transparent) 7px 8px),var(--card)}
.card-main{min-width:0}
.card-main h3{font-size:14.5px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 列表里分类退成一行灰字，颜色继续承担含义；chip 样式留给弹窗 */
.card .card-tags{display:block; margin-top:3px; font-size:11px; line-height:1.4; color:var(--ink-45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .card-tags .tag{display:inline; background:none; border:0; padding:0;
  font-size:inherit; font-weight:600; color:inherit; border-radius:0}
.card .card-tags .tag + .tag::before{content:"·"; margin:0 4px; opacity:.5}
.card .card-tags .tag-main{color:var(--crimson)}
.card .card-tags .tag-dealer{color:var(--plum); font-weight:700}
.card .card-tags .tag-todo{color:var(--amber)}
.card .card-tags .tag-sub{display:none}
.card-ft{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:132px}

/* 标签组默认排布 —— 卡片里的紧凑样式在上面单独覆盖 */
.card-tags{display:flex; flex-wrap:wrap; align-items:center; gap:5px}
.tag{font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px;
  background:var(--line); color:var(--ink-70)}
.tag-main{background:color-mix(in srgb,var(--crimson) 12%,transparent); color:var(--crimson)}
.tag-sub{background:transparent; border:1px solid var(--line-2); color:var(--ink-45)}
.tag-dealer{background:color-mix(in srgb,var(--plum) 14%,transparent); color:var(--plum)}
.tag-todo{background:color-mix(in srgb,var(--amber) 16%,transparent); color:var(--amber)}
.tag-crown{background:var(--crimson); color:#fff}

/* 展位徽章 —— 三级色阶，逐级加重：
   标准 = 白底细边  →  特邀 = 所在区色的浅底 + 区色字  →  总冠名 = 实心主色 + 白字 */
.chip-booth{--ac:var(--ink-45); display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  padding:3px 8px 3px 6px; border-radius:99px;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-70); white-space:nowrap}
.chip-A{--ac:var(--areaA)} .chip-B{--ac:var(--areaB)} .chip-C{--ac:var(--areaC)}
.chip-vip{background:color-mix(in srgb,var(--ac) 10%,var(--card));
  border-color:color-mix(in srgb,var(--ac) 38%,transparent); color:var(--ac); font-weight:800}
.chip-crown{background:var(--crimson); border-color:var(--crimson); color:#fff; font-weight:800}
.chip-booth:hover{border-color:var(--crimson); color:var(--crimson)}
.chip-crown:hover{color:#fff; opacity:.88}
.chip-crown .crown{font-size:9px; line-height:1}

.fav{width:34px; height:34px; flex:none; border-radius:99px; display:grid; place-items:center}
.fav svg{width:19px; height:19px; fill:none; stroke:var(--ink-45); stroke-width:1.7; stroke-linejoin:round}
.fav[aria-pressed="true"] svg{fill:var(--signal); stroke:var(--signal)}
.fav:hover svg{stroke:var(--signal)}
.empty{color:var(--ink-45); padding:26px 0; text-align:center; grid-column:1/-1}

/* ================= 地图 ================= */
.maphead{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:11px 0 10px}
.maphead h2{font-size:19px; letter-spacing:-.03em}
.maphead p{font-size:11.5px; color:var(--ink-45); margin-top:2px}
.zoom{display:flex; align-items:center; gap:2px; border:1.5px solid var(--line-2);
  border-radius:99px; background:var(--card); flex:none; overflow:hidden}
.zoom button{width:34px; height:32px; font-size:17px; font-weight:700; color:var(--ink-70)}
.zoom button:hover{background:var(--line)}
#zoomLabel{font-family:var(--mono); font-size:11px; color:var(--ink-45); width:40px; text-align:center}
.jumpbar{padding-bottom:9px}

.mapwrap{overflow:auto; -webkit-overflow-scrolling:touch; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:10px;
  height:min(70vh,660px); overscroll-behavior:contain}
#plan{display:block; width:100%; height:auto}

.hall{fill:color-mix(in srgb,var(--ink) 4%,transparent); stroke:var(--line-2); stroke-width:.7}
.area-label{font-family:var(--font); font-size:7px; font-weight:900; fill:var(--ink-45); letter-spacing:.1em}
.compass text{font-family:var(--mono); font-size:5.5px; fill:var(--ink-45); text-anchor:end}

.cell rect{stroke-width:.6}
.cell text{font-family:var(--mono); font-weight:700; text-anchor:middle; dominant-baseline:central; pointer-events:none}
/* 标准展位 */
.cell-std rect{fill:var(--card); stroke:var(--line-2)}
.cell-std text{font-size:4.2px; fill:var(--ink-70)}
.area-C.cell-std text{fill:var(--areaC)}
/* 特邀展台：B 区 */
.cell-big rect{fill:color-mix(in srgb,var(--areaB) 9%,var(--card)); stroke:color-mix(in srgb,var(--areaB) 34%,transparent)}
.cell-big text{font-size:7px; fill:var(--areaB)}
/* 特邀展台：A 区 —— 面积更大，填充更实、描边更重 */
.area-A.cell-big rect{fill:color-mix(in srgb,var(--crimson) 18%,var(--card));
  stroke:var(--crimson); stroke-width:1.2}
.area-A.cell-big text{fill:var(--crimson); font-size:7.6px}
/* 总冠名 A01 —— 实心，全图唯一。三行：展位号大、品牌名小 */
.cell.is-crown rect{fill:var(--crimson); stroke:var(--crimson); stroke-width:1.8}
.cell.is-crown text{fill:#fff}
.cell.is-crown .l1{font-size:8.4px}
.cell.is-crown .l2{font-size:5px; font-family:var(--font); font-weight:700; opacity:.94}

.cell-zone rect{fill:color-mix(in srgb,var(--plum) 10%,var(--card)); stroke:color-mix(in srgb,var(--plum) 32%,transparent)}
.cell-zone text{font-size:5.5px; fill:var(--plum); font-family:var(--font)}
.cell-facility rect{fill:color-mix(in srgb,var(--signal) 11%,var(--card)); stroke:color-mix(in srgb,var(--signal) 34%,transparent)}
.cell-facility text{font-size:4.4px; fill:var(--signal); font-family:var(--font)}
.cell-gate rect{fill:none; stroke:var(--signal); stroke-width:1.1; stroke-dasharray:2.5 1.5}
.cell-gate text{font-size:2.9px; fill:var(--signal); font-family:var(--font); font-weight:800}
/* 消防通道：南墙上的两个疏散口，仅标注不可点 */
.cell-fire rect{fill:color-mix(in srgb,var(--amber) 12%,var(--card));
  stroke:var(--amber); stroke-width:.9; stroke-dasharray:2 1.4}
.cell-fire text{font-size:2.9px; fill:var(--amber); font-family:var(--font); font-weight:800}

.cell.is-btn{cursor:pointer}
.cell.is-btn:hover rect{fill:color-mix(in srgb,var(--pick) 26%,var(--card)); stroke:var(--pick)}
.cell.is-target rect{fill:var(--pick); stroke:var(--pick-2); stroke-width:1.6}
.cell.is-target text{fill:#fff}
.cell.is-target{animation:ping 1.1s ease-out 3}
@keyframes ping{0%,100%{opacity:1} 45%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.cell.is-target{animation:none}}

.mapnow:not(:empty){font-size:12.5px; color:var(--ink-70); line-height:1.45;
  padding:8px 11px; margin-bottom:8px; border-radius:10px;
  background:color-mix(in srgb,var(--pick) 11%,transparent);
  border-left:3px solid var(--pick)}
.mapnow b{font-family:var(--mono); color:var(--pick-2)}

/* ================= 清单 ================= */
.planstat{font-family:var(--mono); font-size:12px; color:var(--signal); font-weight:700; white-space:nowrap; flex:none}
.plan-group{margin-bottom:18px}
.plan-group h3{display:flex; align-items:center; gap:8px; font-size:12.5px; padding-bottom:6px;
  border-bottom:1px solid var(--line); margin-bottom:2px}
.plan-group h3 span{font-family:var(--mono); font-size:11px; color:var(--ink-45); font-weight:700}
.plan-row{display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--line)}
.plan-row.is-done{opacity:.45}
.plan-row.is-done .plan-main{text-decoration:line-through}
.tick{width:22px; height:22px; flex:none; border:1.8px solid var(--line-2); border-radius:7px; position:relative}
.tick[aria-pressed="true"]{background:var(--signal); border-color:var(--signal)}
.tick[aria-pressed="true"]::after{content:""; position:absolute; left:6.5px; top:3px; width:5px; height:10px;
  border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(42deg)}
.plan-main{flex:1; min-width:0}
.linklike{font-size:14px; font-weight:700; text-align:left; display:block; width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linklike:hover{color:var(--crimson)}
.plan-sub{font-size:11px; color:var(--ink-45); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.plan-booths{display:flex; gap:4px; flex:none}
.x{width:26px; height:26px; flex:none; border-radius:99px; color:var(--ink-45); font-size:19px}
.x:hover{color:var(--crimson); background:var(--line)}
.empty-state{text-align:center; padding:44px 20px; color:var(--ink-45)}
.empty-title{font-size:17px; font-weight:800; color:var(--ink); margin-bottom:8px}
.empty-state .btn{margin-top:18px}
.planacts{display:flex; gap:8px; margin-top:16px}

/* ================= 信息 ================= */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px; margin-bottom:10px}
.panel:first-child{margin-top:12px}
.panel h3{font-size:15.5px; margin-bottom:11px; display:flex; align-items:center; gap:8px}
.panel h3::before{content:""; width:3px; height:15px; background:var(--crimson); border-radius:2px}
.lede{font-size:13px; color:var(--ink-70); margin-bottom:10px}
.day{margin-bottom:13px}
.day-hd{display:flex; align-items:baseline; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.day-hd b{font-size:14.5px}
.day-hd span{font-family:var(--mono); font-size:12px; color:var(--crimson); font-weight:700}
.ev{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:7px 0; border-bottom:1px solid var(--line)}
.ev-t{font-family:var(--mono); font-size:11.5px; color:var(--ink-45); grid-row:span 2; padding-top:2px}
.ev-n{font-size:13.5px; font-weight:700}
.ev-w{font-size:11.5px; color:var(--ink-45)}
.ev-prize .ev-n{color:var(--crimson)}
.ev-talk .ev-n{color:var(--plum)}
.act{padding:11px 0; border-bottom:1px solid var(--line)}
.act:last-child{border:0; padding-bottom:0}
.act h4{font-size:14px}
.act-meta{font-size:12px; color:var(--crimson); font-weight:700; margin:3px 0 6px}
.act ul{margin:0; padding-left:17px; font-size:13px; color:var(--ink-70)}
.act li{margin:2px 0}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:13px}
.kv dt{font-weight:700; color:var(--ink-45); font-size:12.5px; white-space:nowrap}
.kv dd{margin:0; color:var(--ink-70)}
.note{font-size:12.5px; color:var(--ink-45); line-height:1.65}
.note b{color:var(--ink-70)}
.fig{width:100%; border-radius:10px; margin-top:12px; border:1px solid var(--line)}
.figs{display:flex; flex-wrap:wrap; gap:7px}
.figlink{font-size:12.5px; font-weight:700; text-decoration:none; padding:6px 12px;
  border:1px solid var(--line-2); border-radius:99px}
.figlink:hover{border-color:var(--crimson); color:var(--crimson)}

/* ================= 底部 Tab ================= */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tab{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 6px;
  font-size:10.5px; font-weight:700; color:var(--ink-45); position:relative}
.tab svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round}
.tab.is-on{color:var(--crimson)}
.tab.is-on svg{stroke-width:2.1}
.badge{position:absolute; top:4px; left:calc(50% + 8px); min-width:16px; height:16px; padding:0 4px;
  background:var(--signal); color:#fff; border-radius:99px; font-family:var(--mono);
  font-size:10px; line-height:16px; text-align:center; font-weight:700}

/* ================= 弹窗 ================= */
.sheet{position:fixed; inset:0; z-index:60; background:rgba(28,9,16,.42);
  display:flex; align-items:flex-end; opacity:0; transition:opacity .18s}
.sheet.is-open{opacity:1}
.sheet-panel{position:relative; width:100%; max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:20px 20px 0 0;
  padding:18px 16px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(14px); transition:transform .2s}
.sheet.is-open .sheet-panel{transform:none}
@media (min-width:700px){
  .sheet{align-items:center; justify-content:center; padding:24px}
  .sheet-panel{max-width:520px; border-radius:18px; max-height:82vh; padding:20px 20px 24px}
}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-panel{transition:none}}

/* 收藏键和关闭键在同一 flex 行、同尺寸 —— 对齐靠布局，不靠手调偏移 */
.sh-hd{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.sh-hd-main{flex:1; min-width:0}
.sh-hd-act{display:flex; align-items:center; gap:4px; flex:none}
.sh-hd h2{font-size:20px; line-height:1.3; margin-bottom:7px}
.sh-hd .code-lg{font-family:var(--mono); font-size:28px; letter-spacing:-.02em; color:var(--crimson); line-height:1.15}
.fav-lg,.sheet-close{width:36px; height:36px; border-radius:99px; display:grid; place-items:center; flex:none}
.fav-lg svg{width:22px; height:22px}
.sheet-close{background:var(--line); color:var(--ink-45)}
.sheet-close svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.sheet-close:hover{color:var(--ink)}

.sh-booths{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.sh-booth{display:flex; align-items:center; gap:9px; padding:8px 10px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px}
.sh-tier{font-size:11.5px; font-weight:700; color:var(--ink-70)}
.sh-area{font-size:11.5px; color:var(--ink-45); margin-left:auto}
.sh-kv{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0 0 16px; font-size:13.5px}
.sh-kv dt{font-size:12px; font-weight:800; color:var(--ink-45); white-space:nowrap}
.sh-kv dd{margin:0; color:var(--ink-70); line-height:1.6}
.sh-kv .muted{color:var(--ink-45)}
.sh-where{font-size:12.5px; color:var(--ink-45); line-height:1.6; margin-bottom:14px;
  border-left:2px solid var(--line-2); padding-left:10px}
.sh-rel{margin-bottom:14px}
.sh-rel h4{font-size:11.5px; letter-spacing:.08em; color:var(--ink-45); margin-bottom:7px}
.rel-list{display:flex; flex-wrap:wrap; gap:6px}
.rel{font-size:13px; font-weight:700; padding:6px 12px; border:1px solid var(--line-2); border-radius:99px}
.rel:hover{border-color:var(--crimson); color:var(--crimson)}
.sh-occ{display:flex; flex-direction:column; gap:2px; margin-bottom:16px}
.occ{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}
.occ.is-dealer .occ-name{color:var(--plum)}
.occ-name{font-size:14px; font-weight:700; text-align:left; flex:none; max-width:46%}
.occ .card-tags{flex:1; display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end}
.sh-act{display:flex; gap:8px}
.sh-act .btn{flex:1}

/* ================= Toast ================= */
.toast{position:fixed; left:50%; bottom:calc(78px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px); z-index:70; background:var(--ink); color:var(--paper);
  padding:10px 18px; border-radius:99px; font-size:13.5px; font-weight:700;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s}
.toast.is-on{opacity:1; transform:translate(-50%,0)}