/* 咸鱼 2026-11-02：液态玻璃按钮（照掘金 7514618352829448244；先做 Regular 磨砂，三档对比后业主选 Clear）。只用在粉卡上的按钮：游客会员票、首页焦点卡、个人中心头卡。
   这里只管材质：边缘折射（xy/36-glass.js 现算置换图，只 Chromium）+ 几乎全透明不磨砂 + 左上右下镜面高光 + 浮起阴影。大小由各处自己的规则定。 */
.lg-btn { position: relative; isolation: isolate; border: 0; border-radius: 999px; cursor: pointer; color: #3a1428;
  background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: saturate(1.5) brightness(1.05); backdrop-filter: saturate(1.5) brightness(1.05);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 6px 16px -8px rgba(58, 20, 40, .3);
  -webkit-tap-highlight-color: transparent; transition: background .15s, transform .15s;
  font-family: var(--font-serif); font-weight: 700; letter-spacing: .12em; } /* 宝宝 11-02 选衬线：雅黑粗体压在玻璃上发糙 */
.lg-btn svg { stroke-width: 1.6; }
/* 宝宝 11-02「图标和字不在一条线」：居中对齐时，字的位置被行高、字体上下边距的取整带偏 0.4–1px，每种按钮偏法都不一样。
   改成图标跟着文字基线走：图标底先落在基线上，再下移到中心 = 基线上 .38em（衬线汉字墨迹的中线）；整行用 align-content 在按钮里居中。
   wrap 只为让 align-content 生效，max-content 保证不会真换行。纯图标按钮（.icon-btn）不动。 */
/* will-change：浏览器把文字取整到整像素、图标不取整，按钮落在半像素时两者差 1px；单独一层后一起取整。
   line-height: normal：手机 .88 缩放下行高带小数时，安卓内核画字会比排版位置低约 1px；行高=字体本身高度就没有这段小数（按钮高度都是写死的，不受影响） */
.lg-btn:not(.icon-btn) { flex-wrap: wrap; align-items: baseline; align-content: center; min-width: max-content; will-change: transform; line-height: normal; }
.lg-btn:not(.icon-btn) > svg { translate: 0 calc(50% - .38em); }
.lg-btn:hover { background: rgba(255, 255, 255, .14); }
.lg-btn:active { transform: scale(.97); }
.lg-btn:focus-visible { outline: 2px solid var(--sakura-700); outline-offset: 2px; }
/* 主按钮 = 粉色镜边（宝宝 11-02 从四种染法里挑的；整块铺色会盖住玻璃显得廉价）：玻璃本身不染，只有边缘高光和内圈泛樱粉 */
.lg-btn.lg-tint { background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 14px rgba(255, 150, 198, .45), 0 6px 16px -8px rgba(58, 20, 40, .3); }
.lg-btn.lg-tint:hover { background: rgba(255, 255, 255, .2); }
.lg-btn::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.15) 32%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 68%, rgba(255,255,255,.85) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* 深底（页首 / 顶栏，宝宝 11-02）：浅字，描边和阴影换成深底用的 */
.lg-btn.lg-dark { color: #f7ecf1; letter-spacing: .06em; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 6px 16px -8px rgba(0, 0, 0, .5); }
/* 深底玻璃 C 版（宝宝 11-02「看起来不舒服」）：B 版一整圈 1.4px 亮白边像描了线框。改成磨砂淡白底 + 只有顶上一道 1px 高光、边几乎看不见 */
.lg-btn.lg-dark:not(.lg-tint) { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 20px -10px rgba(0, 0, 0, .7); }
.lg-btn.lg-dark:not(.lg-tint):hover { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08)); }
.lg-btn.lg-dark:not(.lg-tint)::before { padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .16)); }
/* 深底主按钮 = 粉色玻璃铺满（宝宝 11-02「登录按钮不好看」：灰底粉边像没法点）。粉卡上的主按钮还是粉镜边，不动 */
.lg-btn.lg-dark.lg-tint { color: #3a1428; background: linear-gradient(180deg, #fcd9e8 0%, #f4b3cf 55%, #ec9fc3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(150, 40, 90, .18), 0 10px 26px -12px rgba(244, 150, 195, .7); }
.lg-btn.lg-dark.lg-tint:hover { background: linear-gradient(180deg, #fde3ee 0%, #f6bed6 55%, #efaacb 100%); }
/* 粉镜边上下走色（宝宝 11-02：斜向渐变在长胶囊上两头粗、中间断，不圆滑）：一整圈同样粗，顶亮底稍亮，腰部淡一点 */
.lg-btn.lg-tint::before { padding: 1.5px;
  background: linear-gradient(180deg, rgba(255, 214, 232, .98) 0%, rgba(255, 150, 198, .75) 45%, rgba(255, 150, 198, .7) 60%, rgba(255, 196, 224, .95) 100%); }
.lg-btn.lg-dark.lg-tint::before { padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .35)); }
@media (prefers-reduced-motion: reduce) { .lg-btn:active { transform: none; } }