/* 蜀哥乐器伴奏宝 - 全站主色与首页 Banner 一致（天蓝 / 靛蓝系） */

/* 基础工具类：确保 hidden 类有效（不依赖 tailwind） */
.hidden,
[hidden] {
  display: none !important;
}

:root {
  /* === 蜀哥乐器伴奏宝 - 浅湖蓝色系统一规范 === */
  /* 主色：浅湖蓝 */
  --brand: #40A9FF;
  --brand-mid: #1890FF;
  --brand-dark: #096DD9;
  --brand-soft: #E6F4FF;
  --brand-softer: #F0F7FF;
  --brand-border: rgba(64, 169, 255, 0.42);
  --brand-core-rgb: 64, 169, 255;
  
  /* 辅助色 */
  --text: #1F2937;
  --text-secondary: #4B5563;
  --text-muted: #8C8C8C;
  --surface: #FFFFFF;
  /* 页面铺底：中性浅灰白，避免浅湖蓝灰的「发脏」感 */
  --page-bg: #f7f8fa;
  --page-bg-soft: #fafbfc;
  --border: #E5E7EB;
  --border-input: #E5E7EB;
  
  /* 警示色 */
  --danger: #F87171;
  --danger-bg: #FEF2F2;
  
  /* 金色（官方标记） */
  --shuge-gold: #FBBF24;
  --shuge-gold-dark: #92400E;
  --shuge-accent: #D97706;
  --shuge-accent-soft: #FEF3C7;
  
  /* 渐变 */
  --gradient-vocal-ui: linear-gradient(135deg, #40A9FF 0%, #E6F4FF 100%);
  --gradient-vocal-ui-tall: linear-gradient(180deg, #40A9FF 0%, #1890FF 50%, #B8E1FF 100%);
  --vocal-ui-shadow: 0 4px 20px rgba(64, 169, 255, 0.32);
  
  /* 其他辅助色 */
  --accent-teal: #40A9FF;
  --accent-teal-dark: #096DD9;
  --accent-teal-soft: #E6F4FF;
  --accent-teal-rgb: 64, 169, 255;
  --accent-speed: #40A9FF;
  --accent-speed-border: rgba(64, 169, 255, 0.5);
  --accent-speed-soft: rgba(64, 169, 255, 0.14);
  --accent-pitch: #40A9FF;
  --accent-pitch-border: rgba(64, 169, 255, 0.48);
  --accent-pitch-soft: rgba(64, 169, 255, 0.12);
  --accent-vocal: #40A9FF;
  --accent-vocal-border: rgba(64, 169, 255, 0.55);
  --accent-vocal-soft: rgba(64, 169, 255, 0.14);
  --accent-ab: #40A9FF;
  --accent-ab-border: rgba(64, 169, 255, 0.55);
  --accent-ab-soft: rgba(64, 169, 255, 0.16);
  
  /* 阴影与圆角 */
  --shadow-card: 0 1px 2px rgba(31, 41, 55, 0.05), 0 4px 14px rgba(31, 41, 55, 0.06);
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-input: 10px;
  --radius-badge: 999px;
  /* 全站统一：卡片/按钮“清爽”圆角与浅阴影（适老化、一眼一致） */
  --app-radius-chrome: 12px;
  --app-radius-chrome-sm: 10px;
  --app-shadow-chrome: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04);
  --app-shadow-chrome-raised: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.07);
  
  /* 字号规范（root 16px）*/
  --fz-title: 1.25rem;
  --fw-title: 700;
  --lh-title: 1.3;
  --fz-song: 1rem;
  --fw-song: 500;
  --lh-body: 1.5;
  --fz-meta: 0.875rem;
  --fw-meta: 400;
  --fz-btn: 0.875rem;
  --fw-btn: 500;
  
  /* 间距 */
  --space-page-x: 1rem;
  --space-page-y: 1rem;
  --space-section: 1rem;
  --touch-min: 44px;
  
  /* 桌面端与手机共用：主内容最大宽度 */
  --app-content-max-sm: 32rem;
  --app-content-max-md: 40rem;
  --app-content-max-lg: 44rem;
  /* 大屏平板 / 桌面浏览器：主列再放宽，仍保持可读行长 */
  --app-content-max-xl: 56rem;
  --app-banner-max: 48rem;
  /* 登录页大屏主列：略放宽，配合较小左右边距 */
  --app-login-wide-max: 60rem;
  /* 主内容区横向「满屏」可用宽度：视口减左右安全区，再减与 Hub 底栏一致的约 1.25rem 内边距 */
  --app-viewport-usable-x: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 1.25rem);
  
  /* 导航栏 */
  --tabbar-bg: #FFFFFF;
  --tabbar-active-bg: transparent;
  --tabbar-active-color: #40A9FF;
  --tabbar-inactive-color: #8C8C8C;
}

@media (min-width: 600px) {
  :root {
    --space-page-x: 1.125rem;
    --space-page-y: 1.125rem;
  }
}

@media (min-width: 768px) {
  :root {
    --space-page-x: 1.25rem;
    --space-page-y: 1.25rem;
  }
}

/* 全站根字号：固定 16px，rem 不受系统「显示大小」/ 微信内字体等自动放大干扰（版式更稳；依赖系统超大字的用户可在浏览器内缩放页面） */
html {
  font-size: 16px !important;
  -webkit-text-size-adjust: none !important;
  -ms-text-size-adjust: 100%;
  text-size-adjust: none !important;
}

@media (min-width: 768px) {
  html {
    font-size: 16px !important;
  }
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* 微信内置浏览器：纯改 html 往往不够；Android 配合 common.js 里 WeixinJSBridge + 根字号锁定 */
html.yq-wechat-android,
html.yq-wechat-android body,
html.yq-wechat-android body * {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

html.yq-wechat-ios {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

html.yq-wechat-ios body,
html.yq-wechat-ios body * {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-grid-reset {
  font: inherit;
  color: inherit;
}

/* ========== 首页 / 我的伴奏：主按钮与功能入口 ========== */
.btn-pick-primary {
  font-size: var(--fz-btn) !important;
  font-weight: var(--fw-btn) !important;
  padding: 0.55rem 1rem !important;
  min-height: var(--touch-min) !important;
  max-width: 22rem;
  width: 100%;
  border-radius: var(--radius-btn) !important;
  background: var(--gradient-vocal-ui-tall) !important;
  color: #ffffff !important;
  box-shadow: var(--vocal-ui-shadow) !important;
}

.btn-pick-primary:active {
  opacity: 0.92;
  transform: scale(0.99);
}

/* ========== 上传中：全屏遮罩 + 品牌色转圈（首页 / 我的伴奏）========== */
.app-upload-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}

.app-upload-loading.hidden {
  display: none !important;
}

.app-upload-loading__panel {
  width: 100%;
  max-width: 17.5rem;
  text-align: center;
  padding: 1.35rem 1.25rem 1.2rem;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(var(--brand-core-rgb), 0.35);
  box-shadow: 0 12px 40px rgba(var(--brand-core-rgb), 0.18), 0 2px 12px rgba(31, 41, 55, 0.06);
}

.app-upload-loading__spinner {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.85rem;
  box-sizing: border-box;
  border: 4px solid var(--brand-soft);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: app-upload-spin 0.72s linear infinite;
}

.app-upload-loading__text {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--text);
}

.app-upload-loading__sub {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

@keyframes app-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-upload-loading__spinner {
    animation: none;
    border-color: rgba(var(--brand-core-rgb), 0.35);
    border-top-color: var(--brand);
    opacity: 0.95;
  }
}

body.app-upload-loading--lock {
  overflow: hidden !important;
  touch-action: none;
}

/* 播放页：不确定进度条（无具体百分比时给用户「仍在进行」感） */
.app-upload-loading__indeterminate {
  margin: 0.85rem 0 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--brand-core-rgb), 0.15);
  overflow: hidden;
  max-width: 14rem;
  margin-left: auto;
  margin-right: auto;
}

.app-upload-loading__indeterminate-bar {
  display: block;
  height: 100%;
  width: 35%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid));
  animation: app-upload-indeterminate 1.1s ease-in-out infinite;
}

@keyframes app-upload-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-upload-loading__indeterminate-bar {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}

/* 播放页：变速变调下载 — 轻蒙层 + 圆环内数字 % */
.play-loading-toast {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.play-loading-toast.hidden {
  display: none !important;
}

.play-loading-toast__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.75rem 1.35rem;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 20px 40px -12px rgba(14, 165, 233, 0.35);
  min-width: 168px;
  max-width: 280px;
  max-width: min(88vw, 280px);
}

.play-loading-ring-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  margin-bottom: 0.65rem;
}

.play-loading-ring__svg {
  width: 104px;
  height: 104px;
  display: block;
}

.play-loading-ring__bg {
  stroke: #e0f2fe;
  stroke-width: 5;
}

.play-loading-ring__arc {
  stroke: #0ea5e9;
  stroke-width: 5;
  stroke-dasharray: 226.19 226.19;
  stroke-dashoffset: 226.19;
  transition: stroke-dashoffset 0.18s ease-out;
}

.play-loading-ring-wrap--indeterminate .play-loading-ring__arc {
  transition: none;
  stroke-dasharray: 52 175;
  stroke-dashoffset: 0;
  animation: play-loading-ring-dash 1s linear infinite;
}

.play-loading-ring__pct {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 1.28rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0c4a6e;
  line-height: 1;
  pointer-events: none;
}

@keyframes play-loading-ring-dash {
  to {
    stroke-dashoffset: -226.19;
  }
}

.play-loading-toast__text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
}

.play-loading-toast__sub {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

.play-loading-toast__sub.hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .play-loading-ring-wrap--indeterminate .play-loading-ring__arc {
    animation: none;
    stroke-dasharray: 56 170;
  }
}

/* 本地上传区：说明文案（大白话、柔和灰、无强调色） */
.app-pick-hint {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

/* 首页：与主按钮同宽居中 */
.app-pick-hint--home {
  margin-top: 0.5rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--muted);
  white-space: pre-line;
}

/* 我的伴奏页：与内容区左缘对齐 */
.app-pick-hint--my-page {
  margin-top: 0.5rem;
  text-align: left;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--muted);
  white-space: pre-line;
}

/* 核心工具区：底部次要说明（更浅、略小，不抢功能） */
.app-tools-hint {
  margin-top: 0.5rem;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  letter-spacing: 0;
  font-style: normal;
  color: var(--muted);
}

/* 全站说明性文案：与 play-panel-hint 同系的浅色描边卡 */
.app-pick-hint,
.app-tools-hint,
.app-list-hint-empty,
.app-user-tip,
.app-compare-note,
.play-speed-baseline,
.play-ab-status,
.play-volume-hint,
.index-page-lead,
.index-page-sub,
.app-tool-card__desc,
.metro-desc,
.metro-hint {
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.65) 0%, rgba(255, 255, 255, 0.92) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* 列表区空状态说明（与上传提示同级：中灰、16px、宽松行高） */
.app-list-hint-empty {
  margin: 0;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  font-style: normal;
  color: var(--text-secondary);
}

.app-list-hint-empty--center {
  text-align: center;
}

/* 首页「核心练习工具」区块标题略大于普通模块标题 */
.app-block-title--home-tools {
  font-size: 1.1875rem;
  margin-bottom: 0.55rem;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.home-feature-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.5rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.1);
}

.home-feature-card:active {
  opacity: 0.94;
  transform: scale(0.98);
}

.home-feature-card__emoji {
  font-size: 1.85rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-feature-card__label {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.home-feature-card--speed {
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.home-feature-card--pitch {
  background: linear-gradient(90deg, #f59e0b 0%, #78350f 100%);
  box-shadow: 0 4px 16px rgba(180, 83, 9, 0.35);
}

.home-feature-card--vocal {
  background: var(--gradient-vocal-ui);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
}

.home-feature-card--ab {
  background: linear-gradient(90deg, #8b5cf6 0%, #4c1d95 100%);
  box-shadow: 0 4px 16px rgba(109, 40, 217, 0.38);
}

#recentList {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.app-recent-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  min-height: var(--touch-min);
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--text);
  font-weight: var(--fw-song);
  font-size: var(--fz-song);
  line-height: var(--lh-body);
}

.app-recent-row:active {
  opacity: 0.94;
  transform: scale(0.995);
}

.app-recent-row__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
}

.app-recent-row__icon--audio {
  background: var(--accent-vocal-soft);
  color: var(--accent-vocal);
}

.app-recent-row__icon--video {
  background: var(--accent-pitch-soft);
  color: var(--accent-pitch);
}

.app-recent-row__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.app-recent-row__titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.app-recent-row__name {
  font-weight: var(--fw-song);
  font-size: var(--fz-song);
  word-break: break-word;
  line-height: var(--lh-body);
  flex: 1 1 auto;
  min-width: 0;
}

.app-my-acc-badge {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-my-acc-badge--official {
  color: var(--shuge-gold-dark);
  background: linear-gradient(180deg, #fde68a 0%, var(--shuge-gold) 100%);
  border: 1px solid rgba(217, 119, 6, 0.38);
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.12);
}

.app-my-acc-badge--local {
  color: var(--brand-dark);
  background: rgba(var(--brand-core-rgb), 0.12);
  border: 1px solid rgba(var(--brand-core-rgb), 0.38);
}

.app-recent-row__date {
  align-self: flex-end;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--muted);
}

.app-recent-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  color: var(--brand-dark);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  min-height: var(--touch-min);
  border-radius: var(--radius-btn);
  background: var(--brand-soft);
  border: 1px solid rgba(var(--brand-core-rgb), 0.22);
  -webkit-tap-highlight-color: transparent;
}

.app-recent-more:active {
  opacity: 0.9;
  transform: scale(0.98);
}

/* ========== 我的伴奏页（私人列表管理）========== */
.app-my-main {
  padding-bottom: 0.5rem;
}

/* 「我的伴奏」独立页：与全站浅蓝底一致、列表极简卡片 */
body[data-my-acc-page="1"] .app-my-main--private {
  background-color: transparent;
}

.app-my-quick--private {
  margin-top: 1rem;
}

.app-my-list-section--private {
  margin-top: 1rem;
}

.app-block-title--private-list {
  margin-bottom: 1rem;
}

.app-my-card__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  border-radius: 8px;
}

.app-my-card__icon--audio {
  background: rgba(var(--accent-teal-rgb), 0.14);
}

.app-my-card__icon--video {
  background: rgba(167, 139, 250, 0.12);
}

.app-my-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.app-my-card__titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.app-my-card__title {
  font-size: var(--fz-song);
  font-weight: var(--fw-song);
  line-height: var(--lh-body);
  color: #1f2937;
  word-break: break-word;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.app-my-card__date {
  align-self: flex-end;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--muted);
}

.app-my-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.app-my-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 1rem;
  min-height: 44px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  font-size: 1rem;
  line-height: 1.4;
  background: #ffffff;
  color: var(--text);
}

.app-my-search:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(var(--brand-core-rgb), 0.22);
}

.app-my-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.app-my-btn-upload {
  flex: 1 1 auto;
  min-width: 6.5rem;
  text-align: center;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 0.65rem 1rem !important;
  min-height: 48px !important;
  border-radius: var(--radius-btn) !important;
}

.app-my-btn-filter {
  flex: 0 0 auto;
  font-size: 0.9375rem !important;
  padding: 0.55rem 0.85rem !important;
  min-height: 44px !important;
  border-radius: var(--radius-btn) !important;
}

.app-my-quick {
  margin-top: 0.85rem;
  padding: 0.65rem 0.7rem 0.75rem;
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.app-my-quick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.app-my-quick__title {
  margin: 0;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  color: var(--text);
}

.app-my-exit-select {
  font-size: 0.8125rem !important;
  padding: 0.35rem 0.65rem !important;
  flex-shrink: 0;
}

.app-my-quick__body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.app-my-quick-btn {
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 7rem;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  background: var(--brand-soft);
  color: var(--brand-dark);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-my-quick-btn:active {
  opacity: 0.9;
}

.app-my-quick-btn--danger {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.app-my-quick-btn--tone-speed {
  border: 1px solid var(--accent-speed-border);
  background: var(--accent-speed-soft);
  color: #d46b08;
}

.app-my-quick-btn--tone-pitch {
  border: 1px solid var(--accent-pitch-border);
  background: var(--accent-pitch-soft);
  color: #7c3aad;
}

.app-my-quick-btn--tone-vocal {
  border: 1px solid var(--accent-vocal-border);
  background: var(--accent-vocal-soft);
  color: #08979c;
}

.app-my-quick-btn--tone-ab {
  border: 1px solid var(--accent-ab-border);
  background: var(--accent-ab-soft);
  color: #1677ff;
}

.app-my-empty {
  text-align: center;
  padding: 1.5rem 0.75rem 1rem;
  color: #4b5563;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  font-style: normal;
}

.app-my-empty__text {
  display: block;
  max-width: 18rem;
  margin: 0 auto;
}

.app-my-empty__viz {
  display: block;
  margin-top: 0.85rem;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.15em;
  color: var(--accent-teal);
}

.app-my-list-section {
  margin-top: 1.5rem;
}

.app-my-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

body[data-my-acc-page="1"] .app-my-list {
  gap: 0.45rem;
}

.app-my-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0.55rem 0.65rem;
}

.app-my-row--selected {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 2px rgba(var(--brand-core-rgb), 0.22);
}

.app-my-row__cb-wrap {
  display: flex;
  align-items: center;
  padding-left: 0.2rem;
  flex-shrink: 0;
}

.app-my-row__cb-wrap--hidden {
  width: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.app-my-row__tap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  min-height: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.app-my-row__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-my-more {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 1.5rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.app-my-more:active {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

.app-my-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: transparent;
}

.app-my-menu {
  position: fixed;
  z-index: 80;
  min-width: 11rem;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.35rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
}

.app-my-menu__item {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  border: none;
  background: none;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.app-my-menu__item:active {
  background: var(--brand-soft);
}

/* ========== 工具集与子工具入口 ========== */
.app-tools-page {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin: 0 auto;
  padding: var(--space-page-y) var(--space-page-x) 5.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .app-tools-page {
    /* 与 .app-topbar--align-content 左右留白一致，避免主列比顶栏「缩进」不同 */
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.app-tools-banner {
  text-align: center;
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  color: var(--brand-dark);
  background: var(--brand-soft);
  border: 1px solid rgba(var(--brand-core-rgb), 0.2);
  border-radius: var(--radius-card);
  padding: 0.45rem 0.65rem;
  margin: 0 0 0.5rem;
  line-height: var(--lh-body);
}

.app-tools-intro {
  text-align: center;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  color: var(--text-secondary);
  margin: 0 0 0.65rem;
  line-height: var(--lh-body);
}

.app-tools-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-tool-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0.75rem 0.55rem 0.65rem;
  min-height: var(--touch-min);
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
}

.app-tool-card:active {
  opacity: 0.94;
  transform: scale(0.995);
}

.app-tool-card__ico {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: var(--brand-soft);
}

.app-tool-card__body {
  flex: 1;
  min-width: 0;
}

.app-tool-card__title {
  font-size: var(--fz-song);
  font-weight: var(--fw-song);
  color: var(--text);
  margin: 0;
  line-height: var(--lh-body);
}

.app-tool-card__desc {
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  color: var(--muted);
  margin: 0.1rem 0 0;
  line-height: var(--lh-body);
}

.app-tool-card__go {
  font-size: 1.2rem;
  color: var(--muted);
}

/* ========== 工具集页：与 play.html 卡片（12px·浅阴影·浅湖蓝）100% 对齐 ========== */
.app-my-tools-page .app-topbar__title {
  font-size: 1rem;
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
}

.app-my-tools-page .app-tools-page {
  padding: 1rem var(--space-page-x) 5.5rem;
}

@media (min-width: 768px) {
  .app-my-tools-page .app-tools-page {
    max-width: var(--app-viewport-usable-x);
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.app-my-tools-page .app-tools-banner {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  border: 1px solid rgba(24, 144, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(64, 169, 255, 0.28);
  padding: 0.55rem 0.85rem;
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.app-my-tools-page .app-tools-intro {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 400;
  color: #555555;
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

.app-my-tools-page .app-tools-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.app-my-tools-page .app-tool-card {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  padding: 1.05rem 1.15rem 1.05rem 1rem;
  min-height: 48px;
  margin: 0;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.07), 0 1px 3px rgba(31, 41, 55, 0.05);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  position: relative;
  transition: box-shadow 0.12s ease, transform 0.1s ease;
}

.app-my-tools-page .app-tool-card:active {
  opacity: 1;
  transform: scale(0.99);
  box-shadow: 0 1px 4px rgba(64, 169, 255, 0.35), 0 4px 14px rgba(31, 41, 55, 0.12);
}

.app-my-tools-page .app-tool-card--soon::after {
  content: '开发中';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 23, 42, 0.42);
  border-radius: 12px;
  pointer-events: none;
}

.app-shell.app-my-tools-page .app-tool-card:active {
  transition: none;
}

.app-my-tools-page .app-tool-card__ico {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  flex-shrink: 0;
  background: rgba(var(--brand-core-rgb), 0.12);
  border: 1px solid rgba(var(--brand-core-rgb), 0.28);
  color: #40a9ff;
}

.app-my-tools-page .app-tool-card__ico-svg {
  display: block;
  flex-shrink: 0;
}

.app-my-tools-page .app-tool-card__body {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.app-my-tools-page .app-tool-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #333333;
  margin: 0;
  line-height: 1.45;
}

.app-my-tools-page .app-tool-card__desc {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666666;
  margin: 0.2rem 0 0;
  line-height: 1.45;
}

.app-my-tools-page .app-tool-card__go {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  font-weight: 500;
  color: #40a9ff;
}

.app-my-tools-page .app-tool-card__go-svg {
  display: block;
  flex-shrink: 0;
}

.app-placeholder-page {
  width: 100%;
  max-width: min(22rem, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: var(--space-page-y) var(--space-page-x) 5.5rem;
  text-align: center;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .app-placeholder-page {
    max-width: var(--app-viewport-usable-x);
  }
}

.app-placeholder-card {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0.85rem 0.75rem;
}

.app-placeholder-card p {
  margin: 0;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

/* ========== 全局搜索（首页 / 我的伴奏）========== */
.app-search-shell {
  margin-bottom: 0.5rem;
}

.app-search-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: #ffffff;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  padding: 0.35rem 0.5rem;
  box-shadow: none;
}

.app-search-bar input[type="search"],
.app-search-bar input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
}

.app-search-bar input::placeholder {
  color: var(--muted);
}

.app-search-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-search-submit:hover {
  background: rgba(var(--brand-core-rgb), 0.12);
}

.app-search-submit:active {
  opacity: 0.88;
}

.app-search-panel {
  margin-top: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0.65rem 0.75rem 0.85rem;
  max-height: 70vh;
  overflow-y: auto;
}

.app-search-section-title {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-search-section-title:first-child {
  margin-top: 0;
}

.app-search-empty {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 0.5rem 0;
}

.app-search-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.app-search-row__sub {
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  color: var(--muted);
  line-height: var(--lh-body);
}

.app-search-row--disabled {
  cursor: default;
  opacity: 0.88;
}

.app-search-row--disabled .app-recent-row__name {
  color: var(--text-secondary);
}

/* ========== 首页「蜀哥专属伴奏库」列表（字段清晰 / 老年友好）========== */
.app-rec-section {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.app-rec-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-lib-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.home-lib-title {
  margin-bottom: 0 !important;
}

.home-lib-count {
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  color: var(--muted);
  line-height: var(--lh-body);
  flex-shrink: 0;
}

.home-lib-grid.app-rec-grid {
  gap: 14px;
}

/* ========== 首页「精选伴奏库」：无外框，列表卡片单独成框；主列全宽更大气 ========== */
.app-home-page .home-v2-section--lib {
  margin-top: 0.65rem;
  margin-bottom: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.app-home-page .home-v2-section--lib .home-v2-section__head {
  margin-bottom: 0.65rem;
  padding: 0 0.05rem 0.5rem;
  border-bottom: none;
}

.app-home-page .home-v2-section--lib .home-lib-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-home-page .home-v2-section--lib .home-lib-title::before {
  content: '';
  width: 4px;
  height: 1.15em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(var(--brand-core-rgb), 0.28);
}

.app-home-page .home-v2-section--lib .home-lib-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-dark);
  padding: 0.22rem 0.55rem;
  background: rgba(230, 244, 255, 0.75);
  border: 1px solid rgba(var(--brand-core-rgb), 0.2);
  border-radius: 999px;
}

.app-home-page .home-v2-section--lib .home-lib-grid.app-rec-grid {
  gap: 0.9rem !important;
  row-gap: 0.9rem !important;
  column-gap: 0.9rem !important;
}

.app-home-page .home-v2-section--lib .home-lib-card {
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.05);
}

/* 精选伴奏库：无限滚动锚点与底部加载 */
/* 勿用 visibility:hidden：部分浏览器 IO 不算「相交」，导致无限滚动不触发 */
.home-lib-scroll-sentinel {
  width: 100%;
  height: 8px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.home-lib-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.home-lib-loading-more.hidden {
  display: none !important;
}

.home-lib-loading-more__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(var(--brand-core-rgb), 0.25);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: home-lib-spin 0.75s linear infinite;
}

@keyframes home-lib-spin {
  to { transform: rotate(360deg); }
}

.home-lib-load-more-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.35rem 0 0.85rem;
  padding: 0.65rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-dark);
  background: var(--brand-softer);
  border: 1px solid rgba(var(--brand-core-rgb), 0.35);
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.home-lib-load-more-btn:active {
  opacity: 0.92;
  transform: scale(0.99);
}

.home-lib-load-more-btn.hidden {
  display: none !important;
}

/* 平板 / 横屏：列表项再拉开一档（手机保持上方 12px 默认）；阴影略加重；!important 防 Tailwind/缓存覆盖 */
@media (min-width: 600px) {
  .home-lib-grid.app-rec-grid {
    gap: 2.35rem !important;
    row-gap: 2.35rem !important;
  }

  .app-home-page .home-v2-section--lib .home-lib-grid.app-rec-grid {
    gap: 2.35rem !important;
    row-gap: 2.35rem !important;
  }

  .home-lib-card {
    box-shadow:
      0 6px 22px rgba(15, 23, 42, 0.1),
      0 2px 6px rgba(15, 23, 42, 0.05);
  }

  .home-lib-card__actions {
    gap: 12px;
  }
}

/* 更宽平板：再略增一档，避免「两条叠在一起」的观感 */
@media (min-width: 900px) {
  .app-home-page .home-v2-section--lib .home-lib-grid.app-rec-grid,
  .home-lib-grid.app-rec-grid {
    gap: 2.85rem !important;
    row-gap: 2.85rem !important;
  }
}

/* 平板：精选列表卡片内留白略增，避免「体验」行与文案贴太紧 */
@media (min-width: 768px) {
  .app-home-page .home-v2-section--lib .home-lib-card,
  .home-lib-card {
    padding: 1.125rem 1.125rem 1rem;
  }

  .home-lib-card__category {
    margin-top: 6px;
  }

  .home-lib-card__chips {
    margin-top: 12px;
  }

  .home-lib-card__foot {
    margin-top: 12px;
    padding-top: 2px;
  }

  .home-lib-card__actions {
    gap: 12px;
    padding-top: 4px;
  }
}

.home-lib-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: default;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  padding: 14px 14px 12px;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.05);
  -webkit-tap-highlight-color: transparent;
  line-height: 1.45;
}

.home-lib-card:active {
  opacity: 0.97;
}

.home-lib-card--pending {
  cursor: default;
}

/* 上排：左侧可点区域 + 右侧播放/收藏 */
.home-lib-card__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.home-lib-card__text-col {
  min-width: 0;
  flex: 1;
}

.home-lib-card__title {
  margin: 0;
  /* 与分类行、调号/BPM 芯片协调；最多 2 行省略 */
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-lib-card__category {
  margin: 4px 0 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  color: #94a3b8;
}

.home-lib-card__tagline--subtle {
  margin: 6px 0 0;
}

.home-lib-card__member-note {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
}

/* 调号、BPM：并排浅底圆角标签 */
.home-lib-card__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.home-lib-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: #334155;
  background: #f1f5f9;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.home-lib-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
  flex-wrap: wrap;
}

.home-lib-card__pending-hint {
  margin-right: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.35;
}

.home-lib-card__date {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 400;
  color: #cbd5e1;
  line-height: 1.35;
}

.home-lib-card__play-area {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 0;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.home-lib-card__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ▶ 体验 / 播放：与主 CTA 一致的蓝渐变 */
.home-lib-card__play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
  border: 1px solid rgba(24, 144, 255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.28);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.home-lib-card__play-btn:hover:not(:disabled) {
  filter: brightness(1.04);
  box-shadow: 0 3px 10px rgba(24, 144, 255, 0.32);
}

.home-lib-card__play-btn-ico {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.95;
}

.home-lib-card__play-btn:active:not(:disabled) {
  filter: brightness(0.96);
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(24, 144, 255, 0.35);
}

.home-lib-card__play-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.home-lib-card__fav-btn {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #cbd5e1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.home-lib-card__fav-btn svg {
  width: 22px;
  height: 22px;
}

.home-lib-card__fav-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.home-lib-card__fav-btn:active {
  transform: scale(0.96);
}

.home-lib-card__fav-btn.is-favorited {
  color: var(--brand);
  background: #e8f4ff;
  border-color: rgba(var(--brand-core-rgb), 0.35);
}

.home-lib-card__fav-btn.is-favorited svg {
  fill: var(--brand);
}

.home-lib-card--experience {
  box-shadow:
    0 2px 10px rgba(22, 119, 255, 0.12),
    0 1px 3px rgba(15, 23, 42, 0.05);
}

/* 旧版 meta 行/标签：flbz 或其它引用保留类名时仍可兜底 */
.home-lib-card__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.home-lib-card__keyline {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.home-lib-card__speedline {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
}

.home-lib-card__tagline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.home-lib-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: var(--fz-meta);
  font-weight: var(--fw-btn);
  line-height: 1;
  border-radius: 9999px;
}

.home-lib-card__tag--experience {
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
}

.home-lib-card__tag--member {
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
}

/* 播放页：与全站浅蓝底 + 品牌色一致 */
body.app-play-page {
  --play-mint: var(--brand);
  --play-mint-dark: var(--brand-dark);
  --play-mint-soft: var(--brand-soft);
  --play-mint-border: rgba(var(--brand-core-rgb), 0.28);
  --play-tab-inactive-border: #e5e7eb;
  --play-tab-inactive-text: #4b5563;
  --play-card-radius: 12px;
  --play-control-h: 3rem;
  line-height: var(--lh-body);
  /* 低版本 WebView：系统默认黄/橙焦点环改为主题蓝（可被子级 :focus 覆盖） */
  -webkit-focus-ring-color: rgba(var(--brand-core-rgb), 0.88);
  /* 底部固定栏 + 滑到底时与「收藏/下载」之间的可视空隙 */
  padding-bottom: calc(6.85rem + env(safe-area-inset-bottom, 0px));
}

body,
.app-shell {
  color: var(--text);
  font-size: var(--fz-song);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  -webkit-tap-highlight-color: transparent;
}

/* 内页与首页统一：干净中性浅灰白渐变（由 body 铺底，无湖蓝杂色） */
body.app-shell {
  background: linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-soft) 34%, #ffffff 100%);
  background-color: var(--page-bg);
  /* App WebView / 刘海屏 / 平板横屏：与 H5 viewport-fit=cover 对齐 */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* iPad / iOS：避免仅用 100vh 时可视区域与布局视口不一致，固定底栏被顶到视窗外 */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* 全站主内容区：紧凑边距 + 为底栏留白 */
.app-page-main {
  padding: var(--space-page-y) var(--space-page-x) 5.5rem;
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .app-page-main {
    padding: 1rem 1.25rem 5.5rem;
  }
}

.app-block-title {
  margin: 0 0 0.45rem;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  font-style: normal;
  color: var(--text);
}

.app-block-title--tight {
  margin-bottom: 0.4rem;
}

.app-body-quiet {
  margin-top: 2rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  font-size: 1rem;
}

.app-body-quiet__brand {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.app-body-quiet__note {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.app-inline-muted {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.4;
}

.app-shell {
  min-height: 100vh;
}

/* 可点击区域轻微按压反馈（不依赖 hover） */
.app-shell button:active:not(:disabled),
.app-shell .app-tabbar__link:active,
.app-shell .home-lib-card:active,
.app-shell .app-tool-card:active {
  transition: transform 0.08s ease, opacity 0.08s ease;
}

/* ========== 顶栏（修复挤压、换行错乱）========== */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--touch-min);
  /* iOS WebView / 刘海屏：避免顶栏与返回键贴在状态栏下导致点击失效 */
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) var(--space-page-x) 0.35rem;
  /* 与 flbz 伴奏库顶栏一致：靛蓝 → 浅湖蓝渐变 */
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand-mid) 55%, var(--brand) 100%);
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.22);
}

/* 顶栏内返回：白字（独立文档页的 .app-back-chevron 保持主色） */
.app-topbar .app-back-chevron {
  color: #fff;
}

.app-topbar .app-back-chevron:active {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

/* 与首页 / 个人中心 / 工具集主列同宽 */
@media (min-width: 768px) {
  .app-topbar.app-topbar--align-content {
    width: 100%;
    max-width: var(--app-viewport-usable-x);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(var(--brand-core-rgb), 0.18);
    box-sizing: border-box;
  }
}

.app-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}

.app-topbar__nameblock {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.app-topbar__logo {
  flex-shrink: 0;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
  background: var(--gradient-vocal-ui);
  box-shadow: var(--vocal-ui-shadow);
  border: 2px solid rgba(255, 255, 255, 0.92);
}

.app-topbar__title {
  font-size: 1rem;
  font-weight: var(--fw-title);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--lh-title);
}

.app-topbar__title--full {
  font-size: var(--fz-song);
  font-weight: var(--fw-song);
  letter-spacing: -0.02em;
}

.app-shuge-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.15rem 0.48rem;
  border-radius: 0.4rem;
  color: var(--shuge-gold-dark);
  background: linear-gradient(180deg, #ffe8a8 0%, var(--shuge-gold) 100%);
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(255, 193, 7, 0.22);
}

.app-topbar__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  min-height: var(--touch-min);
  box-sizing: border-box;
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
}

.app-topbar__action:active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.34);
  transform: scale(0.98);
}

/* 全站顶栏/内页：简洁返回（‹） */
a.app-back-chevron,
button.app-back-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--brand-dark);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a.app-back-chevron:active,
button.app-back-chevron:active {
  background: rgba(var(--brand-core-rgb), 0.12);
  opacity: 0.92;
}

.app-back-chevron__glyph {
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  transform: translateX(-1px);
  margin-top: -2px;
  pointer-events: none;
}

.app-back-chevron--docblock {
  display: inline-flex;
}

/* 播放页顶栏：‹ + 居中标题 + 来源 */
.app-topbar--play {
  flex-wrap: nowrap;
}

.app-topbar.app-topbar--play {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) minmax(4.5rem, auto);
  align-items: center;
  column-gap: 0.35rem;
}

/* Grid 子项默认 min-width:auto，长标题会挤没第 3 列「来源」；必须允许标题列收缩 */
.app-topbar.app-topbar--play .app-topbar__filename {
  min-width: 0;
}

.app-topbar__filename--play-center {
  text-align: center;
  justify-self: stretch;
}

.app-topbar--play .play-source-badge {
  margin-top: 0;
  flex-shrink: 0;
  justify-content: flex-end;
  justify-self: end;
  max-width: 46vw;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.app-topbar--play .play-source-badge__text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
  -webkit-font-smoothing: antialiased;
}

.app-topbar--play .play-source-badge--experience .play-source-badge__text {
  color: #a7f3d0;
}

@media (min-width: 768px) {
  .app-topbar.app-topbar--play {
    column-gap: 0.5rem;
  }
}

/* 频谱条：放在播放卡片（.play-panel-media）内，不占独立条带 */
.play-panel-media .play-spectrum-outer {
  width: 100%;
  margin: 0;
  padding: 0 0 0.4rem;
  box-sizing: border-box;
}

/* play.html：频谱 U 型镂空 + 黑胶落入中间透气区 */
.play-audio-visual-bundle {
  position: relative;
  width: 100%;
  margin: 0 0 0.95rem;
  padding: 0;
  box-sizing: border-box;
}

.play-audio-visual-bundle .play-spectrum-outer {
  padding: 0 0 0.15rem;
}

.play-audio-visual-bundle .play-vinyl-row {
  margin: -1.42rem 0 0.45rem;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.play-spectrum-canvas {
  display: block;
  width: 100%;
  border-radius: var(--play-card-radius, 12px);
  box-shadow: 0 3px 12px rgba(8, 15, 35, 0.14), 0 0 0 1px rgba(96, 165, 250, 0.12) inset;
}

/* 频谱下黑胶：金黄同心线 + 放射纹；仅 .is-playing 时旋转（避免 animation-play-state 在部分 WebView 无效） */
.play-vinyl-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.08rem 0 0.22rem;
  pointer-events: none;
}

.play-vinyl-disc {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #2a2418 0%, #2a2418 26%, #15100a 26.5%, #0c0906 100%);
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(120, 90, 20, 0.55);
  /* 默认不声明 animation，兼容旧 WebView */
  -webkit-animation: none;
  animation: none;
  will-change: auto;
  transform: translateZ(0);
}

/* 纹路层：偏暖底上叠金黄沟槽，转动时线条位移清晰 */
.play-vinyl-disc::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(253, 224, 71, 0.42) 0deg,
      rgba(253, 224, 71, 0.42) 1.8deg,
      transparent 1.8deg,
      transparent 6deg,
      rgba(255, 255, 255, 0.06) 6deg,
      rgba(255, 255, 255, 0.06) 7.2deg,
      transparent 7.2deg,
      transparent 14deg
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) 2px,
      rgba(250, 204, 21, 0.65) 2px,
      rgba(250, 204, 21, 0.65) 3px,
      rgba(254, 243, 199, 0.35) 3px,
      rgba(254, 243, 199, 0.35) 4px,
      rgba(0, 0, 0, 0) 4px,
      rgba(0, 0, 0, 0) 9px,
      rgba(234, 179, 8, 0.5) 9px,
      rgba(234, 179, 8, 0.5) 10px,
      rgba(0, 0, 0, 0) 10px,
      rgba(0, 0, 0, 0) 16px
    );
  -webkit-mask: radial-gradient(circle, transparent 0 27%, #000 28% 99%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 27%, #000 28% 99%, transparent 100%);
  pointer-events: none;
}

/* 中心标：微带金色勾边，与外圈黄线呼应 */
.play-vinyl-disc::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 38%, rgba(255, 255, 255, 0.5) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, #4a4030 0%, #2a2218 58%, #120f0a 100%);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  z-index: 1;
}

.play-vinyl-disc.is-playing {
  will-change: transform;
  -webkit-animation: play-vinyl-rotate 22s linear infinite;
  animation: play-vinyl-rotate 22s linear infinite;
}

@keyframes play-vinyl-rotate {
  from {
    -webkit-transform: rotate(0deg) translateZ(0);
    transform: rotate(0deg) translateZ(0);
  }
  to {
    -webkit-transform: rotate(360deg) translateZ(0);
    transform: rotate(360deg) translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-vinyl-disc.is-playing {
    -webkit-animation: none;
    animation: none;
  }
}

.app-topbar-split-title {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.app-topbar-split-title .app-shuge-tag {
  flex-shrink: 0;
}

.app-topbar-split-title .app-topbar__heading {
  flex: 0 1 auto;
  min-width: 0;
}

.app-topbar__filename {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fz-song);
  font-weight: var(--fw-song);
  line-height: var(--lh-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

/* 双栏顶栏（节拍器 / 登录）：左按钮 + 右标题 */
.app-topbar--split {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.app-topbar--split .btn-outline {
  padding: 0.45rem 0.85rem;
  font-size: 0.9375rem;
  min-height: 2.5rem;
  width: auto;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
}

.app-topbar--split .app-back-chevron {
  width: 2.35rem;
  height: 2.35rem;
  justify-self: start;
}

@media (min-width: 768px) {
  header.app-topbar--split {
    width: 100%;
    max-width: var(--app-viewport-usable-x);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(var(--brand-core-rgb), 0.18);
  }
}

.app-topbar__heading {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #fff;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 个人中心顶栏（旧版整页顶条，可选） */
.app-userbar {
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.92) 0%, var(--surface) 78%);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
}

.app-userbar__inner {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (min-width: 420px) {
  .app-userbar__inner {
    flex-wrap: nowrap;
  }
}

.app-userbar__avatar {
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-mid) 50%, var(--brand-dark) 100%);
}

.app-userbar__meta {
  flex: 1 1 12rem;
  min-width: 0;
}

.app-userbar__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

.app-userbar__role {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.app-userbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}

/* ========== 底部导航栏（5选项）浅湖蓝色系 ========== */
.app-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  /* 顶栏 z-index 约 30～100；搜索顶栏 100。底栏须始终压过主内容/毛玻璃层，iPad 套壳 WebView 才不会「看不到」 */
  z-index: 200;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  min-height: calc(3.25rem + env(safe-area-inset-bottom, 0px));
  /* 独立合成层，减轻 iOS/iPad 上 fixed 与滚动层叠异常 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* 旧 iOS 用 constant()，新系统用 env()；底边随 Home 条抬高可点区域 */
  padding: 0.5rem max(0.5rem, env(safe-area-inset-left, 0px)) 0
    max(0.5rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(0.5rem + constant(safe-area-inset-bottom));
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--tabbar-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.06);
  pointer-events: auto;
}

/* 大屏略增左右内边距；全宽铺满视口，五项仍 flex:1 均分 */
@media (min-width: 600px) {
  .app-tabbar {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 768px) {
  .app-tabbar {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}

.app-tabbar__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 50px;
  padding: 4px 8px;
  /* px：避免微信/系统放大根字号后 rem 把底栏整体撑大 */
  font-size: 12px;
  font-weight: 500;
  color: var(--tabbar-inactive-color);
  text-decoration: none;
  border-radius: 8px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}

.app-tabbar__link:hover {
  color: var(--brand);
}

.app-tabbar__link:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* 选中态：无底块铺色；文案仍用未激活色，仅图标高亮为品牌色 */
.app-tabbar__link.is-active {
  color: var(--tabbar-inactive-color);
  background: transparent;
  font-weight: 600;
}

.app-tabbar__link.is-active .app-tabbar__ico {
  color: var(--tabbar-active-color);
}

.app-tabbar__ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
  transition: color 0.2s ease;
}

.app-tabbar__txt {
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.btn-brand {
  background: var(--gradient-vocal-ui-tall);
  color: #fff;
  border-radius: var(--radius-btn);
  font-weight: var(--fw-btn);
  font-size: var(--fz-btn);
  padding: 0.55rem 1rem;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  cursor: pointer;
  box-shadow: var(--vocal-ui-shadow);
}

.btn-brand:disabled,
.btn-brand[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-brand:active:not(:disabled) {
  opacity: 0.92;
  transform: scale(0.99);
}

.btn-outline {
  border: 1px solid var(--brand-border);
  color: var(--brand-dark);
  background: var(--surface);
  border-radius: var(--radius-btn);
  font-weight: var(--fw-btn);
  font-size: var(--fz-btn);
  padding: 0.5rem 0.85rem;
  min-height: var(--touch-min);
  box-sizing: border-box;
}

.btn-outline:active:not(:disabled) {
  opacity: 0.92;
  transform: scale(0.99);
}

.btn-outline:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* 播放页：功能区描边按钮（对应辅助色文字） */
.btn-feature-speed,
.btn-feature-pitch,
.btn-feature-vocal,
.btn-feature-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-feature-speed {
  border: 2px solid var(--accent-speed-border);
  color: var(--accent-speed);
  background: var(--surface);
  border-radius: 9999px;
  font-weight: var(--fw-btn);
  font-size: var(--fz-btn);
  padding: 0.45rem 0.75rem;
  min-height: var(--touch-min);
  cursor: pointer;
}

.btn-feature-pitch {
  border: 2px solid var(--accent-pitch-border);
  color: var(--accent-pitch);
  background: var(--surface);
  border-radius: 9999px;
  font-weight: var(--fw-btn);
  font-size: var(--fz-btn);
  padding: 0.45rem 0.75rem;
  min-height: var(--touch-min);
  cursor: pointer;
}

.btn-feature-vocal {
  border: 2px solid var(--accent-vocal-border);
  color: var(--accent-vocal);
  background: var(--surface);
  border-radius: 9999px;
  font-weight: var(--fw-btn);
  font-size: var(--fz-btn);
  padding: 0.45rem 0.75rem;
  min-height: var(--touch-min);
  cursor: pointer;
}

.btn-feature-neutral {
  border: 2px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface);
  border-radius: 9999px;
  font-weight: var(--fw-btn);
  font-size: var(--fz-btn);
  padding: 0.45rem 0.75rem;
  min-height: var(--touch-min);
  cursor: pointer;
}

.play-audio-wrap {
  background: var(--brand-softer);
}

.app-range-speed {
  accent-color: var(--accent-speed);
}

.app-range-pitch {
  accent-color: var(--accent-pitch);
}

.btn-compact {
  font-size: 0.875rem !important;
  padding: 0.45rem 0.9rem !important;
  min-height: 2.25rem !important;
}

.btn-brand.btn-compact {
  font-size: 0.9375rem !important;
  padding: 0.55rem 1rem !important;
  min-height: 2.75rem !important;
  border-radius: var(--radius-btn) !important;
}

.card-soft {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card-soft.space-y-3 > p {
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.55) 0%, rgba(255, 255, 255, 0.94) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-placeholder-card > p + p {
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.55) 0%, rgba(255, 255, 255, 0.94) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.play-stage .card-soft {
  box-shadow: none;
}

/* ========== 播放页（模块分区清晰、触控仍够大、字号适中）========== */
.play-stage {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .play-stage {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* play.html / scplay.html：加宽主列、收紧水平边距（与首页 Hub 主列档位一致） */
body.app-play-page .play-stage {
  max-width: 100%;
  padding-left: max(0.35rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.35rem, env(safe-area-inset-right, 0px));
}

body.app-play-page .app-topbar.app-topbar--align-content {
  padding-left: max(0.35rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.35rem, env(safe-area-inset-right, 0px));
}

@media (min-width: 768px) {
  body.app-play-page .play-stage {
    max-width: var(--app-viewport-usable-x);
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  body.app-play-page .app-topbar.app-topbar--align-content {
    max-width: var(--app-viewport-usable-x);
    padding-left: max(0.625rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.625rem, env(safe-area-inset-right, 0px));
  }
}

.play-stage--mint {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.app-play-page .play-stage--mint {
  padding-bottom: 2rem;
}

/* play.html：主内容区更舒展，为固定底栏留出足量空白 */
body.app-play-page:not(.app-scplay-page) .play-stage--mint {
  gap: 1.45rem;
  padding-bottom: 3.25rem;
}

.play-panel-media--mint {
  margin-bottom: 0 !important;
  background: var(--surface) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: var(--play-card-radius, 12px) !important;
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.07), 0 1px 3px rgba(31, 41, 55, 0.05) !important;
}

/* play.html：主站播放控制区极浅湖蓝渐变层次（scplay 单独提亮，不加此渐变避免叠加过亮） */
body.app-play-page:not(.app-scplay-page) .play-panel-media--mint {
  background: linear-gradient(180deg, #f0f7ff 0%, #e6f2ff 100%) !important;
}

/* 勿用 height:0 + 完全透明：部分 Android WebView 对 <audio> 不解码致无声 */
.play-panel-media #audioWrap {
  position: relative;
  min-height: 1px;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.play-audio-element {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
}

.play-media-hint {
  margin: 0 0 0.45rem;
  text-align: center;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  color: var(--muted);
  line-height: var(--lh-body);
}

/* 进度条下方：单行轻提示（不再使用独立描边大卡） */
.play-transport-hint--inline {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
  font-size: 0.6875rem !important;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.45;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1 1 10rem;
  min-width: 0;
}

/* 旧类名保留：若某处未包在 .play-progress-foot 内，降级为轻量样式 */
.play-transport-hint:not(.play-transport-hint--inline) {
  box-sizing: border-box;
  margin: 0.65rem 0 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.45;
  border-radius: 12px;
  border: 1.5px solid rgba(14, 165, 233, 0.42);
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.55) 0%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 2px 10px rgba(14, 99, 198, 0.08);
}

.play-progress-foot {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
}

body.app-play-page .play-progress-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

body.app-play-page:not(.app-scplay-page) .play-progress-foot {
  margin-top: 0.62rem;
  padding-top: 0.52rem;
  padding-bottom: 0.12rem;
}

/* 进度条上方：当前时间 / 总时间 */
body.app-play-page:not(.app-scplay-page) .play-progress-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.app-play-page:not(.app-scplay-page) .play-progress-time-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: #334155;
  letter-spacing: 0.02em;
}

body.app-play-page:not(.app-scplay-page) .play-progress-time {
  min-width: 2.5rem;
  text-align: center;
}

body.app-play-page:not(.app-scplay-page) .play-progress-time__sep {
  color: #cbd5e1;
  font-weight: 500;
  flex: 0 0 auto;
}

/* 播放页（play / scplay）：隐私说明与「当前修改」同一行、统一浅色条 */
body.app-play-page .play-scplay-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(230, 244, 255, 0.75) 0%, rgba(248, 250, 252, 0.96) 100%);
  border: 1px solid rgba(var(--brand-core-rgb), 0.22);
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04), 0 2px 10px rgba(64, 169, 255, 0.06);
}

body.app-play-page .play-privacy-chip.play-privacy-chip--scplay-inline {
  margin-top: 0;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0.18rem 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

body.app-play-page .play-privacy-chip--scplay-inline .play-privacy-chip__ico {
  color: var(--brand);
}

body.app-play-page .play-scplay-status-row__rule {
  flex: 0 0 1px;
  width: 1px;
  height: 0.95rem;
  align-self: center;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--brand-core-rgb), 0.35) 20%, rgba(var(--brand-core-rgb), 0.35) 80%, transparent 100%);
  border-radius: 1px;
}

body.app-play-page .play-native-meta-bar.play-native-meta-bar--scplay-inline {
  flex: 1 1 140px;
  min-width: 0;
}

body.app-play-page .play-native-meta-bar--scplay-inline .play-native-compact-line {
  margin: 0;
}

body.app-play-page .play-native-meta-bar--scplay-inline .play-native-compact-line--status-one-line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}

body.app-play-page .play-native-line--baseline {
  flex: 0 1 auto;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body.app-play-page .play-native-inline-sep {
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  user-select: none;
}

body.app-play-page .play-native-meta-bar--scplay-inline .play-native-line--delta {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.app-play-page .play-scplay-status-row:has(.play-privacy-chip.hidden) .play-scplay-status-row__rule {
  display: none;
}

body.app-play-page .play-scplay-status-row:has(.play-privacy-chip.hidden) .play-native-meta-bar--scplay-inline {
  flex: 1 1 100%;
}

.play-video-shell {
  border-radius: var(--play-card-radius, 12px);
  overflow: hidden;
  background: #0f172a;
  border: 2px solid rgba(14, 165, 233, 0.55);
  box-shadow: 0 6px 24px rgba(14, 99, 198, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  box-sizing: border-box;
}

.play-video-el {
  display: block;
  width: 100%;
  max-height: 48vh;
  vertical-align: middle;
  object-fit: contain;
  background: #000;
}

/* scplay.html：横屏视频 16:9；竖屏视频 9:16，避免竖屏挤在宽屏框里只显示一小条 */
body.app-scplay-page .play-video-shell--scplay:not(.hidden) {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, calc((100vw - 2rem) * 0.5625));
  margin: 0 auto 0.45rem;
}

body.app-scplay-page .play-video-shell--scplay.play-video-shell--portrait:not(.hidden) {
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 100%;
  max-height: min(78vh, calc(100vw * 16 / 9));
  margin-left: auto;
  margin-right: auto;
}

body.app-scplay-page .play-video-shell--scplay:not(.hidden) .play-video-el {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  object-fit: contain;
}

/* 全屏容器优先用 #videoWrap（JS 先 requestFullscreen(wrap)），画面铺满视口、横竖屏均 contain */
body.app-scplay-page #videoWrap:fullscreen,
body.app-scplay-page #videoWrap:-webkit-full-screen,
body.app-scplay-page #videoWrap:-moz-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  max-width: none !important;
  aspect-ratio: unset !important;
  margin: 0 !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

body.app-scplay-page #videoWrap:fullscreen .play-video-el,
body.app-scplay-page #videoWrap:-webkit-full-screen .play-video-el,
body.app-scplay-page #videoWrap:-moz-full-screen .play-video-el {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-width: 100dvw;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  transform: none !important;
}

/* 回退为全屏 <video> 时（无外层 wrap），同样铺满视口，避免竖屏只占中间一小条 */
body.app-scplay-page #videoMain:fullscreen,
body.app-scplay-page #videoMain:-webkit-full-screen,
body.app-scplay-page #videoMain:-moz-full-screen {
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-width: 100dvw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  background: #000 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* WebView / iOS 等不支持标准全屏 API 时：JS 给 body 加类，整页固定层模拟全屏，保证可退出 */
body.app-scplay-page.scplay-video-fake-fs {
  overflow: hidden !important;
  touch-action: none;
}

body.app-scplay-page.scplay-video-fake-fs #videoWrap {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}

body.app-scplay-page.scplay-video-fake-fs #videoWrap .play-video-el {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-width: 100dvw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  object-fit: contain !important;
  transform: none !important;
}

body.app-scplay-page #videoWrap:fullscreen .play-video-fs-corner,
body.app-scplay-page #videoWrap:-webkit-full-screen .play-video-fs-corner,
body.app-scplay-page.scplay-video-fake-fs .play-video-fs-corner {
  z-index: 2147483640;
}

body.app-scplay-page .scplay-audio-decor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.app-scplay-page .scplay-audio-decor.hidden {
  display: none !important;
}

/* scplay：整体略提亮（仅媒体装饰与视频，不伤眼） */
body.app-scplay-page .play-panel-media--mint {
  background: #fafdff !important;
}
body.app-scplay-page .scplay-audio-decor {
  filter: brightness(1.08);
}
body.app-scplay-page .play-video-shell--scplay:not(.hidden) .play-video-el {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.play-tabbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 0 0.55rem;
  padding: 0;
}

/* 旧版 WebView 无 flex gap（约需 Chromium 84+），用邻项外边距模拟 */
.play-tabbar > * + * {
  margin-left: 0.45rem;
}

body.app-play-page:not(.app-scplay-page) .play-tabbar {
  margin: 0;
  padding: 0 0.25rem 0.45rem;
}

body.app-play-page:not(.app-scplay-page) .play-tabbar > * + * {
  margin-left: 1rem;
}

body.app-play-page:not(.app-scplay-page) .play-tab {
  padding: 0 0.28rem;
}

body.app-scplay-page .play-tabbar {
  margin: 0;
  padding: 0 0.25rem 0.45rem;
}

body.app-scplay-page .play-tabbar > * + * {
  margin-left: 1rem;
}

body.app-scplay-page .play-tab {
  padding: 0 0.28rem;
}

/* play.html：下载音频与三 tab 同排四栏等分 */
.play-tabbar--with-download .play-tab {
  flex: 1 1 0%;
  min-width: 0;
}

/* 未缓存可点：主站 play 四格条内为品牌蓝 CTA；其余环境保留默认 .play-tab 白底 */
body.app-play-page:not(.app-scplay-page) .play-tabbar--with-download .play-tab.play-tab--download.play-tab--download-pending {
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--brand-mid) 0%, var(--brand-dark) 100%) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 10px rgba(var(--brand-core-rgb), 0.35) !important;
  font-weight: 800;
}

/* 已下载：与其它 tab 同系白底+浅描边+浅阴影，不灰显；点按在脚本里出 Toast 提示 */
body.app-play-page:not(.app-scplay-page) .play-tabbar--with-download .play-tab.play-tab--download.play-tab--download-done {
  color: var(--play-tab-inactive-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--play-tab-inactive-border) !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* 下载中：呼吸动画 + 等待光标 */
.play-tab.play-tab--download.play-tab--download-loading {
  cursor: wait !important;
  animation: play-tab-download-pulse 0.95s ease-in-out infinite;
}

@keyframes play-tab-download-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-tab.play-tab--download.play-tab--download-loading {
    animation: none;
    opacity: 0.92;
  }
}

/* 未下完缓存前：变速 / 变调 / AB — 浅灰「未解锁」+ 角标锁，可点出引导 Toast */
.play-tab.play-tab--fx-locked {
  position: relative;
  opacity: 1 !important;
  cursor: pointer !important;
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  font-weight: 600 !important;
  -webkit-tap-highlight-color: rgba(148, 163, 184, 0.25);
}

/* 左上角小锁，表示「下载后解锁」而非功能坏掉 */
.play-tab.play-tab--fx-locked::before {
  content: '🔒';
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 0.5rem;
  line-height: 1;
  pointer-events: none;
}

.play-tab.play-tab--active.play-tab--fx-locked,
body.app-play-page:not(.app-scplay-page) .play-tabbar .play-tab.play-tab--active.play-tab--fx-locked {
  color: #94a3b8 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  font-weight: 600 !important;
}

/* 未下载缓存：外包层用浅实线，不再用虚线框 */
.play-processing-wrap.play-processing-wrap--fx-locked {
  position: relative;
  padding: 0.48rem 0.38rem 0.52rem;
  margin: 0.14rem 0 0.32rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: linear-gradient(
    165deg,
    rgba(248, 250, 252, 0.98) 0%,
    rgba(241, 245, 249, 0.94) 42%,
    rgba(255, 255, 255, 0.62) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 2px 12px rgba(15, 23, 42, 0.048);
}

.play-processing-wrap.play-processing-wrap--fx-locked::before {
  content: '🔒 变速、变调、AB循环功能，下载音频后即可解锁';
  display: block;
  margin: 0 0 0.48rem;
  padding: 0.42rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #94a3b8;
  text-align: center;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

body.app-play-page:not(.app-scplay-page) .play-processing-wrap.play-processing-wrap--fx-locked {
  padding: 0.52rem 0.4rem 0.56rem;
  margin-top: 0.18rem;
}

body.app-play-page:not(.app-scplay-page) .play-processing-wrap.play-processing-wrap--fx-locked::before {
  margin-bottom: 0.52rem;
  font-size: 0.7rem;
}

/* 面板内禁用控件：统一柔和 slate，滑块仍可辨识轨道 */
.play-processing-wrap--fx-locked .play-range-wide:disabled {
  opacity: 0.78;
  accent-color: #94a3b8;
  cursor: not-allowed;
}

.play-processing-wrap--fx-locked .btn-feature-speed:disabled,
.play-processing-wrap--fx-locked .btn-feature-pitch:disabled,
.play-processing-wrap--fx-locked .btn-ab-point:disabled {
  opacity: 0.76;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.play-processing-wrap--fx-locked .btn-ab-loop:disabled,
.play-processing-wrap--fx-locked .play-btn-ab-mint:disabled {
  opacity: 0.76;
  background: #e2e8f0 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.play-processing-wrap--fx-locked .play-hero-value,
.play-processing-wrap--fx-locked .play-speed-real-detail,
.play-processing-wrap--fx-locked .play-tick-row,
.play-processing-wrap--fx-locked .play-speed-baseline,
.play-processing-wrap--fx-locked .play-panel-hint--pitch,
.play-processing-wrap--fx-locked .play-ab-status {
  opacity: 0.8;
}

.play-video-brightness-range:disabled {
  opacity: 0.76;
  accent-color: #94a3b8;
  cursor: not-allowed;
}

.play-tab {
  flex: 1 1 0%;
  min-width: 0;
  height: var(--touch-min);
  min-height: var(--touch-min);
  margin: 0;
  padding: 0 0.2rem;
  box-sizing: border-box;
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  line-height: var(--lh-title);
  color: var(--play-tab-inactive-text);
  background: #ffffff;
  border: 1px solid var(--play-tab-inactive-border);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.play-tab--active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 10px rgba(var(--brand-core-rgb), 0.35);
}

.play-tab:active {
  opacity: 0.92;
}

/* 低版本 Android WebView：触摸后 :focus 不消，系统焦点环常呈黄/橙色（play / scplay 共用 body.app-play-page） */
body.app-play-page button:focus,
body.app-play-page button:focus-visible,
body.app-play-page .play-tab:focus,
body.app-play-page .play-tab:focus-visible,
body.app-play-page .play-tbtn:focus,
body.app-play-page .play-tbtn:focus-visible,
body.app-play-page .btn-feature-neutral:focus,
body.app-play-page .btn-feature-neutral:focus-visible,
body.app-play-page .btn-brand:focus,
body.app-play-page .btn-brand:focus-visible,
body.app-play-page .btn-feature-speed:focus,
body.app-play-page .btn-feature-speed:focus-visible,
body.app-play-page .btn-feature-pitch:focus,
body.app-play-page .btn-feature-pitch:focus-visible,
body.app-play-page .btn-ab-loop:focus,
body.app-play-page .btn-ab-loop:focus-visible,
body.app-play-page .play-btn-ab-mint:focus,
body.app-play-page .play-btn-ab-mint:focus-visible,
body.app-play-page .play-ab-point:focus,
body.app-play-page .play-ab-point:focus-visible,
body.app-play-page .play-footer-grid-btn:focus,
body.app-play-page .play-footer-grid-btn:focus-visible,
body.app-play-page .play-footer-favorite:focus,
body.app-play-page .play-footer-favorite:focus-visible,
body.app-play-page .play-footer-dl:focus,
body.app-play-page .play-footer-dl:focus-visible,
body.app-play-page .play-vocal-tile:focus,
body.app-play-page .play-vocal-tile:focus-visible,
body.app-play-page .play-vgrid-btn:focus,
body.app-play-page .play-vgrid-btn:focus-visible,
body.app-play-page .play-pitch-dual__btn:focus,
body.app-play-page .play-pitch-dual__btn:focus-visible,
body.app-play-page .app-back-chevron:focus,
body.app-play-page .app-back-chevron:focus-visible,
body.app-play-page .play-video-fs-corner:focus,
body.app-play-page .play-video-fs-corner:focus-visible,
body.app-play-page input.play-range-wide:focus,
body.app-play-page input.play-range-wide:focus-visible,
body.app-play-page input.play-video-brightness-range:focus,
body.app-play-page input.play-video-brightness-range:focus-visible,
body.app-play-page [role='tab']:focus,
body.app-play-page [role='tab']:focus-visible {
  outline: 2px solid rgba(var(--brand-core-rgb), 0.88) !important;
  outline-style: solid !important;
  outline-width: 2px !important;
  outline-offset: 2px !important;
}

body.app-play-page button::-moz-focus-inner {
  border: 0 !important;
}

body.app-play-page button,
body.app-play-page .play-tab {
  -webkit-tap-highlight-color: transparent;
}

/* 播放交通钮 / 歌单钮 / 变速·变调·AB Tab：同高、同行等分宽（去掉主播放、列表循环 flex 加权） */
body.app-play-page .play-transport .play-tbtn,
body.app-play-page .play-transport-queue .play-tbtn,
body.app-play-page .play-tabbar .play-tab {
  height: var(--play-control-h, 3rem);
  min-height: var(--play-control-h, 3rem) !important;
  max-height: var(--play-control-h, 3rem);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.app-play-page .play-tbtn--main {
  flex: 1 1 0% !important;
}

body.app-play-page .play-tbtn--loopwide {
  flex: 1 1 0% !important;
}

body.app-play-page .play-transport .play-tbtn,
body.app-play-page .play-transport-queue .play-tbtn {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

body.app-play-page .play-tabbar .play-tab {
  font-size: 0.9375rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* 少数旧内核仍画系统焦点环：去掉默认按钮外观（不影响已设的渐变/边框样式） */
body.app-play-page .play-transport button,
body.app-play-page .play-transport-queue button,
body.app-play-page .play-tabbar .play-tab,
body.app-play-page .play-processing-wrap > button {
  -webkit-appearance: none;
  appearance: none;
}

.play-tab-panels {
  margin: 0;
  padding: 0 0 1.35rem;
}

body.app-play-page:not(.app-scplay-page) .play-tab-panels {
  padding: 0 0 1.55rem;
}

.play-tab-panel {
  display: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.play-processing-wrap {
  margin-top: 0.38rem;
  margin-bottom: 0.38rem;
  display: flex;
  flex-direction: column;
}

.play-processing-wrap > * + * {
  margin-top: 0.8rem;
}

body.app-play-page:not(.app-scplay-page) .play-processing-wrap {
  margin-top: 0.42rem;
  margin-bottom: 0.5rem;
}

body.app-play-page:not(.app-scplay-page) .play-processing-wrap > * + * {
  margin-top: 0.48rem;
}

.play-native-meta-bar {
  margin: 0 0 0.35rem;
  padding: 0.6rem 0.75rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.48;
}

/* 进度条下紧凑条：与提示语并排，无独立卡片 */
.play-native-meta-bar--compact {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.6875rem;
  line-height: 1.42;
}

.play-native-compact-line {
  margin: 0;
  color: var(--text-secondary);
  word-break: break-word;
}

.play-native-compact-sep {
  opacity: 0.4;
  user-select: none;
}

.play-native-line {
  margin: 0;
  color: var(--text);
}

.play-native-line--delta {
  margin: 0.4rem 0 0;
  font-weight: 600;
  color: var(--brand-dark);
}

.play-native-meta-bar--compact .play-native-line--delta {
  margin: 0;
  font-weight: 600;
  color: var(--brand-dark);
}

.play-tab-panel.is-active {
  display: block;
}

.play-card--mint {
  background: var(--surface) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: var(--play-card-radius, 12px) !important;
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.065), 0 1px 3px rgba(31, 41, 55, 0.04) !important;
  padding: 0.75rem 0.85rem !important;
  margin-bottom: 0.25rem;
}

body.app-play-page:not(.app-scplay-page) .play-tab-panel .play-card--mint {
  padding: 0.95rem 0.72rem 1.05rem !important;
}

.play-tab-panel .play-card--mint:last-child {
  margin-bottom: 0;
}

/* 去掉功能区内说明条的全站「浅卡」样式，避免与标题重复抢视觉 */
.play-card--mint .play-speed-baseline,
.play-card--mint .play-ab-status {
  padding: 0 !important;
  margin: 0 0 0.35rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.6875rem !important;
  text-align: left;
  color: var(--text-secondary);
}

body.app-play-page:not(.app-scplay-page) .play-card--mint .play-speed-baseline {
  margin: 0 0 0.52rem !important;
}

.play-sec-title--mint {
  border-bottom-color: #e5e7eb;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: 0.32rem;
  padding-bottom: 0.28rem;
}

body.app-play-page:not(.app-scplay-page) .play-sec-title--mint {
  margin-bottom: 0.48rem;
  padding-bottom: 0.38rem;
}

.play-sec-title--video {
  font-size: var(--fz-song);
  font-weight: var(--fw-title);
  color: var(--text);
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.35rem;
  margin-bottom: 0.65rem;
}

.play-video-card {
  margin-top: 0 !important;
  border-radius: var(--play-card-radius, 12px) !important;
}

.play-range-wide--mint {
  accent-color: var(--play-mint);
  min-height: 2.5rem;
}

body.app-play-page:not(.app-scplay-page) .play-range-wide--mint {
  min-height: 2.6rem;
}

.play-vocal-section__title--mint {
  font-weight: var(--fw-title);
  font-size: var(--fz-title);
  line-height: var(--lh-title);
  color: var(--brand-dark);
}

.play-vocal-section__note--short {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.play-volume-hint {
  margin: 1.45rem 0 0.75rem;
  padding: 0 0.35rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: var(--fw-meta);
  color: var(--muted);
  line-height: var(--lh-body);
}

body.app-play-page:not(.app-scplay-page) .play-volume-hint {
  margin: 1.65rem 0 0.85rem;
}

.play-footer-bar--mint {
  background: var(--surface);
  border-top: 1px solid var(--border-input);
}

.play-footer-save--mint {
  min-height: var(--touch-min) !important;
  height: var(--touch-min);
  border-radius: var(--radius-btn) !important;
  font-size: var(--fz-btn) !important;
  font-weight: var(--fw-btn) !important;
  background: var(--gradient-vocal-ui-tall) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--vocal-ui-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.play-footer-save--mint:active {
  opacity: 0.93;
}

.play-footer-actions {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.play-footer-actions:not(.play-footer-actions--grid) > * + * {
  margin-top: 0.75rem;
}

/* play.html：四枚操作键 2×2，留白大于原「上行收藏 / 下行下载」错落布局 */
body.app-play-page .play-footer-bar--play-grid {
  padding: 1.05rem 1.2rem calc(1.05rem + env(safe-area-inset-bottom, 0px));
}

body.app-play-page .play-footer-actions--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 1.25rem;
  grid-column-gap: 1.3rem;
  gap: 1.25rem 1.3rem;
  align-items: stretch;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

body.app-play-page .play-footer-actions--grid:has(#btnSavePrivate.hidden) #btnFavorite {
  grid-column: 1 / -1;
}

body.app-play-page .play-footer-actions--grid .play-footer-grid-btn {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.app-play-page .play-footer-actions--grid .play-footer-favorite {
  width: 100% !important;
}

@media (min-width: 768px) {
  .play-footer-actions {
    max-width: 100%;
  }

  body.app-play-page .play-footer-actions--grid {
    max-width: 100%;
  }
}

.play-footer-fav-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  align-items: stretch;
}

.play-footer-fav-row > * + * {
  margin-left: 0.5rem;
}

.play-footer-fav-row .play-footer-favorite {
  flex: 1 1 0%;
  min-width: 0;
  width: auto !important;
}

.play-footer-favorite {
  width: 100%;
  min-height: var(--touch-min) !important;
  border-radius: var(--radius-btn) !important;
  font-size: var(--fz-btn) !important;
  font-weight: var(--fw-btn) !important;
  background: var(--surface) !important;
  color: var(--brand-dark) !important;
  border: 2px solid var(--brand) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.play-footer-favorite:active {
  opacity: 0.88;
  background: var(--brand-soft) !important;
}

.play-footer-favorite.is-favorited,
.play-footer-favorite:disabled {
  background: #ebedf0 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
  opacity: 1;
  cursor: not-allowed;
  font-weight: 600;
  box-shadow: none !important;
}

.play-footer-favorite.is-favorited:active,
.play-footer-favorite:disabled:active {
  background: #e2e5ea !important;
  opacity: 1;
}

/* play.html 底部双下载按钮（老年友好 + 蓝色系 #40A9FF） */
.play-footer-dl-row {
  width: 100%;
  max-width: 26rem;
  margin: 0.5rem auto 0;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .play-footer-dl-row {
    max-width: 100%;
  }
}

.play-footer-dl {
  flex: 1 1 50%;
  min-width: 0;
  height: 50px;
  min-height: 50px;
  border-radius: var(--play-card-radius, 12px);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.35rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}

.play-footer-dl:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.play-footer-dl--outline {
  background: #ffffff;
  color: #40a9ff;
  border: 2px solid #40a9ff;
  box-shadow: none;
}

.play-footer-dl--outline:active:not(:disabled) {
  opacity: 0.88;
  background: rgba(64, 169, 255, 0.08);
}

.play-footer-dl--primary {
  background: linear-gradient(180deg, #0677e6 0%, #054bab 100%);
  color: #ffffff;
  border: 2px solid #043d8c;
  box-shadow: 0 4px 18px rgba(5, 77, 180, 0.55);
}

.play-footer-dl--primary:active:not(:disabled) {
  opacity: 0.92;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(64, 169, 255, 0.65);
}

.play-footer-dl-row--single .play-footer-dl {
  flex: 1 1 100%;
}

body.app-play-page .play-tbtn--main {
  background: var(--gradient-vocal-ui-tall) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--vocal-ui-shadow) !important;
}

.play-btn-ab-mint {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
}

/* 播放功能面板内说明：小号弱样式，减轻「卡片」压迫感 */
.play-card--mint .play-panel-hint {
  font-size: 0.6875rem;
  line-height: 1.42;
  color: var(--text-secondary, #4b5563);
  margin: 0 0 0.35rem;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body.app-play-page:not(.app-scplay-page) .play-card--mint .play-panel-hint--pitch {
  margin-bottom: 0.52rem !important;
}

body.app-play-page:not(.app-scplay-page) .play-card--mint .play-ab-status {
  margin-bottom: 0.52rem !important;
}

.play-panel-hint {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary, #4b5563);
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.65) 0%, rgba(255, 255, 255, 0.92) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.play-panel-hint--pitch {
  margin-top: 0.1rem;
  margin-bottom: 0.45rem;
}

/* 变调：高品质 / 快速 切换 */
.play-pitch-dual {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0.35rem 0 0.5rem;
}

.play-pitch-dual > * + * {
  margin-left: 0.45rem;
}
.play-pitch-dual__btn {
  flex: 1 1 0%;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0.35rem 0.4rem;
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  line-height: var(--lh-title);
  border-radius: 12px;
  border: 1px solid var(--border-input);
  background: #fff;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.play-pitch-dual__btn--active {
  border-color: var(--brand);
  background: var(--brand-softer);
  color: var(--brand-dark);
}
.play-pitch-dual__btn--disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.play-progress-track--fat {
  height: 30px;
  min-height: 30px;
  border-radius: 15px;
  margin-top: 0.25rem;
  touch-action: none;
  cursor: pointer;
  border: 1px solid var(--border-input);
  background: #e5e7eb !important;
}

body.app-play-page:not(.app-scplay-page) .play-progress-track--fat {
  margin-top: 0.55rem;
  height: 32px;
  min-height: 32px;
  border-radius: 16px;
}

/* 整页圆环下载/导出浮层展示时收起播放进度条，避免与圆环百分比重复、误读为下载进度 */
.play-progress-track.play-progress-track--suppressed {
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.play-progress-fill--knob {
  position: relative;
  border-radius: 15px;
  max-width: 100%;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand)) !important;
}

.play-progress-fill--knob::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.play-status-tip {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: var(--brand-softer);
  border: 1px solid rgba(var(--brand-core-rgb), 0.18);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.play-panel-media {
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.75rem 0.75rem;
}

body.app-play-page:not(.app-scplay-page) .play-panel-media {
  padding: 0.72rem 0.38rem 0.82rem;
}

body.app-scplay-page .play-panel-media {
  /* 与 play 一致：主操作区水平内边距相同，交通钮 / Tab 与主站等宽 */
  padding: 0.72rem 0.38rem 0.82rem;
}

.play-transport {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 0.55rem;
}

.play-transport > * + * {
  margin-left: 0.5rem;
}

body.app-play-page:not(.app-scplay-page) .play-transport {
  justify-content: space-between;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  margin-bottom: 0.8rem;
}

body.app-play-page:not(.app-scplay-page) .play-transport > * + * {
  margin-left: 1.25rem;
}

.play-tbtn {
  flex: 1 1 0%;
  min-width: 0;
  min-height: var(--touch-min);
  font-size: var(--fz-btn) !important;
  font-weight: var(--fw-btn) !important;
  padding: 0.5rem 0.35rem !important;
  border-radius: 12px !important;
  border-width: 1px !important;
}

.play-tbtn--main {
  flex: 1 1 0%;
  font-size: 0.9375rem !important;
  min-height: 3rem !important;
}

.play-transport-queue {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 0.55rem;
}

.play-transport-queue > * + * {
  margin-left: 0.45rem;
}

body.app-play-page:not(.app-scplay-page) .play-transport-queue {
  justify-content: space-between;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  margin-bottom: 0.9rem;
}

body.app-play-page:not(.app-scplay-page) .play-transport-queue > * + * {
  margin-left: 1.2rem;
}

/* scplay.html：交通钮 / 歌单钮 / Tab 排布与 play 对齐（可用宽度与间距一致） */
body.app-scplay-page .play-transport {
  justify-content: space-between;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  margin-bottom: 0.8rem;
}

body.app-scplay-page .play-transport > * + * {
  margin-left: 1.25rem;
}

body.app-scplay-page .play-transport-queue {
  justify-content: space-between;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  margin-bottom: 0.9rem;
}

body.app-scplay-page .play-transport-queue > * + * {
  margin-left: 1.2rem;
}

.play-tbtn--queue {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 3rem !important;
  font-size: 0.98rem !important;
}

.play-tbtn--loopwide {
  flex: 1 1 0%;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.play-tbtn--queue:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 播放/本机播放：主播放键「正在播放」选中态 */
body.app-play-page .play-tbtn--main.play-tbtn--playing {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand), 0 4px 14px rgba(var(--brand-core-rgb), 0.35) !important;
}

body.app-play-page .play-tbtn.btn-feature-neutral:active:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* play.html：与全站 card 系按钮统一的轻圆角+浅阴影；交通钮字号一致 */
body.app-play-page:not(.app-scplay-page) .play-transport .play-tbtn.btn-feature-neutral,
body.app-play-page:not(.app-scplay-page) .play-transport-queue .play-tbtn.btn-feature-neutral {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

body.app-play-page:not(.app-scplay-page) .play-transport-queue .play-tbtn--queue {
  font-size: 0.9375rem !important;
}

body.app-scplay-page .play-transport .play-tbtn.btn-feature-neutral,
body.app-scplay-page .play-transport-queue .play-tbtn.btn-feature-neutral {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

body.app-scplay-page .play-transport-queue .play-tbtn--queue {
  font-size: 0.9375rem !important;
}

/* 进度条：轨与已播层圆角一致、轨端裁圆；拖块与品牌控件风格统一 */
body.app-play-page:not(.app-scplay-page) .play-progress-track--fat {
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.07);
}

body.app-play-page:not(.app-scplay-page) .play-progress-fill--knob {
  border-radius: 16px;
}

body.app-play-page:not(.app-scplay-page) .play-progress-fill--knob::after {
  width: 22px;
  height: 22px;
  border-width: 2.5px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

/* 原调/原速/当前修改：行间节奏与字重层次（主站 play，不含 scplay） */
body.app-play-page:not(.app-scplay-page) .play-native-meta-bar--scplay-inline .play-native-compact-line--status-one-line {
  gap: 0.5rem;
}

body.app-play-page:not(.app-scplay-page) .play-native-line--baseline {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

body.app-play-page:not(.app-scplay-page) .play-native-meta-bar--scplay-inline .play-native-line--delta {
  font-size: 0.7rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.02em;
}

/* 四 tab：未选中与 home-lib 系浅阴影；选中保持主色+投影 */
body.app-play-page:not(.app-scplay-page) .play-tabbar .play-tab:not(.play-tab--active) {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.04);
}

body.app-play-page:not(.app-scplay-page) .play-tabbar .play-tab--active:not(.play-tab--fx-locked) {
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.28);
}

body.app-scplay-page .play-tabbar .play-tab:not(.play-tab--active) {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.04);
}

body.app-scplay-page .play-tabbar .play-tab--active:not(.play-tab--fx-locked) {
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.28);
}

/* 未下完缓存提示：再弱化半档，不抢主视觉 */
body.app-play-page:not(.app-scplay-page) .play-processing-wrap--fx-locked::before {
  color: #a8b4c4 !important;
  font-weight: 500 !important;
  border-color: #eef2f6 !important;
  background: rgba(252, 252, 253, 0.95) !important;
}

/* 变速区：大字号略强化；与说明/刻度层级区分 */
body.app-play-page:not(.app-scplay-page) .play-hero-value--speed {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

body.app-play-page:not(.app-scplay-page) .play-card--mint .play-speed-baseline,
body.app-play-page:not(.app-scplay-page) .play-speed-real-detail,
body.app-play-page:not(.app-scplay-page) .play-tick-row--speedwide {
  text-align: center;
  padding-left: 0.12rem;
  padding-right: 0.12rem;
}

body.app-play-page:not(.app-scplay-page) .play-card--mint .play-panel-hint--speed-tip {
  color: #94a3b8 !important;
  margin-top: 0.4rem !important;
  line-height: 1.45 !important;
}

/* 底栏 2×2：间距与圆角/阴影与全站大按钮体系统一（主站 play，不含 scplay） */
body.app-play-page:not(.app-scplay-page) .play-footer-actions--grid {
  grid-row-gap: 1.25rem;
  grid-column-gap: 1.3rem;
  gap: 1.25rem 1.3rem;
}

body.app-play-page:not(.app-scplay-page) .play-footer-actions--grid .play-footer-favorite,
body.app-play-page:not(.app-scplay-page) .play-footer-actions--grid .play-footer-grid-btn {
  border-radius: var(--app-radius-chrome, 12px);
  min-height: 52px;
  box-shadow: var(--app-shadow-chrome, 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04));
}

body.app-play-page:not(.app-scplay-page) .play-footer-actions--grid .play-footer-dl--primary {
  box-shadow:
    0 2px 8px rgba(5, 77, 180, 0.35),
    0 1px 2px rgba(15, 23, 42, 0.06);
}

body.app-play-page:not(.app-scplay-page) .play-footer-actions--grid .play-footer-favorite:disabled,
body.app-play-page:not(.app-scplay-page) .play-footer-actions--grid .play-footer-favorite.is-favorited {
  box-shadow: none;
}

/* 平板 / 大屏：播放交通钮与底栏再拉开一档，避免「整条一块」观感 */
@media (min-width: 600px) {
  body.app-play-page:not(.app-scplay-page) .play-transport {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.app-play-page:not(.app-scplay-page) .play-transport > * + * {
    margin-left: 1.45rem;
  }

  body.app-play-page:not(.app-scplay-page) .play-transport-queue {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.app-play-page:not(.app-scplay-page) .play-transport-queue > * + * {
    margin-left: 1.35rem;
  }

  body.app-play-page:not(.app-scplay-page) .play-tabbar {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  body.app-play-page:not(.app-scplay-page) .play-tabbar > * + * {
    margin-left: 1.1rem;
  }

  body.app-scplay-page .play-transport {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.app-scplay-page .play-transport > * + * {
    margin-left: 1.45rem;
  }

  body.app-scplay-page .play-transport-queue {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.app-scplay-page .play-transport-queue > * + * {
    margin-left: 1.35rem;
  }

  body.app-scplay-page .play-tabbar {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  body.app-scplay-page .play-tabbar > * + * {
    margin-left: 1.1rem;
  }

  body.app-play-page:not(.app-scplay-page) .play-preset-row,
  body.app-play-page:not(.app-scplay-page) .play-preset-row--pitch {
    margin: -0.55rem -0.6rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  body.app-play-page:not(.app-scplay-page) .play-preset-row > *,
  body.app-play-page:not(.app-scplay-page) .play-preset-row--pitch > * {
    margin: 0.55rem 0.6rem;
  }

  body.app-play-page .play-footer-actions--grid,
  body.app-play-page:not(.app-scplay-page) .play-footer-actions--grid {
    grid-row-gap: 1.4rem;
    grid-column-gap: 1.5rem;
    gap: 1.4rem 1.5rem;
  }

  body.app-play-page .play-footer-bar--play-grid {
    padding: 1.15rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
  }
}

body.app-play-page .play-vgrid-btn:active:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}

body.app-play-page .btn-feature-speed:active:not(:disabled),
body.app-play-page .btn-feature-pitch:active:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand);
}

body.app-play-page .btn-ab-loop.is-active {
  background: linear-gradient(180deg, var(--brand-mid) 0%, var(--brand-dark) 100%) !important;
  box-shadow: 0 2px 12px rgba(var(--brand-core-rgb), 0.4) !important;
}

/* 下载到本页按钮区域 - 增加下边距 */
.play-download-row {
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
}

.play-progress-hint {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.play-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.play-card {
  padding: 0.85rem 0.9rem !important;
}

.play-card--volume {
  margin-bottom: 0.25rem;
}

.play-sec-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-input);
}

.play-sec-title--speed {
  color: var(--accent-speed);
}

.play-sec-title--pitch {
  color: var(--accent-pitch);
}

.play-sec-title--vocal {
  color: var(--accent-vocal);
}

.play-sec-title--ab {
  color: var(--brand-dark);
}

.play-hero-row {
  display: flex;
  justify-content: center;
  margin: 0.15rem 0 0.45rem;
}

body.app-play-page:not(.app-scplay-page) .play-hero-row {
  margin: 0.28rem 0 0.58rem;
}

.play-hero-row--speed {
  flex-direction: column;
  align-items: center;
}

.play-hero-row--speed > * + * {
  margin-top: 0.2rem;
}

body.app-play-page:not(.app-scplay-page) .play-hero-row--speed > * + * {
  margin-top: 0.38rem;
}

.play-speed-real-detail {
  margin: 0;
  max-width: 100%;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.play-hero-value {
  margin: 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  user-select: none;
}

.play-speed-baseline {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.play-tick-row--speedpct {
  font-size: 0.625rem;
}

.play-tick-row--speedwide {
  font-size: 0.625rem;
}

.play-hero-value--speed {
  font-size: 1.35rem;
  line-height: var(--lh-title);
  font-weight: var(--fw-title);
  color: var(--accent-speed);
}

.play-hero-value--pitch {
  font-size: 1.42rem;
  line-height: var(--lh-title);
  font-weight: var(--fw-title);
  color: var(--accent-pitch);
}

.play-range-wide {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.2rem;
  accent-color: var(--accent-speed);
}

body.app-play-page:not(.app-scplay-page) .play-tab-panel .play-range-wide {
  width: calc(100% + 0.55rem);
  max-width: none;
  margin-left: -0.275rem;
  margin-right: -0.275rem;
  min-height: 2.55rem;
  height: 2.55rem;
  margin-bottom: 0.38rem;
}

.play-range-wide--pitch {
  accent-color: var(--accent-pitch);
}

.play-tick-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 0.65rem;
  padding: 0 0.05rem;
}

body.app-play-page:not(.app-scplay-page) .play-tick-row {
  margin: 0 0 0.88rem;
  padding: 0 0.12rem;
}

.play-tick-row--pitch span:nth-child(3) {
  font-weight: 800;
  color: var(--text-secondary);
}

.play-preset-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -0.225rem -0.25rem;
}

.play-preset-row > * {
  margin: 0.225rem 0.25rem;
}

body.app-play-page:not(.app-scplay-page) .play-preset-row {
  margin: -0.5rem -0.55rem;
  padding-top: 0.2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

body.app-play-page:not(.app-scplay-page) .play-preset-row > * {
  margin: 0.5rem 0.55rem;
}

body.app-play-page:not(.app-scplay-page) .play-preset-row--pitch {
  margin: -0.5rem -0.55rem;
  padding-top: 0.2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

body.app-play-page:not(.app-scplay-page) .play-preset-row--pitch > * {
  margin: 0.5rem 0.55rem;
}

.play-preset-row .btn-feature-speed {
  flex: 1 1 auto;
  min-width: 4.5rem;
  min-height: var(--touch-min);
  font-size: var(--fz-btn);
  border-radius: var(--radius-btn);
  border-width: 1px;
}

.play-preset-row--pitch {
  margin-top: 0.1rem;
}

.play-preset-row--pitch .btn-feature-pitch {
  flex: 1 1 auto;
  min-width: 4rem;
  min-height: var(--touch-min);
  font-size: var(--fz-btn);
  border-radius: var(--radius-btn);
  border-width: 1px;
}

/* 播放页：历史 tile 类名保留 */
.play-vocal-section {
  background: #ffffff !important;
  border-radius: var(--radius-card) !important;
}

.play-vocal-section__title {
  margin: 0 0 0.5rem;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  color: var(--brand);
  letter-spacing: 0.02em;
}

.play-vocal-section__note {
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.65rem;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--muted);
  text-align: left;
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.65) 0%, rgba(255, 255, 255, 0.92) 100%);
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.play-vocal-trio {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.play-vocal-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-min);
  padding: 0.45rem 0.65rem;
  box-sizing: border-box;
  border-radius: var(--radius-card);
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  text-align: center;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.play-vocal-tile__main {
  display: block;
  font-size: var(--fz-song);
  font-weight: var(--fw-song);
  line-height: var(--lh-body);
  color: #1f2937;
}

.play-vocal-tile__sub {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.play-vocal-tile--active {
  border-width: 2px;
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(var(--brand-core-rgb), 0.25);
  padding: calc(0.45rem - 1px) calc(0.65rem - 1px);
}

.play-vocal-tile--active .play-vocal-tile__main {
  color: var(--brand-dark);
}

.play-vocal-tile--active .play-vocal-tile__sub {
  color: var(--brand-dark);
}

.play-vocal-tile:active:not(:disabled) {
  opacity: 0.93;
  transform: scale(0.995);
}

.play-vocal-tile:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.play-vocal-tile:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.play-ab-status {
  margin: 0 0 0.6rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.4;
}

.play-ab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.btn-ab-point {
  min-height: var(--touch-min);
  border-radius: var(--radius-btn);
  border: 1px solid var(--accent-ab-border);
  background: var(--surface);
  color: var(--brand-dark);
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-ab-point:active {
  opacity: 0.93;
  transform: scale(0.99);
}

.btn-ab-loop {
  width: 100%;
  min-height: var(--touch-min);
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  border-radius: var(--radius-btn);
}

.play-vol-btn {
  min-height: var(--touch-min) !important;
  font-size: var(--fz-btn) !important;
  padding: 0.5rem !important;
}

.play-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.play-video-grid--single {
  grid-template-columns: 1fr 1fr 1fr;
  max-width: min(24rem, 100%);
  margin: 0 auto;
}

@media (min-width: 600px) {
  .play-video-grid--single {
    max-width: min(28rem, 100%);
  }
}

@media (min-width: 768px) {
  .play-video-grid--single {
    max-width: min(32rem, 100%);
  }
}

.play-vgrid-btn {
  min-height: 2.85rem;
  font-size: 0.9375rem;
  padding: 0.45rem;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* scplay：视频画面三键更醒目 + 按下/还原时有边框反馈 */
body.app-scplay-page .play-vgrid-btn--scplay {
  font-weight: 600;
  color: #0f172a;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid rgba(14, 165, 233, 0.45);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

body.app-scplay-page .play-vgrid-btn--scplay:active {
  transform: scale(0.98);
  border-color: rgba(2, 132, 199, 0.95);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35), 0 2px 10px rgba(2, 132, 199, 0.2);
}

body.app-scplay-page .play-vgrid-btn--scplay:focus,
body.app-scplay-page .play-vgrid-btn--scplay:focus-visible {
  outline: 2px solid rgba(var(--brand-core-rgb), 0.88) !important;
  outline-offset: 2px !important;
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

body.app-scplay-page #btnFullscreen.play-vgrid-btn--scplay {
  background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
  border-color: rgba(8, 145, 178, 0.55);
  color: #0e7490;
}

body.app-scplay-page .play-vgrid-btn--pulse {
  animation: yq-vgrid-pulse 0.42s ease-out 1;
}

@keyframes yq-vgrid-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.65);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
  }
}

/* 播放页：角落法律提示（固定显示，置于底栏上方） */
.play-page-legal-corner {
  position: fixed;
  z-index: 25;
  left: max(0.5rem, env(safe-area-inset-left, 0px));
  right: auto;
  bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  max-width: min(19.5rem, calc(100vw - 1rem));
  margin: 0;
  padding: 0;
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #64748b;
  font-weight: 500;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.play-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border-input);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

@media (min-width: 600px) {
  .play-footer-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100% - 1.25rem, var(--app-viewport-usable-x));
    max-width: var(--app-viewport-usable-x);
    border-radius: 16px 16px 0 0;
    border-left: 1px solid var(--border-input);
    border-right: 1px solid var(--border-input);
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.07);
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .play-footer-bar {
    width: min(var(--app-viewport-usable-x), calc(100% - 2rem));
    max-width: var(--app-viewport-usable-x);
  }
}

.play-footer-save {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 2.9rem !important;
  font-size: 1rem !important;
}

@media (min-width: 768px) {
  .play-footer-save {
    max-width: 100%;
  }
}

.play-progress-track--bar {
  margin-top: 0.15rem;
}

.play-stage .play-card.card-soft,
.play-stage .play-panel-media.card-soft {
  box-shadow: none;
}

.play-offline-gate-note {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #2d2d2d;
  margin-top: 0.35rem;
}

/* 与 .play-panel-hint 联用时：沿用小号提示样式，保留提示卡描边 */
.play-offline-gate-note.play-panel-hint {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary, #4b5563);
}

.play-processing-wrap.is-locked {
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(0.12);
}

/** 播放页「应用变调」等与滑块拉开间距，中老年更易点准 */
.play-apply-action-row {
  margin-top: 1.75rem;
  padding-top: 0.35rem;
}

/* ========== 节拍器全屏闪光（径向高光 + 内晕；强拍更亮更久） ========== */
#flashLayer {
  overflow: hidden;
  isolation: isolate;
}

#flashLayer::before {
  content: '';
  position: absolute;
  inset: -8%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 92% 72% at 50% 34%,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(var(--brand-core-rgb), 0.32) 30%,
    transparent 64%
  );
  mix-blend-mode: soft-light;
}

#flashLayer.flash-beat {
  animation: metroFlashVignette 0.46s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

#flashLayer.flash-beat.flash-beat--accent {
  animation: metroFlashVignetteAccent 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#flashLayer.flash-beat:not(.flash-beat--accent)::before {
  animation: metroFlashGlowSoft 0.44s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

#flashLayer.flash-beat--accent::before {
  animation: metroFlashGlowStrong 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes metroFlashGlowSoft {
  0% {
    opacity: 0;
    transform: scale(0.93);
  }
  32% {
    opacity: 0.52;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}

@keyframes metroFlashGlowStrong {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  24% {
    opacity: 0.92;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

@keyframes metroFlashVignette {
  0% {
    box-shadow: inset 0 0 0 transparent;
  }
  38% {
    box-shadow: inset 0 0 min(42vw, 220px) rgba(var(--brand-core-rgb), 0.13);
  }
  100% {
    box-shadow: inset 0 0 0 transparent;
  }
}

@keyframes metroFlashVignetteAccent {
  0% {
    box-shadow: inset 0 0 0 transparent;
  }
  32% {
    box-shadow: inset 0 0 min(52vw, 280px) rgba(var(--brand-core-rgb), 0.2);
  }
  100% {
    box-shadow: inset 0 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  #flashLayer.flash-beat,
  #flashLayer.flash-beat.flash-beat--accent {
    animation-duration: 0.09s !important;
  }

  #flashLayer.flash-beat:not(.flash-beat--accent)::before,
  #flashLayer.flash-beat--accent::before {
    animation-duration: 0.09s !important;
  }
}

.wave-bar {
  display: inline-block;
  width: 5px;
  margin: 0 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-dark), var(--brand));
  animation: wave 1s ease-in-out infinite;
}

@keyframes wave {
  0%,
  100% {
    height: 10px;
    opacity: 0.55;
  }
  50% {
    height: 28px;
    opacity: 1;
  }
}

.app-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand));
  width: 0%;
}

input[type="range"],
input[type="checkbox"] {
  accent-color: var(--brand);
}

/* 档位选中（历史） */
.btn-vocal-active {
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.45);
  background: var(--accent-vocal-soft) !important;
}

.beat-active {
  box-shadow: 0 0 0 3px rgba(var(--brand-core-rgb), 0.4);
}

.soft-toast {
  color: var(--brand-dark);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
}

.app-card-highlight {
  border: 2px solid var(--brand-border);
}

.app-input {
  width: 100%;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  padding: 0.65rem 0.9rem;
  outline: none;
  background: var(--surface);
  color: var(--text);
}

.app-input:focus {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(var(--brand-core-rgb), 0.22);
}

.text-brand-dark {
  color: var(--brand-dark);
}

/* ========== 登录页：与全站一致的中性浅底，顶栏与主站衔接 ========== */
html.app-login-html-root {
  height: 100%;
}

.app-page-login.app-shell {
  font-size: var(--fz-song);
  line-height: var(--lh-body);
  color: var(--text);
  background: linear-gradient(180deg, #f3f4f6 0%, var(--page-bg) 28%, var(--page-bg-soft) 58%, #ffffff 100%);
  background-color: var(--page-bg);
  /* iPad / iOS：与根 html 链成「弹性视口」；避免仅 100vh + flex 时主区无法滚动、聚焦输入后软键盘异常 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* 主区在 flex 列中可收缩并滚动，键盘弹出时仍能滚到输入框 */
body.app-page-login.app-shell > main.app-login-v3-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

@media (min-width: 900px) {
  .app-page-login.app-shell {
    background: linear-gradient(180deg, #eef0f3 0%, var(--page-bg) 22%, var(--page-bg-soft) 52%, #ffffff 100%);
  }
}

.app-login-v3-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 0.5rem 0.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 248, 250, 0.94) 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 80, 140, 0.06);
}

/* 平板 / iPad：顶栏略留空，避免贴刘海 */
@media (min-width: 768px) {
  .app-login-v3-topbar {
    padding: calc(0.45rem + env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)) 0.35rem
      max(0.75rem, env(safe-area-inset-right, 0px));
  }
}

.app-page-login .app-login-v3-topbar .app-back-chevron {
  color: var(--brand-dark);
}

.app-page-login .app-login-v3-topbar .app-back-chevron:active {
  background: rgba(var(--brand-core-rgb), 0.1);
}

/* 与双列同现：横屏时顶栏与主列同宽（满可用视口） */
@media (min-width: 900px) and (orientation: landscape) {
  .app-login-v3-topbar {
    max-width: var(--app-viewport-usable-x);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    padding-top: calc(0.45rem + env(safe-area-inset-top, 0px));
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(14, 165, 233, 0.12);
    border-top: none;
    box-shadow: 0 6px 20px rgba(15, 80, 120, 0.08);
  }
}

.app-login-v3-back {
  align-self: flex-start;
  margin-left: -0.15rem;
}

.app-login-v3-back:active {
  opacity: 0.82;
}

@media (min-width: 900px) and (orientation: landscape) {
  .app-page-login .app-login-v3-topbar .app-back-chevron:hover {
    color: var(--brand-dark);
    background: rgba(var(--brand-core-rgb), 0.08);
  }
}

.app-login-v3-main {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.5rem 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .app-login-v3-main {
    padding: 1.1rem max(0.65rem, env(safe-area-inset-left, 0px)) 1.75rem max(0.65rem, env(safe-area-inset-right, 0px));
  }
}

.app-login-v3 {
  width: 100%;
  max-width: min(40rem, 100%);
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* 平板 / iPad：真正满宽（仅受 --app-viewport-usable-x 限制，不再套 52rem 顶） */
  .app-login-v3 {
    max-width: var(--app-viewport-usable-x);
  }
}

/* 平板竖屏单列：略放大字号与输入区，避免整页像「手机缩在中间」 */
@media (min-width: 768px) and (orientation: portrait) {
  .app-page-login.app-shell {
    font-size: 1.0625rem;
  }

  .app-login-v3-main {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .app-login-v3-hero__logo {
    width: 4rem;
  }

  .app-login-v3-hero__title {
    font-size: 1.22rem;
  }

  .app-login-v3-hero__tagline {
    font-size: 0.78rem;
  }

  .app-login-v3-panel__title {
    font-size: 1.25rem;
  }

  .app-login-v3-field label {
    font-size: 0.9375rem;
  }

  .app-login-v3-input {
    font-size: 1.0625rem;
    padding: 0.65rem 0.85rem;
    min-height: 3rem;
  }

  .app-login-v3-sms-btn {
    min-height: 3rem;
    font-size: 0.9375rem;
    min-width: 7.5rem;
  }

  .app-login-v3-agree {
    font-size: 0.9375rem;
  }

  .app-login-v3-foot {
    font-size: 0.9375rem;
  }
}

/* 双列仅横屏；竖屏（含大屏手机、平板竖屏、桌面窄窗）始终单列 */
@media (min-width: 900px) and (orientation: landscape) {
  .app-login-v3 {
    max-width: var(--app-viewport-usable-x);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.1rem;
    align-items: stretch;
  }

  .app-login-v3-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 0.68rem 0.95rem 0.78rem;
    margin: 0;
  }

  .app-login-v3-panel {
    margin-top: 0;
    padding: 0.9rem 0.9rem 1rem;
  }

  .app-login-v3-foot {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.app-login-v3-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  text-align: left;
  padding: 0.65rem 0.85rem 0.7rem;
  border-radius: var(--radius-card);
  background: linear-gradient(155deg, #0284c7 0%, #0ea5e9 28%, #2563eb 62%, #1d4ed8 100%);
  box-shadow: 0 10px 32px rgba(15, 45, 95, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
  color: #ffffff;
}

.app-login-v3-hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: rgba(255, 255, 255, 0.22);
}

.app-login-v3-hero__deco-side {
  position: absolute;
  top: 0.28rem;
  bottom: 0.28rem;
  width: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.app-login-v3-hero__deco-side--left {
  left: 0.2rem;
}

.app-login-v3-hero__deco-side--right {
  right: 0.2rem;
}

.app-login-v3-hero__inst--sax {
  width: 1.85rem;
  height: auto;
  transform: rotate(-6deg);
  flex-shrink: 0;
  opacity: 0.95;
}

.app-login-v3-hero__inst--ewi {
  width: 1.6rem;
  height: auto;
  transform: rotate(5deg);
  flex-shrink: 0;
  opacity: 0.88;
}

.app-login-v3-hero__deco-note--sm {
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0.9;
  transform: rotate(-18deg);
}

.app-login-v3-hero__deco-note--xs {
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.75;
  transform: rotate(12deg);
}

.app-login-v3-hero__deco-side--right .app-login-v3-hero__deco-note--sm {
  transform: rotate(14deg);
}

.app-login-v3-hero__deco-side--right .app-login-v3-hero__deco-note--xs {
  transform: rotate(-10deg);
}

.app-login-v3-hero__inner {
  position: relative;
  z-index: 1;
}

/* Logo 与标题左右排布，整体高度约为原纵向布局的一半 */
.app-login-v3-hero__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.78rem;
  width: 100%;
}

.app-login-v3-hero__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.28rem;
}

@media (max-width: 359px) {
  .app-login-v3-hero__deco-side {
    width: 2rem;
    opacity: 0.85;
  }

  .app-login-v3-hero__inst--sax {
    width: 1.85rem;
  }

  .app-login-v3-hero__inst--ewi {
    width: 1.65rem;
  }
}

.app-login-v3-hero__logo-wrap {
  margin: 0;
  flex-shrink: 0;
}

.app-login-v3-hero__logo {
  display: block;
  width: 3.6rem;
  height: auto;
  max-width: 100%;
  margin: 0;
  border-radius: 0.82rem;
  box-shadow: 0 4px 16px rgba(0, 20, 50, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.app-login-v3-hero__title {
  margin: 0;
  font-size: clamp(1.02rem, 3.9vw, 1.22rem);
  font-weight: var(--fw-title);
  line-height: 1.28;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 20, 60, 0.35);
}

.app-login-v3-hero__tagline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0.26rem 0.55rem;
  max-width: 100%;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(0, 25, 55, 0.22);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  line-height: 1.3;
}

.app-login-v3-hero__note {
  display: inline-flex;
  flex-shrink: 0;
  color: #fef08a;
}

.app-login-v3-hero__note-svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
  opacity: 0.98;
}

.app-login-v3-hero__tagline-text {
  text-align: left;
}

.app-login-v3-panel {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin-top: 0.5rem;
  padding: 0.7rem 0.75rem 0.85rem;
  background: #ffffff;
  border-radius: var(--radius-card);
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow-card);
}

.app-login-v3-panel__title {
  margin: 0 0 0.65rem;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  color: #1f2937;
  line-height: var(--lh-title);
}

.app-login-v3-field {
  margin-bottom: 1rem;
}

.app-login-v3-field label {
  display: block;
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  color: #1f2937;
  margin-bottom: 0.3rem;
  line-height: var(--lh-body);
}

.app-login-v3-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-input);
  padding: 0.55rem 0.75rem;
  min-height: var(--touch-min);
  font-size: var(--fz-song);
  line-height: var(--lh-body);
  color: var(--text);
  background: #ffffff;
  /* iPad / iOS WebKit：避免继承的 user-select 或层叠导致首击未正确聚焦、软键盘不弹 */
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

.app-login-v3-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.app-login-v3-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(var(--brand-core-rgb), 0.2);
}

.app-login-v3-code-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.app-login-v3-code-row .app-login-v3-input {
  flex: 1;
  min-width: 0;
}

.app-login-v3-sms-btn {
  flex-shrink: 0;
  min-width: 7rem;
  padding: 0 0.65rem;
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
  line-height: var(--lh-body);
  min-height: var(--touch-min);
  border-radius: var(--radius-input);
  border: 2px solid var(--brand);
  background: #ffffff;
  color: var(--brand-dark);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.app-login-v3-sms-btn:disabled,
.app-login-v3-sms-btn[disabled] {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

.app-login-v3-sms-btn:active:not(:disabled) {
  opacity: 0.9;
  background: var(--brand-soft);
}

.app-login-v3-agree {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  margin: 0 0 0.75rem;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  cursor: pointer;
}

.app-login-v3-agree input {
  margin-top: 0.28rem;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--brand);
}

.app-login-v3-agree__text {
  flex: 1;
  min-width: 0;
}

.app-login-v3-agree a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
}

.app-login-v3-agree a:active {
  opacity: 0.85;
}

.app-login-v3-err {
  margin-bottom: 0.65rem;
}

.app-login-v3-submit.btn-brand {
  border-radius: var(--radius-btn);
  min-height: var(--touch-min);
  font-size: var(--fz-btn);
  font-weight: var(--fw-btn);
}

.app-login-v3-submit.btn-brand:disabled,
.app-login-v3-submit.btn-brand[disabled] {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
}

.app-login-v3-foot {
  margin: 0.65rem 0 0;
  padding: 0 0.25rem;
  font-size: var(--fz-meta);
  line-height: var(--lh-body);
  color: var(--muted);
  text-align: center;
}

.app-login-v3-foot__ico {
  margin-right: 0.2em;
}

.app-form-err {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--danger);
  min-height: 1.25rem;
}

.app-form-err.app-form-note {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ========== 节拍器页 ========== */
.metro-page {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin: 0 auto;
  padding: var(--space-page-y) var(--space-page-x) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .metro-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.metro-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1rem 1rem;
  box-shadow: var(--shadow-card);
}

.metro-panel--accent {
  border-color: var(--brand-border);
  background: linear-gradient(180deg, var(--brand-softer) 0%, var(--surface) 55%);
  padding: 0.72rem 0.88rem 0.8rem;
}

.metro-desc {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.45;
  text-align: center;
}

.metro-bpm-block {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.1rem 0 0.28rem;
}

.metro-bpm-label {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 0.28rem;
  flex-shrink: 0;
}

.metro-bpm-num {
  font-size: clamp(1.95rem, 10vw, 2.85rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.metro-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.42rem 0 0.55rem;
}

.metro-step-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 2px solid var(--brand-mid);
  background: var(--surface);
  color: var(--brand-dark);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.metro-step-btn:active {
  opacity: 0.88;
  transform: scale(0.97);
}

.metro-step-hint {
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 5rem;
  line-height: 1.3;
  text-align: center;
}

.metro-start {
  width: 100%;
  margin-top: 0.05rem;
}

.metro-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
  min-height: 2rem;
}

.metro-panel-title {
  margin: 0 0 0.65rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}

.metro-beat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.metro-beat-btn {
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.55rem 0.25rem;
  min-height: 2.5rem;
  border-radius: 0.55rem;
  border: 2px solid var(--brand-mid);
  background: var(--surface);
  color: var(--brand-dark);
  cursor: pointer;
}

.metro-beat-btn.beat-active {
  box-shadow: 0 0 0 2px rgba(var(--brand-core-rgb), 0.4);
  background: var(--brand-soft);
}

.metro-opts {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.45rem;
}

.metro-opt-chip {
  position: relative;
  flex: 1;
  min-width: 0;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.metro-opt-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.metro-opt-chip__face {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
  padding: 0.5rem 0.45rem;
  border-radius: 0.55rem;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.metro-opt-chip__ico {
  display: flex;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  opacity: 0.82;
}

.metro-opt-chip__ico svg {
  width: 100%;
  height: 100%;
}

.metro-opt-chip__txt {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.metro-opt-chip input:checked + .metro-opt-chip__face {
  border-color: var(--brand-mid);
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: 0 0 0 1px rgba(var(--brand-core-rgb), 0.22);
}

.metro-opt-chip input:checked + .metro-opt-chip__face .metro-opt-chip__ico {
  opacity: 1;
  color: var(--brand-mid);
}

.metro-opt-chip input:focus-visible + .metro-opt-chip__face {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--brand-core-rgb), 0.45);
}

.metro-opt-chip input:checked:focus-visible + .metro-opt-chip__face {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--brand-core-rgb), 0.5);
}

.metro-opt-chip:active .metro-opt-chip__face {
  transform: scale(0.98);
}

.metro-sound-field {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metro-sound-field__head {
  display: flex;
  align-items: center;
  justify-content: center;
}

.metro-sound-label {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
}

.metro-sound-seg {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  padding: 0.14rem;
  border-radius: 0.5rem;
  background: rgba(var(--brand-core-rgb), 0.09);
  border: 1px solid rgba(var(--brand-core-rgb), 0.22);
  gap: 0.1rem;
  box-sizing: border-box;
}

.metro-sound-opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 2.55rem;
  padding: 0.26rem 0.18rem;
  margin: 0;
  border: none;
  border-radius: 0.38rem;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.metro-sound-opt:active {
  transform: scale(0.98);
}

.metro-sound-opt.is-active {
  background: var(--surface);
  color: var(--brand-dark);
  box-shadow: 0 1px 4px rgba(31, 41, 55, 0.1), 0 0 0 1px rgba(var(--brand-core-rgb), 0.28);
}

.metro-sound-opt__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  opacity: 0.72;
}

.metro-sound-opt.is-active .metro-sound-opt__ico {
  opacity: 1;
  color: var(--brand-mid);
}

.metro-sound-opt__ico svg {
  width: 100%;
  height: 100%;
}

.metro-sound-opt__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  text-align: center;
  line-height: 1.15;
  width: 100%;
  min-width: 0;
}

.metro-sound-opt__name {
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.metro-sound-opt__sub {
  font-size: 0.5625rem;
  font-weight: 600;
  color: inherit;
  opacity: 0.72;
  max-width: 100%;
  line-height: 1.2;
}

.metro-sound-opt.is-active .metro-sound-opt__sub {
  opacity: 0.88;
}

.metro-sound-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--brand-core-rgb), 0.55);
}

.metro-custom-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.metro-custom-file-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}

.metro-custom-file-input {
  width: 100%;
  min-height: 2.5rem;
  font-size: 0.9375rem;
  box-sizing: border-box;
}

.metro-custom-hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* ========== 个人中心页 ========== */
.app-user-page {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin: 0 auto;
  padding: var(--space-page-y) var(--space-page-x) 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .app-user-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 仅标题居中：左右占位等宽 */
.app-topbar--triple {
  justify-content: space-between;
}

.app-topbar__titlecell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 12rem;
}

@media (min-width: 768px) {
  .app-topbar--align-content .app-topbar__titlecell {
    max-width: none;
  }
}

.app-topbar__filler {
  flex: 1 1 0;
  min-width: 0;
  max-width: 5rem;
}

.app-topbar--triple .app-topbar__title {
  flex: 0 1 auto;
  text-align: center;
  white-space: nowrap;
}

.app-panel {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card);
  padding: 0.65rem 0.75rem;
  box-shadow: var(--shadow-card);
}

.app-panel--member {
  border-color: var(--brand-border);
}

.app-panel-head {
  text-align: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.app-panel-head h2 {
  margin: 0;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  color: var(--brand-dark);
}

.app-panel-sub {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.app-profile-layout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.app-profile-text {
  flex: 1;
  min-width: 0;
}

.app-profile-name {
  margin: 0;
  font-size: var(--fz-song);
  font-weight: var(--fw-song);
  color: var(--text);
  line-height: var(--lh-body);
}

.app-profile-role {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.app-profile-detail {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-dark);
  line-height: 1.55;
}

.app-panel-foot--compare {
  line-height: 1.5;
}

.app-compare-title {
  display: block;
  margin-bottom: 0.65rem !important;
  font-size: 1.125rem;
  color: var(--text);
}

.app-compare-lead {
  margin: 0 0 0.55rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-secondary);
}

.app-compare-lead--member {
  color: var(--brand-dark);
}

.app-compare-highlight {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: var(--brand-soft);
  border: 1px solid rgba(var(--brand-core-rgb), 0.22);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
}

.app-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.35rem 0 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border);
  background: var(--page-bg);
}

.app-compare-table {
  width: 100%;
  min-width: 17rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.app-compare-table thead th {
  padding: 0.55rem 0.45rem;
  text-align: left;
  font-weight: 800;
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-compare-table tbody th[scope="row"] {
  padding: 0.5rem 0.45rem;
  text-align: left;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  max-width: 6.5rem;
}

.app-compare-table td {
  padding: 0.5rem 0.45rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.45;
}

.app-compare-table tbody tr:last-child th,
.app-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.app-compare-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.app-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* 个人中心：已登录时隐藏登录入口（不依赖 tailwind-offline 是否含 .hidden） */
#profileActions.app-profile-login-wrap--hidden {
  display: none !important;
}

.app-pkg-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.app-pkg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 0.65rem;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.app-pkg-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text);
}

.app-pkg-tag {
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: #40a9ff;
  padding: 0.12rem 0.42rem;
  border-radius: 0.35rem;
  vertical-align: middle;
  border: 1px solid rgba(24, 144, 255, 0.6);
}

.app-pkg-sub {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.app-pkg-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-pkg-price {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-dark);
  white-space: nowrap;
}

.app-panel-foot {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.app-panel-foot strong {
  display: block;
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.app-panel-foot p + p {
  margin-top: 0.5rem;
}

.app-panel-foot ul {
  margin: 0.35rem 0 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
}

.app-panel-foot li {
  margin-top: 0.45rem;
  line-height: 1.5;
}

.app-panel-foot li:first-child {
  margin-top: 0;
}

.app-pkg-left {
  flex: 1;
  min-width: 0;
}

.app-menu-title {
  margin: 0 0 0.35rem 0.15rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.app-menu li {
  border-bottom: 1px solid #eef2f7;
}

.app-menu li:last-child {
  border-bottom: none;
}

.app-menu a,
.app-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.app-menu a::after,
.app-menu button::after {
  content: "›";
  font-size: 1.1rem;
  color: var(--muted);
  font-weight: 400;
}

.app-menu a:active,
.app-menu button:active {
  background: var(--page-bg);
}

.app-menu button.app-menu__danger {
  color: #b91c1c;
  font-weight: 700;
}

.app-menu button.app-menu__danger::after {
  color: #b91c1c;
}

.app-user-tip {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.25rem 0 0;
}

.soft-toast.app-toast-inline {
  margin-bottom: 0;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  padding: 0.55rem 0.75rem;
}

/* ========== 欢迎页 / 登录 蜀哥 IP ========== */
.index-hero-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 3.25rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.5rem;
  background: var(--gradient-vocal-ui);
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: var(--vocal-ui-shadow);
}

.index-hero-title {
  margin: 0;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
}

@media (min-width: 768px) {
  .index-hero-title {
    font-size: 1.25rem;
  }
}

.index-page-header {
  padding: 1rem 0.75rem 0.65rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  background: var(--surface);
}

.index-page-main {
  flex: 1;
  padding: 0.75rem 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.index-page-lead {
  margin: 0;
  font-size: var(--fz-song);
  font-weight: var(--fw-song);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-align: center;
}

.index-page-sub {
  margin: 0.45rem 0 0;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--muted);
  text-align: center;
}

.index-page-footer {
  padding: 0.75rem 0.75rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #f3f4f6;
  background: var(--surface);
}

.index-hero-ip {
  color: var(--shuge-gold-dark);
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #ffe08a 0%, var(--shuge-gold) 100%);
  margin-right: 0.15em;
}

.index-hero-band {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 0.35rem;
  color: var(--shuge-gold-dark);
  background: linear-gradient(180deg, #ffe08a 0%, var(--shuge-gold) 100%);
  letter-spacing: 0.08em;
}

.index-hero-band--plain {
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  letter-spacing: 0;
}

@media (min-width: 640px) {
  .home-feature-grid {
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 360px) {
  .app-tabbar__txt {
    font-size: 10px;
  }

  .app-tabbar__ico {
    width: 20px;
    height: 20px;
  }
}

@media (orientation: landscape) {
  body.landscape-lock .play-stage {
    max-width: 100%;
  }
}

/* 关于我们 / 协议等：首即为返回时，为刘海留出额外顶距，避免 iOS WebView 点不到 */
body.app-doc-safe-top {
  padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
}

body.app-doc-safe-top .app-back-chevron.app-back-chevron--docblock {
  min-width: 2.75rem;
  min-height: 2.75rem;
  touch-action: manipulation;
}

/* 关于我们：窄版心、分区标题装饰、正文不再逐段套框 */
body.app-about-page {
  max-width: min(26.5rem, calc(100% - 1.35rem));
  margin-left: auto;
  margin-right: auto;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  padding-bottom: 2.75rem;
  box-sizing: border-box;
}

body.app-about-page .app-about-hero-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 0.85rem;
  line-height: 1.25;
}

body.app-about-page .app-about-section {
  margin-top: 1.65rem;
}

body.app-about-page .app-about-section:first-of-type {
  margin-top: 0;
}

body.app-about-page .app-about-section-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--brand-dark);
  text-transform: none;
  margin: 0 0 0.55rem;
  padding: 0.2rem 0 0.2rem 0.7rem;
  border-left: 3px solid var(--brand);
  border-radius: 2px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

body.app-about-page .app-about-card {
  padding: 1rem 1.05rem 1.05rem;
}

body.app-about-page .app-about-card--lead {
  background: linear-gradient(165deg, rgba(230, 244, 255, 0.72) 0%, var(--surface) 52%);
  border-color: rgba(var(--brand-core-rgb), 0.22);
  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.05), 0 1px 2px rgba(31, 41, 55, 0.04);
}

body.app-about-page .app-about-prose {
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--text-secondary);
}

body.app-about-page .app-about-prose > p + p {
  margin-top: 0.8rem;
}

body.app-about-page .app-about-prose .app-about-brand-inline {
  font-weight: 800;
  color: var(--brand-dark);
}

body.app-about-page .app-about-contact {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

body.app-about-page .app-about-card a.text-link-soft {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--brand-core-rgb), 0.45);
}

body.app-about-page .app-about-card a.text-link-soft:active {
  opacity: 0.85;
}

.app-login-v3-topbar .app-back-chevron {
  min-width: 2.75rem;
  min-height: 2.75rem;
  touch-action: manipulation;
}

/* ========== 教程 / 协议等静态文本文档（紧凑）========== */
.app-static-doc {
  padding: var(--space-page-y) var(--space-page-x) 2rem;
  max-width: var(--app-viewport-usable-x);
  margin: 0 auto;
  box-sizing: border-box;
}

.app-static-doc h1 {
  margin: 0 0 0.65rem;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  color: var(--text);
}

.app-static-doc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-static-doc li {
  margin-bottom: 0.45rem;
  padding: 0.55rem 0.65rem;
  font-size: var(--fz-song);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.55) 0%, rgba(255, 255, 255, 0.96) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-static-doc .app-static-doc__num {
  font-weight: var(--fw-btn);
  color: var(--brand-dark);
}

.app-static-doc .app-static-doc__head {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fz-song);
  font-weight: var(--fw-title);
  color: var(--text);
}

.app-static-doc li p {
  margin: 0.35rem 0 0;
}

.app-static-doc li p:first-of-type {
  margin-top: 0;
}

/* ========== 全站统一弹窗（app-dlg）========== */
body.app-dlg-open {
  overflow: hidden;
}

.app-dlg-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  z-index: 10050;
  /* 低版本 WebView：flex/grid 居中常失效，遮罩铺满 + 面板绝对定位 translate 居中 */
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-focus-ring-color: rgba(var(--brand-core-rgb), 0.88);
}

.app-dlg-root.hidden {
  display: none;
}

.app-dlg-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.app-dlg-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% - 2.5rem);
  max-width: 20rem;
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 1.35rem 1.35rem 1.15rem;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 22px 50px rgba(6, 78, 59, 0.18), 0 0 0 1px rgba(var(--brand-core-rgb), 0.12);
  /* 仅用 opacity 动画，避免覆盖 translate 导致挤到左下角 */
  -webkit-animation: app-dlg-in 0.22s ease-out;
  animation: app-dlg-in 0.22s ease-out;
}

@-webkit-keyframes app-dlg-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes app-dlg-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.app-dlg-panel--member {
  box-shadow: 0 22px 50px rgba(217, 119, 6, 0.15), 0 0 0 1px rgba(251, 191, 36, 0.35);
}

.app-dlg-panel--danger .app-dlg-title {
  color: var(--danger);
}

.app-dlg-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffbeb 0%, #fde68a 100%);
  color: var(--shuge-accent);
}

.app-dlg-title {
  margin: 0 0 0.4rem;
  font-size: var(--fz-title);
  font-weight: var(--fw-title);
  text-align: center;
  color: var(--text);
  line-height: var(--lh-title);
}

.app-dlg-msg {
  margin: 0 0 0.85rem;
  font-size: var(--fz-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-align: center;
}

.app-dlg-input-wrap {
  margin: 0 0 1rem;
}

.app-dlg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  font-size: 1rem;
  font: inherit;
  color: var(--text);
  background: #fff;
}

.app-dlg-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-core-rgb), 0.2);
}

.app-dlg-actions {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
}

.app-dlg-btn {
  flex: 1 1 auto;
  min-width: 5.5rem;
  border: 0;
  border-radius: var(--radius-btn);
  padding: 0.72rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* 旧 WebView 常忽略 outline：去掉系统黄框后叠一层品牌 box-shadow（不依赖 outline） */
.app-dlg-root .app-dlg-btn:focus,
.app-dlg-root .app-dlg-btn:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.app-dlg-root .app-dlg-btn--ghost:focus,
.app-dlg-root .app-dlg-btn--ghost:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--brand-core-rgb), 0.45) !important;
}

.app-dlg-root .app-dlg-btn--primary:focus,
.app-dlg-root .app-dlg-btn--primary:focus-visible {
  box-shadow:
    var(--vocal-ui-shadow),
    0 0 0 2px rgba(255, 255, 255, 0.4),
    0 0 0 4px rgba(var(--brand-core-rgb), 0.55) !important;
}

.app-dlg-root .app-dlg-btn::-moz-focus-inner {
  border: 0 !important;
}

.app-dlg-btn--primary {
  color: #fff;
  background: var(--gradient-vocal-ui-tall);
  box-shadow: var(--vocal-ui-shadow);
}

.app-dlg-btn--primary:active {
  opacity: 0.92;
}

.app-dlg-btn--ghost {
  color: var(--text-secondary);
  background: #f3f4f6;
  border: 1px solid var(--border);
}

.app-dlg-btn--ghost:active {
  background: #e5e7eb;
}

.app-search-row.app-search-row--lib {
  cursor: pointer;
}

/* ========== 首页 V2（Banner + 通栏搜索 + 渐变功能卡）========== */
.app-home-v2 {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  /* 页面背景由 body.app-shell 统一提供 */
}

.home-v2-banner {
  position: relative;
  overflow: hidden;
  padding: 0.4rem 1rem 0.5rem;
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 42%, #6366f1 100%);
  color: #fff;
}

/* 桌面端 Banner 与 .home-v2-main 同宽，避免「头宽身窄」 */
@media (min-width: 768px) {
  .home-v2-banner {
    padding: 0.45rem 1rem 0.55rem;
    max-width: var(--app-viewport-usable-x);
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 1.25rem 1.25rem;
    box-sizing: border-box;
    box-shadow: 0 12px 40px rgba(14, 99, 198, 0.2);
  }

  .home-v2-banner-carousel {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .home-v2-banner-carousel__viewport {
    border-radius: 12px;
    max-height: 12.5rem;
  }

  .home-v2-banner-carousel__dots {
    padding: 0 0.25rem;
  }
}

.home-v2-banner__glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.45) 0%, transparent 55%);
  pointer-events: none;
}

.home-v2-banner__root {
  position: relative;
  z-index: 1;
}

/* 通栏宽度：抵消 .home-v2-banner 左右各 1rem 内边距，使配图贴齐渐变区域两侧 */
.home-v2-banner-carousel {
  width: calc(100% + 2rem);
  max-width: none;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0 0 0.35rem;
  box-sizing: border-box;
}

.home-v2-banner-carousel.hidden {
  display: none !important;
}

.home-v2-banner-carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  touch-action: pan-y;
  /* 16:5 区域：不用 height:% 链条（旧 WebView 下子级可为 0 高，绝对定位的图不可见） */
  width: 100%;
  min-width: 0;
  height: 0;
  box-sizing: border-box;
  padding-bottom: 31.25%; /* 5/16，相对自身宽度，与 aspect-ratio 等价但更兼容 */
  max-height: 11.5rem;
}

.home-v2-banner-carousel__track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  will-change: transform;
  transition: transform 0.38s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .home-v2-banner-carousel__track {
    transition: none;
  }
}

.home-v2-banner-carousel__slide {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* 仅作无 JS 时的退路；有图时 flex 100% 易按图片固有宽度收缩，由 JS 写死为视口宽 px */
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  background: rgba(15, 23, 42, 0.18);
}

/* 不使用 100cqi：部分环境下 cqi 解析为 0，幻灯宽度为 0，平板上看不到图；宽度由 workspace.js 写死为 px */

/* 固定尺寸海报：等比放大铺满 slide，多出的部分裁切（与 object-position 居中） */
.home-v2-banner-carousel__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.home-v2-banner-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.28rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.home-v2-banner-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-v2-banner-carousel__dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.home-v2-banner-carousel__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.home-v2-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 28rem;
  margin: 0 auto;
}

/* Tailwind .hidden 与本规则同特异度且在后加载时会盖掉 display:none，导致轮播与旧 Banner 叠显 */
#homeBannerFallback.hidden,
.home-v2-banner__inner.hidden,
.home-v2-banner-fallback.hidden {
  display: none !important;
}

/* 无轮播数据时的极简占位（替代原手机示意 + 大标题） */
.home-v2-banner-fallback {
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.5rem 1rem 0.65rem;
  text-align: center;
}

.home-v2-banner-fallback__text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.45;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(15, 23, 42, 0.12);
}

.home-v2-banner__copy {
  flex: 1;
  min-width: 0;
}

.home-v2-banner__brand {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.92;
}

.home-v2-banner__title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(15, 23, 42, 0.15);
}

.home-v2-banner__sub {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  opacity: 0.95;
}

.home-v2-banner__tagline {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  opacity: 0.88;
  max-width: 15rem;
}

.home-v2-banner__device {
  flex-shrink: 0;
}

.home-v2-phone {
  width: 4.5rem;height: 8.25rem;
  border-radius: 0.65rem;
  padding: 0.28rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(15, 23, 42, 0.25) 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}

.home-v2-phone__screen {
  height: 100%;
  border-radius: 0.45rem;
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  padding: 0.35rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  box-sizing: border-box;
}

.home-v2-phone__line {
  display: block;
  height: 0.2rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.45);
}
.home-v2-phone__line--a { width: 72%; }
.home-v2-phone__line--b { width: 92%; }
.home-v2-phone__line--c { width: 55%; flex: 1; min-height: 2rem; opacity: 0.35; border-radius: 0.3rem; }

.home-v2-main {
  padding-top: 0.5rem;
}

/* 首页主列：与底栏同视觉宽度（满屏减安全区与少量边距） */
.home-v2-main.app-home-main {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .home-v2-main.app-home-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ========== 主导航 Hub（首页 / 收藏 / 上传 / 工具 / 个人中心）：主列与底栏同宽 ========== */
body.app-hub-layout {
  --hub-col-max-md: var(--app-viewport-usable-x);
  --hub-col-max-lg: var(--app-viewport-usable-x);
  --hub-col-max-xl: var(--app-viewport-usable-x);
  --hub-pad-x: 0.5rem;
  --hub-pad-x-md: 0.625rem;
}

body.app-hub-layout .home-v2-main.app-home-main {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hub-pad-x);
  padding-right: var(--hub-pad-x);
}

@media (min-width: 768px) {
  body.app-hub-layout .home-v2-main.app-home-main {
    max-width: var(--hub-col-max-md);
    padding-left: var(--hub-pad-x-md);
    padding-right: var(--hub-pad-x-md);
  }
}

@media (min-width: 1280px) {
  body.app-hub-layout .home-v2-main.app-home-main {
    max-width: var(--hub-col-max-lg);
  }
}

@media (min-width: 1440px) {
  body.app-hub-layout .home-v2-main.app-home-main {
    max-width: var(--hub-col-max-xl);
  }
}

/* 首页 Banner：与主列同宽、负边距与 hub 内边距对齐 */
body.app-hub-layout .home-v2-banner {
  padding-left: var(--hub-pad-x);
  padding-right: var(--hub-pad-x);
}

body.app-hub-layout .home-v2-banner-carousel {
  width: calc(100% + 2 * var(--hub-pad-x));
  margin-left: calc(-1 * var(--hub-pad-x));
  margin-right: calc(-1 * var(--hub-pad-x));
}

@media (min-width: 768px) {
  body.app-hub-layout .home-v2-banner {
    padding: 0.45rem var(--hub-pad-x-md) 0.55rem;
    max-width: var(--hub-col-max-md);
    margin-left: auto;
    margin-right: auto;
  }

  body.app-hub-layout .home-v2-banner-carousel {
    width: calc(100% + 2 * var(--hub-pad-x-md));
    margin-left: calc(-1 * var(--hub-pad-x-md));
    margin-right: calc(-1 * var(--hub-pad-x-md));
  }
}

@media (min-width: 1280px) {
  body.app-hub-layout .home-v2-banner {
    max-width: var(--hub-col-max-lg);
  }
}

@media (min-width: 1440px) {
  body.app-hub-layout .home-v2-banner {
    max-width: var(--hub-col-max-xl);
  }
}

/*
 * iPad / 大屏平板（宽度 ≥600px）：顶部 Banner 通栏铺满视口。
 * 之前曾用 max-width 上限排除「大屏」，但 iPad Pro 13 等会出现 ≥1600 甚至 ~2048（逻辑像素或高分屏折算）仍属平板，
 * 落在范围外反而被套 hub 的 max-width，轮播两侧留白；故不再设上限。
 * 需在 1280+/1440+ 的 hub banner 规则之后写，且用 .app-home-page 提高优先级以盖过 max-width。
 */
@media (min-width: 600px) {
  body.app-hub-layout.app-home-page {
    --hub-pad-x: 0.2rem;
    --hub-pad-x-md: 0.3rem;
    --app-viewport-usable-x: calc(
      100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 0.55rem
    );
  }

  body.app-hub-layout.app-home-page .home-v2-banner {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 0 0.4rem;
    border-radius: 0;
    box-sizing: border-box;
    box-shadow: 0 10px 32px rgba(14, 99, 198, 0.2);
  }

  body.app-hub-layout.app-home-page .home-v2-banner-carousel {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 0.3rem;
  }

  body.app-hub-layout.app-home-page .home-v2-banner-carousel__viewport {
    border-radius: 0;
    border-bottom: none;
  }

  body.app-hub-layout.app-home-page .home-v2-banner-carousel__dots {
    padding: 0.22rem 0.5rem 0;
  }
}

body.app-hub-layout .home-categories-scroll {
  margin-left: calc(-1 * var(--hub-pad-x));
  margin-right: calc(-1 * var(--hub-pad-x));
  padding-left: var(--hub-pad-x);
  padding-right: var(--hub-pad-x);
}

@media (min-width: 768px) {
  body.app-hub-layout .home-categories-scroll {
    margin-left: calc(-1 * var(--hub-pad-x-md));
    margin-right: calc(-1 * var(--hub-pad-x-md));
    padding-left: var(--hub-pad-x-md);
    padding-right: var(--hub-pad-x-md);
  }
}

body.app-hub-layout .app-home-page .home-v2-section--lib {
  padding-left: 0;
  padding-right: 0;
}

/* Hub 内页顶栏与主列同宽 */
body.app-hub-layout .app-topbar.app-topbar--align-content {
  padding-left: var(--hub-pad-x);
  padding-right: var(--hub-pad-x);
}

@media (min-width: 768px) {
  body.app-hub-layout .app-topbar.app-topbar--align-content {
    max-width: var(--hub-col-max-md);
    padding-left: var(--hub-pad-x-md);
    padding-right: var(--hub-pad-x-md);
  }
}

@media (min-width: 1280px) {
  body.app-hub-layout .app-topbar.app-topbar--align-content {
    max-width: var(--hub-col-max-lg);
  }
}

@media (min-width: 1440px) {
  body.app-hub-layout .app-topbar.app-topbar--align-content {
    max-width: var(--hub-col-max-xl);
  }
}

/* iPad / 平板：内页顶栏通栏铺满视口（与首页 Banner 一致），避免两侧缩进一条 */
@media (min-width: 768px) and (max-width: 1366px) {
  .app-topbar.app-topbar--align-content,
  body.app-hub-layout .app-topbar.app-topbar--align-content,
  body.app-play-page .app-topbar.app-topbar--align-content {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(0.55rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
  }

  header.app-topbar--split {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
  }

  #flbzPage.app-flbz-ui-v3 .app-flbz-head {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(0.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.25rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .app-pay-topbar {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}

body.app-hub-layout .app-favorites-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.875rem var(--hub-pad-x) 1.25rem;
  box-sizing: border-box;
}

body.app-hub-layout .app-tools-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-page-y) var(--hub-pad-x) 5.5rem;
  box-sizing: border-box;
}

body.app-hub-layout .metro-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-page-y) var(--hub-pad-x) 1.25rem;
  box-sizing: border-box;
}

body.app-hub-layout .app-user-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-page-y) var(--hub-pad-x) 5.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body.app-hub-layout .app-favorites-page,
  body.app-hub-layout .app-tools-page,
  body.app-hub-layout .app-user-page,
  body.app-hub-layout .metro-page {
    max-width: var(--hub-col-max-md);
    padding-left: var(--hub-pad-x-md);
    padding-right: var(--hub-pad-x-md);
  }
}

@media (min-width: 1280px) {
  body.app-hub-layout .app-favorites-page,
  body.app-hub-layout .app-tools-page,
  body.app-hub-layout .app-user-page,
  body.app-hub-layout .metro-page {
    max-width: var(--hub-col-max-lg);
  }
}

@media (min-width: 1440px) {
  body.app-hub-layout .app-favorites-page,
  body.app-hub-layout .app-tools-page,
  body.app-hub-layout .app-user-page,
  body.app-hub-layout .metro-page {
    max-width: var(--hub-col-max-xl);
  }
}

body.app-hub-layout.app-my-upload-page .app-upload-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.875rem var(--hub-pad-x) 1.25rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body.app-hub-layout.app-my-upload-page .app-upload-page {
    max-width: var(--hub-col-max-md);
    padding-left: var(--hub-pad-x-md);
    padding-right: var(--hub-pad-x-md);
  }
}

@media (min-width: 1280px) {
  body.app-hub-layout.app-my-upload-page .app-upload-page {
    max-width: var(--hub-col-max-lg);
  }
}

@media (min-width: 1440px) {
  body.app-hub-layout.app-my-upload-page .app-upload-page {
    max-width: var(--hub-col-max-xl);
  }
}

.home-v2-search-form {
  margin-bottom: 0.65rem;
}

/* 首页：搜索入口为整链至 search.html，外观与可输入时一致，便于老年用户一眼识别 */
.home-v2-search-link {
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
}

.home-v2-search-link:active .home-v2-search {
  opacity: 0.96;
  transform: scale(0.995);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.home-v2-search__placeholder {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-v2-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.45rem 0.65rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.home-v2-search__icon {
  flex-shrink: 0;
  color: #94a3b8;
  display: flex;
}

.home-v2-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  outline: none;
}

.home-v2-search__input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.home-v2-search__actions {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.home-v2-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-v2-icon-btn:active {
  background: #e2e8f0;
  transform: scale(0.96);
}

.home-v2-search-panel.app-search-panel {
  margin-top: -0.35rem;
  margin-bottom: 0.5rem;
  border-radius: 12px;
}

/* ========== 独立搜索页 search.html（主色顶栏 / 白药丸+搜索 / 历史+热搜/热播 / 结果页顶栏+卡片）========== */
/* 灵动岛/刘海/状态栏：主题色从屏顶铺全宽，内边距 = 安全区 + 微呼吸，避免与系统岛区重叠、内容不被挡 */
body.app-search-standalone {
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #f1f4f8;
  --app-search-sat: env(safe-area-inset-top, 0px);
  --app-search-sab: env(safe-area-inset-bottom, 0px);
  --app-search-sal: env(safe-area-inset-left, 0px);
  --app-search-sar: env(safe-area-inset-right, 0px);
  /* 安全区外再留一点空白，与灵动岛/状态栏下沿不贴死 */
  --app-search-top-gutter: 0.3rem;
  --app-search-header-pt: calc(var(--app-search-sat) + var(--app-search-top-gutter));
  /* 顶栏可点击区高（返回+药丸+搜索）+ 头尾内边距，与 .app-search-top 实高一致，避免主区与 fixed 头重叠或二次累加安全区 */
  /* 与 .app-search-top__input / 按钮 约 34px 高、上下 padding 对齐 */
  --app-search-bar-row: 40px;
  --app-search-header-pb: 0.5rem;
  --app-search-header-total: calc(var(--app-search-header-pt) + var(--app-search-bar-row) + var(--app-search-header-pb));
}

/* 与全站主色统一（:root 中 --brand / --brand-mid） */
.app-search-top {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  /* 上：全量安全区 + 与灵动岛/状态栏的间隔；下：与内容分隔；左右略加大使 pill 不贴边 */
  padding: var(--app-search-header-pt) max(0.5rem, var(--app-search-sal)) var(--app-search-header-pb) max(0.5rem, var(--app-search-sar));
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
  box-shadow: 0 2px 10px rgba(var(--brand-core-rgb), 0.22);
  transform: translateZ(0);
  /* 小屏/长岛机型：行内不压缩换行，避免挤乱 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

.app-search-top__bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  max-width: 100%;
}

.app-search-top__back {
  border: 0;
  background: none;
  padding: 0 0.1rem 0 0.05rem;
  min-width: 2.1rem;
  min-height: 34px;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.app-search-top__back--text {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.98;
}

.app-search-top__form {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}

.app-search-top__pill {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.32rem 0.1rem 0.4rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.app-search-top__lens {
  flex-shrink: 0;
  color: #94a3b8;
  display: flex;
}

.app-search-top__lens svg {
  width: 18px;
  height: 18px;
  display: block;
}

.app-search-top__input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: #0f172a;
  outline: none;
  -webkit-appearance: none;
}

.app-search-top__input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.app-search-top__clear-inpill {
  flex-shrink: 0;
  width: 1.45rem;
  height: 1.45rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.app-search-top__btn-search {
  flex-shrink: 0;
  margin: 0;
  min-width: 4.1rem;
  padding: 0.3rem 0.8rem 0.32rem 0.85rem;
  min-height: 34px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  letter-spacing: 0.02em;
}

.app-search-top__bar--result {
  display: flex;
  align-items: center;
  padding-left: 0.1rem;
  padding-right: 0.15rem;
}

.app-search-top__q {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.2rem;
}

.app-search-top__q-spacer {
  width: 2.1rem;
  flex-shrink: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 与固定顶栏下沿对齐；不在此处重复加 sat（已在 --app-search-header-total 中经 header-pt 体现） */
.app-search-page__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--app-search-header-total);
  padding-left: max(0.65rem, var(--app-search-sal));
  padding-right: max(0.65rem, var(--app-search-sar));
  padding-bottom: calc(0.5rem + var(--app-search-sab));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  box-sizing: border-box;
}

/* 结果态与发现态使用同一主区顶距，仅顶栏子布局切换，避免内容跳动 */
body.app-search-standalone--result .app-search-page__main {
  padding-top: var(--app-search-header-total);
}

.app-search-suggest {
  flex-shrink: 0;
  margin-top: 0.35rem;
  margin-bottom: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.14);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(48vh, 340px);
  max-height: min(48dvh, 340px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: manipulation;
}

.app-search-suggest.hidden,
body.app-search-standalone--result .app-search-suggest {
  display: none !important;
}

.app-search-suggest__hint {
  margin: 0;
  padding: 0.65rem 0.75rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}

.app-search-suggest__hint.hidden {
  display: none !important;
}

.app-search-suggest__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-search-suggest__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.72rem 0.75rem;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  text-align: left;
  font-size: 0.9375rem;
  color: #0f172a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-search-suggest__item:last-child {
  border-bottom: none;
}

.app-search-suggest__item:hover,
.app-search-suggest__item:focus-visible {
  background: #f8fafc;
}

.app-search-suggest__item:active {
  background: #f1f5f9;
}

.app-search-suggest__ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #94a3b8;
}

.app-search-suggest__ico svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.app-search-suggest__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.app-search-suggest__hl {
  color: #1677ff;
  background: transparent;
  font-weight: 800;
}

.app-search-suggest__tag {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}

.app-search-discover {
  margin-bottom: 0.5rem;
}

.app-search-discover.hidden {
  display: none !important;
}

.app-search-history {
  margin-bottom: 0.75rem;
  background: #fff;
  border-radius: 12px;
  padding: 0.55rem 0.6rem 0.65rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.app-search-history__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.app-search-history__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.app-search-history__trash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  border: none;
  background: #f1f5f9;
  border-radius: 10px;
  color: #64748b;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.app-search-history__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.app-search-history__chip {
  max-width: 100%;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-search-hot-cols {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  background: #fff;
  border-radius: 12px;
  padding: 0.55rem 0.5rem 0.65rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.app-search-hot-col {
  flex: 1 1 0;
  min-width: 0;
}

.app-search-hot-col__title {
  margin: 0 0 0.4rem 0.1rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.app-search-hot-col__emoji {
  font-size: 0.82rem;
  line-height: 1;
}

.app-search-hot-col__ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-search-hot__li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.28rem;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0.1rem 0.04rem;
  border-radius: 6px;
}

.app-search-hot__li:hover,
.app-search-hot__li:focus-visible {
  background: #f8fafc;
  outline: none;
}

.app-search-hot__li:active {
  background: #f1f5f9;
}

.app-search-hot__rank {
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
  text-align: center;
  line-height: 1.35;
}

.app-search-hot__rank--top {
  color: #f97316;
}

.app-search-hot__text {
  flex: 1;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #334155;
  line-height: 1.35;
}

.app-search-page-results {
  flex: 1 1 auto;
  min-height: 0;
}

.app-search-page-results__inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem !important;
}

.app-search-standalone .app-search-page-section__title {
  margin: 0.5rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-search-standalone .app-search-page-section__title:first-of-type {
  margin-top: 0.15rem;
}

/* 蜀哥库列表样式见上与 flbz 共用的 .app-flbz-list-section--home-lib；不单独覆盖 home-lib-card */

.app-search-standalone .app-search-page-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem !important;
  margin-bottom: 0.45rem;
}

.app-search-standalone .app-search-page-rows .app-search-row--v2 {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
}

.app-search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 1.25rem;
  text-align: center;
}

.app-search-empty-state__illu {
  width: 88px;
  height: 88px;
  margin: 0 auto 0.5rem;
  color: #cbd5e1;
}

.app-search-empty-state__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-secondary);
  max-width: 20rem;
}

.home-v2-tools {
  margin-bottom: 1rem;
}

/* 首页：消人声 / 消伴奏 大按钮 — 同属蓝色系，色相略作区分避免糊成一块 */
.home-v2-ai-row__btn {
  min-height: 96px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s ease, transform 0.12s ease;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 14px rgba(22, 119, 255, 0.32);
}

.home-v2-ai-row__btn:focus,
.home-v2-ai-row__btn:focus-visible {
  outline: none !important;
}

.home-v2-ai-row__btn:active {
  transform: scale(0.985);
  filter: brightness(0.94);
}

/* 偏靛蓝：消人声做伴奏 */
.home-v2-ai-row__btn--vocal {
  background: linear-gradient(145deg, #1e4fd4 0%, #1677ff 42%, #4096ff 100%);
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
}

/* 偏天青 / 湖蓝：消伴奏保留人声（与左侧靛蓝按钮区分，仍属蓝色系） */
.home-v2-ai-row__btn--accomp {
  background: linear-gradient(145deg, #0369a1 0%, #0c8ce8 40%, #0ea5e9 72%, #7dd3fc 100%);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.32);
}

/* 消人声 / 消伴奏 一行：与四宫格留缝、两卡间距适中（邻项 margin，旧内核兼容） */
body.app-home-v2 .home-v2-ai-row,
body.app-home-page .home-v2-ai-row {
  column-gap: 0 !important;
  row-gap: 0.65rem !important;
  margin-left: 0;
  margin-right: 0;
}

.home-v2-tools .home-v2-ai-row {
  margin-top: 1.05rem;
}

body.app-home-v2 .home-v2-ai-row > .home-v2-ai-row__btn + .home-v2-ai-row__btn,
body.app-home-page .home-v2-ai-row > .home-v2-ai-row__btn + .home-v2-ai-row__btn {
  margin-left: 0.5rem;
}

@media (max-width: 360px) {
  body.app-home-v2 .home-v2-ai-row > .home-v2-ai-row__btn + .home-v2-ai-row__btn,
  body.app-home-page .home-v2-ai-row > .home-v2-ai-row__btn + .home-v2-ai-row__btn {
    margin-left: 0.42rem;
  }
}

/* 仅平板：人声分离行与上方四宫格 */
@media (min-width: 768px) {
  body.app-home-v2 .home-v2-tools .home-v2-ai-row,
  body.app-home-page .home-v2-tools .home-v2-ai-row {
    margin-top: 1.25rem !important;
  }

  .home-v2-tools {
    margin-bottom: 1.2rem;
  }
}

/* 首页：节拍器入口（接在 AI 人声/伴奏卡片下方） */
.home-v2-metro-tile {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  width: 100%;
  min-height: 5.1rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(24, 144, 255, 0.42);
  text-decoration: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
  background: linear-gradient(125deg, #38bdf8 0%, #0ea5e9 38%, #0284c7 72%, #0369a1 100%);
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.home-v2-metro-tile:active {
  transform: scale(0.985);
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.45);
}

.home-v2-metro-tile__ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.home-v2-metro-tile__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.home-v2-metro-tile__text {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  text-align: left;
  min-width: 0;
}

.home-v2-metro-tile__title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.home-v2-metro-tile__sub {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.94;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.home-v2-metro-tile__arrow {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

.home-v2-metro-tile__arrow-svg {
  display: block;
}

/* 节拍器与 AI 行间距：仅平板略加大，与手机 0.75rem 区分 */
@media (min-width: 768px) {
  .home-v2-metro-tile {
    margin-top: 1.2rem;
  }
}

@media (max-width: 360px) {
  .home-v2-metro-tile {
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    min-height: 4.85rem;
  }

  .home-v2-metro-tile__ico {
    width: 2.75rem;
    height: 2.75rem;
  }

  .home-v2-metro-tile__title {
    font-size: 1rem;
  }

  .home-v2-metro-tile__sub {
    font-size: 0.72rem;
  }
}

.home-v2-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}

@media (max-width: 360px) {
  .home-v2-tool-grid {
    gap: 0.35rem;
  }
  .home-v2-card {
    padding: 0.5rem 0.2rem 0.55rem;
    min-height: 4.1rem;
  }
  .home-v2-card__ico {
    font-size: 1.15rem;
  }
  .home-v2-card__txt {
    font-size: 0.65rem;
  }
}

.home-v2-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 4.35rem;
  padding: 0.55rem 0.25rem 0.6rem;
  border-radius: 14px;
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 14px rgba(64, 169, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.home-v2-card:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(64, 169, 255, 0.4);
}

.home-v2-card__ico {
  font-size: 1.35rem;
  line-height: 1;
}

.home-v2-card__txt {
  font-size: 0.875rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.home-v2-card--blue,
.home-v2-card--orange,
.home-v2-card--purple,
.home-v2-card--teal {
  background: linear-gradient(145deg, #40a9ff 0%, #1890ff 100%);
  border: 1px solid rgba(24, 144, 255, 0.55);
}

.home-v2-guide {
  margin: 0.75rem 0 1rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-secondary);
}

@media (min-width: 600px) {
  .home-v2-guide {
    margin: 1rem 0 1.2rem;
  }
}

@media (min-width: 768px) {
  .home-v2-guide {
    margin: 1.1rem 0 1.35rem;
  }
}

.app-site-hint-nudge {
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.28);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.88) 0%, rgba(255, 255, 255, 0.94) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.home-v2-section {
  margin-bottom: 1.25rem;
}

.home-v2-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  padding: 0 0.05rem;
}

.home-v2-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.home-v2-section__more {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
}

.home-v2-section__more:active {
  opacity: 0.85;
}

/* ========== 首页伴奏分类横向滚动 ========== */
.home-categories-section {
  margin-bottom: 1rem;
}

.home-categories-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -0.75rem;
  padding: 0 0.75rem;
}

.home-categories-scroll::-webkit-scrollbar {
  display: none;
}

.home-categories-track {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.home-category-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 7.5rem;
  min-height: 5.5rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, #40a9ff 0%, #e6f4ff 100%);
  border-radius: 12px;
  text-decoration: none;
  color: #1F2937;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.home-category-card:active {
  transform: scale(0.96);
}

.home-category-card__icon {
  font-size: 2rem;
  line-height: 1;
  opacity: 0.6;
}

.home-category-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1F2937;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
}

.home-category-card__desc {
  display: block;
  margin: 0;
  padding: 0 0.15rem;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(31, 41, 55, 0.52);
  text-align: center;
  max-width: 6.9rem;
}

/* 首页一级→二级分类折叠（与旧分类卡同系配色，适合中老年点击 ≥48px） */
.home-catalog-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.home-catalog-acc {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f3f5 0%, var(--page-bg-soft) 100%);
  border: 1px solid rgba(15, 23, 42, 0.1);
}

/* 首页：分类卡片与精选列表卡统一 12px 圆角 + 轻阴影，层次更一致 */
.app-home-page .home-categories-section .home-catalog-acc {
  border-radius: 12px;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-home-page .home-categories-section .home-catalog-tier2-panel {
  border-radius: 12px;
  box-shadow:
    0 1px 4px rgba(15, 23, 42, 0.05),
    0 1px 2px rgba(15, 23, 42, 0.03);
}

.home-catalog-acc.is-open {
  box-shadow: 0 2px 8px rgba(64, 169, 255, 0.2);
}

.home-catalog-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1F2937;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-catalog-acc__head:active {
  opacity: 0.92;
}

.home-catalog-acc__chev {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #40a9ff;
  transition: transform 0.2s ease;
}

.home-catalog-acc.is-open .home-catalog-acc__chev {
  transform: rotate(-180deg);
}

.home-catalog-acc__panel {
  padding: 0 0.75rem 0.85rem;
}

.home-catalog-acc__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.home-catalog-acc__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1F2937;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(64, 169, 255, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.home-catalog-acc__pill:active {
  transform: scale(0.98);
  background: #fff;
}

/* ========== 首页/歌单 伴奏分类卡片 v2（与 home-v2-card 工具条统一，一级四色） ========== */
.home-catalog-v2 {
  width: 100%;
}

.home-catalog-v2__inner {
  width: 100%;
}

/* 首页一级：四格等宽等高，与上方工具区同列宽逻辑 */
.home-catalog-tier1-grid {
  margin-bottom: 0;
}

.home-catalog-tier1-grid--home {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: stretch;
  width: 100%;
}

@media (max-width: 359px) {
  .home-catalog-tier1-grid--home {
    gap: 0.35rem;
  }
}

/* 首页：一级分类横向滑动、两端淡白渐变；窄屏可滑，极宽时恢复四列等分（由 JS 切换 --fit） */
.app-home-page .home-catalog-tier1-row-outer {
  position: relative;
  width: 100%;
  margin: 0;
}

.app-home-page .home-catalog-tier1-row {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0 4px;
}

.app-home-page .home-catalog-tier1-row::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

.app-home-page .home-catalog-tier1-row-outer::before,
.app-home-page .home-catalog-tier1-row-outer::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 6px;
  width: 40px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.app-home-page .home-catalog-tier1-row-outer::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 100%);
}

.app-home-page .home-catalog-tier1-row-outer::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 100%);
}

.app-home-page .home-catalog-tier1-row-outer--scrollable:not(.home-catalog-tier1-row-outer--at-start)::before {
  opacity: 1;
}

.app-home-page .home-catalog-tier1-row-outer--scrollable:not(.home-catalog-tier1-row-outer--at-end)::after {
  opacity: 1;
}

.app-home-page .home-catalog-tier1-row-outer--noscroll::before,
.app-home-page .home-catalog-tier1-row-outer--noscroll::after {
  opacity: 0;
}

/* 可滑动：卡片固定宽度，一行横滑 */
.app-home-page .home-catalog-tier1-row .home-catalog-tier1-grid--home:not(.home-catalog-tier1-grid--home--fit) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: none;
  box-sizing: border-box;
  margin-bottom: 0;
  gap: 0.45rem;
}

.app-home-page .home-catalog-tier1-row .home-catalog-tier1-grid--home:not(.home-catalog-tier1-grid--home--fit) > .home-catalog-tier1-block {
  flex: 0 0 5.95rem;
  width: 5.95rem;
  max-width: 5.95rem;
}

@media (min-width: 400px) {
  .app-home-page .home-catalog-tier1-row .home-catalog-tier1-grid--home:not(.home-catalog-tier1-grid--home--fit) > .home-catalog-tier1-block {
    flex: 0 0 6.2rem;
    width: 6.2rem;
    max-width: 6.2rem;
  }
}

/* 无需滑动：四格等分（与原先网格一致） */
.app-home-page .home-catalog-tier1-row .home-catalog-tier1-grid--home--fit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: 0.45rem;
}

.app-home-page .home-catalog-tier1-row .home-catalog-tier1-grid--home--fit > .home-catalog-tier1-block {
  width: auto;
  max-width: none;
  min-width: 0;
}

/* 标题略大、副标题略小+疏朗；图标与多行文字整体垂直居中 */
.app-home-page .home-catalog-tier1-btn--home.home-v2-card {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.36rem;
  min-height: 6.85rem;
  padding: 0.45rem 0.32rem 0.5rem;
}

.app-home-page .home-catalog-tier1-icoWrap {
  margin-bottom: 0.02rem;
}

.app-home-page .home-catalog-tier1-titleText {
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  word-break: normal;
  hyphens: none;
}

@media (min-width: 400px) {
  .app-home-page .home-catalog-tier1-titleText {
    font-size: 0.875rem;
  }
}

.app-home-page .home-catalog-tier1-sub {
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  padding: 0.08rem 0.12rem 0;
  margin-top: 0.1rem;
}

@media (min-width: 400px) {
  .app-home-page .home-catalog-tier1-sub {
    font-size: 0.56rem;
  }
}

.home-catalog-tier1-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-catalog-tier1-grid--home > .home-catalog-tier1-block {
  min-height: 0;
}

/* 首页专用：卡片 100% 铺满格子，统一圆角/内边距/最小高度 */
.home-catalog-tier1-btn--home.home-v2-card {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-height: 7rem;
  padding: 0.48rem 0.28rem 0.52rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
}

.home-catalog-tier1-icoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
}

.home-catalog-tier1-btn--home .home-catalog-tier1-ico {
  font-size: 1.28rem;
  line-height: 1;
}

@media (min-width: 400px) {
  .home-catalog-tier1-btn--home .home-catalog-tier1-ico {
    font-size: 1.38rem;
  }
}

/* 一级标题行（已去掉展开箭头，独占一行居中） */
.home-catalog-tier1-titleRow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.home-catalog-tier1-titleText {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
}

@media (min-width: 400px) {
  .home-catalog-tier1-titleText {
    font-size: 0.78rem;
  }
}

.home-catalog-tier1-sub {
  display: block;
  margin: 0;
  padding: 0 0.18rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  max-width: 100%;
  flex-shrink: 0;
}

@media (min-width: 400px) {
  .home-catalog-tier1-sub {
    font-size: 0.64rem;
  }
}

/* 仅分类区四色，不改变上方四个工具按钮 */
.home-catalog-tier1-btn.home-v2-card--teal {
  background: linear-gradient(145deg, #36cfc9 0%, #13c2c2 100%) !important;
  border: 1px solid rgba(19, 194, 194, 0.55) !important;
  box-shadow: 0 4px 14px rgba(19, 194, 194, 0.32) !important;
}

.home-catalog-tier1-btn.home-v2-card--blue {
  background: linear-gradient(145deg, #40a9ff 0%, #1890ff 100%) !important;
  border: 1px solid rgba(24, 144, 255, 0.55) !important;
  box-shadow: 0 4px 14px rgba(64, 169, 255, 0.28) !important;
}

.home-catalog-tier1-btn.home-v2-card--orange {
  background: linear-gradient(145deg, #ffc069 0%, #fa8c16 100%) !important;
  border: 1px solid rgba(250, 140, 22, 0.55) !important;
  box-shadow: 0 4px 14px rgba(250, 140, 22, 0.28) !important;
}

.home-catalog-tier1-btn.home-v2-card--purple {
  background: linear-gradient(145deg, #b37feb 0%, #722ed1 100%) !important;
  border: 1px solid rgba(114, 46, 209, 0.5) !important;
  box-shadow: 0 4px 14px rgba(114, 46, 209, 0.28) !important;
}

.home-catalog-tier1-btn.is-open {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 4px 16px rgba(24, 144, 255, 0.35) !important;
}

.home-catalog-tier2-panel {
  margin-top: 0.65rem;
  padding: 0.65rem 0.5rem;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--page-bg-soft) 0%, #ffffff 100%);
  border: 1px solid rgba(15, 23, 42, 0.1);
}

/* 首页：二级区顶部向上的三角，对准当前展开的大类卡片列中心 */
.home-catalog-tier2-panel--has-pointer {
  position: relative;
  --cat-pointer-left: 12.5%;
  margin-top: 0.6rem;
  padding-top: 0.72rem;
}

.home-catalog-tier2-pointer {
  position: absolute;
  left: var(--cat-pointer-left);
  top: 0;
  transform: translate(-50%, -100%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent var(--page-bg-soft) transparent;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 -1px 0 rgba(64, 169, 255, 0.35));
}

.home-catalog-tier2-panel--embed {
  margin-top: 0.5rem;
}

.home-catalog-tier2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(3.25rem, auto);
  gap: 0.5rem;
  align-items: stretch;
}

@media (min-width: 420px) {
  .home-catalog-tier2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-catalog-tier2-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 3.25rem;
  height: 100%;
  padding: 0.5rem 0.45rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.28;
  text-decoration: none;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(64, 169, 255, 0.28);
  border: 1px solid rgba(24, 144, 255, 0.45);
  background: linear-gradient(145deg, #40a9ff 0%, #1890ff 100%);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.home-catalog-tier2-link:active {
  transform: scale(0.97);
}

.home-catalog-tier2-link--b {
  background: linear-gradient(145deg, #36cfc9 0%, #13c2c2 100%) !important;
  border-color: rgba(19, 194, 194, 0.45) !important;
  box-shadow: 0 4px 14px rgba(19, 194, 194, 0.25) !important;
}

.home-catalog-tier2-link--c {
  background: linear-gradient(145deg, #ffc069 0%, #fa8c16 100%) !important;
  border-color: rgba(250, 140, 22, 0.45) !important;
  box-shadow: 0 4px 14px rgba(250, 140, 22, 0.25) !important;
}

.home-catalog-tier2-link--d {
  background: linear-gradient(145deg, #b37feb 0%, #722ed1 100%) !important;
  border-color: rgba(114, 46, 209, 0.45) !important;
  box-shadow: 0 4px 14px rgba(114, 46, 209, 0.22) !important;
}

.home-catalog-tier2-link--e {
  background: linear-gradient(145deg, #69c0ff 0%, #096dd9 100%) !important;
  border-color: rgba(9, 109, 217, 0.45) !important;
}

.home-catalog-tier2-link--f {
  background: linear-gradient(145deg, #95de64 0%, #52c41a 100%) !important;
  border-color: rgba(82, 196, 26, 0.45) !important;
  box-shadow: 0 4px 14px rgba(82, 196, 26, 0.22) !important;
}

.home-catalog-tier2-link.is-current {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 4px 14px rgba(24, 144, 255, 0.45);
}

/* 歌单页顶部分类条 */
.app-flbz-catalog-wrap {
  padding: 0 var(--space-page-x, 0.75rem);
  margin-bottom: 0.65rem;
}

/* flbz 歌单页：与首页相同的分类卡片 + 下箭头 */
.app-flbz-catalog-wrap.home-catalog-v2 {
  box-sizing: border-box;
  width: 100%;
}

.app-flbz-catalog {
  width: 100%;
}

.app-flbz-catalog__hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.home-catalog-tier1-grid--compact .home-catalog-tier1-btn--compact {
  min-height: 3.75rem;
  padding: 0.4rem 0.15rem 0.45rem;
}

.home-catalog-tier1-grid--compact .home-catalog-tier1-btn--compact .home-v2-card__ico {
  font-size: 1.15rem;
}

.home-catalog-tier1-grid--compact .home-catalog-tier1-btn--compact .home-v2-card__txt {
  font-size: 0.62rem;
  line-height: 1.15;
}

.home-catalog-tier1-btn.is-current-tier1 {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 4px 16px rgba(24, 144, 255, 0.35) !important;
}

/* ========== 收藏页面样式 ========== */
.app-favorites-page {
  padding: 1rem var(--space-page-x);
}

/* 我的私有伴奏等：复用 .app-favorites-page 但未套 app-my-favorites-page 时同样限宽容器 */
body.app-shell:not(.app-my-favorites-page) > main.app-favorites-page {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-bottom: 5.5rem;
}

@media (min-width: 768px) {
  body.app-shell:not(.app-my-favorites-page) > main.app-favorites-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 收藏页搜索栏 */
.app-favorites-searchbar {
  margin-bottom: 0.75rem;
}

.app-favorites-search__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.app-favorites-search__icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.app-favorites-search__input {
  width: 100%;
  padding: 0.625rem 2.25rem 0.625rem 2.5rem;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
}

.app-favorites-search__input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(64, 169, 255, 0.1);
}

.app-favorites-search__input::placeholder {
  color: var(--text-muted);
}

.app-favorites-search__clear {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--text-muted);
  background: #F3F4F6;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-favorites-search__clear:hover {
  background: #E5E7EB;
  color: var(--text);
}

.app-favorites-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.app-favorites-toolbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-favorites-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
}

.app-checkbox-input {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}

.app-favorites-count {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.app-favorites-sort {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 6px;
  cursor: pointer;
  min-width: 6rem;
}

.app-btn-batch-delete {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  border: 1px solid rgba(24, 144, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-btn-batch-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-btn-batch-delete:not(:disabled):active {
  transform: scale(0.98);
}

.app-btn-batch-export {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-dark);
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-btn-batch-export:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-btn-batch-export:not(:disabled):active {
  transform: scale(0.98);
  background: var(--brand-soft);
}

.app-wdsybz-hint {
  margin: 0 0 0.75rem;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.app-wdsybz-toolbar__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-favorites-list-section {
  margin-top: 0.5rem;
}

.app-favorites-list-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  display: none;
}

.app-favorites-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-favorites-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-favorites-item:hover {
  border-color: var(--brand);
}

.app-favorites-item:active {
  transform: scale(0.995);
}

.app-favorites-item__checkbox {
  flex-shrink: 0;
}

.app-favorites-item__input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
  cursor: pointer;
}

.app-favorites-item__body {
  flex: 1;
  min-width: 0;
}

.app-favorites-item__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.app-favorites-item__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-favorites-item__type {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
}

.app-favorites-item__meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-favorites-item__actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

.app-favorites-item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #9CA3AF;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-favorites-item__btn:hover {
  background: #F3F4F6;
}

.app-favorites-item__btn:active {
  transform: scale(0.95);
}

.app-favorites-item__btn--delete:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

.app-favorites-item__btn--download:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.app-favorites-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.app-favorites-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brand-mid, #1890ff);
  background: rgba(var(--brand-core-rgb), 0.1);
  border: 1px solid rgba(var(--brand-core-rgb), 0.2);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  opacity: 1;
}

.app-favorites-empty__text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.app-favorites-empty__sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.app-favorites-empty__btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.app-favorites-empty__btn:active {
  transform: scale(0.98);
}

/* ========== 我的收藏页：与 play / 上传页卡片·浅湖蓝体系统一 ========== */
.app-my-favorites-page .app-favorites-page {
  max-width: var(--app-viewport-usable-x);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem var(--space-page-x) 1.25rem;
}

@media (min-width: 768px) {
  .app-my-favorites-page .app-favorites-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.app-my-favorites-page .app-favorites-searchbar {
  margin-bottom: 0.85rem;
}

.app-my-favorites-page .app-favorites-search__wrap {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.07), 0 1px 3px rgba(31, 41, 55, 0.05);
  box-sizing: border-box;
}

.app-my-favorites-page .app-favorites-search__icon {
  left: 1rem;
  color: var(--brand-mid);
}

.app-my-favorites-page .app-favorites-search__input {
  border: none;
  border-radius: 12px;
  padding: 0.65rem 2.35rem 0.65rem 2.65rem;
  font-size: 1rem;
  min-height: var(--touch-min);
  background: transparent;
  transition: none;
}

.app-my-favorites-page .app-favorites-search__input:focus {
  box-shadow: inset 0 0 0 2px rgba(var(--brand-core-rgb), 0.2);
}

.app-my-favorites-page .app-favorites-search__clear {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.25rem;
  transition: none;
}

.app-my-favorites-page .app-favorites-toolbar {
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  margin-bottom: 0.85rem;
}

.app-my-favorites-page .app-favorites-toolbar__right {
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-my-favorites-page .app-checkbox-wrap {
  font-size: 1rem;
}

.app-my-favorites-page .app-checkbox-input {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
}

.app-my-favorites-page .app-favorites-count {
  font-size: 1rem;
  color: var(--text-secondary);
}

.app-my-favorites-page .app-favorites-sort {
  padding: 0.5rem 0.85rem;
  font-size: 1rem;
  font-weight: 500;
  min-height: 2.75rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--brand-core-rgb), 0.45);
  color: var(--text);
  background: var(--surface);
  min-width: 6.75rem;
  cursor: pointer;
  transition: none;
}

.app-my-favorites-page .app-btn-batch-delete {
  border-radius: 12px;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  box-shadow: 0 2px 10px rgba(var(--brand-core-rgb), 0.22);
  border: none;
  transition: none;
}

.app-my-favorites-page .app-btn-batch-delete:disabled {
  opacity: 0.48;
  box-shadow: none;
}

.app-my-favorites-page .app-btn-batch-delete:not(:disabled):active {
  opacity: 0.92;
  transform: none;
}

.app-my-favorites-page .app-favorites-list-section {
  margin-top: 0.35rem;
}

.app-my-favorites-page .app-favorites-list {
  gap: 0.85rem;
}

.app-my-favorites-page .app-favorites-item {
  border-radius: 12px;
  padding: 1rem 1rem;
  border: 1px solid var(--border-input);
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.065), 0 1px 3px rgba(31, 41, 55, 0.04);
  transition: none;
  gap: 0.85rem;
}

.app-my-favorites-page .app-favorites-item:hover {
  border-color: rgba(var(--brand-core-rgb), 0.35);
}

.app-my-favorites-page .app-favorites-item:active {
  transform: none;
}

.app-my-favorites-page .app-favorites-item__input {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
}

.app-my-favorites-page .app-favorites-item__main {
  margin-bottom: 0.35rem;
  gap: 0.55rem;
}

.app-my-favorites-page .app-favorites-item__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-my-favorites-page .app-favorites-item__type {
  font-size: 1rem;
  padding: 0.2rem 0.55rem;
  font-weight: 500;
}

.app-my-favorites-page .app-favorites-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.app-my-favorites-page .app-favorites-item__meta--detail {
  color: #94a3b8;
  font-weight: 400;
}

.app-my-favorites-page .app-favorites-item__actions {
  gap: 0.5rem;
}

.app-my-favorites-page .app-favorites-item__btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  transition: none;
}

.app-my-favorites-page .app-favorites-item__btn:active {
  transform: none;
  opacity: 0.9;
}

.app-my-favorites-page .app-favorites-item__btn--download {
  color: #fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.22);
  border: none;
}

.app-my-favorites-page .app-favorites-item__btn--download:hover {
  color: #fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  opacity: 0.95;
}

.app-my-favorites-page .app-favorites-item__btn--download svg {
  stroke: #fff;
}

.app-my-favorites-page .app-favorites-item__btn--delete {
  color: #9ca3af;
  background: rgba(243, 244, 246, 0.95);
  border: 1px solid var(--border-input);
}

.app-my-favorites-page .app-favorites-item__btn--delete svg {
  stroke: #9ca3af;
}

.app-my-favorites-page .app-favorites-item__btn--delete:hover {
  color: #9ca3af;
  background: #e5e7eb;
}

.app-my-favorites-page .app-favorites-item__btn--delete:hover svg {
  stroke: #9ca3af;
}

.app-my-favorites-page .app-favorites-empty__text {
  font-size: 1.25rem;
}

.app-my-favorites-page .app-favorites-empty__sub {
  font-size: 1rem;
  line-height: 1.5;
}

.app-my-favorites-page .app-favorites-empty__btn {
  border-radius: 12px;
  min-height: var(--touch-min);
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  box-shadow: 0 2px 12px rgba(var(--brand-core-rgb), 0.28);
  transition: none;
}

.app-my-favorites-page .app-favorites-empty__btn:active {
  transform: none;
  opacity: 0.93;
}

/* 收藏页紧凑字号（需求：标题/栏/列表略缩小，仍可读） */
body.app-my-favorites-page.app-favorites-compact .app-topbar__title {
  font-size: 1rem;
  line-height: 1.35;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-search__input {
  font-size: 0.875rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-search__input::placeholder {
  font-size: 0.875rem;
}

body.app-my-favorites-page.app-favorites-compact .app-checkbox-wrap {
  font-size: 0.875rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-count {
  font-size: 0.875rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-sort {
  font-size: 0.875rem;
}

body.app-my-favorites-page.app-favorites-compact .app-btn-batch-delete {
  font-size: 0.875rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-item__title {
  font-size: 0.9375rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-item__type {
  font-size: 0.75rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-item__meta {
  font-size: 0.75rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-item__meta--favdate {
  font-size: 0.7rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-item__btn {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-item__btn--delete svg {
  width: 17px;
  height: 17px;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-empty__text {
  font-size: 1.0625rem;
}

body.app-my-favorites-page.app-favorites-compact .app-favorites-empty__sub {
  font-size: 0.875rem;
}

/* 模态弹窗 */
.app-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-modal__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.app-modal__panel {
  position: relative;
  width: 90%;
  max-width: 320px;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.app-modal__title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.app-modal__text {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.app-modal__text--left {
  text-align: left;
}

.app-modal__panel--rename {
  width: 92%;
  max-width: 380px;
  text-align: left;
}

.app-modal__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.app-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
}

.app-modal__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.app-modal__btn-confirm {
  flex: 1;
}

.app-modal__actions {
  display: flex;
}

.app-modal__actions > * + * {
  margin-left: 0.75rem;
}

/* 旧 Android：Tailwind inset-0 / CSS inset 无效时进度层铺不满；消人声/消伴奏页 #overlayProcess */
#overlayProcess {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 截取弹窗内「处理中」遮罩（页面内联曾用 inset:0） */
#myAccTrimModal .myacc-trim__busy {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.app-modal__panel--trim {
  width: 94%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  text-align: left;
  box-sizing: border-box;
}

/* AI 工具页进度文案：flex gap 同上旧系统不认时用竖间距 */
body.app-my-tools-page .ai-sep-overlay-text-stack {
  gap: 0 !important;
}

body.app-my-tools-page .ai-sep-overlay-text-stack > * + * {
  margin-top: 0.75rem;
}

.app-btn-secondary {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-btn-danger {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: var(--danger);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-btn-secondary:active,
.app-btn-danger:active {
  transform: scale(0.98);
}

/* ========== 分类列表页样式 ========== */
/* flbz 二维歌单：极简顶部分类（与首页大卡分离） */
.app-flbz-cat-compact-root {
  margin-bottom: 0.5rem;
}

.app-flbz-cat-compact {
  width: 100%;
  box-sizing: border-box;
}

.app-flbz-cat-t1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.12rem;
  margin-bottom: 0.42rem;
}

.app-flbz-cat-t1__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  height: 2.2rem;
  min-height: 2.2rem;
  padding: 0 0.12rem;
  box-sizing: border-box;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-flbz-cat-t1__tab.is-active {
  color: #fff;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-mid) 100%);
  border-color: var(--brand-border);
  box-shadow: none;
}

.app-flbz-cat-t1__chev {
  flex-shrink: 0;
  font-size: 0.52rem;
  line-height: 1;
  opacity: 0.95;
}

.app-flbz-cat-t1__tab:not(.is-active) .app-flbz-cat-t1__chev {
  color: var(--text-muted);
}

.app-flbz-cat-t1__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  min-width: 0;
  text-align: center;
}

.app-flbz-cat-t2 {
  background: var(--brand-softer);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  padding: 0.45rem 0.28rem;
  box-shadow: none;
}

.app-flbz-cat-t2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.12rem;
}

.app-flbz-cat-t2__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.26rem 0.2rem;
  box-sizing: border-box;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.app-flbz-cat-t2__cell:active {
  transform: scale(0.98);
}

.app-flbz-cat-t2__cell.is-current {
  color: #fff;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-mid) 100%);
  border-color: var(--brand-border);
}

body.app-flbz-tier-catalog .app-flbz-page {
  padding-top: 0.72rem;
  padding-bottom: 5.25rem;
}

/* 与 .app-flbz-search 同宽：去掉分类容器多余左右内边距（避免相对搜索栏缩进一截） */
body.app-flbz-tier-catalog .app-flbz-catalog-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0.42rem;
}

body.app-flbz-tier-catalog .app-flbz-search {
  margin-bottom: 0.62rem;
}

body.app-flbz-tier-catalog .app-flbz-list-section {
  margin-top: 0.35rem;
}

.app-flbz-page {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem var(--space-page-x) 5.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .app-flbz-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.app-flbz-search {
  margin-bottom: 0.8rem;
}

.app-flbz-tags {
  margin-bottom: 1rem;
}

/* 分类页 Type 标签：与首页一致的左右淡色渐变，暗示横滑 */
#flbzPage .app-flbz-tags--edge-fade {
  position: relative;
  margin-bottom: 1.05rem;
}

#flbzPage .app-flbz-tags--edge-fade::before,
#flbzPage .app-flbz-tags--edge-fade::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0.25rem;
  width: 28px;
  z-index: 1;
  pointer-events: none;
}

#flbzPage .app-flbz-tags--edge-fade::before {
  left: 0;
  background: linear-gradient(90deg, var(--page-bg, #f5f7fa) 0%, rgba(245, 247, 250, 0) 100%);
}

#flbzPage .app-flbz-tags--edge-fade::after {
  right: 0;
  background: linear-gradient(270deg, var(--page-bg, #f5f7fa) 0%, rgba(245, 247, 250, 0) 100%);
}

.app-flbz-tags__list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0.2rem 0.25rem;
  position: relative;
  z-index: 0;
}

.app-flbz-tags__list::-webkit-scrollbar {
  display: none;
}

.app-flbz-tag {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.app-flbz-tag.is-active {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand);
}

.app-flbz-tag:active {
  transform: scale(0.96);
}

.app-flbz-list-section {
  margin-top: 0.4rem;
}

.app-flbz-count {
  margin: 0 0 0.45rem;
  padding: 0.18rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  line-height: 1.35;
}

.app-flbz-list-title {
  display: none;
}

.app-flbz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.app-flbz-scroll-sentinel {
  list-style: none;
  height: 2px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.app-flbz-loading-more {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.app-flbz-loading-more.hidden {
  display: none !important;
}

.app-flbz-loading-more__spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(var(--brand-core-rgb), 0.25);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: home-lib-spin 0.75s linear infinite;
}

.app-flbz-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: 6.75rem;
  padding: 0.7rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-flbz-item:hover {
  border-color: var(--brand);
}

.app-flbz-item:active {
  transform: scale(0.995);
}

/* 分类列表：体验 / 会员专享 彩色边框与轻量背景区分 */
.app-flbz-item--experience {
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-left: 3px solid #10b981;
  background: linear-gradient(100deg, rgba(16, 185, 129, 0.07) 0%, var(--surface) 46%);
  box-shadow: none;
}

.app-flbz-item--experience:hover {
  border-color: rgba(16, 185, 129, 0.52);
  border-left-color: #059669;
}

.app-flbz-item--member {
  border: 1px solid rgba(var(--brand-core-rgb), 0.32);
  border-left: 3px solid var(--brand);
  background: linear-gradient(100deg, var(--brand-soft) 0%, var(--surface) 46%);
  box-shadow: none;
}

.app-flbz-item--member:hover {
  border-color: rgba(var(--brand-core-rgb), 0.52);
  border-left-color: var(--brand-dark);
}

.app-flbz-item__play-area {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-right: 0.15rem;
}

.app-flbz-item__tag--corner {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  z-index: 1;
  max-width: min(9.5rem, calc(100% - 4.5rem));
}

.app-flbz-item__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1.35rem;
  padding: 0.12rem 0.38rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-flbz-item__tag--experience {
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid #047857;
  box-shadow: none;
}

.app-flbz-item__tag--member {
  color: var(--brand-dark);
  background: var(--surface);
  border: 1px solid var(--brand);
  box-shadow: none;
}

.app-flbz-item__ftype {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.app-flbz-item__main {
  flex: 1;
  min-width: 0;
}

.app-flbz-item__title {
  margin: 0 0 0.2rem;
  padding-right: 4.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 0.32rem;
  row-gap: 0.1rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--text);
}

.app-flbz-item__title-badge {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-weight: 700;
  color: var(--text-secondary);
}

.app-flbz-item__title-badge::-webkit-scrollbar {
  display: none;
}

.app-flbz-item__title-name {
  flex: 1 1 10rem;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  color: var(--text);
}

.app-flbz-item__title > .app-flbz-item__title-name:only-child {
  flex: 1 1 100%;
}

.app-flbz-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 100%;
}

.app-flbz-item__fav-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #E5E7EB;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-flbz-item__fav-btn:hover {
  background: #F3F4F6;
}

.app-flbz-item__fav-btn:active {
  transform: scale(0.95);
}

.app-flbz-item__fav-btn.is-favorited {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand);
}

.app-flbz-item__fav-btn.is-favorited svg {
  fill: var(--brand);
}

.app-flbz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.app-flbz-empty__icon {
  font-size: 3rem;
  color: var(--brand);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.app-flbz-empty__text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.app-flbz-empty__sub {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.app-flbz-loading,
.app-flbz-no-result {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

/* ========== 我的上传页面样式 ========== */
.app-upload-page {
  padding: 1rem var(--space-page-x);
}

.app-upload-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.app-upload-toolbar__search {
  position: relative;
}

.app-upload-search__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.app-upload-search__input {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2.5rem;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}

.app-upload-search__input:focus {
  border-color: var(--brand);
}

.app-upload-toolbar__actions {
  display: flex;
  gap: 0.5rem;
}

.app-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-btn-primary:active {
  transform: scale(0.98);
}

.app-upload-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}

.app-upload-error {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 8px;
  text-align: center;
}

.app-upload-batchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.app-upload-batchbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-upload-batchbar__right {
  display: flex;
  gap: 0.5rem;
}

/* 快捷操作栏 */
.app-upload-quickbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0.5rem;
  background: var(--brand-soft);
  border-radius: var(--radius-card);
  min-height: 2.5rem;
}

.app-upload-count {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.app-btn-export {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand);
  background: var(--brand-soft);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-btn-export:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-upload-list-section {
  margin-top: 0.5rem;
}

.app-upload-list-title {
  display: none;
}

.app-upload-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-upload-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-upload-item:hover {
  border-color: var(--brand);
}

.app-upload-item:active {
  transform: scale(0.995);
}

.app-upload-item--invalid {
  border-color: rgba(220, 38, 38, 0.35);
  background: #fef2f2;
}

.app-upload-item__invalid-badge {
  flex-shrink: 0;
  margin-left: 0.25rem;
  padding: 0.125rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b91c1c;
  background: rgba(254, 202, 202, 0.65);
  border-radius: 999px;
}

.app-upload-item__checkbox {
  flex-shrink: 0;
}

.app-upload-item__input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}

.app-upload-item__body {
  flex: 1;
  min-width: 0;
}

.app-upload-item__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.app-upload-item__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-upload-item__type {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
}

.app-upload-item__meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.app-upload-item__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.app-upload-item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #9CA3AF;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-upload-item__btn:hover {
  background: #F3F4F6;
}

.app-upload-item__btn--delete:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

.app-upload-item__btn--export:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.app-upload-item__btn--rename {
  font-size: 0.75rem;
  font-weight: 600;
  width: auto;
  min-width: 2.5rem;
  padding: 0 0.35rem;
  color: var(--text-muted);
}

.app-upload-item__btn--rename:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.app-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.app-upload-empty__icon {
  font-size: 3.25rem;
  margin-bottom: 1rem;
  opacity: 0.72;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.12)) drop-shadow(0 1px 2px rgba(15, 23, 42, 0.06));
}

.app-upload-empty__text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.app-upload-empty__sub {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* 缓存提示 */
.app-upload-notice {
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 10px;
}

.app-upload-notice__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #92400E;
}

.app-upload-notice__content svg {
  flex-shrink: 0;
  color: #F59E0B;
}

/* ========== 我的上传页：与 play.html 卡片/浅湖蓝体系统一 ========== */
.app-my-upload-page .app-upload-page {
  max-width: var(--app-viewport-usable-x);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem var(--space-page-x) 1.25rem;
}

@media (min-width: 768px) {
  .app-my-upload-page .app-upload-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.app-my-upload-page .app-upload-toolbar {
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.app-my-upload-page .app-upload-toolbar__search {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.07), 0 1px 3px rgba(31, 41, 55, 0.05);
  box-sizing: border-box;
}

.app-my-upload-page .app-upload-search__icon {
  left: 1rem;
  color: var(--brand-mid);
}

.app-my-upload-page .app-upload-search__input {
  border: none;
  border-radius: 12px;
  padding: 0.65rem 0.875rem 0.65rem 2.65rem;
  font-size: 1rem;
  min-height: var(--touch-min);
  background: transparent;
}

.app-my-upload-page .app-upload-search__input:focus {
  box-shadow: inset 0 0 0 2px rgba(var(--brand-core-rgb), 0.2);
}

.app-my-upload-page .app-upload-search__input::placeholder {
  color: var(--text-muted);
}

.app-my-upload-page .app-upload-toolbar__actions {
  width: 100%;
}

.app-my-upload-page .app-upload-toolbar__actions .app-btn-primary {
  flex: 1;
  justify-content: center;
  min-height: var(--touch-min);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  padding: 0.55rem 1rem;
  background: linear-gradient(180deg, #4f8ff7 0%, var(--brand) 42%, var(--brand-mid) 100%);
  box-shadow: 0 4px 16px rgba(var(--brand-core-rgb), 0.34), 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border: none;
}

.app-my-upload-page .app-upload-toolbar__actions .app-btn-primary:active {
  opacity: 0.93;
  transform: scale(0.99);
}

.app-my-upload-page .app-upload-hint {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 0.65rem;
}

.app-my-upload-page .app-upload-error {
  border-radius: 12px;
  font-size: 1rem;
  padding: 0.75rem 1rem;
}

.app-my-upload-page .app-upload-notice {
  margin-bottom: 0.75rem;
  padding: 0.42rem 0.65rem;
  border-radius: 12px;
  background: #fef3c7;
  border: 1px solid rgba(217, 119, 6, 0.45);
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.12);
}

.app-my-upload-page .app-upload-notice__content {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #92400e;
  font-weight: 500;
}

.app-my-upload-page .app-upload-batchbar {
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.app-my-upload-page .app-upload-batchbar__left {
  gap: 0.65rem;
}

.app-my-upload-page .app-checkbox-wrap {
  font-size: 1rem;
}

.app-my-upload-page .app-upload-count {
  font-size: 1rem;
  color: var(--text-secondary);
}

.app-my-upload-page .app-btn-batch-delete {
  border-radius: 12px;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  box-shadow: 0 2px 10px rgba(var(--brand-core-rgb), 0.22);
}

.app-my-upload-page .app-btn-batch-delete:disabled {
  opacity: 0.48;
  box-shadow: none;
}

.app-my-upload-page .app-upload-list-section {
  margin-top: 0.35rem;
}

.app-my-upload-page .app-upload-list {
  gap: 0.85rem;
}

.app-my-upload-page .app-upload-item {
  border-radius: 12px;
  padding: 1rem 1rem;
  border: 1px solid var(--border-input);
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.065), 0 1px 3px rgba(31, 41, 55, 0.04);
}

.app-my-upload-page .app-upload-item:active {
  transform: none;
}

.app-my-upload-page .app-upload-item__name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.app-my-upload-page .app-upload-item__type {
  font-size: 0.6875rem;
  padding: 0.1rem 0.4rem;
  font-weight: 500;
  color: var(--brand-dark);
  background: rgba(var(--brand-core-rgb), 0.1);
  border: 1px solid rgba(var(--brand-core-rgb), 0.22);
  border-radius: 999px;
}

.app-my-upload-page .app-upload-item__meta {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 400;
}

.app-my-upload-page .app-upload-item__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
}

.app-my-upload-page .app-upload-item__btn--rename {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--brand-mid);
  background: rgba(var(--brand-core-rgb), 0.08);
  border: 1px solid rgba(var(--brand-core-rgb), 0.2);
}

.app-my-upload-page .app-upload-item__btn--rename:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.app-my-upload-page .app-upload-item__rename-ico {
  display: block;
  pointer-events: none;
}

.app-my-upload-page .app-upload-empty__text {
  font-size: 1.0625rem;
}

.app-my-upload-page .app-upload-empty__sub {
  font-size: 1rem;
  max-width: 18rem;
}

/* ========== 个人中心页优化（浅湖蓝主题） ========== */
.app-user-page {
  padding: 1rem var(--space-page-x);
}

.app-panel--profile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 1rem;
}

.app-panel--profile .app-profile-layout {
  gap: 0.6rem;
}

.app-userbar__avatar {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  border: 2px solid var(--brand);
  border-radius: 50%;
  flex-shrink: 0;
}

.app-profile-text {
  flex: 1;
  min-width: 0;
}

.app-profile-name {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.app-profile-role {
  margin: 0;
  font-size: 0.875rem;
  color: var(--brand);
  background: var(--brand-soft);
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.app-profile-detail {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.app-profile-actions {
  flex-shrink: 0;
}

.app-panel--member {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.app-panel-head h2 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.app-panel-sub {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.app-compare-table th,
.app-compare-table td {
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.app-compare-table th {
  font-weight: 600;
  color: var(--text);
  background: #F9FAFB;
}

.app-compare-table td:last-child {
  color: var(--brand);
  font-weight: 500;
}

.app-panel--private-acc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.app-private-acc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-private-acc-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.app-private-acc-item:last-child {
  border-bottom: none;
}

.app-private-acc-item__main {
  flex: 1;
  min-width: 0;
}

.app-private-acc-item__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
  word-break: break-word;
}

.app-private-acc-item__meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.app-private-acc-item__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  flex-shrink: 0;
}

.app-private-acc-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.app-private-acc-btn {
  font-size: 0.8125rem !important;
  padding: 0.35rem 0.65rem !important;
  min-height: auto !important;
}

.app-private-acc-btn--ghost {
  background: var(--surface) !important;
  color: var(--brand-dark) !important;
  border: 1px solid var(--brand) !important;
  border-radius: var(--radius-btn) !important;
}

.app-private-acc-btn--danger {
  background: #FEF2F2 !important;
  color: var(--danger) !important;
  border: 1px solid #FECACA !important;
  border-radius: var(--radius-btn) !important;
}

.app-private-acc-empty {
  text-align: center;
  padding: 1rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.app-private-acc-empty.hidden {
  display: none;
}

.app-private-acc-empty__text {
  margin: 0;
  line-height: 1.5;
}

.app-menu-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  padding: 0 0.25rem;
}

.app-menu {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.app-menu li {
  border-bottom: 1px solid #eef2f7;
}

.app-menu li:last-child {
  border-bottom: none;
}

.app-menu a,
.app-menu button {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.app-menu a:hover,
.app-menu button:hover {
  background: var(--brand-soft);
}

.app-menu__danger {
  color: var(--danger) !important;
}

.app-user-tip {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 1rem;
}

/* ========== 播放页来源标记 ========== */
.play-source-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.play-source-badge__dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.play-source-badge__text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 体验伴奏的标记样式 */
.play-source-badge--experience .play-source-badge__dot {
  background: #10B981; /* 绿色表示体验 */
}

.play-source-badge--experience .play-source-badge__text {
  color: #10B981;
  font-weight: 600;
}

/* 播放页：隐私提示条、视频角标全屏、亮度滑块、收藏成功动效 */
.play-video-shell--rel {
  position: relative;
}

.play-video-fs-corner {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 6;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0.65rem;
  background: rgba(15, 23, 42, 0.55);
  color: #f8fafc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.play-video-fs-corner:active {
  transform: scale(0.96);
}

/* 全屏已打开：角标显示为「退出」态（由 JS 切换 class） */
body.app-scplay-page .play-video-fs-corner.play-video-fs-corner--exit {
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
}

.play-privacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0c4a6e;
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border: 1px solid rgba(14, 165, 233, 0.45);
  box-shadow: 0 1px 3px rgba(14, 99, 198, 0.12);
}

.play-privacy-chip__ico {
  display: flex;
  color: #0284c7;
}

.play-video-brightness-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.play-video-brightness-row__label {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.play-video-brightness-range {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.75rem;
}

.play-video-brightness-row__val {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  width: 2.75rem;
  text-align: right;
}

.play-footer-favorite--success-pulse {
  animation: playFavSuccessPulse 0.65s ease-out;
}

@keyframes playFavSuccessPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);
  }
}

/* 个人中心：会员有效期、续费、头像、分组菜单 */
.app-member-validity {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0.02em;
}

.app-member-renew-row {
  margin: 0.35rem 0 0;
}

.app-member-renew {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0284c7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-userbar__avatar--btn {
  cursor: pointer;
  border: 2px solid rgba(14, 165, 233, 0.35);
  padding: 0;
  font: inherit;
  background: var(--gradient-vocal-ui-tall, linear-gradient(145deg, #38bdf8, #6366f1));
  color: #fff;
}

.app-userbar__avatar--btn.has-custom-avatar {
  background-color: #e2e8f0;
  background-size: cover;
  background-position: center;
  border-color: rgba(14, 165, 233, 0.5);
}

.app-userbar__avatar--btn.has-custom-avatar #avatarChar {
  display: none;
}

.app-user-menu-groups {
  margin-top: 0.5rem;
}

.app-menu--chevron a,
.app-menu--chevron button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

/* 与 .app-menu__chev 二选一，避免「› + ::after」双箭头 */
.app-menu--chevron a::after,
.app-menu--chevron button::after {
  content: none !important;
}

.app-menu__chev {
  flex-shrink: 0;
  margin-left: 0.5rem;
  font-size: 1.15rem;
  color: var(--text-muted);
  opacity: 0.65;
}

.app-menu--danger-block {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

/* 收藏：列表留白、全选强调 */
body.app-my-favorites-page .app-favorites-list .app-favorites-item {
  margin-bottom: 0.95rem;
}

body.app-my-favorites-page .app-favorites-item__meta--favdate {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.app-checkbox-wrap--prominent {
  gap: 0.35rem;
}

.app-checkbox-wrap--prominent .app-checkbox-ico {
  display: flex;
  color: #0284c7;
}

.app-checkbox-wrap--prominent .app-checkbox-label {
  font-weight: 700;
  color: var(--text);
}

/* 个人中心：锚点滚动时预留顶栏空间 */
.app-panel-member-anchor {
  scroll-margin-top: 5.5rem;
}

/* ========== flbz 歌单页 V3：顶栏与全站 --brand 系一致；辅色 #52C41A ========== */
#flbzPage.app-flbz-ui-v3 {
  --flbz-brand: var(--brand);
  --flbz-brand-mid: var(--brand-mid);
  --flbz-brand-press: var(--brand-dark);
  --flbz-green: #52c41a;
  --flbz-text: #333333;
  --flbz-text-muted: #666666;
  --flbz-bg-soft: #f5f5f5;
  /* 与 Hub 页一致：收窄左右、加宽主列 */
  --flbz-page-pad: 0.5rem;
  --flbz-main-max-md: 48rem;
  --flbz-main-max-lg: 54rem;
  --flbz-main-max-xl: 64rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--flbz-bg-soft);
}

/* iPad / Safari：动态视口高度，减少底部留白缝 */
body#flbzPage.app-flbz-ui-v3.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 768px) {
  #flbzPage.app-flbz-ui-v3 {
    --flbz-page-pad: 0.625rem;
  }
}

/* 与全站主色一致：靛蓝 → 浅湖蓝渐变（白字标题） */
#flbzPage.app-flbz-ui-v3 .app-flbz-head {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 4px 0 0;
  box-sizing: border-box;
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand-mid) 55%, var(--brand) 100%);
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.22);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-head__back {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  margin: 4px;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-head__back:active {
  background: rgba(255, 255, 255, 0.18);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-head__back-ico {
  display: block;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-head__title {
  flex: 1;
  min-width: 0;
  margin: 0 8px;
  padding: 6px 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-align: center;
  letter-spacing: 0.02em;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-head__spacer {
  width: 48px;
  flex-shrink: 0;
}

/* 主列：贴边留白；默认横向满屏（iPad / 平板不再出现中间一条窄列） */
#flbzPage.app-flbz-ui-v3 .app-flbz-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--flbz-page-pad) 5.5rem;
  box-sizing: border-box;
}

/* 仅超宽显示器限制可读宽度；768～1599px（含 iPad 13 横竖屏常见 CSS 宽度）保持满宽 */
@media (min-width: 1600px) {
  #flbzPage.app-flbz-ui-v3 .app-flbz-page {
    max-width: var(--flbz-main-max-xl);
  }
}

#flbzPage.app-flbz-ui-v3 .app-flbz-page--v3 {
  background: #fff;
}

body#flbzPage.app-flbz-tier-catalog.app-flbz-ui-v3 .app-flbz-page--v3 {
  padding-top: 0;
}

/* 一级：整排容纳四项，无横向滚动条、不横向滑动 */
#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1-outer {
  position: relative;
  margin: 10px calc(-1 * var(--flbz-page-pad)) 24px;
  padding: 0 var(--flbz-page-pad);
  background: #fff;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1-scroll {
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1--hscroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 11px 12px;
  box-sizing: border-box;
  background: #e8ecf0;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  height: auto;
  padding: 7px 6px;
  border-radius: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  color: #595959;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 380px) {
  #flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill {
    font-size: 0.71875rem;
    padding: 8px 7px;
  }
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill:not(.is-active) {
  color: #4b5563;
  background: #fff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill:not(.is-active):hover {
  color: #1f2937;
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.07),
    0 1px 2px rgba(15, 23, 42, 0.05);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill:active {
  transform: scale(0.97);
}

/* 选中：与二级 .app-flbz-cat-t2__cell.is-current 同系蓝渐变 + 白字 */
#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.28);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill.is-active:hover {
  color: #fff;
  filter: brightness(1.06);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t1__tab--pill .app-flbz-cat-t1__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1.25;
  text-align: center;
}

/* 二级：横向可滑动一行，与一级高亮体系统一；底部分割线与搜索区分 */
#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2 {
  position: relative;
  margin: 0 calc(-1 * var(--flbz-page-pad));
  padding: 12px 0 18px;
  background: #e8ecf0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04);
  border-bottom: 1px solid rgba(203, 213, 225, 0.65);
  margin-bottom: 12px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* 左右滑动引导：淡白渐变遮罩，不占用宽度、不拦截操作（pointer-events: none） */
#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap::before,
#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 8px;
  width: 32px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap::before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.4) 55%,
    rgba(232, 236, 240, 0) 100%
  );
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap::after {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.4) 55%,
    rgba(232, 236, 240, 0) 100%
  );
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap--scrollable:not(.app-flbz-cat-t2__scroll-wrap--at-start)::before {
  opacity: 1;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap--scrollable:not(.app-flbz-cat-t2__scroll-wrap--at-end)::after {
  opacity: 1;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap--noscroll::before,
#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__scroll-wrap--noscroll::after {
  opacity: 0;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__grid {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 8px 16px 10px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__cell {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  min-height: 40px;
  max-width: none;
  width: max-content;
  box-sizing: border-box;
  padding: 7px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  color: var(--flbz-text);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.05);
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__cell:not(.is-current):hover {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.07),
    0 1px 2px rgba(15, 23, 42, 0.05);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__cell:active {
  transform: scale(0.98);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-cat-t2__cell.is-current {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.28);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-catalog-wrap {
  margin-bottom: 0;
}

body#flbzPage.app-flbz-tier-catalog.app-flbz-ui-v3 .app-flbz-catalog-wrap {
  padding-top: 10px;
  margin-bottom: 0;
}

/* 搜索：与上方分类区留出呼吸感（无 tier 导航时略收紧） */
#flbzPage.app-flbz-ui-v3 .app-flbz-search--v3 {
  margin-top: 10px;
  margin-bottom: 12px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-catalog-wrap:not(.hidden) ~ .app-flbz-search--v3 {
  margin-top: 18px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-search__inner {
  display: flex;
  align-items: center;
  min-height: 48px;
  height: 48px;
  padding: 0 0.65rem;
  box-sizing: border-box;
  background: var(--flbz-bg-soft);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-search__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--flbz-text-muted);
  margin-right: 10px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--flbz-text);
  outline: none;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-search__input::placeholder {
  color: #999;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-search__clear {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  color: var(--flbz-text-muted);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-search__clear:active {
  background: rgba(0, 0, 0, 0.06);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-search__clear.hidden {
  display: none !important;
}

/* 旧版横向标签 */
#flbzPage.app-flbz-ui-v3 .app-flbz-tags__list--v3 {
  gap: 14px;
  padding: 10px 0 18px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-tag--v3 {
  min-height: 48px;
  padding: 0 16px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-tag--v3:not(.is-active) {
  color: var(--flbz-text);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-tag--v3.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(var(--brand-core-rgb), 0.28);
}

/* 统计行（旧：独占一行；新版在 .app-flbz-list-section__head 内与标题并排） */
#flbzPage.app-flbz-ui-v3 .app-flbz-count--v3 {
  margin: 12px 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #94a3b8;
}

/* flbz 伴奏列表、搜索页蜀哥结果：与首页「精选伴奏库」一致——无外框，仅卡片成框 */
#flbzPage.app-flbz-ui-v3 .app-flbz-list-section--home-lib,
body.app-search-standalone .app-flbz-list-section--home-lib {
  margin-top: 0.35rem;
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-list-section__head,
body.app-search-standalone .app-flbz-list-section--home-lib .app-flbz-list-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
  padding: 0 0.05rem 0.5rem;
  border-bottom: none;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-list-section__title,
body.app-search-standalone .app-flbz-list-section--home-lib .app-flbz-list-section__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-list-section__title::before,
body.app-search-standalone .app-flbz-list-section--home-lib .app-flbz-list-section__title::before {
  content: '';
  width: 4px;
  height: 1.15em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(var(--brand-core-rgb), 0.28);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-list-section--home-lib .app-flbz-count--v3 {
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  line-height: 1.4;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-list-section--home-lib .home-lib-card,
body.app-search-standalone .app-flbz-list-section--home-lib .home-lib-card {
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.05);
}

/* 会员专享 / 价格：浅灰弱化，突出标题与调号、BPM（芯片样式沿用全局 .home-lib-card__chip；播放/收藏不动） */
#flbzPage.app-flbz-ui-v3 .home-lib-card__member-note,
body.app-search-standalone .app-flbz-list-section--home-lib .home-lib-card__member-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: #94a3b8;
  letter-spacing: 0.01em;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-loading-initial {
  margin: 0.35rem 0 0;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-inline-alert {
  margin: 0.35rem 0 0;
  padding: 1rem 0.75rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.98);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.05),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-category-grid.home-lib-grid {
  gap: 10px;
}

/* 搜索页「蜀哥专属伴奏库」列表：与首页同档；!important 防平板/WebView 未吃到首页规则 */
body.app-search-standalone .app-flbz-list-section--home-lib .app-flbz-category-grid.home-lib-grid {
  gap: 0.75rem !important;
  row-gap: 0.75rem !important;
}

@media (min-width: 600px) {
  body.app-search-standalone .app-flbz-list-section--home-lib .app-flbz-category-grid.home-lib-grid {
    gap: 2.125rem !important;
    row-gap: 2.125rem !important;
  }
}

@media (min-width: 900px) {
  body.app-search-standalone .app-flbz-list-section--home-lib .app-flbz-category-grid.home-lib-grid {
    gap: 2.625rem !important;
    row-gap: 2.625rem !important;
  }
}

/* 列表卡片 v3（结构已弃用，保留选择器以免旧缓存脚本命中时报样式缺失） */
#flbzPage.app-flbz-ui-v3 .app-flbz-list--v3 {
  gap: 12px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item--v3 {
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item--v3.app-flbz-item--experience {
  border: none;
  border-left: 4px solid var(--flbz-green);
  background: #fff;
  box-shadow: 0 1px 4px rgba(82, 196, 26, 0.18);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item--v3.app-flbz-item--member {
  border: none;
  border-left: 4px solid var(--flbz-brand-mid);
  background: #fff;
  box-shadow: 0 1px 4px rgba(var(--brand-core-rgb), 0.12);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__play-area--v3 {
  flex: 1;
  min-width: 0;
  padding: 0;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__v3-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__title--v3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-right: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--flbz-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__v3-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 8px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__pill--trial {
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__pill--vip {
  color: #fff;
  background: var(--flbz-green);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__ftype-v3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--flbz-text-muted);
}

#flbzPage.app-flbz-ui-v3 .app-flbz-item__meta--v3 {
  font-size: 0.875rem;
  color: var(--flbz-text-muted);
  gap: 12px 16px;
}

#flbzPage.app-flbz-ui-v3 .app-flbz-empty--v3 .app-flbz-empty__text {
  font-size: 1.0625rem;
}

/* flbz → layui 全屏 iframe 播放层 */
body .layui-layer.yq-play-layer-iframe {
  border-radius: 0 !important;
}

body .layui-layer.yq-play-layer-iframe .layui-layer-content {
  height: 100% !important;
  overflow: hidden !important;
}

/* 隐藏 layui 默认右上角关闭（与播放页顶栏返回统一为由页内返回 / 点遮罩关闭） */
body .layui-layer.yq-play-layer-iframe .layui-layer-setwin {
  display: none !important;
}

/* ========== 「我的」个人中心 V2（蓝金 · 适老化） ========== */
/* 不写死 max-width，交给 `.app-user-page` + `body.app-hub-layout .app-user-page` 随断点放宽，避免中间区大屏仍锁在 40rem */
.app-mine-page .app-user-page.app-user-page--v2 {
  width: 100%;
  min-width: 0;
  padding: 0 var(--space-page-x) 6.5rem;
  gap: 0;
  box-sizing: border-box;
}

body.app-hub-layout.app-mine-page .app-user-page.app-user-page--v2 {
  padding: 0 var(--hub-pad-x) 6.5rem;
}

@media (min-width: 768px) {
  body.app-hub-layout.app-mine-page .app-user-page.app-user-page--v2 {
    padding-left: var(--hub-pad-x-md);
    padding-right: var(--hub-pad-x-md);
  }
}

/* 与个人中心顶栏（蓝条）衔接：仅保留头像卡与 VIP 条，不再做全宽渐变顶 */
body.app-hub-layout.app-mine-page .app-user-hero {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.85rem;
  padding-bottom: 0.25rem;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

@media (min-width: 768px) {
  body.app-hub-layout.app-mine-page .app-user-hero {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 个人中心主列已随 Hub 放宽时，头像区与子块与主列同宽，避免仍套在 32rem 内显得「中间一竖条」 */
body.app-hub-layout.app-mine-page .app-user-hero__inner {
  max-width: none;
  width: 100%;
}

.app-mine-page .app-topbar__title {
  font-size: 1rem;
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
}

.app-mine-toast {
  position: relative;
  z-index: 2;
  margin-bottom: 0.5rem;
}

/* 与 body.app-shell 主底色一致：中性浅灰白过渡 */
.app-user-hero {
  margin: 0 calc(-1 * var(--space-page-x)) 1rem;
  padding: calc(0.65rem + env(safe-area-inset-top, 0px)) var(--space-page-x) 1.2rem;
  background: linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-soft) 36%, #ffffff 100%);
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.app-user-hero__inner {
  max-width: var(--app-viewport-usable-x);
  margin: 0 auto;
}

.app-user-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  text-align: left;
}

.app-user-brand__logo {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-mid) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(24, 144, 255, 0.28);
}

.app-user-brand__logo-svg {
  width: 1.45rem;
  height: 1.45rem;
}

.app-user-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.app-user-brand__name {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.app-user-brand__slogan {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}

.app-user-card {
  background: transparent;
  border-radius: 0;
  padding: 0 0 0.25rem;
  box-shadow: none;
  text-align: left;
}

.app-user-card__main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-user-card__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  align-items: stretch;
}

.app-user-card__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}

.app-user-card__name-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.22rem;
}

.app-user-card__guest-sync {
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.35;
}

.app-user-card__avatar {
  width: 4.75rem;
  height: 4.75rem;
  margin: 0;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 头像区：白底圆（与全站卡片一致），字用主色；默认图为伴奏宝 logo */
.app-mine-page .app-user-card__avatar.app-userbar__avatar--btn {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(64, 169, 255, 0.35);
  background: #fff;
  color: var(--brand-mid);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
}

.app-mine-page .app-user-card__avatar-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  padding: 0.28rem;
  box-sizing: border-box;
}

.app-mine-page .app-user-card__avatar-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-mid);
}

.app-mine-page .app-user-card__avatar-letter.hidden {
  display: none !important;
}

.app-mine-page .app-user-card__avatar-logo.hidden {
  display: none !important;
}

.app-mine-page .app-user-card__avatar.app-userbar__avatar--btn.has-custom-avatar {
  background-color: #fff;
  background-size: cover;
  background-position: center;
  border-color: rgba(64, 169, 255, 0.4);
}

.app-mine-page .app-user-card__detail .app-member-validity {
  color: var(--brand-dark);
}

.app-user-card__name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-user-card__name-stack .app-user-card__name {
  flex: none;
  width: 100%;
  max-width: 100%;
}

.app-user-card__tap-login {
  color: var(--brand-mid);
  text-decoration: none;
  font-weight: 800;
}

.app-user-card__tap-login:active {
  opacity: 0.85;
}

.app-user-card__badge {
  flex-shrink: 0;
  display: inline-block;
  margin: 0;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-user-card__badge--vip {
  color: #fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

.app-user-card__detail {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.45;
}

.app-user-card__login {
  margin-top: 0.85rem;
  text-align: center;
}

.app-user-card__login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  border: 1px solid rgba(64, 169, 255, 0.45);
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.28);
}

.app-vip-strip {
  margin-top: 1rem;
  padding: 0.9rem 1rem 0.85rem;
  border-radius: 1rem;
  background: linear-gradient(92deg, var(--brand-dark) 0%, var(--brand-mid) 52%, var(--brand) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 8px 28px rgba(24, 144, 255, 0.26),
    0 2px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.app-vip-strip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.app-vip-strip__label {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.app-vip-strip__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.15rem;
  min-height: 2.5rem;
  border-radius: 1rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #fff !important;
  text-decoration: none !important;
  background: var(--brand-dark);
  border: 1px solid #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: transparent;
}

.app-vip-strip__desc {
  margin: 0.65rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.app-mine-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.35rem;
}

/* 「我的」列表：白卡片浮在页面浅底上，与背景区分 */
.app-mine-page .app-mine-sections {
  margin-top: 0.5rem;
}

.app-mine-page .app-mine-block {
  border-bottom: none;
  margin-bottom: 0.85rem;
  padding-bottom: 0;
}

.app-mine-page .app-mine-block:last-child {
  margin-bottom: 0;
}

.app-mine-page .app-mine-section-title {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  margin-bottom: 0.45rem;
}

.app-mine-page .app-mine-list {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.app-mine-page .app-mine-list li + li {
  border-top: 1px solid rgba(241, 245, 249, 0.98);
}

.app-mine-page .app-mine-row {
  background: #fff;
  padding-left: 0.95rem;
  padding-right: 0.65rem;
  gap: 1.2rem;
}

.app-mine-page .app-mine-row:hover,
.app-mine-page .app-mine-row:active {
  background: #f1f5f9;
}

.app-mine-page .app-mine-row__ico {
  color: var(--brand-mid);
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.2rem;
  border-radius: 11px;
  background: rgba(var(--brand-core-rgb), 0.1);
  border: 1px solid rgba(var(--brand-core-rgb), 0.16);
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.app-mine-page .app-mine-row__chev {
  color: #94a3b8;
}

.app-mine-page .app-mine-row__trail {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.app-mine-page .app-mine-row__cache-size {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.2;
}

.app-mine-page .app-mine-row--danger .app-mine-row__ico {
  color: inherit;
  opacity: 0.95;
}

.app-mine-block {
  padding-bottom: 0.65rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid #e8ecf0;
}

.app-mine-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.app-mine-block--danger {
  padding-top: 0.15rem;
}

.app-mine-section-title {
  margin: 0 0 0.5rem 0;
  padding: 0 0.125rem;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.app-mine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.app-mine-list li + li {
  border-top: 1px solid #eef1f4;
}

.app-mine-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.25rem;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.app-mine-row:hover,
.app-mine-row:active {
  background: #f8fafc;
}

.app-mine-row--btn {
  font-family: inherit;
}

.app-mine-row--danger {
  color: var(--danger) !important;
}

.app-mine-row__ico {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tabbar-inactive-color);
}

/* 与底部导航 .app-tabbar__ico 一致：24×24 线性图标 */
.app-mine-ico {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.app-mine-row__textwrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.app-mine-row__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

.app-mine-row__sub {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.app-mine-row__chev {
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: #cbd5e1;
}

.app-mine-list--danger {
  margin-top: 0;
}

.app-user-tip--mine {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  padding: 0 0.5rem;
}

.app-mine-copyright {
  margin: 1.25rem 0 0;
  padding: 0 0.5rem 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.55;
  text-align: center;
  color: #9ca3af;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 与全站 Tab 一致用 px，勿用 rem；个人中心曾用更大 rem，在微信里会明显胖一圈 */
.app-tabbar--mine .app-tabbar__ico {
  width: 24px;
  height: 24px;
}

.app-tabbar--mine .app-tabbar__link {
  min-height: 50px;
}

.app-tabbar--mine .app-tabbar__txt {
  font-size: 12px;
  font-weight: 600;
}

/* 微信内核：双保险钉死底栏（部分机型仍会动计算字号） */
html.yq-wechat .app-tabbar__link {
  font-size: 12px !important;
  gap: 4px !important;
  padding: 4px 6px !important;
}

html.yq-wechat .app-tabbar__ico,
html.yq-wechat .app-tabbar--mine .app-tabbar__ico {
  width: 24px !important;
  height: 24px !important;
}

html.yq-wechat .app-tabbar__txt,
html.yq-wechat .app-tabbar--mine .app-tabbar__txt {
  font-size: 12px !important;
}

@media (max-width: 360px) {
  html.yq-wechat .app-tabbar__ico,
  html.yq-wechat .app-tabbar--mine .app-tabbar__ico {
    width: 22px !important;
    height: 22px !important;
  }

  html.yq-wechat .app-tabbar__txt,
  html.yq-wechat .app-tabbar--mine .app-tabbar__txt {
    font-size: 11px !important;
  }
}

/* ========== 支付中心 member.html ========== */
.app-pay-center-page {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.app-pay-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 0.5rem 0.55rem;
  background: linear-gradient(92deg, var(--brand-dark) 0%, var(--brand-mid) 55%, var(--brand) 100%);
  box-shadow: 0 6px 18px rgba(24, 144, 255, 0.25);
}

.app-pay-topbar__back {
  flex: 0 0 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  font-size: 1.85rem;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  border-radius: 0.65rem;
  -webkit-tap-highlight-color: transparent;
}

.app-pay-topbar__title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
}

.app-pay-topbar__filler {
  flex: 0 0 2.75rem;
}

.app-pay-main {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin: 0 auto;
  padding: 1rem
    max(var(--space-page-x), env(safe-area-inset-left, 0px))
    2rem
    max(var(--space-page-x), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .app-pay-main {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}

.app-pay-toast {
  margin-bottom: 0.5rem;
  text-align: center;
}

.app-pay-subline {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin: 0 0 0.75rem;
}

.app-pay-permanent {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.app-pay-permanent__title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 900;
  color: var(--text);
}

.app-pay-permanent__desc {
  margin: 0.65rem 0 1.1rem;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.app-pay-permanent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  box-shadow: 0 6px 18px rgba(24, 144, 255, 0.35);
}

.app-pay-section {
  margin-top: 1.35rem;
}

.app-pay-section__h {
  margin: 0 0 0.85rem;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text-secondary);
}

/* 会员尊享特权：与个人中心 `.app-mine-section-title` 级标题统一字号与字重，品牌蓝强调 */
.app-pay-section__h--benefits {
  text-align: left;
  margin: 0 0 0.5rem;
  padding: 0 0.125rem;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--brand-dark);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* 会员尊享特权：小屏起即一行三列；图标偏小格，避免两列过大 */
.app-pay-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.32rem;
  padding: 0.3rem 0.05rem 0.1rem;
}

.app-pay-benefit {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.32rem;
  padding: 0.42rem 0.2rem 0.38rem;
  border-radius: 0.65rem;
  background: linear-gradient(165deg, rgba(255, 251, 235, 0.98) 0%, rgba(255, 255, 255, 0.88) 55%, rgba(254, 243, 199, 0.35) 100%);
  border: 1px solid rgba(217, 119, 6, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 3px 10px rgba(24, 144, 255, 0.05);
}

.app-pay-benefit__ico {
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid rgba(217, 119, 6, 0.2);
  color: var(--shuge-gold-dark);
  box-shadow:
    0 0 0 1px var(--brand-mid),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.app-pay-benefit__ico svg {
  width: 0.95rem;
  height: 0.95rem;
}

.app-pay-benefit__txt {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
  max-width: 100%;
}

@media (min-width: 400px) {
  .app-pay-benefits {
    gap: 0.5rem 0.4rem;
  }
  .app-pay-benefit__txt {
    font-size: 0.75rem;
  }
}

/* memberios：年卡/永久双套餐说明 */
.app-pay-pkg-hint {
  margin: -0.35rem 0 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.35;
}

.app-pay-pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 420px) {
  .app-pay-pkg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app-pay-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 1.5rem 0.75rem 0.9rem;
  min-height: 9.25rem;
  border-radius: 8px;
  border: 2px solid rgba(217, 119, 6, 0.35);
  background: #fff;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.app-pay-pkg:active {
  transform: scale(0.98);
}

.app-pay-pkg--gold {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border-color: rgba(217, 119, 6, 0.55);
}

.app-pay-pkg--vipred {
  background: linear-gradient(165deg, #fff7ed 0%, #ffedd5 40%, #fecaca 100%);
  border-color: rgba(239, 68, 68, 0.5);
}

.app-pay-pkg.is-selected {
  border-color: var(--brand-mid);
  box-shadow:
    0 0 0 3px rgba(var(--brand-core-rgb), 0.35),
    var(--shadow-card),
    0 6px 20px rgba(var(--brand-core-rgb), 0.16);
}

.app-pay-pkg__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  border-radius: 0.65rem 0 0.65rem 0;
  line-height: 1.2;
  box-shadow: 0 0 0 1px var(--brand-mid);
}

.app-pay-pkg__ribbon--gold {
  background: linear-gradient(90deg, #b45309 0%, #ea580c 100%);
}

.app-pay-pkg__ribbon--soft {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
}

.app-pay-pkg__name {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.app-pay-pkg__price {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.45rem;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 12px rgba(var(--brand-core-rgb), 0.42),
    0 0 1px var(--brand-mid);
}

.app-pay-pkg--gold .app-pay-pkg__price {
  color: #b91c1c;
}

.app-pay-pkg__tagline {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #b45309;
  background: rgba(251, 191, 36, 0.45);
}

.app-pay-pkg--gold .app-pay-pkg__tagline {
  color: #fff;
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand-mid) 52%, var(--brand) 100%);
  box-shadow: 0 1px 4px rgba(var(--brand-core-rgb), 0.28);
}

.app-pay-pkg__daily {
  display: block;
  margin-top: auto;
  padding-top: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.35;
}

.app-pay-method {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.app-pay-method__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem;
  cursor: pointer;
  position: relative;
}

.app-pay-method__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.app-pay-method__ico--wx {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--brand-mid),
    0 2px 6px rgba(9, 187, 7, 0.35);
}

.app-pay-method__ico--wx .app-pay-method__wx-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.app-pay-method__ico--apple {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 12px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.app-pay-method__ico--apple .app-pay-method__apple-svg {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.app-pay-method__name {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}

.app-pay-method__check {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--brand-mid);
}

.app-pay-method__row--active {
  background: #f8fafc;
}

.app-pay-cta-wrap {
  margin-top: 1.35rem;
  text-align: center;
}

.app-pay-cta {
  width: 100%;
  max-width: 100%;
  min-height: 3.35rem;
  padding: 0 1.25rem;
  border: 1px solid var(--brand-mid);
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 900;
  color: #451a03;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: linear-gradient(92deg, #fde68a 0%, #fcd34d 35%, #fbbf24 100%);
  box-shadow:
    0 8px 26px rgba(217, 119, 6, 0.35),
    0 4px 14px rgba(var(--brand-core-rgb), 0.2);
  -webkit-tap-highlight-color: transparent;
}

.app-pay-cta:active {
  transform: scale(0.99);
}

/* memberios：发起支付全屏动态反馈（双环旋转 + 光晕） */
.app-pay-launch-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) 1rem env(safe-area-inset-bottom, 0);
  pointer-events: auto;
}

.app-pay-launch-overlay.hidden {
  display: none !important;
}

.app-pay-launch-overlay__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.app-pay-launch-overlay__panel {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 18rem;
  padding: 1.75rem 1.35rem 1.5rem;
  border-radius: 1.25rem;
  text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, var(--brand-softer, #f0f7ff) 40%, var(--brand-soft, #e6f4ff) 100%);
  border: 1px solid rgba(var(--brand-core-rgb), 0.38);
  box-shadow:
    0 22px 50px rgba(var(--brand-core-rgb), 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  animation: app-pay-launch-panel-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes app-pay-launch-panel-pop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.app-pay-launch-overlay__rings {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
}

.app-pay-launch-overlay__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.app-pay-launch-overlay__ring--a {
  border-top-color: var(--brand, #40a9ff);
  border-right-color: rgba(var(--brand-core-rgb), 0.35);
  animation: app-pay-launch-spin 0.85s linear infinite;
  box-shadow: 0 0 22px rgba(var(--brand-core-rgb), 0.42);
}

.app-pay-launch-overlay__ring--b {
  inset: 0.45rem;
  border-bottom-color: var(--brand-mid, #1890ff);
  border-left-color: rgba(var(--brand-core-rgb), 0.28);
  animation: app-pay-launch-spin-reverse 1.1s linear infinite;
  opacity: 0.95;
}

@keyframes app-pay-launch-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes app-pay-launch-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-pay-launch-overlay__ring--a,
  .app-pay-launch-overlay__ring--b {
    animation-duration: 1.8s;
  }
  .app-pay-launch-overlay__panel {
    animation: none;
  }
}

.app-pay-launch-overlay__title {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-dark, #096dd9);
  letter-spacing: 0.04em;
}

.app-pay-launch-overlay__sub {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
}

.app-pay-legal {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

.app-pay-legal a {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-compare-card {
  background: transparent;
}

.app-compare-card__inner {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.app-compare-table--pay {
  font-size: 0.9375rem;
}

.app-compare-table--pay thead th {
  background: #f8fafc;
  font-size: 0.9375rem;
  padding: 0.65rem 0.5rem;
}

.app-compare-table--pay tbody th[scope="row"] {
  font-size: 0.875rem;
  max-width: none;
}

.app-compare-table--pay td:first-of-type {
  color: #94a3b8;
  font-weight: 500;
}

.app-compare-table--pay td:last-child {
  color: var(--brand-mid);
  font-weight: 800;
}

.app-compare-note--pay {
  margin-top: 0.65rem;
  padding: 0 0.25rem;
}

.app-pay-section--compare {
  margin-bottom: 1.5rem;
}

/* ========== 支付中心 member.html v2（清爽品牌蓝 + 香槟金强调）========== */
.app-pay-center-page--v2 {
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 35%, #ffffff 100%);
  font-family: system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.app-pay-center-page--v2 .app-pay-main {
  padding-top: 1.1rem;
}

.app-pay-topbar--v2 {
  background: linear-gradient(100deg, #0284c7 0%, #0ea5e9 45%, #2563eb 100%);
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.app-pay-topbar--v2 .app-pay-topbar__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.app-pay-topbar__back-svg {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.app-pay-topbar--v2 .app-pay-topbar__back {
  font-size: 0;
  min-height: 2.5rem;
}

.app-pay-center-page--v2 .app-pay-section__h--benefits {
  text-align: center;
  font-size: 1.28rem;
  font-weight: 800;
  color: #0369a1;
  margin-bottom: 0.65rem;
  letter-spacing: 0.04em;
}

.app-pay-center-page--v2 .app-pay-benefits {
  gap: 0.5rem 0.45rem;
}

.app-pay-center-page--v2 .app-pay-benefit {
  background: #faf6ef;
  border: 1px solid rgba(180, 150, 100, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 2px 8px rgba(2, 132, 199, 0.06);
  border-radius: 0.75rem;
  padding: 0.55rem 0.3rem 0.5rem;
  min-height: 5.4rem;
}

.app-pay-center-page--v2 .app-pay-benefit__ico {
  width: 2.4rem;
  height: 2.4rem;
  background: linear-gradient(150deg, #fff 0%, #e0f2fe 100%);
  border: 1px solid rgba(14, 165, 233, 0.28);
  color: #0369a1;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.12);
}

.app-pay-center-page--v2 .app-pay-benefit__ico svg {
  width: 1.15rem;
  height: 1.15rem;
}

.app-pay-center-page--v2 .app-pay-benefit__txt {
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.32;
  color: #0f172a;
}

@media (min-width: 400px) {
  .app-pay-center-page--v2 .app-pay-benefit__txt {
    font-size: 0.8125rem;
  }
}

.app-pay-benefits-sub {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.55;
  padding: 0 0.35rem;
}

.app-pay-section__h--vip {
  text-align: left;
  margin: 0 0 0.75rem;
  padding: 0 0.1rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.02em;
}

.app-pay-section__h--paymethod {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #94a3b8;
  margin: 0 0 0.6rem;
}

/* 套餐 2×2 v2 */
.app-pay-pkg-grid--v2 {
  gap: 0.8rem;
}

.app-pay-pkg--v2 {
  position: relative;
  min-height: 10.5rem;
  padding: 1.75rem 0.7rem 0.65rem;
  border-radius: 0.85rem;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(148, 163, 184, 0.35);
  background: #fff;
  align-items: flex-start;
  text-align: left;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.app-pay-pkg--v2 .app-pay-pkg__name {
  display: block;
  margin: 0 0 0.2rem;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}

.app-pay-pkg--v2 .app-pay-pkg__price {
  display: block;
  margin: 0.1rem 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-shadow: none;
}

.app-pay-pkg--v2 .app-pay-pkg__daily {
  display: block;
  margin-top: 0.15rem;
  width: 100%;
  line-height: 1.4;
}

.app-pay-pkg--v2 .app-pay-pkg__daily--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.15rem;
}

.app-pay-pkg__daily-mute {
  font-size: 0.7rem;
  font-weight: 500;
  color: #94a3b8;
}

.app-pay-pkg__daily-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: #64748b;
}

.app-pay-pkg--v2 .app-pay-pkg__daily--forever {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

.app-pay-pkg__badges {
  position: absolute;
  top: 0.35rem;
  left: 0.4rem;
  right: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
  z-index: 1;
  pointer-events: none;
}

.app-pay-pkg__badges--row {
  flex-wrap: nowrap;
  align-items: center;
}

.app-pay-pkg__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.app-pay-pkg__badge--orange {
  color: #fff;
  background: linear-gradient(95deg, #f97316 0%, #fb923c 100%);
}

.app-pay-pkg__badge--hot {
  color: #fff;
  background: linear-gradient(95deg, #dc2626 0%, #f87171 100%);
  font-size: 0.58rem;
}

.app-pay-pkg__badge--crown {
  color: #fff;
  background: linear-gradient(95deg, #b45309 0%, #d97706 55%, #eab308 100%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* 年卡：浅金底 + 选中时品牌蓝高亮外框 */
.app-pay-pkg--v2.app-pay-pkg--gold,
.app-pay-pkg--v2.app-pay-pkg--year {
  background: linear-gradient(165deg, #fffdf7 0%, #fff7e6 50%, #fef3c7 100%);
  border-color: rgba(234, 179, 8, 0.45);
}

.app-pay-pkg--v2.app-pay-pkg--year.is-selected {
  border-color: #2563eb;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.28),
    0 6px 22px rgba(37, 99, 235, 0.18);
}

/* 永久会员：金渐变与内光仅在内框内（不向外扩散、不画到描边下） */
.app-pay-pkg--v2.app-pay-pkg--forever {
  overflow: hidden;
  border-color: #f59e0b;
  background-image: linear-gradient(
    160deg,
    #fffef4 0%,
    #fff7d6 12%,
    #fef3c7 32%,
    #fde68a 58%,
    #fcd34d 78%,
    #eab308 100%
  );
  background-clip: padding-box;
  background-origin: border-box;
  /* 外圈仅极轻投影，金色层次全部用 inset 落在框内 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 251, 235, 0.35),
    inset 0 -10px 28px rgba(245, 158, 11, 0.22),
    inset 0 0 20px rgba(250, 204, 21, 0.18),
    0 1px 3px rgba(15, 23, 42, 0.06);
}

.app-pay-pkg--v2.app-pay-pkg--forever.is-selected {
  border-color: #2563eb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 251, 235, 0.3),
    inset 0 -8px 24px rgba(245, 158, 11, 0.18),
    inset 0 0 16px rgba(250, 204, 21, 0.14),
    0 0 0 3px rgba(37, 99, 235, 0.28),
    0 6px 20px rgba(37, 99, 235, 0.12);
}

.app-pay-pkg--v2:not(.app-pay-pkg--year):not(.app-pay-pkg--forever).is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), 0 6px 20px rgba(15, 23, 42, 0.08);
}

.app-pay-pkg__year-bar {
  margin-left: -0.7rem;
  margin-right: -0.7rem;
  margin-bottom: 0;
  width: calc(100% + 1.4rem);
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 50%, #2563eb 100%);
  border-radius: 0 0 0.78rem 0.78rem;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
}

/* 年卡整卡 flex：蓝条吸底 */
.app-pay-pkg--v2.app-pay-pkg--year {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  min-height: 11.2rem;
}

.app-pay-pkg--v2.app-pay-pkg--year .app-pay-pkg__daily {
  margin-top: 0.2rem;
}

.app-pay-pkg--v2.app-pay-pkg--year .app-pay-pkg__year-bar {
  margin-top: auto;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* 主按钮：品牌蓝 */
.app-pay-cta--v2 {
  min-height: 3.1rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  border: none;
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 45%, #0369a1 100%);
  box-shadow: 0 6px 22px rgba(2, 132, 199, 0.38), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.app-pay-cta--v2:active {
  transform: scale(0.99);
  opacity: 0.95;
}

.app-pay-center-page--v2 .app-pay-method__row--active {
  background: #f0f9ff;
}

/* memberios 支付页：与 member v2 同套，仅年卡+永久两列 */
.app-memberios-pay .app-pay-pkg-hint {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  margin: -0.15rem 0 0.8rem;
  line-height: 1.45;
  padding: 0 0.25rem;
}

.app-pay-pkg-grid--memberios {
  gap: 0.85rem;
}

/* —— 我有建议：中等宽度居中、轻背景 —— */
.app-suggest-page {
  margin: 0 auto;
  padding: 0.625rem 0.875rem 2.75rem;
  max-width: min(32rem, calc(100vw - 1.1rem));
  min-height: 100vh;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 140% 70% at 50% -5%, rgba(20, 184, 166, 0.1), transparent 58%),
    linear-gradient(180deg, #f0f1f3 0%, var(--page-bg-soft) 30%, #ffffff 55%);
}

.app-suggest-hero {
  margin-bottom: 1.125rem;
}

.app-suggest-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.app-suggest-title-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 0.75rem;
  background: linear-gradient(145deg, #ccfbf1 0%, #99f6e4 100%);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
}

.app-suggest-title {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 0.35rem;
}

.app-suggest-lead {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #64748b;
  margin: 0;
}

.app-suggest-card {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #fff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.app-suggest-card--pad {
  padding: 0.95rem 1rem 1rem;
}

.app-suggest-form > .app-suggest-btn-full {
  margin-top: 1rem;
}

.app-suggest-gate-text {
  font-size: 0.9375rem;
  color: #334155;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.app-suggest-btn-full {
  width: 100%;
  border-radius: 0.875rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-weight: 800;
}

.app-suggest-btn-submit {
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.28);
}

.app-suggest-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 0.5rem;
}

.app-suggest-textarea {
  display: block;
  min-height: 9.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  padding: 0.65rem 0.75rem;
  background: #fafafa;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-sizing: border-box;
}

.app-suggest-textarea::placeholder {
  color: #94a3b8;
}

.app-suggest-textarea:focus {
  outline: none;
  border-color: #2dd4bf;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22);
}

.app-suggest-counter {
  text-align: right;
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0.4rem 0 0;
}

.app-suggest-list-section {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.app-suggest-section-title {
  font-size: 1.0625rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.app-suggest-section-hint {
  font-size: 0.75rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0 0 0.85rem;
}

.app-suggest-list-meta {
  font-size: 0.8125rem;
  color: #64748b;
  padding: 0.25rem 0;
  margin: 0;
}

.app-suggest-list-err {
  font-size: 0.8125rem;
  color: #b91c1c;
  padding: 0.25rem 0;
  margin: 0;
}

.app-suggest-list-root {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-suggest-list-empty {
  font-size: 0.8125rem;
  color: #94a3b8;
  text-align: center;
  padding: 1.25rem 0.5rem;
  margin: 0;
  background: rgba(248, 250, 252, 0.9);
  border-radius: 0.875rem;
  border: 1px dashed #cbd5e1;
}

.app-suggest-list-card {
  padding: 0.85rem 0.95rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

.app-suggest-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  width: 100%;
}

.app-suggest-item-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.app-suggest-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 555px;
  letter-spacing: 0.02em;
}

.app-suggest-badge--ok {
  background: #ccfbf1;
  color: #0f766e;
}

.app-suggest-badge--wait {
  background: #fef3c7;
  color: #92400e;
}

.app-suggest-badge--mid {
  background: #f1f5f9;
  color: #475569;
}

.app-suggest-item-time {
  font-size: 0.6875rem;
  color: #94a3b8;
}

.app-suggest-btn-del {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid #fecaca;
  color: #b91c1c;
  background: #fff5f5;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.app-suggest-btn-del:active {
  opacity: 0.85;
}

.app-suggest-item-label {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
}

.app-suggest-item-label--reply {
  margin-top: 0.65rem;
}

.app-suggest-item-body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #1e293b;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.app-suggest-reply-box {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #134e4a;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid rgba(45, 212, 191, 0.35);
  white-space: pre-wrap;
  word-break: break-word;
}

.app-suggest-item-pending {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0.45rem 0 0;
  font-style: italic;
}

.app-suggest-toast {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.8125rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  font-weight: 600;
}

.app-suggest-toast--ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.app-suggest-toast--err {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* ========== 旧谱清理助手（old-sheet-cleaner.html）========== */

.sheet-clean-page__disclaimer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 0.75rem 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-mid) 100%);
  box-shadow: 0 2px 12px rgba(var(--brand-core-rgb), 0.35);
}

.sheet-clean-page__main {
  width: 100%;
  max-width: var(--app-viewport-usable-x);
  margin: 0 auto;
  padding: 0.65rem var(--space-page-x) 5.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* 旧谱清理助手：body 含 .sheet-clean-page 时主列更贴边（听音识别页无此 body 类，不受影响） */
.sheet-clean-page .sheet-clean-page__main {
  max-width: none;
  padding-left: max(0.4rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.4rem, env(safe-area-inset-right, 0px));
}

.sheet-clean-hero {
  margin: 0;
  padding: 0.75rem 0.85rem;
  background: linear-gradient(145deg, var(--brand-softer) 0%, var(--surface) 72%);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sheet-clean-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.sheet-clean-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-badge);
  background: rgba(var(--brand-core-rgb), 0.16);
  color: var(--brand-dark);
}

.sheet-clean-tag--muted {
  background: var(--page-bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.sheet-clean-hero__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
}

.sheet-clean-hero__text strong {
  font-weight: 800;
  color: var(--brand-dark);
}

.sheet-clean-deskew {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sheet-clean-deskew__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.sheet-clean-deskew__face {
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sheet-clean-deskew__input:checked + .sheet-clean-deskew__face {
  border-color: var(--brand-mid);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px rgba(var(--brand-core-rgb), 0.2);
}

.sheet-clean-deskew__input:focus-visible + .sheet-clean-deskew__face {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--brand-core-rgb), 0.45);
}

.sheet-clean-deskew__ico {
  display: flex;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  margin-top: 0.08rem;
  color: var(--brand-mid);
  opacity: 0.9;
}

.sheet-clean-deskew__ico svg {
  width: 100%;
  height: 100%;
}

.sheet-clean-deskew__txt {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.sheet-clean-deskew__title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}

.sheet-clean-deskew__hint {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
}

.sheet-clean-panel {
  margin: 0;
  padding: 0.75rem 0.85rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sheet-clean-panel__head {
  margin-bottom: 0.65rem;
  text-align: center;
}

.sheet-clean-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
}

.sheet-clean-panel__sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}

.sheet-clean-page__btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sheet-clean-page__btn-row--stack {
  flex-direction: column;
}

.sheet-clean-page__btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.15rem;
  padding: 0.55rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.sheet-clean-page__btn-ico {
  display: flex;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

.sheet-clean-page__btn-ico svg {
  width: 100%;
  height: 100%;
}

.sheet-clean-page__btn:active {
  opacity: 0.94;
  transform: scale(0.98);
}

.sheet-clean-page__btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-mid) 100%);
  border-color: var(--brand-dark);
  box-shadow: 0 4px 16px rgba(var(--brand-core-rgb), 0.35);
}

.sheet-clean-page__btn--accent {
  color: #fff;
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border-color: #c2410c;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.28);
}

.sheet-clean-page__btn--ghost {
  color: var(--brand-dark);
  background: var(--surface);
  border-color: rgba(var(--brand-core-rgb), 0.45);
}

.sheet-clean-page__file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sheet-clean-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  text-align: center;
  padding: 1.1rem 1rem;
  margin: 0;
  border-radius: var(--radius-card);
  background: var(--brand-soft);
  border: 1px solid rgba(var(--brand-core-rgb), 0.35);
  box-shadow: var(--shadow-card);
}

.sheet-clean-busy__spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(var(--brand-core-rgb), 0.2);
  border-top-color: var(--brand-mid);
  border-radius: 50%;
  animation: sheet-clean-spin 0.75s linear infinite;
}

@keyframes sheet-clean-spin {
  to {
    transform: rotate(360deg);
  }
}

.sheet-clean-busy__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--brand-dark);
}

.sheet-clean-result[hidden] {
  display: none !important;
}

.sheet-clean-result {
  margin: 0;
  padding: 0.75rem 0.85rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sheet-clean-result__head {
  margin-bottom: 0.45rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.sheet-clean-result__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.sheet-clean-result__meta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.6rem;
  line-height: 1.45;
  text-align: center;
}

.sheet-clean-page__preview {
  border-radius: var(--radius-btn);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--page-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 6px 20px rgba(31, 41, 55, 0.08);
  margin-bottom: 0.75rem;
}

.sheet-clean-page__canvas-host {
  line-height: 0;
}

.sheet-clean-page__canvas {
  width: 100%;
  height: auto;
  vertical-align: top;
}

@media (min-width: 768px) {
  .sheet-clean-page__btn-row:not(.sheet-clean-page__btn-row--stack) {
    flex-wrap: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-clean-busy__spinner {
    animation: none;
    border-top-color: transparent;
    opacity: 0.7;
  }
}

/* 听音识别 — 适老化友好版 listen-key-bpm.html */
.key-bpm-page--friendly .key-bpm-page__main {
  font-size: 1rem; /* 16px 正文下限 */
  line-height: 1.55;
  /* 比通用 sheet-clean 主区更贴边，中间内容更宽（仍保留安全区） */
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-top: 0.65rem;
  padding-bottom: 5.25rem;
  padding-left: max(0.4rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.4rem, env(safe-area-inset-right, 0px));
}

.key-bpm-page--friendly .app-topbar .app-topbar__title.key-bpm-page__header-title,
.key-bpm-page--friendly .key-bpm-page__header .app-topbar__title {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: #fff;
}

.key-bpm-page--friendly .app-topbar .key-bpm-page__back.app-back-chevron {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.75rem;
}

.key-bpm-page--friendly .app-topbar .key-bpm-page__back .app-back-chevron__glyph {
  font-size: 1.98rem;
}

.key-bpm-page--friendly .app-topbar .key-bpm-page__back.app-back-chevron:active {
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
}

.key-bpm-page__guide {
  margin-bottom: 1rem;
  padding: 1rem 1rem 0.95rem;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.key-bpm-page__guide-title {
  margin: 0 0 0.65rem;
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: #374151;
}

.key-bpm-page__guide-list {
  margin: 0;
  padding: 0 0 0 1.2rem;
  color: #111827;
  font-size: 1rem;
}

.key-bpm-page__guide-list li {
  margin: 0.35rem 0;
  padding-left: 0.15rem;
}

.key-bpm-page__tip {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
}

.key-bpm-page__tip-title {
  font-size: 1rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 0.4rem;
}

.key-bpm-page__tip-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  color: #78350f;
  font-size: 1rem;
}

.key-bpm-page__tip-list li {
  margin: 0.25rem 0;
}

.key-bpm-page__control {
  overflow: hidden;
  margin-top: 0.25rem;
}

.key-bpm-page__primary-wrap {
  width: 90%;
  max-width: 28rem;
  margin: 0 auto;
}

.key-bpm-page__primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.75rem; /* 60dp */
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #1677ff 0%, #0958d9 100%);
  box-shadow: 0 4px 14px rgba(9, 88, 217, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.key-bpm-page__primary-btn:hover {
  box-shadow: 0 6px 18px rgba(9, 88, 217, 0.42);
}

.key-bpm-page__primary-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.key-bpm-page__primary-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.key-bpm-page__primary-btn--busy {
  opacity: 0.88;
  pointer-events: none;
}

.key-bpm-page__start-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.key-bpm-page__primary-hint {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.875rem; /* 14px */
  color: #6b7280;
  line-height: 1.45;
}

.key-bpm-page__wave-wrap {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(
    165deg,
    rgba(24, 144, 255, 0.08) 0%,
    var(--page-bg-soft, #f7fafc) 42%,
    rgba(9, 109, 217, 0.06) 100%
  );
  border: 1px solid rgba(24, 144, 255, 0.2);
  box-shadow: 0 4px 14px rgba(9, 109, 217, 0.08);
}

.key-bpm-page__wave-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-bottom: 0.55rem;
}

.key-bpm-page__wave-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-mid, #1890ff);
  box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.45);
  animation: key-bpm-rec-pulse 1.25s ease-out infinite;
}

@keyframes key-bpm-rec-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.45);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(24, 144, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
  }
}

.key-bpm-page__wave-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #1f2937);
}

.key-bpm-page__wave-hint {
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  margin-left: auto;
}

@media (max-width: 380px) {
  .key-bpm-page__wave-hint {
    margin-left: 0;
    width: 100%;
  }
}

.key-bpm-page__wave-frame {
  position: relative;
  width: 100%;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.key-bpm-page__wave-canvas {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.key-bpm-page__progress {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  overflow: hidden;
  accent-color: var(--brand-mid, #1890ff);
}

.key-bpm-page__status {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.55;
  text-align: center;
}

.key-bpm-page__result {
  margin-top: 1rem;
  padding: 1rem 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
}

.key-bpm-page__result-heading {
  margin: 0 0 0.85rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #374151;
}

.key-bpm-page__result-block {
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.key-bpm-page__result-block:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.key-bpm-page__result-block--soft .key-bpm-page__result-value {
  color: #6b7280;
}

.key-bpm-page__result-row {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  word-break: break-word;
}

.key-bpm-page__result-brack {
  font-weight: 700;
  color: #111827;
}

.key-bpm-page__result-value {
  font-weight: 700;
  color: #111827;
}

.key-bpm-page__result-note {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.45;
}

.key-bpm-page__result-foot {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

.key-bpm-page__retry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 2px solid #0958d9;
  border-radius: 12px;
  background: #fff;
  color: #0958d9;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.key-bpm-page__retry-btn:active {
  background: rgba(9, 88, 217, 0.08);
}

.key-bpm-page__details {
  margin-top: 1.25rem;
  padding: 0 0.25rem;
}

.key-bpm-page__details-summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #096dd9;
  list-style: none;
}

.key-bpm-page__details-summary::-webkit-details-marker {
  display: none;
}

.key-bpm-page__details-body {
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  background: var(--page-bg-soft, #fafafa);
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
}

.key-bpm-page__details-list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.55;
}

.key-bpm-page__details-list li {
  margin: 0.35rem 0;
}

/* 隐藏 file input，仍可被按钮触发 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 上传识别调性 listen-key-bpm.html（适老化 + 拖拽区） */
.key-bpm-page--upload .key-bpm-page__elder-title {
  font-size: 1.2rem;
  font-weight: 700;
}
.key-bpm-page--upload .key-bpm-page__elder-heading {
  font-size: 1.15rem;
  font-weight: 700;
}
.key-bpm-page--upload .key-bpm-page__elder-list,
.key-bpm-page--upload .key-bpm-page__elder-list li {
  font-size: 1.05rem;
  line-height: 1.65;
}
.key-bpm-page--upload .key-bpm-page__elder-hint,
.key-bpm-page--upload .key-bpm-page__elder-note {
  font-size: 1rem;
  line-height: 1.6;
}
.key-bpm-page--upload .key-bpm-page__elder-status {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 500;
}
.key-bpm-page--upload .key-bpm-page__elder-value {
  font-size: 1.35rem;
  font-weight: 700;
}
.key-bpm-page__drop-zone {
  border: 1px dashed rgba(24, 144, 255, 0.35);
  border-radius: 14px;
  padding: 1rem 0.9rem 1.1rem;
  background: linear-gradient(180deg, rgba(24, 144, 255, 0.05) 0%, rgba(255, 255, 255, 0.65) 100%);
  text-align: center;
}
.key-bpm-page__drop-zone.key-bpm-page__drop--hover {
  border-color: rgba(24, 144, 255, 0.55);
  background: rgba(24, 144, 255, 0.08);
}
/* 真实 file 叠在按钮上，避免 WebView 拦截 input.click() */
.key-bpm-page__pick-row {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}
.key-bpm-page__file-input-native {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
.key-bpm-page__pick-facade {
  pointer-events: none;
  position: relative;
  z-index: 1;
  width: 100%;
}
.key-bpm-page__upload-main-btn {
  min-height: 3.25rem;
  font-size: 1.0625rem;
  width: 100%;
}
.key-bpm-page__result-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.key-bpm-page__go-play-btn {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.35);
}
.key-bpm-page__go-play-btn:active {
  opacity: 0.92;
}

/* 兼容旧类名（若其它脚本引用） */
.key-bpm-page__result-line--muted .key-bpm-page__value {
  color: var(--text-muted, #8c8c8c);
}

/* ========== 全站细节：分类与区块间距（手机略压、平板拉开） ========== */
@media (max-width: 599px) {
  .app-home-page .home-categories-section {
    margin-bottom: 0.45rem;
  }
}

@media (min-width: 600px) {
  .app-home-page .home-categories-section {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
  }

  .app-home-page .home-v2-section--lib {
    margin-top: 0.95rem;
  }

  .app-home-page .home-v2-section--lib .home-v2-section__head {
    margin-bottom: 0.8rem;
    padding-bottom: 0.55rem;
  }
}

@media (min-width: 768px) {
  .app-home-page .home-categories-section {
    margin-bottom: 1.15rem;
  }

  .app-home-page .home-v2-section--lib {
    margin-top: 1.1rem;
    margin-bottom: 1.65rem;
  }

  .app-home-page .home-v2-section--lib .home-v2-section__head {
    margin-bottom: 0.9rem;
  }
}

/* ========== 全站终稿：视觉层级、工具集、我的列表对齐（不改布局） ========== */
.app-my-tools-page .app-tool-card {
  border-radius: var(--app-radius-chrome, 12px);
  box-shadow: var(--app-shadow-chrome, 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04));
}

.app-my-tools-page .app-tool-card__ico {
  border-radius: var(--app-radius-chrome-sm, 10px);
}

.app-mine-page .app-mine-list .app-mine-row,
.app-mine-page .app-mine-list .app-mine-row--btn {
  align-items: center;
  min-height: 3.45rem;
}

.home-lib-card__chip,
#flbzPage.app-flbz-ui-v3 .home-lib-card__chip,
body.app-search-standalone .app-flbz-list-section--home-lib .home-lib-card__chip {
  border-radius: var(--app-radius-chrome-sm, 10px);
}