/* ============================================================
   舞萌机厅 · 安大龙河 — 统一设计系统
   基于 5 页设计稿合并 + 响应式 + 动画交互
   ============================================================ */

@font-face{
  font-family:'HYPixel';
  src:url('/fonts/HYPixel11pxU-2.ttf') format('truetype');
  font-weight:normal;font-style:normal;
  font-display:swap;
}

/* ---------- 设计变量 ---------- */
:root{
  --c-pri:#6B8CAE;--c-pri-d:#4A6B8A;--c-pri-dd:#36506B;--c-pri-l:#A3BBD1;--c-pri-ll:#D6E0EA;--c-pri-lll:#EDF1F5;
  --c-bg:#EFECE6;--c-sur:#FAFAF6;--c-sur-a:#F5F2EC;--c-sur-d:#E8E4DD;
  --c-tx:#3A4452;--c-tx-2:#6B7684;--c-tx-3:#A0A8B0;--c-tx-p:#F5F2EC;
  --c-bd:#D5D9DF;--c-bd-l:#E5E8ED;--c-bd-p:#B5C4D4;
  --c-ok:#9EB09A;--c-warn:#C4B49A;--c-err:#BC7B6B;--c-info:#7EA8A8;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-full:9999px;
  --sh:0 1px 3px rgba(58,68,82,.04);--sh-f:0 4px 12px rgba(58,68,82,.10);--sh-n:0 -2px 8px rgba(58,68,82,.05);
  --ease:cubic-bezier(.3,0,0,1);
  --nav-h:64px;--hdr-h:48px;
}

/* ---------- 基础重置 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'HYPixel','Courier New',monospace;
  background:var(--c-bg);color:var(--c-tx);
  -webkit-font-smoothing:none;font-smooth:never;
  display:flex;justify-content:center;
  min-height:100vh;overflow:hidden;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}
img{display:block;max-width:100%}

/* ---------- 工具类 ---------- */
.f{display:flex}.fc{flex-direction:column}.fr{flex-direction:row}
.aic{align-items:center}.jcc{justify-content:center}.jcb{justify-content:space-between}
.f1{flex:1}.fs0{flex-shrink:0}.fw{flex-wrap:wrap}
.rel{position:relative}.abs{position:absolute}
.wf{width:100%}.hf{height:100%}
.tc{text-align:center}.tr{text-align:right}
.ovh{overflow:hidden}.oy-a{overflow-y:auto}
.trnc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2{gap:8px}.g3{gap:12px}
.p2{padding:8px}.p3{padding:12px}.p4{padding:16px}
.mb2{margin-bottom:8px}.mb3{margin-bottom:12px}.mb4{margin-bottom:16px}
.mt1{margin-top:4px}.mt2{margin-top:8px}.mt3{margin-top:12px}
.mr2{margin-right:8px}
.px3{padding-left:12px;padding-right:12px}.px4{padding-left:16px;padding-right:16px}
.w3{width:12px}.h3{height:12px}
.w4{width:16px}.h4{height:16px}
.w5{width:20px}.h5{height:20px}
.w8{width:32px}.h8{height:32px}
.w10{width:40px}.h10{height:40px}
.w14{width:56px}.h14{height:56px}
.h11{height:44px}
.t2{color:var(--c-tx-2);font-size:12px}
.t3{color:var(--c-tx-3);font-size:11px}
.tb{font-size:13px}.tl{font-size:16px;font-weight:700}
.txl{font-size:18px;font-weight:700}
.tn{font-size:28px;font-weight:700}
.cp{color:var(--c-pri)}.cok{color:var(--c-ok)}.cwr{color:var(--c-warn)}.cer{color:var(--c-err)}
.bgp{background:var(--c-pri)}.bgs{background:var(--c-sur)}.bgsa{background:var(--c-sur-a)}.bgpl{background:var(--c-pri-lll)}
.r{border-radius:var(--r-md)}.rs{border-radius:var(--r-sm)}.rf{border-radius:var(--r-full)}
.bdl{border:1px solid var(--c-bd-l)}.bdp{border:1px solid var(--c-bd-p)}
.hidden{display:none!important}

.card{background:var(--c-sur);border:1px solid var(--c-bd-l);border-radius:var(--r-md);box-shadow:var(--sh);flex-shrink:0}
.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.icon svg{width:100%;height:100%}
.dot{width:6px;height:6px;border-radius:var(--r-full);display:inline-block;flex-shrink:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--c-pri);outline-offset:-2px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--c-bd);border-radius:2px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 应用外壳 ---------- */
#app{
  width:375px;height:100vh;height:100dvh;max-width:100vw;
  background:var(--c-bg);
  display:flex;flex-direction:column;
  position:relative;
  box-shadow:0 0 40px rgba(58,68,82,.08);
}
#hdr{
  height:var(--hdr-h);background:var(--c-sur);
  border-bottom:1px solid var(--c-bd-l);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:sticky;top:0;z-index:20;
}
#hdr h1{font-size:16px;font-weight:700;color:var(--c-tx);padding:0 16px;transition:opacity .2s}
#ctn{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:16px 16px 36px;
  display:flex;flex-direction:column;gap:12px;
  -webkit-overflow-scrolling:touch;
}
#ctn>*{flex-shrink:0}

/* ---------- 视图切换 ---------- */
.view{display:none;flex-direction:column;gap:12px;animation:viewIn .25s var(--ease)}
.view.active{display:flex}
@keyframes viewIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- 底部导航 ---------- */
#nav{
  height:var(--nav-h);background:var(--c-sur);
  border-top:1px solid var(--c-bd-l);box-shadow:var(--sh-n);
  display:flex;align-items:flex-end;justify-content:space-around;
  flex:0 0 var(--nav-h);min-height:var(--nav-h);position:relative;z-index:10;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.ni{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px 6px;flex:1;
  color:var(--c-tx-3);font-size:10px;line-height:1.2;
  transition:color .15s,background-color .15s;cursor:pointer;
  text-decoration:none;user-select:none;
}
.ni[data-act="true"]{color:var(--c-pri)}
.ni:hover{background:var(--c-sur-a)}
.ni:active{background:var(--c-sur-d)}
.nic{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  position:relative;flex:1;padding-top:0;margin-top:-20px;
  cursor:pointer;transition:color .15s;text-decoration:none;z-index:20;
}
.nic .circ{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--r-full);
  background:transparent;border:0;
  box-shadow:none;color:var(--c-tx-p);
  margin:0 auto 2px;transition:background .15s,transform .15s;
}
.nic .nav-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}
.nic[data-act="true"] .circ,.nic:hover .circ,.nic:active .circ{background:transparent}
.nic:hover .circ{transform:translateY(-2px)}
.nic:active .circ{transform:scale(.95)}
.nic .nl{color:var(--c-tx-3);font-size:10px;transition:color .15s}
.nic[data-act="true"] .nl{color:var(--c-pri)}
.ni svg,.nic svg{stroke-width:1.5}

/* ============================================================
   页面：机厅列表
   ============================================================ */
.sort-toggle{
  display:flex;background:var(--c-sur-a);
  border-radius:var(--r-md);padding:2px;
  border:1px solid var(--c-bd-l);margin-bottom:12px;
}
.stb{
  flex:1;padding:8px 12px;border:none;background:transparent;
  color:var(--c-tx-2);font-family:inherit;font-size:12px;
  border-radius:6px;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.stb[data-act="true"]{background:var(--c-pri);color:var(--c-tx-p)}
.stb:not([data-act="true"]):hover{color:var(--c-tx)}

.cblk{
  width:6px;min-height:40px;border-radius:var(--r-sm);
  flex-shrink:0;transition:background-color .3s var(--ease);
}
.a-card{
  padding:12px;display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s;
}
.a-card:hover{border-color:var(--c-bd-p);background:var(--c-sur-a)}
.a-card:active{background:var(--c-sur-d);transform:scale(.99)}
.a-card .meta-line{display:flex;align-items:center;gap:6px;margin-top:2px}

/* ============================================================
   页面：人数查询
   ============================================================ */
.inp{
  width:100%;padding:10px 12px;
  border:1px solid var(--c-bd);border-radius:var(--r-md);
  background:var(--c-sur);color:var(--c-tx);
  font-size:13px;outline:none;transition:border-color .15s;
}
.inp:focus{border-color:var(--c-pri)}
.inp::placeholder{color:var(--c-tx-3)}
.sel{
  width:100%;padding:10px 32px 10px 12px;
  border:1px solid var(--c-bd);border-radius:var(--r-md);
  background:var(--c-sur);color:var(--c-tx);font-size:13px;
  outline:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7684' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;
}
.sel:focus{border-color:var(--c-pri)}
.people-update-form{display:grid;grid-template-columns:minmax(112px,.8fr) minmax(0,1fr) auto;gap:8px;align-items:stretch}
.people-update-form .sel,.people-update-form .inp{width:100%;min-width:0}
.people-update-form .btn-p{width:auto;min-width:96px;flex:0 0 auto;white-space:nowrap}
.lbl{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--c-tx-2);margin-bottom:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.cell label{display:block;font-size:11px;color:var(--c-tx-2);margin-bottom:2px}
.cell div{font-size:13px;color:var(--c-tx)}
.cnt-box{
  background:var(--c-pri-lll);border:1px solid var(--c-bd-p);
  border-radius:var(--r-md);padding:14px;text-align:center;position:relative;
  transition:transform .2s var(--ease);
}
.cnt-box.flash{animation:cntFlash .6s var(--ease)}
@keyframes cntFlash{
  0%{transform:scale(1)}
  40%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.cnt-bar{height:4px;background:var(--c-bd-l);border-radius:2px;margin-top:10px;overflow:hidden;display:flex}
.cnt-bar>span{height:100%;transition:flex-basis .5s var(--ease)}
.cnt-dot{
  position:absolute;width:10px;height:10px;
  border:2px solid var(--c-sur);border-radius:50%;
  transform:translateX(-50%);bottom:18px;
  transition:left .5s var(--ease),background .3s;
}
.ic-btn{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--c-pri);cursor:pointer;
  border-radius:6px;border:none;transition:background .15s;
}
.ic-btn:hover{background:var(--c-pri-lll)}
.ic-btn:active{background:var(--c-pri-ll)}

/* ============================================================
   页面：地图
   ============================================================ */
#mapView{padding:0;gap:0;height:100%;position:relative}
.map-el{
  width:100%;height:100%;
  background:var(--c-sur-a);position:relative;overflow:hidden;
  border-radius:0;
}
/* Leaflet 主题适配 */
.leaflet-container{background:var(--c-sur-a)!important;font-family:inherit!important}
.leaflet-tile-pane{filter:saturate(.7) brightness(1.02)}
.leaflet-control-attribution{
  background:rgba(250,250,246,.85)!important;color:var(--c-tx-3)!important;
  font-size:9px!important;padding:1px 4px!important;
}
.leaflet-control-attribution a{color:var(--c-pri)!important}
.leaflet-control-zoom{display:none!important}
.leaflet-popup-content-wrapper{
  background:var(--c-sur)!important;border:1px solid var(--c-bd-l)!important;
  border-radius:var(--r-md)!important;box-shadow:var(--sh-f)!important;
  color:var(--c-tx)!important;
}
.leaflet-popup-content{margin:8px 10px!important;font-size:12px!important}
.leaflet-popup-tip{background:var(--c-sur)!important;border:1px solid var(--c-bd-l)!important}

/* 设计稿风格的自定义标记（备用，非 Leaflet） */
.map-bg{
  width:100%;height:100%;position:relative;background-color:var(--c-sur-a);
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 39px,var(--c-bd-l) 39px,var(--c-bd-l) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,var(--c-bd-l) 39px,var(--c-bd-l) 40px);
}
.water{position:absolute;border-radius:50%;background:var(--c-pri-ll);opacity:.45}
.road{position:absolute;background:var(--c-bd);height:2px;opacity:.5}
.marker{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .15s;z-index:5}
.marker:hover{transform:translate(-50%,-100%) scale(1.15)}
.marker:active{transform:translate(-50%,-100%) scale(.95)}
.m-pin{width:24px;height:24px;border-radius:50%;background:var(--c-pri);border:2px solid var(--c-sur);box-shadow:var(--sh-f);display:flex;align-items:center;justify-content:center;color:var(--c-tx-p)}
.m-lbl{background:var(--c-sur);padding:2px 6px;font-size:10px;color:var(--c-tx);border-radius:var(--r-sm);margin-top:2px;white-space:nowrap;box-shadow:var(--sh)}
.m-base .m-pin{width:20px;height:20px;background:var(--c-pri-dd);transform:rotate(45deg);border-radius:3px}
.m-base .m-pin svg{transform:rotate(-45deg)}
.m-base .m-lbl{color:var(--c-pri-d);font-weight:700}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(54,80,107,.4)}70%{box-shadow:0 0 0 10px rgba(54,80,107,0)}100%{box-shadow:0 0 0 0 rgba(54,80,107,0)}}
.m-base .m-pin{animation:pulse 2s ease-in-out infinite}
.m-sel .m-pin{background:var(--c-pri-d);width:26px;height:26px}

/* 地图控件 */
.map-overlay-ui{position:absolute;inset:0;pointer-events:none;z-index:15}
.map-overlay-ui>*{pointer-events:auto}
.ctrl-subway{width:auto;padding:0 10px;font-size:11px}
.route-panel,.subway-panel{position:absolute;left:12px;right:12px;bottom:12px;z-index:30;background:rgba(255,255,255,.97);border:1px solid var(--c-bd);border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(34,50,66,.18)}
.route-panel[hidden],.subway-panel[hidden]{display:none}
.route-panel h3,.subway-panel h3{margin:0;font-size:15px}
.panel-close{border:0;background:var(--c-bg-2);color:var(--c-tx-2);border-radius:50%;width:28px;height:28px;font-size:20px;line-height:1;cursor:pointer}
.route-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}
.route-mode{border:1px solid var(--c-bd);background:var(--c-bg);color:var(--c-tx-2);border-radius:8px;padding:8px 4px;font-family:inherit;font-size:12px;cursor:pointer}
.route-mode.active{background:var(--c-pri-ll);border-color:var(--c-bd-p);color:var(--c-pri-d);font-weight:700}
.route-summary{min-height:20px;color:var(--c-tx-2);font-size:12px;margin:8px 0 10px}
.route-steps{max-height:180px;overflow-y:auto;margin:0 0 10px;border-top:1px solid var(--c-bd-l);border-bottom:1px solid var(--c-bd-l)}
.route-steps-empty{padding:10px 2px;color:var(--c-tx-3);font-size:12px}
.route-step{display:flex;gap:9px;padding:9px 2px;border-bottom:1px solid var(--c-bd-l)}
.route-step:last-child{border-bottom:0}
.route-step-index{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--c-pri-ll);color:var(--c-pri-d);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.route-step-body{min-width:0;flex:1}
.route-step-instruction{font-size:12px;color:var(--c-tx);line-height:1.45;overflow-wrap:anywhere}
.route-step-distance{margin-top:3px;color:var(--c-tx-3);font-size:11px}
.route-start{width:100%}
.subway-map{height:48vh;min-height:260px;border-radius:10px;overflow:hidden;background:var(--c-bg-2);color:var(--c-tx-2);display:flex;align-items:center;justify-content:center;font-size:13px}
.subway-distance{display:block;margin-top:3px}
.weather-now{display:flex;justify-content:space-between;align-items:center;color:var(--c-tx);font-size:14px}
.weather-temp{font-size:24px;font-weight:700;color:var(--c-pri-d)}
.weather-query-btn{border:1px solid var(--c-bd-p);background:var(--c-pri-ll);color:var(--c-pri-d);border-radius:var(--r-md);padding:5px 10px;font:inherit;font-size:11px;cursor:pointer}
.weather-query-btn:disabled{opacity:.6;cursor:not-allowed}
.weather-hours{display:grid;gap:5px;max-height:168px;overflow:auto;padding-top:7px;border-top:1px solid var(--c-bd-l)}
.weather-hour{display:grid;grid-template-columns:42px 1fr 48px 70px;gap:6px;align-items:center;font-size:11px;color:var(--c-tx-2)}
.weather-hour strong{color:var(--c-tx);text-align:right}
.weather-forecast{line-height:1.6;white-space:normal}
.announcement-modal{position:fixed;inset:0;z-index:200;background:rgba(28,40,52,.42);display:flex;align-items:center;justify-content:center;padding:20px}
.announcement-dialog{width:min(440px,100%);background:var(--c-sur);border:1px solid var(--c-bd);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(28,40,52,.25)}
.announcement-dialog h2{margin:0;font-size:18px;color:var(--c-tx)}
.announcement-badge{font-size:11px;color:var(--c-pri-d);background:var(--c-pri-ll);border-radius:999px;padding:3px 8px}
.announcement-content{white-space:pre-wrap;line-height:1.7;font-size:13px;color:var(--c-tx-2);max-height:45vh;overflow:auto}
.announcement-actions{display:flex;gap:8px;margin-top:16px}
.announcement-actions button{flex:1}
.announcement-history-item{padding:10px 0;border-bottom:1px solid var(--c-bd-l)}
.announcement-history-item:last-child{border-bottom:0}
.announcement-history-item p{margin:6px 0 0;color:var(--c-tx-2);font-size:12px;line-height:1.6;white-space:pre-wrap}
@media(max-width:520px){
  .people-update-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .people-update-form .btn-p{grid-column:1/-1;width:100%}
}
.ctrl{
  width:40px;height:40px;border-radius:var(--r-full);
  background:var(--c-sur);border:1px solid var(--c-bd-l);
  box-shadow:var(--sh-f);display:flex;align-items:center;justify-content:center;
  color:var(--c-pri);cursor:pointer;transition:background .15s,transform .15s;flex-shrink:0;
}
.ctrl:hover{background:var(--c-pri-lll)}
.ctrl:active{background:var(--c-sur-a);transform:scale(.95)}
.ctrl-z{bottom:96px;right:16px;display:flex;flex-direction:column;gap:8px;position:absolute}
.ctrl-l{position:absolute;bottom:96px;left:16px}

/* 地图浮窗 */
.map-peek{
  position:absolute;left:16px;right:16px;bottom:24px;
  background:var(--c-sur);border:1px solid var(--c-bd-l);
  border-radius:var(--r-md);box-shadow:var(--sh-f);
  padding:12px 14px;z-index:18;
  display:flex;align-items:center;gap:12px;
  animation:peekIn .25s var(--ease);
}
@keyframes peekIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.map-peek .peek-name{font-size:14px;font-weight:700;color:var(--c-tx);margin-bottom:2px}
.map-peek .peek-meta{font-size:11px;color:var(--c-tx-2);line-height:1.4}
.map-peek .peek-link{
  margin-left:auto;flex-shrink:0;
  padding:6px 12px;background:var(--c-pri);color:var(--c-tx-p);
  border-radius:var(--r-sm);font-size:11px;font-weight:700;
  cursor:pointer;transition:background .15s;
}
.map-peek .peek-link:hover{background:var(--c-pri-d)}

/* ============================================================
   页面：详情
   ============================================================ */
.img-ph{
  width:100%;height:176px;background:var(--c-sur-a);
  border:2px dashed var(--c-bd);border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;cursor:pointer;transition:border-color .15s,background-color .15s;
  color:var(--c-tx-3);overflow:hidden;
}
.img-ph:hover{border-color:var(--c-pri);background:var(--c-pri-lll)}
.img-ph img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}
.tag{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;background:var(--c-pri-ll);color:var(--c-pri-d);
  border-radius:var(--r-sm);font-size:11px;border:1px solid var(--c-bd-p);
}
.btn-p{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 16px;background:var(--c-pri);color:var(--c-tx-p);
  border:none;border-radius:var(--r-md);font-size:13px;cursor:pointer;
  transition:background .15s,transform .15s;flex:1;
}
.btn-p:hover{background:var(--c-pri-d)}
.btn-p:active{background:var(--c-pri-dd);transform:scale(.98)}
.btn-p:disabled{background:var(--c-tx-3);cursor:not-allowed;opacity:.6}
.btn-s{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 16px;background:var(--c-sur);color:var(--c-pri);
  border:1px solid var(--c-bd-p);border-radius:var(--r-md);font-size:13px;
  cursor:pointer;transition:background .15s,transform .15s;flex:1;
}
.btn-s:hover{background:var(--c-pri-lll)}
.btn-s:active{transform:scale(.98)}
.cmt{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--c-bd-l)}
.cmt:last-child,.cmt:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.cmt .cmt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cmt .cmt-body{line-height:1.5;color:var(--c-tx);font-size:13px}
.cmt .cmt-rating{color:var(--c-warn);font-size:11px}

/* 评论表单 */
.cmt-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--c-bd-l)}
.cmt-form .rating-row{display:flex;gap:4px;margin-bottom:8px}
.cmt-form .rating-row .star{cursor:pointer;color:var(--c-tx-3);font-size:18px;transition:color .15s}
.cmt-form .rating-row .star.active{color:var(--c-warn)}
.cmt-form textarea{
  width:100%;min-height:60px;padding:8px 10px;
  border:1px solid var(--c-bd);border-radius:var(--r-md);
  background:var(--c-sur);color:var(--c-tx);font-size:13px;
  outline:none;resize:vertical;transition:border-color .15s;
}
.cmt-form textarea:focus{border-color:var(--c-pri)}
.cmt-login-note{color:var(--c-tx-3);font-size:12px;text-align:center;padding:12px}

/* ============================================================
   页面：账户
   ============================================================ */
.av{
  width:56px;height:56px;border-radius:var(--r-full);
  background:var(--c-pri-ll);color:var(--c-pri-d);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;flex-shrink:0;overflow:hidden;
}
.av img{width:100%;height:100%;object-fit:cover}
.stat-row{display:flex;border-top:1px solid var(--c-bd-l);padding-top:12px;margin-top:12px}
.stat{flex:1;text-align:center}
.stat+.stat{border-left:1px solid var(--c-bd-l)}
.stat .num{font-size:20px;font-weight:700;color:var(--c-pri);line-height:1}
.stat .lb{font-size:11px;color:var(--c-tx-2);margin-top:4px}
.set-row{
  display:flex;align-items:center;gap:12px;
  padding:0 12px;height:44px;
  border-bottom:1px solid var(--c-bd-l);
  cursor:pointer;transition:background .15s;
}
.set-row:last-child{border-bottom:none}
.set-row:hover{background:var(--c-sur-a)}
.set-row:active{background:var(--c-sur-d)}
.si{
  width:32px;height:32px;border-radius:var(--r-md);
  background:var(--c-pri-lll);display:flex;align-items:center;justify-content:center;
  color:var(--c-pri);flex-shrink:0;
}
.btn-lo{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:12px 16px;
  background:var(--c-sur);color:var(--c-err);
  border:1px solid var(--c-err);border-radius:var(--r-md);
  font-size:13px;cursor:pointer;transition:background .15s;font-family:inherit;
}
.btn-lo:hover{background:var(--c-pri-lll)}
.chv{color:var(--c-tx-3);margin-left:auto}

/* 账户登录/注册表单 */
.acc-tabs{display:flex;gap:2px;background:var(--c-sur-a);border-radius:var(--r-md);padding:2px;border:1px solid var(--c-bd-l);margin-bottom:12px}
.acc-tab{flex:1;padding:8px 10px;border:none;background:transparent;color:var(--c-tx-2);font-family:inherit;font-size:12px;border-radius:6px;cursor:pointer;transition:all .15s}
.acc-tab[data-act="true"]{background:var(--c-pri);color:var(--c-tx-p)}
.acc-form{display:flex;flex-direction:column;gap:10px}
.acc-form label{display:block}
.acc-form label>span{display:block;font-size:12px;color:var(--c-tx-2);margin-bottom:4px}
.acc-form .code-row{display:flex;gap:8px}
.acc-form .code-row input{flex:1}
.acc-form .code-row button{flex-shrink:0;padding:0 14px;background:var(--c-pri-ll);color:var(--c-pri-d);border:1px solid var(--c-bd-p);border-radius:var(--r-md);font-size:12px;cursor:pointer;transition:background .15s;white-space:nowrap}
.acc-form .code-row button:hover{background:var(--c-pri-lll)}
.acc-form .submit-btn{margin-top:4px;padding:10px 16px;background:var(--c-pri);color:var(--c-tx-p);border:none;border-radius:var(--r-md);font-size:13px;cursor:pointer;transition:background .15s}
.acc-form .submit-btn:hover{background:var(--c-pri-d)}
.acc-msg{font-size:11px;color:var(--c-tx-2);min-height:16px;text-align:center}

/* ============================================================
   Toast 通知
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0));
  transform:translateX(-50%) translateY(20px);
  background:var(--c-pri-dd);color:var(--c-tx-p);
  padding:10px 16px;border-radius:var(--r-full);
  font-size:12px;font-weight:700;
  box-shadow:var(--sh-f);z-index:100;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease);
  max-width:80vw;text-align:center;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   响应式：平板 768px+
   ============================================================ */
@media(min-width:768px){
  #app{width:420px;box-shadow:0 0 60px rgba(58,68,82,.12)}
  #ctn{padding:20px 20px 40px}
  .img-ph{height:200px}
}

/* ============================================================
   响应式：桌面 1024px+ — 双栏布局
   ============================================================ */
@media(min-width:1024px){
  body{overflow:auto;align-items:center;padding:20px 0}
  #app{
    width:100%;max-width:960px;height:88vh;max-height:880px;
    border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 20px 60px rgba(58,68,82,.18);
  }
  #hdr{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
  #nav{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}

  /* 桌面端：导航与内容分栏，内容区横向排列视图 */
  #app{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr}
  #hdr{grid-column:1/-1}
  #nav{grid-column:1/-1}
  #ctn{
    grid-row:2;min-height:0;overflow-y:auto;
    padding:24px 28px;
  }

  /* 大屏放大图片占位 */
  .img-ph{height:220px}
  .grid2{grid-template-columns:repeat(2,1fr);gap:12px 20px}
}

/* ============================================================
   响应式：宽屏 1280px+
   ============================================================ */
@media(min-width:1280px){
  #app{max-width:1080px;height:90vh;max-height:920px}
}

/* ============================================================
   减少动画（无障碍）
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .view{animation:none}
}

/* ============================================================
   Leaflet 标记自定义样式
   ============================================================ */
.leaflet-marker-icon.arcade-marker{background:transparent!important;border:none!important}
.arcade-pin{
  width:24px;height:24px;border-radius:50%;
  background:var(--c-pri);border:2px solid var(--c-sur);
  box-shadow:var(--sh-f);display:flex;align-items:center;justify-content:center;
  color:var(--c-tx-p);font-size:10px;font-weight:700;
  transition:transform .15s,background .15s;
}
.arcade-pin.base{
  width:20px;height:20px;background:var(--c-pri-dd);
  transform:rotate(45deg);border-radius:3px;animation:pulse 2s ease-in-out infinite;
}
.arcade-pin.base span{transform:rotate(-45deg)}
.arcade-pin.selected{background:var(--c-pri-d);width:26px;height:26px}
.arcade-pin:hover{transform:scale(1.15)}
.arcade-pin.selected:hover{transform:scale(1.15)}