/* ============================================================
   胡77 解压生态区 · 公共 UI 层（2026 Calm UI）
   底栏/顶栏/抽屉/弹层：液态玻璃，仅卡片、弹窗、抽屉用玻璃；
   选中态用背景色块而非粗线；hover 微位移，无循环动画。
   ============================================================ */

/* 底部导航 · 悬浮胶囊 + 左侧胡77悄悄说（约 85% / 15%） */
.navwrap{
  position:fixed; left:4%; right:4%; bottom:calc(10px + var(--sab)); z-index:9990;
  display:flex; align-items:center; gap:8px;
}
.tabnav{
  flex:1; min-width:0;
  display:flex; align-items:stretch;
  height:54px; border-radius:20px; overflow:hidden;
  background:var(--nav-bg);
  backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--nav-line);
  box-shadow:var(--nav-shadow), 0 10px 26px rgba(13,18,30,.14);
}
.nav-whisper{
  flex:0 0 calc(13% - 8px); min-width:0; height:54px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease;
  overflow:visible; position:relative; z-index:2;  /* 煤球溢出时盖在菜单左缘上，像探头出来 */
  filter:drop-shadow(0 3px 7px rgba(13,18,30,.18));
}
.nav-whisper:active{ transform:scale(.92); }
/* 脚底投影：让煤球像"坐在"底栏上，看起来是个可爱控件 */
.nav-whisper::after{
  content:""; position:absolute; left:-7px; right:-7px; bottom:-9px; height:9px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(13,18,30,.16), transparent);
  pointer-events:none;
}
.nav-whisper .nw-logo{ width:58px; height:auto; display:block; flex-shrink:0;
  transform:translate(10px, 10px);               /* 煤球：右移 10px、下移 10px（在原基础上再向左上各 5px） */
}
.nav-whisper .nw-logo svg{ width:100%; height:auto; display:block; }

.tabnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color:var(--soft);
  font-size:10.5px; font-weight:800; letter-spacing:.2px;
  -webkit-tap-highlight-color:transparent;
  position:relative; border-radius:14px;
  transition:transform .12s ease, color .15s ease, background .15s ease;
}
.tabnav a .ic{
  font-size:19px; line-height:1;
  transition:transform .16s ease;
}
.tabnav a.on{color:#fff;}                       /* 选中态文字白（主题色胶囊上），见 mars.css */
.tabnav a.on .ic{transform:translateY(-1px);}
.tabnav a:active, .tabnav a.tap{transform:scale(.94);}
@media (hover:hover){
  .tabnav a:not(.on):hover{ color:var(--brand-lt); }
  .tabnav a:not(.on):hover .ic{ transform:translateY(-2px); }
}

/* 底栏未读小圆点 */
.tabnav a .dot{
  position:absolute; top:5px; left:50%; margin-left:8px;
  min-width:15px; height:15px; padding:0 4px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:9.5px; font-weight:900;
  line-height:15px; text-align:center;
  box-shadow:0 0 0 2px var(--nav-bg);
}

/* ============================================================
   顶部固定导航 + 汉堡抽屉（全站主菜单）
   ============================================================ */
.hu-top #app{ padding-top:calc(66px + var(--sat)); }   /* 给固定顶栏让位 */
.huheader{
  position:fixed; left:0; right:0; top:0; z-index:9600;
  padding:calc(var(--sat)) 12px 0; box-sizing:content-box;
  background:color-mix(in srgb, var(--nav-bg) 84%, transparent);
  backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid var(--nav-line);
}
.huheader-in{ max-width:520px; margin:0 auto; height:44px; display:flex; align-items:center; gap:8px; }
.hu-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); flex:1; min-width:0;}
.hu-brand .hu-logo{ width:27px; height:27px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--chip-a),var(--chip-b));
  border:1px solid var(--chip-line); }
.hu-brand .hu-logo svg{ width:17px; height:auto; display:block; }
.hu-brand b{ font-size:14.5px; font-weight:900; letter-spacing:.4px; white-space:nowrap;
  background:linear-gradient(90deg,var(--brand-lt),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hu-burger{
  flex:none; width:38px; height:38px; border-radius:13px; border:1px solid var(--glass-border);
  background:var(--glass); color:var(--ink); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .1s, background .15s; -webkit-tap-highlight-color:transparent;
}
.hu-burger:active{transform:scale(.92);}

/* 抽屉遮罩 */
.drawer-mask{ position:fixed; inset:0; z-index:10000; background:rgba(13,18,30,.30);
  backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .2s; }
.drawer-mask.show{ opacity:1; pointer-events:auto; }
/* 右侧抽屉：液态玻璃侧边面板 */
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:10010; width:min(290px, 84vw);
  background:var(--nav-bg);
  backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-left:1px solid var(--glass-border);
  box-shadow:-18px 0 50px rgba(13,18,30,.12);
  transform:translateX(102%); transition:transform .26s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column;
}
.drawer.show{ transform:none; }
.drawer-head{ padding:calc(var(--sat) + 12px) 16px 10px; }
.drawer-head b{ font-size:15px; font-weight:900;
  background:linear-gradient(90deg,var(--brand-lt),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.drawer-head p{ margin:3px 0 0; font-size:10.5px; color:var(--soft); }
.drawer-body{ flex:1; overflow-y:auto; padding:8px 16px 16px; }
.dgroup{ margin:8px 0 4px; }
.dgroup > .dg-t{ font-size:10px; font-weight:900; color:var(--dim); letter-spacing:1.2px; margin:8px 4px 8px; }
.ditem{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 8px; border-radius:13px; border:none; cursor:pointer;
  background:transparent; color:var(--ink); font-size:13.5px; font-weight:800; font-family:inherit;
  text-decoration:none; box-sizing:border-box; transition:background .15s ease;
}
.ditem .em{ width:26px; height:26px; border-radius:9px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:14px; background:var(--glass); border:1px solid var(--glass-border); }
.ditem .rt{ margin-left:auto; font-size:10px; color:var(--dim); font-weight:700; }
.ditem:active{ background:var(--glass-2); }
.ditem.on{ background:var(--sel-bg); color:var(--brand-lt); }
.ditem.on .em{ border-color:var(--sel-line); }
/* 抽屉里的主题/开关行 */
.dpill{ display:flex; gap:8px; padding:2px 4px; }
.dbtn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  border:1px solid var(--glass-border); background:var(--glass); color:var(--soft);
  font-size:11px; font-weight:800; padding:8px 4px; border-radius:999px; cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s, transform .1s;
}
.dbtn .sw{ width:11px; height:11px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset; }
.dbtn.on{ background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-dk));
  color:#fff; border-color:transparent; }
.dbtn:active{ transform:scale(.96); }
.dswitch{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:13px; margin-top:2px; }
.dswitch b{ font-size:12.5px; color:var(--ink); }
.swbtn{ width:42px; height:24px; border-radius:999px; border:none; cursor:pointer; position:relative;
  background:var(--glass-border); transition:background .18s; flex:none; }
.swbtn::after{ content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:left .18s; }
.swbtn.on{ background:var(--brand); }
.swbtn.on::after{ left:21px; }
.drawer-foot{ padding:6px 16px calc(14px + var(--sab)); font-size:10px; color:var(--dim); line-height:1.6; }

/* ============================================================
   悬浮胡77（左下角）＋ 治愈短句卡片
   ============================================================ */
.hufloat{
  position:fixed; left:14px; bottom:calc(var(--nav-h) + var(--sab) + 14px); z-index:9400;
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; padding:0; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:transform .12s ease;
  filter:drop-shadow(0 4px 8px rgba(13,18,30,.14));
}
.hufloat:active{ transform:scale(.9); }
.hufloat svg{ width:100%; height:auto; }
.hufloat::after{ content:""; position:absolute; left:-7px; right:-7px; bottom:-9px; height:9px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(13,18,30,.16), transparent); pointer-events:none; }
.hucard{
  position:fixed; left:4%; bottom:calc(10px + var(--sab) + 64px); z-index:9995;
  width:min(264px, calc(100vw - 28px));
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow:inset 0 1px 0 var(--inset-hi), 0 16px 40px rgba(13,18,30,.16);
  padding:16px 16px 8px;
  animation:hucardIn .22s ease both;
}
@keyframes hucardIn{ from{ opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:none;} }
.hucard .hc-t{ font-size:10px; font-weight:900; color:var(--brand-lt); letter-spacing:.6px; margin-bottom:8px; }
.hucard .hc-q{ font-size:13px; line-height:1.7; color:var(--ink); font-weight:700; min-height:44px; }
.hucard .hc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.hucard .hc-again,.hucard .hc-x{ border:none; background:none; cursor:pointer; font-family:inherit; font-weight:800; color:var(--soft); font-size:11px; padding:8px 8px; border-radius:8px;}
.hucard .hc-again:active,.hucard .hc-x:active{ background:var(--glass-2); }

/* ============================================================
   通用弹层（呼吸练习 / 情绪卡片 / 技能一下 / 专业库维护）
   ============================================================ */
.gmask{ position:fixed; inset:0; z-index:10020; background:rgba(13,18,30,.32);
  backdrop-filter:blur(5px); display:none; align-items:center; justify-content:center; padding:24px 16px; }
.gmask.show{ display:flex; }
.gsheet{ width:100%; max-width:360px; max-height:88vh; overflow-y:auto;
  background:var(--nav-bg);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:22px; padding:16px;
  box-shadow:inset 0 1px 0 var(--inset-hi), var(--shadow); }
.gsheet h3{ margin:0 0 16px; font-size:16px; font-weight:900; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; }
.gsheet h3 .gx{ border:none; background:var(--glass); border:1px solid var(--glass-border); width:28px; height:28px;
  border-radius:10px; cursor:pointer; color:var(--soft); font-size:13px; font-family:inherit;
  /* span 不像 button 会自动居中，必须显式 flex 居中，否则 × 会偏到左上角 */
  flex:none; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; }
.gsheet h3 .gx:active{ transform:scale(.92); }
.gtabs{ display:flex; gap:8px; margin-bottom:16px; }
.gtab{ flex:1; border:1px solid var(--glass-border); background:var(--glass); color:var(--soft);
  font-size:12.5px; font-weight:900; padding:8px 0; border-radius:12px; cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s, transform .1s; }
.gtab.on{ background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-dk)); color:#fff; border-color:transparent; }
.gtab:active{ transform:scale(.97); }

/* ---- 呼吸练习 ---- */
.br-wrap{ text-align:center; }
.br-ring{ position:relative; width:190px; height:190px; margin:8px auto 8px; }
.br-ring .circle{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--glass-border); }
.br-ring .fill{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, var(--sel-bg), transparent 72%); transform:scale(.55);
  transition:transform var(--br-step, 4s) ease; }
.br-ring .phase{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:var(--brand-lt); }
.br-ring .count{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform:translateY(52px); font-size:11px; color:var(--dim); font-weight:800; }
.br-tip{ font-size:12px; color:var(--soft); line-height:1.7; margin-bottom:16px; }
.br-nums{ display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.br-nums .n{ font-size:10.5px; font-weight:800; padding:4px 8px; border-radius:999px; background:var(--glass);
  border:1px solid var(--glass-border); color:var(--soft); }
.br-nums .n b{ color:var(--brand-lt); font-size:12px; margin-left:2px; }

/* ---- 情绪卡片 ---- */
.ec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.ec-btn{ border:1px solid var(--glass-border); background:var(--glass); border-radius:13px; padding:8px 2px 8px;
  cursor:pointer; font-family:inherit; color:var(--soft); font-size:10px; font-weight:800; text-align:center;
  transition:background .15s, transform .1s, border-color .15s; }
.ec-btn .em{ display:block; font-size:20px; margin-bottom:2px; }
.ec-btn:active{ transform:scale(.95); }
.ec-btn.on{ border-color:var(--sel-line); background:var(--sel-bg); color:var(--brand-lt); }
.ec-note{ width:100%; box-sizing:border-box; margin-bottom:8px; }
.ec-save{ width:100%; }
.ec-stats{ margin-top:16px; padding-top:8px; }
.ec-stats b{ font-size:11.5px; color:var(--ink); }
.ec-bar{ display:flex; align-items:flex-end; gap:8px; height:58px; margin-top:8px; }
.ec-bar i{ flex:1; border-radius:6px 6px 2px 2px; background:var(--glass-border); height:15px; align-self:flex-end; }
.ec-bar i.on{ background:linear-gradient(180deg,var(--brand-hi),var(--brand)); height:42px; opacity:.9; }
.ec-bar .dl{ display:flex; justify-content:space-between; font-size:9px; color:var(--dim); margin-top:4px; }
.ec-bar .dl span{ flex:1; text-align:center; }

/* 噗噗记录：纯本机 */
.pp-tip{ font-size:11px; color:var(--dim); line-height:1.6; margin-bottom:16px; }
.pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.pp-log{ border:1px solid var(--glass-border); background:var(--glass); border-radius:15px; padding:16px 0;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; font-family:inherit;
  color:var(--soft); font-size:13px; font-weight:800; }
.pp-log .em{ font-size:30px; line-height:1; }
.pp-log:active{ transform:scale(.97); }
.pp-stat{ font-size:12px; color:var(--soft); font-weight:800; margin-bottom:4px; }
.pp-stat b{ color:var(--brand-lt); }
.pp-quip{ font-size:12px; color:var(--brand-lt); font-weight:800; text-align:center; margin:2px 0 8px; min-height:16px; }
.pp-hist{ max-height:240px; overflow-y:auto; display:flex; flex-direction:column; margin-top:8px; }
.pp-empty{ font-size:11.5px; color:var(--dim); text-align:center; padding:8px 2px; line-height:1.6; }
.pp-row{ display:flex; align-items:center; gap:8px; padding:8px 4px; border-top:1px solid var(--glass-border); font-size:12px; color:var(--soft); }
.pp-row:first-child{ border-top:none; }
.pp-emo{ font-size:16px; }
.pp-when{ color:var(--dim); margin-left:auto; font-size:11px; }
.pp-del{ background:none; border:none; color:var(--dim); cursor:pointer; font-size:13px; padding:0 2px; }
.pp-del:active{ color:#e25563; }
.pp-clear{ margin-top:16px; width:100%; background:none; border:1px solid var(--glass-border); border-radius:11px;
  padding:8px; color:var(--dim); font-size:11px; font-weight:800; cursor:pointer; font-family:inherit; }
.pp-clear:active{ transform:scale(.98); }

/* ============================================================
   全站统一页脚（品牌 / 联系作者 / 免责声明）· 弱分割：留白区隔
   ============================================================ */
.appfoot{ text-align:center; margin-top:16px; padding:16px 8px 4px; color:var(--dim); font-size:10.5px; line-height:1.9; border-top:1px solid var(--glass-border); }
.appfoot .af-quote{ margin:0 0 8px; font-size:12px; line-height:1.7; color:var(--ink); letter-spacing:.3px; }
.appfoot .af-self{ margin:0 0 8px; font-size:10.5px; color:var(--soft); }
.appfoot .af-brand{ margin:0 0 8px; font-size:15px; font-weight:900;
  background:linear-gradient(90deg,var(--brand-lt),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.appfoot a.af-mail{ color:var(--cyan); text-decoration:none; font-weight:800; border-bottom:1px dashed var(--sel-line); }
.appfoot .af-warn{ margin:2px 0; color:var(--soft); }
.appfoot .af-warn b{ color:var(--warn); }

/* ============================================================
   页级重要提醒条：克制版，仅放每条最关键的一句（活动 / 留言 / 贴图）
   ============================================================ */
.warnbar{
  display:flex; gap:8px; align-items:flex-start; margin:0 0 16px; padding:8px 16px;
  border-radius:14px;
  background:var(--tag-gold-bg); border:1px solid var(--tag-gold-line);
  color:var(--warn); font-size:11.5px; line-height:1.65; font-weight:700;
}
.warnbar .em{ flex:none; font-size:14px; line-height:1.4; }

/* ============================================================
   加载状态：小圆环 + 文案，避免白屏感（功能性旋转，保留）
   ============================================================ */
.loading{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--dim);
  font-size:12.5px; padding:24px 0; }
.loading:before{ content:""; width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid var(--glass-border); border-top-color:var(--brand);
  animation:huSpin .7s linear infinite; }
@keyframes huSpin{ to{ transform:rotate(360deg); } }

/* ============================================================
   游戏内嵌（iframe overlay 用）：藏掉自带的导航，只留游戏台
   顶栏/底栏由外层弹窗接管后，原来给底栏让位的 58+18px 必须收回，
   不然 iframe 底部会空出一大条，舞台和棋盘白白变矮
   ============================================================ */
html.hu-embed .navwrap, html.hu-embed .topnav, html.hu-embed .huheader{ display:none !important; }
html.hu-embed #app{
  padding-top:8px;
  padding-bottom:calc(10px + var(--sab));
}
html.hu-embed .hint{ margin-top:8px; }
html.hu-embed .notice{ margin-top:8px; }
/* 小屏（iPhone SE 一类）再压一档，尽量让游戏主体一屏装下 */
@media (max-height:700px){
  html.hu-embed #app{ padding-top:8px; padding-bottom:calc(6px + var(--sab)); }
  html.hu-embed .hint{ margin-top:8px; font-size:11px; line-height:1.5; }
  html.hu-embed .notice{ margin-top:8px; font-size:9.5px; line-height:1.6; }
}

/* ---- 技能一下：可读性优先的专业库条目 ---- */
.sk-sec{ margin:8px 0 8px; }
.sk-sec-t{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:900; color:var(--brand-lt); margin:0 2px 8px; letter-spacing:.4px; }
.sk-sec-t:before{ content:""; width:3px; height:11px; border-radius:2px; background:linear-gradient(180deg,var(--brand-lt),var(--cyan)); }
.sk-item{
  display:flex; gap:8px; align-items:flex-start;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
  padding:8px 8px; margin-bottom:8px;
}
.sk-item .sk-ic{ flex:none; width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:16px; background:var(--sel-bg); border:1px solid var(--sel-line); margin-top:1px; }
.sk-item .sk-bd{ flex:1; min-width:0; }
.sk-item b{ display:block; font-size:13px; font-weight:900; color:var(--ink); line-height:1.4; }
.sk-item .sk-where{ display:inline-block; font-size:9.5px; font-weight:800; color:var(--soft);
  border:1px solid var(--glass-border); border-radius:999px; padding:1px 8px; margin-left:8px; vertical-align:1px; }
.sk-item p{ margin:3px 0 0; font-size:11.5px; line-height:1.6; color:var(--soft); }
/* 说/不说 对照行（技能一下-话术类） */
.sk-say,.sk-nosay{ display:flex; gap:8px; align-items:flex-start;
  font-size:11px; line-height:1.6; color:var(--soft); margin-top:8px; }
.sk-nosay{ margin-top:3px; }
.sk-say i,.sk-nosay i{ font-style:normal; flex:none; font-size:9.5px; font-weight:900;
  border-radius:999px; padding:1px 8px; margin-top:2px; letter-spacing:1px; }
.sk-say i{ background:rgba(46,139,98,.12); color:var(--ok); }
.sk-nosay i{ background:rgba(194,130,15,.14); color:var(--warn); }
/* 抽屉底部维护入口 */
.cfg-link{
  border:none; background:none; padding:0; margin-top:8px; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:800; color:var(--cyan);
  text-decoration:underline; text-underline-offset:3px;
}
.cfg-tip{ font-size:11px; color:var(--dim); line-height:1.7; margin:0 0 8px; }

/* ============================================================
   2026 线性图标（Lucide 内联）：尺寸与主题色
   ============================================================ */
.tabnav a .ic svg{ display:block; }
.ditem .em svg{ display:block; color:var(--brand-lt); }
.ditem .em{ color:var(--brand-lt); }
.hu-burger svg{ display:block; }

/* ---------- 内部 tab 条（活动区 / 贴图区共用） ---------- */
.ztabs{
  display:flex; gap:8px; padding:4px; margin-bottom:16px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
  box-shadow:inset 0 1px 0 var(--inset-hi);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ztab{
  flex:1; min-width:0; border:1px solid transparent; background:transparent; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:800; color:var(--soft);
  padding:8px 8px; border-radius:11px;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.ztab.on{ background:var(--sel-bg); border-color:var(--sel-line); color:var(--brand-lt); }
.ztab:active{ transform:scale(.975); }


/* 有 display 声明的容器（.grid / .ftray 等）用 hidden 隐藏时，
   UA 的 [hidden]{display:none} 会被类选择器覆盖，这里兜底 */
[hidden]{ display:none !important; }

/* 单页切换：内容区淡出/淡入（顶栏/底栏/抽屉为持久外壳，不闪烁） */
#app{ transition:opacity .22s ease, transform .22s ease; }
#app.switching{ opacity:0; transform:translateY(6px); }
@media (prefers-reduced-motion: reduce){
  #app{ transition:none; }
  #app.switching{ transform:none; }
}

/* ============================================================
   统一交互反馈 / 卡片内高光 / 原生控件重置（设计语言统一）
   ============================================================ */

/* 点击反馈工具类：可点元素挂 .tap 即有下压反馈；移动端无 hover 也能感知 */
.tap{ transition:transform .12s ease, background .15s ease, border-color .15s ease; }
.tap:active{ transform:scale(.97); }

/* 可点内容卡统一加点击反馈（原 .shop/.jn/.msg/.feed-item 缺 :active） */
.shop, .jn, .msg, .feed-item, .rec, .stk{
  transition:transform .14s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.shop:active, .jn:active, .msg:active, .feed-item:active, .rec:active, .stk:active{ transform:scale(.987); }

/* 缺内高光的卡片补玻璃顶部高光，与 .panel/.shop/.jn/.stat 对齐 */
.msg, .rec, .feed-item, .card{
  box-shadow:inset 0 1px 0 var(--inset-hi), var(--shadow);
}

/* 次级筛选/标签按钮点击反馈（原 .sort/.kind/.chip/.pvcmt .cd 缺 :active） */
.sort, .kind, .chip, .pvcmt .cd{ transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.sort:active, .kind:active, .chip:active, .pvcmt .cd:active{ transform:scale(.96); }

/* 原生表单控件重置：去掉系统外观，统一成品牌胶囊，避免低代码原生感 */
select.input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--soft) 50%),
    linear-gradient(135deg, var(--soft) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat; padding-right:32px; cursor:pointer;
}
select.input option{ background:var(--bg1); color:var(--ink); }
input[type="date"].input{ color-scheme:light; }
:root[data-theme="night"] input[type="date"].input{ color-scheme:dark; filter:none; }
.node-edit input{ background:var(--glass); }

/* ============================================================
   PC 适配：底栏 → 桌面侧边栏
   不是"把手机胶囊竖过来"，而是换成桌面自己的一套：
   行式导航（图标左 + 可读文字右）、hover 底色、选中态=浅主色底+左侧色条
   （mars.css 里"行中间浮胶囊"的手机选中态在此被覆盖）
   ============================================================ */
@media (min-width:820px){
  .navwrap{
    left:0; right:auto; top:0; bottom:0;
    width:var(--rail,216px);
    flex-direction:column; align-items:stretch; gap:0;
    padding:16px 16px;
    border-radius:0; border-right:1px solid var(--nav-line); border-bottom:none;
    background:var(--nav-bg);
    backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
    box-shadow:0 0 30px rgba(13,18,30,.10);
  }
  /* 侧栏内不再套一层胶囊：容器打平，只有行 */
  .tabnav{
    background:transparent; border:none; box-shadow:none; border-radius:0;
    backdrop-filter:none; -webkit-backdrop-filter:none; overflow:hidden;
    flex:1 1 auto; height:auto; min-height:0; width:100%;
    flex-direction:column; gap:4px; padding:0; overflow-x:hidden; overflow-y:auto;
    order:1;                                  /* 菜单列置顶，悄悄说沉到底部 */
  }
  .navwrap .tabnav a.home{ order:-1; }        /* 主页置顶（其余按原序：贴图/活动/留言/游戏） */
  .navwrap .tabnav a{
    flex:0 0 auto;                                     /* 关键：行按内容高度排布，不被拉伸填满侧栏 */
    flex-direction:row; justify-content:flex-start; align-items:center;
    gap:16px; padding:16px 16px; border-radius:13px;
    font-size:14px; font-weight:800; letter-spacing:.3px;
    transition:background .15s ease, color .15s ease, transform .1s ease;
  }
  .navwrap .tabnav a .ic{ font-size:20px; }
  /* 覆盖 mars.css 的胶囊选中态 → 桌面行选中态 */
  .navwrap .tabnav a.on{ background:rgba(var(--brand-rgb),.10); color:var(--brand-lt); }
  .navwrap .tabnav a.on::before{
    left:0; top:50%; transform:translateY(-50%);
    width:3px; height:20px; border-radius:0 3px 3px 0;
    background:var(--brand); border:none; box-shadow:none;
  }
  @media (hover:hover){
    .navwrap .tabnav a:not(.on):hover{ background:var(--glass); color:var(--ink); }
    .navwrap .tabnav a:not(.on):hover .ic{ transform:none; }
  }
  .navwrap .tabnav a:active{ transform:scale(.98); }
  .navwrap .tabnav a .dot{ position:static; margin-left:auto; box-shadow:none; } /* 未读点移到行尾 */
  /* 煤球：侧栏底部一行（页面左下角），图标 + 名称，不再是贴边 logo */
  .nav-whisper{
    position:static; flex:0 0 auto; width:auto; height:auto;
    transform:none; filter:none; margin-top:auto;   /* 沉到侧栏最底部（页面左下角） */
    order:2;                                        /* 在菜单列之后 */
    display:flex; align-items:center; gap:8px;
    padding:8px 16px; border-radius:13px;
    background:var(--glass); border:1px solid var(--glass-border);
    color:var(--soft); font-size:13.5px; font-weight:800;
    transition:background .15s ease, transform .1s ease;
  }
  .nav-whisper::after{ display:none; }                /* 去掉"坐在底栏上"的投影 */
  .nav-whisper::before{ content:"胡77悄悄说"; order:2; }
  /* SVG viewBox 是 140×158，但墨迹只到 y=108，底部留了 50 单位空白，
     球在框里被顶高约 5px → 下移 5px，让煤球与右侧文字视觉居中 */
  .nav-whisper .nw-logo{ order:1; width:30px; height:auto; transform:translateY(5px); }
  @media (hover:hover){ .nav-whisper:hover{ background:rgba(var(--brand-rgb),.10); color:var(--brand-lt); } }
  .nav-whisper:active{ transform:scale(.98); }
  /* 顶栏：从侧栏之后开始，内容列起点与 #app 对齐 */
  .huheader{ left:var(--rail,216px); padding-left:0; padding-right:0; }
  .huheader-in{ max-width:1000px; margin:0; padding:0 48px; }
}