/* ============================================================
   俍子看 · PWA —— 全局样式
   ------------------------------------------------------------
   主题与 APK 版完全一致：
     深墨蓝 #0E1117（背景） + 琥珀金 #E8B86D（强调）
     大圆角、毛玻璃、细腻动效
   全部用原生 CSS 变量（APK 的 App.vue 里也是同一套变量名），
   方便两边对照维护。
   ============================================================ */

:root {
  /* 背景与层次 */
  --lz-bg: #0E1117;          /* 主背景：深墨蓝/炭黑 */
  --lz-bg-soft: #141A24;     /* 次级背景：卡片底 */
  --lz-bar: #12161F;         /* 顶/底栏 */
  --lz-card: rgba(255, 255, 255, 0.045);
  --lz-card-strong: rgba(255, 255, 255, 0.08);
  --lz-line: rgba(255, 255, 255, 0.08);

  /* 强调色：琥珀金 */
  --lz-accent: #E8B86D;
  --lz-accent-soft: rgba(232, 184, 109, 0.16);
  --lz-accent-line: rgba(232, 184, 109, 0.55);
  --lz-accent-glow: rgba(232, 184, 109, 0.28);

  /* 文本 */
  --lz-text: #ECEFF4;
  --lz-text-2: #97A1B0;
  --lz-text-3: #5E6773;

  /* 圆角与阴影 */
  --lz-r-lg: 24px;
  --lz-r-md: 20px;
  --lz-r-sm: 16px;
  --lz-r-pill: 999px;
  --lz-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lz-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);

  /* 安全区（刘海屏 / 底部小白条）—— viewport-fit=cover 之后才有值 */
  --lz-safe-top: env(safe-area-inset-top, 0px);
  --lz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lz-tabbar-h: 56px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--lz-bg);
}

body {
  color: var(--lz-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", "Source Han Sans CN", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 防止 iOS 上横向溢出出现左右晃动的「橡皮筋」 */
  overflow-x: hidden;
  /* 文本可选中（复制站名/链接有用），但按钮上不可选 */
  -webkit-user-select: text;
  user-select: text;
  /* 支持 iOS 的「滑动返回」体感：整体允许纵向滚动 */
  overscroll-behavior-y: contain;
}

button {
  font-family: inherit;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

input {
  font-family: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* iOS 上 type=search 会带一个原生的清除按钮，与自绘的 × 重复了 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

img { max-width: 100%; display: block; }

/* ---------------- 启动闪屏 ---------------- */
.lz-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(180deg, #161B25 0%, var(--lz-bg) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}
.lz-splash--off { opacity: 0; visibility: hidden; pointer-events: none; }
.lz-splash-mark {
  font-family: "Kaiti SC", "STKaiti", KaiTi, serif;
  font-size: 96px;
  line-height: 1;
  color: var(--lz-accent);
  text-shadow: 0 0 42px rgba(232, 184, 109, 0.34);
}
.lz-splash-name {
  margin-top: 22px;
  font-size: 15px;
  letter-spacing: 8px;
  color: rgba(232, 184, 109, 0.82);
}

/* ---------------- 页面骨架 ---------------- */
.lz-page {
  min-height: 100vh;
  padding: calc(var(--lz-safe-top) + 24px) 18px 0;
  /* 给底部 tabbar + 安全区留位置 */
  padding-bottom: calc(var(--lz-tabbar-h) + var(--lz-safe-bottom) + 28px);
  animation: lzFadeUp 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes lzFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lzGlow {
  0%   { box-shadow: 0 0 0 0 rgba(232, 184, 109, 0); }
  50%  { box-shadow: 0 0 0 4px rgba(232, 184, 109, 0.16); }
  100% { box-shadow: 0 0 0 2px rgba(232, 184, 109, 0.22); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes skPulse { 0%,100% { opacity: 0.42; } 50% { opacity: 0.9; } }

/* ---------------- 品牌区 ---------------- */
.lz-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}
.lz-logo {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 26px rgba(232, 184, 109, 0.28), var(--lz-inner);
}
.lz-logo-img { width: 62px; height: 62px; }
.lz-app-name {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--lz-text);
}
.lz-slogan {
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--lz-text-3);
}
.lz-set-btn {
  position: absolute;
  right: 0;
  top: 14px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--lz-r-pill);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--lz-text-2);
}
.lz-set-btn:active { opacity: 0.7; }

/* 篮球页的字标是纯 CSS 画的球 */
.lz-logo--ball {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, rgba(232, 184, 109, 0.22), rgba(232, 184, 109, 0.05));
  border: 1px solid rgba(232, 184, 109, 0.32);
  box-shadow: 0 0 26px rgba(232, 184, 109, 0.22), var(--lz-inner);
}
.lz-ball {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--lz-accent);
}
.lz-ball-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--lz-accent); }
.lz-ball-h { position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--lz-accent); }

/* ---------------- 搜索框 ---------------- */
.lz-search-wrap { margin-top: 26px; }
.lz-search-bar {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  border-radius: var(--lz-r-pill);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--lz-inner);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.lz-search-bar--focus {
  border-color: var(--lz-accent-line);
  background: rgba(255, 255, 255, 0.09);
  animation: lzGlow 0.6s ease forwards;
}
.lz-input {
  flex: 1;
  height: 52px;
  margin: 0 10px;
  font-size: 16px; /* iOS 上 <16px 会自动放大页面，千万别改小 */
  color: var(--lz-text);
}
.lz-input::placeholder { color: var(--lz-text-3); font-size: 14px; }

/* 搜索图标：纯 CSS（圆 + 斜柄） */
.lz-icon-search {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.6px solid var(--lz-accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.lz-icon-search::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: -2px;
  width: 8px;
  height: 1.6px;
  background: var(--lz-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* 清空按钮（×） */
.lz-btn-clear {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.lz-btn-clear::before,
.lz-btn-clear::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 10px;
  width: 10px;
  height: 1.6px;
  background: var(--lz-text-2);
  border-radius: 2px;
}
.lz-btn-clear::before { transform: rotate(45deg); }
.lz-btn-clear::after { transform: rotate(-45deg); }

/* 搜索按钮：未输入时低调，输入后点亮 */
.lz-btn-go {
  flex-shrink: 0;
  height: 34px;
  padding: 0 16px;
  margin-left: 8px;
  border-radius: var(--lz-r-pill);
  background: rgba(232, 184, 109, 0.16);
  border: 1px solid rgba(232, 184, 109, 0.28);
  font-size: 13px;
  color: var(--lz-accent);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.lz-btn-go--on {
  background: var(--lz-accent);
  border-color: var(--lz-accent);
  color: #1A1206;
  box-shadow: 0 4px 14px rgba(232, 184, 109, 0.28);
}
.lz-btn-go:active { transform: scale(0.96); }

/* ---------------- 区块 ---------------- */
.lz-block { margin-top: 26px; }
.lz-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.lz-block-title { font-size: 13px; letter-spacing: 1px; color: var(--lz-text-2); }
.lz-block-tip,
.lz-block-link { font-size: 12px; color: var(--lz-text-3); }
.lz-block-link { color: var(--lz-accent); }

/* ---------------- 历史搜索 chips ---------------- */
.lz-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lz-chips::-webkit-scrollbar { display: none; }
.lz-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--lz-r-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--lz-inner);
  font-size: 13px;
  color: var(--lz-text-2);
  max-width: 200px;
}
.lz-chip--on { border-color: var(--lz-accent-line); color: var(--lz-text); }
.lz-chip-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-chip-x {
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.lz-chip-x::before,
.lz-chip-x::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 1.4px;
  background: var(--lz-text-2);
  border-radius: 2px;
}
.lz-chip-x::before { transform: rotate(45deg); }
.lz-chip-x::after { transform: rotate(-45deg); }

/* ---------------- 站点行 ---------------- */
.lz-site {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: var(--lz-r-md);
  background: var(--lz-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--lz-inner);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.lz-site--on {
  border-color: var(--lz-accent-line);
  background: linear-gradient(180deg, rgba(232, 184, 109, 0.1), rgba(232, 184, 109, 0.03));
  transform: scale(1.012);
}
.lz-site:active { opacity: 0.86; }
.lz-radio {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.lz-site--on .lz-radio { border-color: var(--lz-accent); }
.lz-radio-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--lz-accent);
  box-shadow: 0 0 8px var(--lz-accent-glow);
}
.lz-site-info { flex: 1; min-width: 0; margin-left: 12px; display: flex; flex-direction: column; }
.lz-site-name { font-size: 15px; color: var(--lz-text); }
.lz-site-host {
  margin-top: 3px;
  font-size: 12px;
  color: var(--lz-text-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-site-flag {
  margin-top: 4px;
  font-size: 10px;
  color: #E0A24A;
}
.lz-enter {
  flex-shrink: 0;
  height: 30px;
  padding: 0 14px;
  margin-left: 10px;
  border-radius: var(--lz-r-pill);
  border: 1px solid rgba(232, 184, 109, 0.35);
  font-size: 13px;
  color: var(--lz-accent);
}
.lz-enter:active { background: var(--lz-accent-soft); }

/* ---------------- 等分大胶囊（直播页 / 收藏历史页 / NBA） ---------------- */
.lz-seg {
  display: flex;
  margin-top: 22px;
  padding: 4px;
  border-radius: var(--lz-r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--lz-inner);
}
.lz-seg--sm { margin-top: 12px; }
.lz-seg-btn {
  flex: 1;
  height: 38px;
  border-radius: var(--lz-r-pill);
  font-size: 14px;
  color: var(--lz-text-2);
  transition: background 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.lz-seg--sm .lz-seg-btn { height: 32px; font-size: 13px; }
.lz-seg-btn--on {
  background: var(--lz-accent);
  color: #1A1206;
  box-shadow: 0 3px 12px rgba(232, 184, 109, 0.26);
}
/* 胶囊上的条数角标 */
.lz-seg-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.lz-seg-btn--on .lz-seg-n {
  background: rgba(26, 18, 6, 0.2);
}

/* ---------------- NBA 今日 / 赛程 ---------------- */
.lz-nba {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lz-nba-load {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 0;
}
.lz-nba-load-t { font-size: 13px; color: var(--lz-text-3); }
.lz-nba-empty {
  padding: 26px 0;
  text-align: center;
  font-size: 13px;
  color: var(--lz-text-3);
}
.lz-nba-day {
  margin: 8px 0 2px;
  padding-left: 4px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--lz-accent);
}
.lz-nba-game {
  padding: 12px 14px;
  border-radius: var(--lz-r-md);
  background: var(--lz-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--lz-inner);
}
/* 76 人的比赛：琥珀金描边 + 淡金底 */
.lz-nba-game--fav {
  border-color: rgba(232, 184, 109, 0.5);
  background: linear-gradient(180deg, rgba(232, 184, 109, 0.1), rgba(232, 184, 109, 0.03));
}
.lz-nba-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.lz-nba-status { font-size: 11px; color: var(--lz-text-3); }
.lz-nba-status.is-live { color: #E87070; }
.lz-nba-tag {
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: var(--lz-accent-soft);
  font-size: 10px;
  line-height: 18px;
  color: var(--lz-accent);
}
.lz-nba-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.lz-nba-name { font-size: 15px; color: var(--lz-text); }
.lz-nba-team.is-fav .lz-nba-name { color: var(--lz-accent); }
.lz-nba-score {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--lz-text-2);
}
.lz-nba-team.is-fav .lz-nba-score { color: var(--lz-accent); }
.lz-nba-score.is-live { color: var(--lz-text); font-weight: 600; }
.lz-nba-foot {
  margin-top: 10px;
  font-size: 11px;
  text-align: center;
  color: var(--lz-text-3);
}

/* ---------------- 收藏卡片 ---------------- */
.lz-favcard { padding: 12px 10px 12px 14px; }
.lz-favcard-star {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(232, 184, 109, 0.3), rgba(232, 184, 109, 0.06));
  border: 1px solid rgba(232, 184, 109, 0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--lz-accent);
}
.lz-favcard-x {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: var(--lz-text-3);
}
.lz-favcard-x:active { background: rgba(224, 86, 86, 0.16); color: #E87070; }

/* 工具栏收藏星标 */
.lz-ico-star {
  position: relative;
  width: 13px;
  height: 13px;
  display: inline-block;
  background: var(--ic);
  /* 五角星：用两个三角形拼（不用图片，避免部分环境 img 不渲染） */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.lz-ico-star.is-on { background: var(--lz-accent); }

/* 直播行：没有 radio，左侧是「篮」字标 */
.lz-live {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 12px 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--lz-r-md);
  background: var(--lz-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--lz-inner);
  text-align: left;
}
.lz-live:active { opacity: 0.86; }
.lz-live-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(232, 184, 109, 0.26), rgba(232, 184, 109, 0.05));
  border: 1px solid rgba(232, 184, 109, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--lz-accent);
}
.lz-live-main { flex: 1; min-width: 0; margin-left: 12px; display: flex; flex-direction: column; }
.lz-live-name { font-size: 15px; color: var(--lz-text); }
.lz-live-url {
  margin-top: 3px;
  font-size: 11px;
  color: var(--lz-text-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-live-note {
  flex-shrink: 0;
  margin-left: 8px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--lz-r-pill);
  background: rgba(255, 255, 255, 0.05);
  font-size: 10px;
  line-height: 20px;
  color: var(--lz-text-3);
}

/* ---------------- 加载 / 空状态 ---------------- */
.lz-loading {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.lz-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(232, 184, 109, 0.25);
  border-top-color: var(--lz-accent);
  animation: spin 0.85s linear infinite;
}
.lz-loading-text { font-size: 13px; color: var(--lz-text-2); }

.lz-empty {
  padding: 46px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lz-empty-art { position: relative; width: 128px; height: 96px; display: flex; align-items: center; justify-content: center; }
.lz-empty-glow { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: rgba(232, 184, 109, 0.08); }
.lz-empty-film {
  position: relative;
  width: 96px;
  height: 62px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lz-empty-film i { position: absolute; width: 6px; height: 6px; border-radius: 2px; background: rgba(232, 184, 109, 0.35); }
.lz-empty-film .h1 { left: 8px; top: 8px; }
.lz-empty-film .h2 { left: 8px; bottom: 8px; }
.lz-empty-film .h3 { right: 8px; top: 8px; }
.lz-empty-film .h4 { right: 8px; bottom: 8px; }
.lz-empty-title { margin-top: 22px; font-size: 16px; color: var(--lz-text-2); }
.lz-empty-desc { margin-top: 8px; font-size: 13px; color: var(--lz-text-3); }

/* ---------------- 历史页 ---------------- */
.lz-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 0 4px;
}
.lz-head-title { flex: 1; margin: 0; font-size: 20px; font-weight: 400; letter-spacing: 1px; }
.lz-head-clear { font-size: 13px; color: var(--lz-accent); }
.lz-head-back {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.lz-head-back::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 10px;
  width: 12px;
  height: 1.8px;
  background: var(--lz-text);
  border-radius: 2px;
}
.lz-head-back::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-left: 1.8px solid var(--lz-text);
  border-bottom: 1.8px solid var(--lz-text);
  transform: rotate(45deg) translate(1px, -2px);
}

/* 历史卡片：左滑删除（触摸/鼠标都支持） */
.lz-card-wrap {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--lz-r-lg);
  overflow: hidden;
}
.lz-card-del {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 88px;
  border-radius: var(--lz-r-lg);
  background: rgba(224, 86, 86, 0.16);
  border: 1px solid rgba(224, 86, 86, 0.28);
  color: #E87070;
  font-size: 14px;
}
.lz-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: var(--lz-r-lg);
  background: var(--lz-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--lz-inner);
  touch-action: pan-y;
  will-change: transform;
}
.lz-card--anim { transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); }
.lz-cover {
  width: 118px;
  height: 66px;
  border-radius: var(--lz-r-sm);
  overflow: hidden;
  background: #1B2230;
  flex-shrink: 0;
}
.lz-cover img { width: 100%; height: 100%; object-fit: cover; }
.lz-cover-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1B2230, #232C3D);
}
.lz-cover-mark {
  position: relative;
  width: 26px;
  height: 20px;
  border-radius: 4px;
  border: 1.4px solid rgba(232, 184, 109, 0.45);
}
.lz-cover-mark::before,
.lz-cover-mark::after {
  content: '';
  position: absolute;
  top: 4px;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: rgba(232, 184, 109, 0.45);
}
.lz-cover-mark::before { left: 4px; }
.lz-cover-mark::after { right: 4px; }

.lz-card-meta { flex: 1; min-width: 0; margin-left: 14px; }
.lz-card-title {
  display: block;
  font-size: 16px;
  color: var(--lz-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-card-row { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.lz-card-site {
  height: 20px;
  padding: 0 8px;
  border-radius: var(--lz-r-pill);
  background: var(--lz-accent-soft);
  font-size: 11px;
  line-height: 20px;
  color: var(--lz-accent);
}
.lz-card-time { display: block; margin-top: 8px; font-size: 12px; color: var(--lz-text-3); }
.lz-card-hint { margin-top: 6px; font-size: 10px; color: var(--lz-text-3); }

/* ---------------- 设置页 ---------------- */
.lz-panel {
  margin-bottom: 16px;
  padding: 16px 16px 14px;
  border-radius: var(--lz-r-lg);
  background: var(--lz-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--lz-inner);
}
.lz-panel-title { font-size: 13px; letter-spacing: 1px; color: var(--lz-text-2); }
.lz-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lz-row-main { flex: 1; display: flex; flex-direction: column; }
.lz-row-title { font-size: 15px; color: var(--lz-text); }
.lz-row-desc { margin-top: 5px; font-size: 12px; line-height: 18px; color: var(--lz-text-3); }
.lz-tip { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.lz-tip-text { font-size: 11px; line-height: 18px; color: var(--lz-text-3); }
.lz-site-row { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; }
.lz-site-row .n { font-size: 14px; color: var(--lz-text); flex-shrink: 0; }
.lz-site-row .u {
  flex: 1;
  font-size: 12px;
  color: var(--lz-text-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-btn {
  width: 100%;
  margin-top: 12px;
  height: 44px;
  border-radius: var(--lz-r-md);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: var(--lz-text-2);
}
.lz-btn:active { background: rgba(255, 255, 255, 0.09); }
.lz-mini-btn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--lz-r-pill);
  border: 1px solid rgba(232, 184, 109, 0.42);
  background: rgba(232, 184, 109, 0.08);
  font-size: 12px;
  color: var(--lz-accent);
}
.lz-about { margin-top: 10px; }
.lz-about-line { display: block; font-size: 12px; line-height: 20px; color: var(--lz-text-3); }
.lz-about-desc { display: block; margin-top: 8px; font-size: 11px; line-height: 18px; color: var(--lz-text-3); }

/* iOS 风格开关 */
.lz-switch { position: relative; flex-shrink: 0; display: inline-flex; }
.lz-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lz-switch-track {
  position: relative;
  display: block;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.22s ease;
}
.lz-switch-track i {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lz-switch input:checked + .lz-switch-track { background: var(--lz-accent); }
.lz-switch input:checked + .lz-switch-track i { transform: translateX(20px); }
.lz-switch input:focus-visible + .lz-switch-track { box-shadow: 0 0 0 3px rgba(232, 184, 109, 0.3); }

/* ---------------- 底部 Tab 栏 ---------------- */
.lz-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  height: calc(var(--lz-tabbar-h) + var(--lz-safe-bottom));
  padding-bottom: var(--lz-safe-bottom);
  display: flex;
  background: rgba(18, 22, 31, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lz-tabbar--hide { display: none; }
.lz-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #7A8394;
}
.lz-tab--on { color: var(--lz-accent); }
.lz-tab-img { width: 24px; height: 24px; opacity: 0.72; transition: opacity 0.2s ease; }
.lz-tab--on .lz-tab-img { opacity: 1; }
.lz-tab-text { font-size: 10px; }

/* ---------------- 站内浏览器 ---------------- */
.lz-browser {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #FFFFFF; /* 与 APK 版一致：白色底，方便分辨「窗口没显示」和「页面是黑的」 */
  display: flex;
  flex-direction: column;
}
.lz-browser[hidden] { display: none; }

.lz-bar {
  position: relative;
  flex-shrink: 0;
  background: var(--lz-bar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: var(--lz-safe-top);
}
.lz-bar-inner {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.lz-bar-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.lz-bw-host {
  font-size: 12px;
  color: var(--lz-text-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-bw-title {
  font-size: 11px;
  color: var(--lz-text-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-btn-back { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.lz-btn-back::before {
  content: '';
  position: absolute;
  left: 3px; top: 10px;
  width: 12px; height: 1.8px;
  background: var(--lz-text);
  border-radius: 2px;
}
.lz-btn-back::after {
  content: '';
  position: absolute;
  left: 3px; top: 10px;
  width: 8px; height: 8px;
  border-left: 1.8px solid var(--lz-text);
  border-bottom: 1.8px solid var(--lz-text);
  transform: rotate(45deg) translate(1px, -2px);
}
.lz-btn-close { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.lz-btn-close::before,
.lz-btn-close::after {
  content: '';
  position: absolute;
  left: 3px; top: 10px;
  width: 16px; height: 1.8px;
  background: var(--lz-text);
  border-radius: 2px;
}
.lz-btn-close::before { transform: rotate(45deg); }
.lz-btn-close::after { transform: rotate(-45deg); }

.lz-tool-btn {
  --ic: rgba(255, 255, 255, 0.62);
  flex-shrink: 0;
  height: 26px;
  padding: 0 9px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  display: flex;
  align-items: center;
  gap: 5px;
}
.lz-tool-btn-t { font-size: 11px; line-height: 12px; color: var(--lz-text-2); }
.lz-tool-btn--accent { --ic: #E8B86D; border-color: rgba(232, 184, 109, 0.46); background: rgba(232, 184, 109, 0.13); }
.lz-tool-btn--accent .lz-tool-btn-t { color: var(--lz-accent); }
.lz-tool-btn--off { --ic: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
.lz-tool-btn--off .lz-tool-btn-t { color: var(--lz-text-3); }
.lz-tool-btn[disabled] { opacity: 0.45; }

/* 旋转图标：缺口圆环 + 箭头头 */
.lz-ico-rot { position: relative; width: 12px; height: 12px; display: inline-block; }
.lz-ico-rot-ring {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px;
  border: 1.7px solid var(--ic);
  border-left-color: transparent;
  border-radius: 50%;
}
.lz-ico-rot-head {
  position: absolute; left: 0; top: -1.5px;
  width: 0; height: 0;
  border-top: 3.2px solid transparent;
  border-bottom: 3.2px solid transparent;
  border-left: 4.4px solid var(--ic);
  transform: rotate(-32deg);
}
.lz-ico-rot--back { transform: scaleY(-1); }

/* 过滤图标：盾牌（带勾） */
.lz-ico-shield {
  position: relative;
  width: 12px;
  height: 13px;
  display: inline-block;
  background: var(--ic);
  clip-path: polygon(50% 0, 100% 18%, 100% 58%, 50% 100%, 0 58%, 0 18%);
}
.lz-tool-btn--off .lz-ico-shield { opacity: 0.5; }

.lz-btn-diag {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(232, 184, 109, 0.45);
  font-size: 13px;
  font-weight: 600;
  color: var(--lz-accent);
}

.lz-progress-track { height: 2px; background: rgba(255, 255, 255, 0.05); }
.lz-progress { height: 2px; width: 20%; background: var(--lz-accent); transition: width 0.28s ease; }

/* 提示条 + 诊断面板 */
.lz-notice {
  flex-shrink: 0;
  margin: 4px 10px 0;
  padding: 6px 6px 8px;
  border-radius: var(--lz-r-md);
  background: rgba(232, 184, 109, 0.13);
  border: 1px solid rgba(232, 184, 109, 0.32);
  display: flex;
  flex-direction: column;
}
.lz-notice[hidden] { display: none; }
.lz-notice-head { min-height: 28px; display: flex; align-items: center; gap: 6px; padding-left: 8px; }
.lz-notice-text {
  flex: 1;
  font-size: 12px;
  color: var(--lz-accent);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lz-notice-btn {
  flex-shrink: 0;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--lz-r-pill);
  background: var(--lz-accent);
  font-size: 12px;
  color: #1A1206;
}
.lz-notice-btn--ghost { background: transparent; border: 1px solid rgba(232, 184, 109, 0.42); color: var(--lz-accent); }
.lz-notice-x {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(232, 184, 109, 0.3);
  font-size: 12px;
  color: var(--lz-accent);
}
.lz-diag { margin: 4px 2px 0; padding: 6px 8px; border-radius: var(--lz-r-sm); background: rgba(0, 0, 0, 0.28); }
.lz-diag-lines { max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lz-diag-line {
  display: block;
  font-size: 10.5px;
  line-height: 16px;
  color: rgba(232, 184, 109, 0.86);
  word-break: break-all;
}
.lz-diag-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }

/* iframe 区域 */
.lz-frame-wrap { position: relative; flex: 1; min-height: 0; background: #FFFFFF; }
.lz-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #FFFFFF;
}
.lz-frame-mask {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lz-frame-mask--off { opacity: 0; visibility: hidden; pointer-events: none; }
.lz-skeleton { width: 76%; }
.lz-sk-line {
  display: block;
  height: 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(30, 40, 55, 0.12);
  animation: skPulse 1.2s ease-in-out infinite;
}
.lz-sk-line.w70 { width: 70%; }
.lz-sk-line.w50 { width: 50%; }
.lz-sk-line.w85 { width: 85%; }

/* 横屏（手动旋转）时压扁工具栏，把空间还给画面 */
.lz-browser--land .lz-bar-inner { height: 36px; }
.lz-browser--land .lz-tool-btn-t { display: none; }

/* ---------------- 底部「添加到主屏幕」提示条 ---------------- */
.lz-a2hs {
  position: fixed;
  left: 10px;
  right: 10px;
  /* 浮在 tabbar 之上；tabbar 高度 + 安全区都算进去 */
  bottom: calc(var(--lz-tabbar-h) + var(--lz-safe-bottom) + 12px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--lz-r-md);
  background: rgba(24, 30, 41, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(232, 184, 109, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}
.lz-a2hs--on { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* 分享图标：纯 CSS 画（方框 + 向上箭头），不用 emoji 也不用图片 */
.lz-a2hs-ico {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 28px;
  border: 1.6px solid var(--lz-accent);
  border-radius: 5px;
  border-top-color: transparent;
  margin-top: 4px;
}
.lz-a2hs-ico::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -9px;
  width: 1.8px;
  height: 16px;
  margin-left: -0.9px;
  background: var(--lz-accent);
  border-radius: 2px;
}
.lz-a2hs-ico::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -9px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-left: 1.8px solid var(--lz-accent);
  border-top: 1.8px solid var(--lz-accent);
  transform: rotate(45deg);
}
.lz-a2hs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lz-a2hs-t { font-size: 13px; color: var(--lz-text); }
.lz-a2hs-s { margin-top: 3px; font-size: 11px; color: var(--lz-text-3); }
.lz-a2hs-go {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--lz-r-pill);
  background: var(--lz-accent);
  font-size: 12px;
  color: #1A1206;
}
.lz-a2hs-x {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  color: var(--lz-text-3);
}

/* ---------------- 通用弹层 / toast ---------------- */
.lz-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: maskIn 0.2s ease both;
}
.lz-mask[hidden] { display: none; }
@keyframes maskIn { from { opacity: 0 } to { opacity: 1 } }
.lz-sheet {
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px calc(26px + var(--lz-safe-bottom));
  background: #151B26;
  border-radius: 28px 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  animation: sheetUp 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes sheetUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
.lz-sheet-grip { width: 40px; height: 4px; margin: 0 auto 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.lz-sheet-title { display: block; font-size: 16px; color: var(--lz-text); }
.lz-sheet-desc {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 22px;
  color: var(--lz-text-3);
  white-space: pre-wrap;
}
.lz-sheet-btn {
  width: 100%;
  margin-top: 12px;
  height: 48px;
  border-radius: var(--lz-r-md);
  background: rgba(255, 255, 255, 0.06);
  font-size: 15px;
  color: var(--lz-text);
}
.lz-sheet-btn--primary { background: var(--lz-accent); color: #1A1206; }
.lz-sheet-btn--ghost { background: transparent; color: var(--lz-text-3); }

.lz-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--lz-tabbar-h) + var(--lz-safe-bottom) + 70px);
  z-index: 300;
  max-width: 78vw;
  padding: 10px 16px;
  border-radius: var(--lz-r-pill);
  background: rgba(20, 26, 36, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
  font-size: 13px;
  color: var(--lz-text);
  text-align: center;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.24s ease;
}
.lz-toast--on { transform: translate(-50%, 0); opacity: 1; }

/* ---------------- 适配 ---------------- */

/* 横屏 / iPad：内容不要拉太宽，居中留白更好看 */
@media (min-width: 700px) {
  .lz-page { max-width: 620px; margin: 0 auto; }
  .lz-a2hs { max-width: 600px; margin: 0 auto; }
}

/* 横屏时给页面多一些横向留白、少一点上下留白 */
@media (orientation: landscape) and (max-height: 520px) {
  .lz-page { padding-top: calc(var(--lz-safe-top) + 12px); }
  .lz-logo, .lz-logo-img { width: 48px; height: 48px; }
  .lz-app-name { font-size: 19px; margin-top: 10px; }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* 键盘弹出时（iOS 上可视高度变小）不要被 tabbar 挡住输入内容 */
@supports (height: 100dvh) {
  .lz-page { min-height: 100dvh; }
}

/* ============================================================
   开屏动画（骑车小人）—— 对应 APK v1.0.14 的 LzIntro.vue
   ------------------------------------------------------------
   素材坐标按 420×300 设计画布换算（轮心 105,215 / 315,215，半径 48）。
   车轮用 CSS 旋转模拟转动。
   ============================================================ */
.lz-intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--lz-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lz-intro.is-in { opacity: 1; }
.lz-intro.is-out { opacity: 0; }

.lz-intro-name {
  width: 128px;
  height: auto;
  margin-bottom: 26px;
}

/* 外层管左右位移，内层管上下颠簸 ——
   两个 transform 放同一个元素上会互相覆盖，必须分层 */
.lz-intro-ride {
  position: relative;
  width: 100%;
  height: 110px;
  animation: lzRide 1.5s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
.lz-intro-bob {
  position: relative;
  width: 154px;
  height: 110px;
  margin: 0 auto;
  animation: lzBob 0.42s ease-in-out infinite;
}
.lz-intro-bike {
  position: absolute;
  left: 0;
  top: 0;
  width: 154px;
  height: 110px;
}
.lz-intro-wheel {
  position: absolute;
  bottom: 6px;
  width: 35px;
  height: 35px;
  animation: lzSpin 0.9s linear infinite;
}
.wheel-rear { left: 12px; }
.wheel-front { right: 12px; }

/* 速度线：在车尾后方，向左飘散 */
.lz-intro-speed {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: rgba(232, 184, 109, 0.5);
  animation: lzSpeed 0.8s ease-out infinite;
}
.lz-intro-speed.s1 { left: -16px; top: 52px; width: 18px; animation-delay: 0s; }
.lz-intro-speed.s2 { left: -26px; top: 62px; width: 24px; animation-delay: 0.18s; }
.lz-intro-speed.s3 { left: -12px; top: 72px; width: 14px; animation-delay: 0.36s; }

@keyframes lzRide {
  from { transform: translateX(-62%); }
  to   { transform: translateX(62%); }
}
@keyframes lzBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes lzSpin {
  to { transform: rotate(360deg); }
}
@keyframes lzSpeed {
  0%   { opacity: 0; transform: translateX(0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-18px); }
}

/* ============================================================
   手势 OSD（亮度 / 音量提示条）
   ------------------------------------------------------------
   与 APK v1.0.21 定稿的样式对齐：
   「深色玻璃 + 白细边 + 琥珀金只做点缀」，不用早期那个被吐槽的
   「大黄色方块」。
   ⚠️ 注意：PWA 端这是**页面级**亮度/音量，不是系统调节，
      所以文案上明确标注「页面亮度 / 页面音量」。
   ============================================================ */
.lz-gosd {
  position: fixed;
  left: 50%;
  top: 16%;
  z-index: 8500;
  transform: translate(-50%, -6px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(14, 17, 23, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lz-gosd.on { opacity: 1; transform: translate(-50%, 0); }

/* 图标：太阳（亮度）/ 喇叭（音量），纯 CSS + clip-path */
.lz-gosd-ico {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.6px solid var(--lz-accent);
  position: relative;
}
.lz-gosd.is-vol .lz-gosd-ico {
  border: 0;
  border-radius: 0;
  width: 16px;
  height: 13px;
  background: var(--lz-accent);
  clip-path: polygon(0 35%, 28% 35%, 62% 0, 62% 100%, 28% 65%, 0 65%);
}

.lz-gosd-track {
  position: relative;
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.lz-gosd-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 2px;
  background: var(--lz-accent);
  transition: width 0.1s linear;
}
.lz-gosd-val {
  flex-shrink: 0;
  min-width: 34px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #fff;
}
.lz-gosd-tag {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--lz-text-3);
}

/* ============================================================
   全屏时的网页内浮动投屏按钮
   ------------------------------------------------------------
   对应 APK 右上角那颗原生按钮。PWA 端没有原生层，只能在
   注入网页的 DOM 里做（跨域 iframe 时注入不进去，靠工具栏兜底）。
   显示后 floatHideMs 毫秒无操作自动隐藏，点画面唤回。
   ============================================================ */
#lz-cast-float {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 2147483000;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  /* 实心琥珀金胶囊 + 深色文字：对比度够，且和 App 主题一致 */
  background: #E8B86D;
  color: #3A2708;
  font-size: 13px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
#lz-cast-float.on { display: flex; }
#lz-cast-float i {
  width: 12px;
  height: 12px;
  border: 1.8px solid #3A2708;
  border-radius: 2px;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}