/* ============================================================================
   徐州图文路书 · main.css
   结构: 1.设计变量  2.基础  3.通用组件  4.顶栏/页签  5.地图  6.内容与卡片
         7.总览  8.灯箱  9.工具浮钮/目录浮层(手机)  10.手机布局(≤640px)  11.动效与可达性
   约定:
   - 圆角体系: 控件/页签 8px, 卡片/面板 12px, 大面板/抽屉 16px
   - 单一强调色: 琥珀橙(页签指示/当前态); 分类色仅表达分类语义
   - 阴影统一暖灰色调, 不用纯黑; 动效只回应操作, 尊重 reduced-motion
   - z-index 阶梯(勿随意插层): map-slot 850 < topbar 900 < dock 950
     < 工具浮钮组 1200 < 桌面选点器 2200 < sheet-mask 3000 < sheet 3100 < lightbox 5000
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root{
  color-scheme: light;
  /* 纸面与墨色 */
  --paper:#f2f0ea;
  --paper-2:#faf9f5;
  --surface:#ffffff;
  --ink:#23262c;
  --ink-2:#575d69;
  --ink-3:#6d7480;
  --line:#e5e2d9;
  --line-strong:#d6d2c6;
  /* 夜色(顶栏/页签): 暖咖啡单色系, 与纸面同温 */
  --night:#2b2722;
  --night-2:#3d372f;
  --night-line:rgba(255,255,255,.09);
  --night-text:rgba(247,244,236,.6);
  --night-text-strong:#f7f4ec;
  --glass-bg:rgba(43,39,34,.72);
  --glass-blur:blur(18px) saturate(1.4);
  --accent-bright:#f2a352;
  /* 强调与语义 */
  --accent:#e0862c;
  --accent-deep:#a85a12;
  --accent-tint:#fdf3e7;
  --cat-scenic:#e65100;
  --cat-market:#1565c0;
  --cat-cafe:#6a1b9a;
  --cat-food:#c62828;
  --tip-bg:#fff8ec;
  --tip-bar:#e9a13b;
  --datum-bg:#faf3e8;
  --datum-ink:#8a5a2b;
  /* 字体与排版: 中文正文 1.85 行高 + 微字距, 阅读页 2.0 */
  --font-sans:system-ui,-apple-system,"Segoe UI","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,Consolas,"SF Mono",Menlo,monospace;
  --fs-xs:11.5px;
  --fs-sm:12.5px;
  --fs-md:13.5px;
  --fs-body:15px;
  --fs-title:18px;
  --lh-tight:1.4;
  --lh-body:1.85;
  --lh-loose:2.0;
  --ls-body:.012em;
  /* 形状与阴影(暖灰) */
  --r-ctl:8px;
  --r-card:12px;
  --r-panel:16px;
  --shadow-1:0 1px 2px rgba(56,48,34,.05),0 2px 10px rgba(56,48,34,.07);
  --shadow-2:0 6px 24px rgba(56,48,34,.16);
  --shadow-up:0 -10px 40px rgba(56,48,34,.20);
  /* 动效 */
  --dur-1:.18s;
  --dur-2:.3s;
  --ease:cubic-bezier(.25,.7,.3,1);
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0;height:100%;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--ink);
  background:var(--paper);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
body.locked{overflow:hidden}
button{font-family:inherit;letter-spacing:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Lucide 内联图标: 1em 跟随字号, currentColor 跟随文字颜色 */
.icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}

/* ---------- 3. 通用组件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:var(--r-ctl);padding:8px 16px;min-height:40px;
  font-size:var(--fs-md);cursor:pointer;user-select:none;
  transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.btn:hover{background:var(--paper-2);border-color:#c8c3b4}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.35;cursor:default;transform:none}

.pk{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;padding:3px 0;border-radius:var(--r-ctl);
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.03em;
}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-ctl);padding:3px 10px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.chip.loc{background:#eef3f9;border-color:#d5e1f0;color:#2c4a6e}
.chip.loc .icon{width:12px;height:12px}

.kbd{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-size:12.5px}

/* ---------- 4. 顶栏 / 页签 ---------- */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-bottom:env(safe-area-inset-bottom,0px)}

.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:11px 20px;
  background:linear-gradient(120deg,var(--night),var(--night-2));color:var(--night-text-strong);
}
.topbar-title{margin:0;font-size:19px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.topbar-sub{font-size:12px;color:#d8d0c2;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.04em}
.topbar-stat{display:inline-flex;align-items:center;gap:5px;font-size:12px;background:rgba(255,255,255,.13);border-radius:999px;padding:3px 12px;white-space:nowrap;color:#e8e6df}
.topbar-stat .icon{width:12px;height:12px}

.tabbar{flex:0 0 auto;display:flex;background:var(--night);padding:0 12px;gap:2px}
.tabbar button{
  appearance:none;border:0;background:transparent;color:var(--night-text);
  font-size:14px;padding:12px 18px;cursor:pointer;border-bottom:3px solid transparent;
  transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.tabbar button.on{color:var(--night-text-strong);border-bottom-color:var(--accent);font-weight:600;background:rgba(255,255,255,.06)}
.tabbar .t-full{display:inline-flex;align-items:center;gap:6px}
.tabbar .t-short{display:none}

/* ---------- 5. 地图 ---------- */
.stage{flex:1;display:flex;min-height:0;position:relative}
.map-slot{flex:0 0 56%;position:relative;z-index:0;min-height:0;border-right:1px solid #cfccc4;background:#dfe5dc}
.map-panel{position:relative;height:100%;overflow:hidden}
#map{position:absolute;inset:0}
.leaflet-marker-icon.dim{opacity:.15;filter:grayscale(1)}
.leaflet-marker-icon.active{filter:drop-shadow(0 3px 6px rgba(20,16,8,.45))}

/* Leaflet 控件与弹窗: 按页面主题统一风格 */
.leaflet-bar{border:1px solid var(--line-strong);border-radius:var(--r-ctl);overflow:hidden;box-shadow:var(--shadow-2)}
.leaflet-bar a,.leaflet-touch .leaflet-bar a{
  width:34px;height:34px;line-height:30px;font-size:17px;
  background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);
}
.leaflet-bar a:last-child,.leaflet-touch .leaflet-bar a:last-child{border-bottom:0}
.leaflet-bar a:hover,.leaflet-touch .leaflet-bar a:hover{background:var(--paper-2);color:var(--ink)}
.leaflet-popup-content-wrapper{border-radius:var(--r-card);box-shadow:var(--shadow-2)}
.leaflet-popup-content{margin:9px 26px 9px 12px;line-height:1.5}
.leaflet-popup-close-button{color:#9aa0ab}
.leaflet-tooltip{font-family:var(--font-sans)}
.leaflet-tooltip .icon{width:13px;height:13px;vertical-align:-2px}
.place-pop .pop-head{display:flex;align-items:center;gap:8px}
.place-pop .pop-head b{font-size:14px;letter-spacing:.02em;white-space:nowrap}

.layer-panel{
  position:absolute;top:10px;right:10px;z-index:1000;
  background:rgba(255,255,255,.96);border-radius:var(--r-card);box-shadow:var(--shadow-2);
  padding:10px 12px;font-size:12.5px;min-width:150px;
}
.layer-panel .lp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;user-select:none;margin:0 0 6px;font-size:12px;color:var(--ink-2)}
.layer-panel .lp-head b{font-weight:600}
.layer-panel .lp-head span{color:#98a0ac}
.layer-panel.closed{padding:0;min-width:0;border-radius:999px}
.layer-panel.closed .lp-head{margin:0;padding:8px 14px;gap:6px;align-items:center}
.layer-panel.closed .lp-body{display:none}
.layer-panel label{display:flex;align-items:center;gap:6px;padding:3px 0;cursor:pointer;user-select:none}
.layer-panel .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.layer-panel .dash{width:14px;height:0;border-top:3px dashed #888;display:inline-block;flex-shrink:0}
.layer-panel hr{border:0;border-top:1px solid #eee;margin:6px 0}

/* ---------- 6. 内容与卡片 ---------- */
.content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--paper)}
.pane{flex:1;display:none;min-height:0;flex-direction:column}
.pane.on{display:flex}

.pane-head{flex:0 0 auto;padding:14px 20px 10px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.pane-head h2{margin:0;font-size:16.5px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.pane-head h2 .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.pane-head h2 small{color:var(--ink-3);font-weight:400;font-size:12.5px}
.pane-head p{margin:5px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.7}

.carousel-wrap{flex:1;position:relative;min-height:0}
.carousel{
  display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;height:100%;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.carousel::-webkit-scrollbar{display:none}

.card{
  flex:0 0 100%;scroll-snap-align:center;background:var(--surface);
  display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);
}
.card-media{flex:0 0 46%;position:relative;min-height:0;background:#ddd8cb;cursor:zoom-in;overflow:hidden}
.card-media.noimg{display:flex;align-items:center;justify-content:center;color:#8a8064;font-size:15px;letter-spacing:.2em;cursor:default}
.imgstrip{
  position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
}
.imgstrip::-webkit-scrollbar{display:none}
.imgstrip img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;cursor:zoom-in}
.card-media .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:5}
.card-media .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.15)}
.card-media .dots i.on{background:#fff}
.card-media .arr{
  position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:30px;height:46px;
  border:0;border-radius:8px;background:rgba(20,20,20,.45);color:#fff;font-size:17px;cursor:pointer;display:none;
}
.card-media.multi .arr{display:block}
.card-media .arr.l{left:8px}
.card-media .arr.r{right:8px}

.card-body{
  flex:1;overflow-y:auto;padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:none;overflow-wrap:anywhere;word-break:break-word;
}
.card-body::-webkit-scrollbar{display:none}
.card-head{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:12px 20px 14px;background:var(--surface);box-shadow:0 10px 12px -12px rgba(56,48,34,.22)}
.card-head h3{margin:0;font-size:var(--fs-title);line-height:var(--lh-tight);letter-spacing:.02em}
.copy-btn{
  flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;
  font-size:13px;line-height:1;color:var(--ink-2);margin-left:auto;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.copy-btn:hover{background:var(--paper-2)}
.copy-btn .icon{width:13px;height:13px}
.copy-btn:active{transform:scale(.94)}
.copy-btn.ok{color:var(--accent-deep);border-color:var(--accent)}
.datum{font-size:12.8px;line-height:1.65;color:var(--datum-ink);background:var(--datum-bg);border-radius:var(--r-ctl);padding:5px 11px;align-self:flex-start}
.desc{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);overflow-wrap:anywhere}
.tip{display:flex;align-items:flex-start;gap:8px;background:var(--tip-bg);border-left:3px solid var(--tip-bar);padding:10px 14px;border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:var(--fs-md);line-height:1.8}
.tip .icon{width:15px;height:15px;margin-top:5px;color:var(--tip-bar)}
.tip-items{display:flex;flex-direction:column;gap:7px;min-width:0}
.tip-item{position:relative;padding-left:12px}
.tip-item::before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:var(--tip-bar)}
.quote{margin:0;background:var(--paper-2);border-left:3px solid var(--line-strong);padding:10px 14px;border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:13px;line-height:1.8;color:#5b5645;font-style:italic}
.quote-text{margin:0}
.quote-src{margin-top:8px;font-size:11.5px;font-style:normal;color:var(--ink-3);text-align:right}
/* 评价标签胶囊: 标签 + 次数(字号/颜色/字重区分) */
.tag-chips{display:flex;flex-wrap:wrap;gap:6px;font-style:normal}
.tag-chip{display:inline-flex;align-items:baseline;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;font-style:normal;color:var(--ink)}
.tag-chip .tag-n{font-size:11px;font-weight:700;color:var(--accent-deep)}
.card-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line-strong)}
.card-actions{display:flex;gap:10px}
.coord{font-size:var(--fs-xs);color:var(--ink-3);font-family:var(--font-mono)}

/* 桌面端翻页条 */
.cnav{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 16px;background:var(--paper-2);border-top:1px solid var(--line);position:relative}
.cnav button{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-ctl);
  padding:7px 16px;cursor:pointer;font-size:13px;color:var(--ink);min-height:38px;
  transition:background var(--dur-1) var(--ease);
}
.cnav button:hover{background:var(--paper-2)}
.cnav button:disabled{opacity:.35;cursor:default}
.cnav button .icon{width:14px;height:14px;color:var(--ink-3)}
.pick{flex:1;max-width:340px;min-width:220px;text-align:center;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.pick .icon{width:14px;height:14px;color:var(--ink-3);flex:none}
.picker{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);width:300px;max-height:340px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-2);
  z-index:2200;display:none;scrollbar-width:none;
}
.picker::-webkit-scrollbar{display:none}
.picker.on{display:block}
.picker div{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 14px;cursor:pointer;font-size:13.5px;border-radius:8px}
.picker div:hover,.picker div.on{background:var(--accent-tint)}

/* ---------- 7. 总览 ---------- */
.pane-text{flex:1;overflow-y:auto;padding:18px 22px 26px;font-size:14px;line-height:var(--lh-loose);scrollbar-width:none}
.pane-text::-webkit-scrollbar{display:none}
.ov-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px 14px;margin-bottom:14px;max-width:840px;box-shadow:var(--shadow-1)}
.ov-card h3{margin:0 0 10px;font-size:16px;letter-spacing:.02em;display:flex;align-items:center;gap:7px}
.ov-card h3 .icon{width:16px;height:16px;color:var(--accent-deep)}
.ov-card ul{margin:8px 0 4px;padding-left:20px}
.ov-card li{margin:7px 0;line-height:1.9}

/* ---------- 8. 灯箱 ---------- */
.lightbox{position:fixed;inset:0;background:rgba(15,15,18,.95);z-index:5000;display:none;flex-direction:column}
.lightbox.on{display:flex}
.lb-wrap{flex:1;position:relative;min-height:0}
.lb-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:94%;max-height:90%;border-radius:var(--r-ctl);box-shadow:0 12px 44px rgba(0,0,0,.55)}
.lb-err{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#c9c9c9;font-size:14px;line-height:1.8;text-align:center;padding:0 30px}
.lb-wrap .arr{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:52px;height:76px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;z-index:10}
.lb-wrap .arr .icon{width:24px;height:24px}
.lb-wrap .arr:hover{background:rgba(255,255,255,.3)}
.lb-wrap .arr.l{left:14px}
.lb-wrap .arr.r{right:14px}
.lb-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));color:#d4d4d4;font-size:13px;background:rgba(0,0,0,.5);position:relative}
.lb-thumbs{display:flex;gap:8px;overflow-x:auto;max-width:68vw;scrollbar-width:none;padding:4px 2px}
.lb-thumbs img{height:46px;border-radius:6px;cursor:pointer;opacity:.5;border:2px solid transparent;flex:0 0 auto}
.lb-thumbs img.on{opacity:1;border-color:var(--accent)}
.lb-close{display:inline-flex;align-items:center;gap:5px;position:absolute;right:14px;top:-52px;color:#fff;font-size:14.5px;background:rgba(255,255,255,.16);border:0;border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer}
.lb-close .icon{width:14px;height:14px}

/* ---------- 9. 手机专属组件(桌面隐藏): 工具浮钮/目录浮层 ---------- */
.fab[hidden],.fab-stack[hidden]{display:none!important}
.fab{
  display:none;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 12px;
  border:0;border-radius:999px;background:var(--glass-bg);color:#fff;
  font-size:12.5px;line-height:1;cursor:pointer;box-shadow:var(--shadow-2);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
.fab:active{transform:scale(.96)}
.fab .icon{width:14px;height:14px}
/* 工具总开关: 收起时只露一颗小圆钮, 展开后在其上方弹出功能胶囊 */
.fab-toggle{
  display:none;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:var(--glass-bg);color:#fff;cursor:pointer;box-shadow:var(--shadow-2);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
.fab-toggle:active{transform:scale(.94)}
.fab-toggle .icon{width:18px;height:18px}
.fab-stack{display:none}
.sheet-mask{display:none}
.sheet{display:none}

/* ---------- 10. 手机布局 (≤640px): 页面滚动 + 冻结/跟随地图 + 横向卡片轮播 + 底部页签 ---------- */
@media (max-width:640px){
  body{overflow-y:auto;height:auto;min-height:100%}
  .app{display:block;height:auto;min-height:100dvh;padding-bottom:calc(54px + env(safe-area-inset-bottom,0px))}

  /* 顶栏: 吸顶毛玻璃(地图/卡片从其后方滑过呈磨砂效果) */
  .topbar{
    position:sticky;top:0;z-index:900;height:44px;padding:0 14px;gap:10px;
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  }
  .topbar-title{font-size:16px}
  .topbar-sub,.topbar-stat{display:none}

  /* 页签 → 底部导航 dock(通栏毛玻璃, 纯图标, 选中高亮) */
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:950;gap:0;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    border-top:1px solid var(--night-line);
  }
  .tabbar button{
    flex:1 1 0;display:flex;align-items:center;justify-content:center;
    background:transparent;border:0;border-radius:10px;padding:6px 0;color:var(--night-text);
    transition:color var(--dur-1) var(--ease);
  }
  .tabbar button .t-full{display:none}
  .tabbar button .t-short{display:flex}
  .tabbar button .icon{width:20px;height:20px}
  .tabbar button.on{color:var(--accent-bright);background:transparent;border-bottom-color:transparent}

  /* 地图: 首页常驻(吸顶); 分类页默认收起, 由「打开地图」展开(冻结式, 内容滑入垫层下方) */
  .stage{display:block}
  .map-slot{position:sticky;top:44px;z-index:850;background:var(--paper);padding:12px 14px;scroll-margin-top:52px}
  /* 垫层下缘渐隐, 内容滑入遮罩时过渡更自然 */
  .map-slot::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;background:linear-gradient(to bottom,var(--paper),transparent);pointer-events:none}
  body:not(.map-open) .map-slot{display:none}
  .map-panel{position:relative;height:36dvh;border:0;border-radius:var(--r-card);box-shadow:var(--shadow-1);overflow:hidden}
  /* 手机端靠双指捏合缩放, 不显示 +/- 控件; 图层开关仅桌面需要 */
  .leaflet-control-zoom{display:none}
  .layer-panel{display:none}
  .layer-panel{display:none}
  /* 工具浮钮组: 右下一颗小圆钮悬浮于 dock 上方(留出间距), 点击向上弹出「地图/目录」胶囊, 再点收起 */
  .fab-stack{
    display:flex;position:fixed;right:14px;bottom:calc(62px + env(safe-area-inset-bottom,0px));
    z-index:1200;flex-direction:column;align-items:flex-end;gap:10px;
  }
  .fab{display:flex}
  .fab-toggle{display:flex}
  /* 胶囊默认藏在圆钮后方, 展开时升起+淡入 */
  .fab-stack .fab{
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.92);
    transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),visibility var(--dur-1) linear;
  }
  .fab-stack.open .fab{opacity:1;visibility:visible;pointer-events:auto;transform:none}

  /* 内容: 两种模式卡片高度一致, 页面滚动精确止于图片到顶, 之后文字由卡片内部滚动接管;
     横向圆角卡片轮播, 四周留纸色呼吸边; 分类由底部页签表达; 切换交给手势, 直达交给目录浮层 */
  .content{display:block}
  .pane.on{display:block}
  .pane-head{display:none}
  .cnav{display:none}
  .carousel-wrap{height:calc(100dvh - 44px - 54px)}
  .carousel{padding:12px 14px 14px;gap:14px;scroll-padding-left:14px}
  .card{scroll-snap-align:start;border-right:0;border-radius:var(--r-card);box-shadow:var(--shadow-1);overflow:hidden}
  .card-media{flex:none;aspect-ratio:16/9;max-height:52dvh}
  /* 图片切换交给手势滑动(图片条横向滑动切图, 卡片其他区域滑动切地点), 不显示切换按钮 */
  .card-media .arr{display:none!important}
  .card-head{padding:12px 16px 12px}
  .card-body{overflow:hidden;padding:18px 16px 16px;gap:11px}
  body.docked .card-body{overflow-y:auto}
  .card-foot{flex-direction:column;align-items:stretch;gap:10px}
  .card-actions{display:none}
  .coord{text-align:center}

  /* 目录浮层 */
  .sheet-mask{
    display:block;position:fixed;inset:0;z-index:3000;
    background:rgba(24,22,17,.45);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease);
  }
  .sheet-mask.on{opacity:1;pointer-events:auto}
  .sheet{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:3100;flex-direction:column;
    background:var(--surface);border-radius:var(--r-panel) var(--r-panel) 0 0;box-shadow:var(--shadow-up);
    transform:translateY(105%);transition:transform var(--dur-2) var(--ease);
    max-height:64dvh;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
  .sheet.on{transform:translateY(0)}
  .sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:9px auto 2px;flex:0 0 auto}
  .sheet-head{padding:10px 18px 9px;font-size:15px;font-weight:700;letter-spacing:.02em;border-bottom:1px solid var(--line)}
  .sheet-list{overflow-y:auto;padding:6px 10px 8px;-webkit-overflow-scrolling:touch}
  .sheet-row{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    min-height:48px;padding:8px 12px;border:0;border-radius:10px;background:transparent;
    cursor:pointer;font-size:14.5px;color:var(--ink);
  }
  .sheet-row.on{background:var(--accent-tint)}

  .pane-text{overflow:visible;padding:14px}
  .ov-card{padding:15px 16px 12px}
  .colophon{display:none}

  /* 手机端隐藏滚动条 */
  *{scrollbar-width:none!important}
  *::-webkit-scrollbar{display:none!important}
}

/* ---------- 11. 动效与可达性 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
/* 用户偏好低透明度时, 毛玻璃组件回退为实底 */
@media (prefers-reduced-transparency: reduce){
  .topbar,.tabbar,.fab,.fab-toggle{background:var(--night);backdrop-filter:none;-webkit-backdrop-filter:none}
}