/* ===== 虚拟手机：沉浸式屏幕 ===== */
.phone-shell {
  width: min(380px, 86vw);
  height: min(760px, 86vh);
  max-height: 86vh;
 border-radius: 32px;
 background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--bg-secondary)), var(--bg));
 background-size: cover;
 background-position: center;
 box-shadow: 0 18px 60px rgba(0,0,0,0.36), inset 0 0 0 1px rgba(255,255,255,0.16);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 position: relative;
  color: var(--text);
}
/* ===== 全屏显示手机：铺满整个 modal，去掉手机边框装饰 ===== */
#phone-modal.phone-fullscreen-mode {
  padding: 0;
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#phone-modal.phone-fullscreen-mode .phone-shell {
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  box-shadow: none;
  /* 顶栏顶到刘海/灵动岛下面，底部避开 Home Indicator */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 全屏时给内容限个最大宽度并居中，避免平板/宽屏被拉太宽 */
#phone-modal.phone-fullscreen-mode .phone-shell {
  max-width: 560px;
  margin: 0 auto;
}
/* 手机内所有输入框：去掉浏览器默认 focus 高亮框 */
.phone-shell input:focus,
.phone-shell textarea:focus,
.phone-shell select:focus,
.phone-shell [contenteditable]:focus {
 outline: none !important;
 box-shadow: none !important;
}
/* placeholder 统一走次文字色：跟主题变量走，不同主题/玩家自定义色都不糊。.has-custom-wallpaper 下各处白色规则更具体、优先级更高，照旧生效。 */
.phone-shell input::placeholder,
.phone-shell textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
.phone-shell input::-webkit-input-placeholder,
.phone-shell textarea::-webkit-input-placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
.phone-shell::before {
 content: '';
 position: absolute;
 inset:0;
 pointer-events: none;
 background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 22%, rgba(0,0,0,0.08));
 z-index:0;
}
.phone-shell > * { position: relative; z-index:1; }
.phone-shell.has-custom-wallpaper { color: #fff; --text: #fff; --text-secondary: rgba(255,255,255,0.7); }
.phone-statusbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 22px 6px;
 font-size:12px;
 font-weight:700;
 color: currentColor;
 text-shadow: 0 1px 5px rgba(0,0,0,0.30);
 flex-shrink:0;
}
.phone-statusbar-right {
 display: flex;
 align-items: center;
 gap:7px;
}
.phone-signal {
 height:12px;
 display: inline-flex;
 align-items: flex-end;
 gap:2px;
}
.phone-signal i {
 width:3px;
 border-radius:2px;
 background: currentColor;
 opacity: .92;
 display: block;
}
.phone-signal i:nth-child(1) { height:4px; opacity: .55; }
.phone-signal i:nth-child(2) { height:6px; opacity: .68; }
.phone-signal i:nth-child(3) { height:8px; opacity: .82; }
.phone-signal i:nth-child(4) { height:10px; }
.phone-wifi {
 width:15px;
 height:11px;
 position: relative;
 display: inline-block;
 opacity: .9;
}
.phone-wifi::before,
.phone-wifi::after,
.phone-wifi i {
 content: '';
 position: absolute;
 left:50%;
 transform: translateX(-50%);
 border:2px solid currentColor;
 border-left-color: transparent;
 border-right-color: transparent;
 border-bottom-color: transparent;
 border-radius: 999px 999px 0 0;
 box-sizing: border-box;
}
.phone-wifi::before { width:15px; height:10px; top:1px; opacity: .45; }
.phone-wifi::after { width:11px; height:8px; top:4px; opacity: .68; }
.phone-wifi i { width:6px; height:5px; top:7px; border-width:2px; opacity: .95; }
.phone-battery {
 display: inline-flex;
 align-items: center;
 gap:4px;
 font-size:10px;
 font-weight:700;
 white-space: nowrap;
}
.phone-battery-shell {
 width:22px;
 height:10px;
 border:1px solid currentColor;
 border-radius:3px;
 padding:1px;
 box-sizing: border-box;
 position: relative;
 opacity: .86;
}
.phone-battery-shell::after {
 content: '';
 position: absolute;
 right:-3px;
 top:3px;
 width:2px;
 height:4px;
 border-radius: 0 2px 2px 0;
 background: currentColor;
 opacity: .8;
}
.phone-battery-fill {
 display: block;
 height:100%;
 border-radius:2px;
 background: currentColor;
 transition: width .25s ease;
}
.phone-battery.charging .phone-battery-fill {
 background: var(--accent);
}
.phone-header {
 display: flex;
 align-items: center;
 padding: 4px 16px 8px;
 min-height:34px;
 color: currentColor;
 flex-shrink:0;
 position: relative;
}
.phone-home-mode .phone-header {
 display: none;
}
/* 自定义APP运行中：不显示原生顶栏。
   【为什么】APP 的配色/布局是自己写的，原生顶栏跟着主题走，接缝往往很突兀，
   而且顶栏占掉的高度会让 APP 拿不到完整画布。索性整个交出去，APP 自己画退出按钮
   （TSC.ui.close()）。
   【副作用，明知故犯】APP 没画退出按钮时用户只能关掉整个手机弹窗。这是换自由度的
   代价，已在 guide.md 里写成硬规则。
   加类的地方在 _renderCustomApp，去掉在 _teardownCustomAppBridge —— 世界观APP 和
   通用APP 两条入口都走这两个函数，不用各自维护。 */
.phone-shell.phone-capp-mode .phone-header {
 display: none;
}
.phone-nav-btn, .phone-header-spacer { width:36px; height:30px; flex-shrink:0; }
.phone-nav-btn {
 background: rgba(255,255,255,0.18);
 border:1px solid rgba(255,255,255,0.22);
 color: currentColor;
 border-radius:999px;
 font-size:18px;
 cursor: pointer;
 backdrop-filter: blur(8px);
 display:flex;
 align-items:center;
 justify-content:center;
}
.phone-nav-btn svg { display:block; }
#phone-title { font-weight:750; font-size:15px; letter-spacing: .03em; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:56%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
#phone-header-right { min-width: 36px; flex-shrink: 0; }
.phone-body {
 flex:1;
 overflow-y: auto;
 overflow-x: hidden;
 min-height:0;
 display: flex;
 flex-direction: column;
}
.phone-body > * { min-height:0; }
.phone-home {
  flex:1;
  min-height:0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
/* 滑动页面容器 */
.phone-pages {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-pages::-webkit-scrollbar { display: none; }
/* 桌面鼠标拖动翻页时：禁用吸附与文本选中，避免拖动过程被 snap 拉扯、误选文字 */
.phone-pages.phone-pages-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
/* 单页：内容超高时本页可纵向滚动（兜底，避免图标被裁掉）；正常屏幕由矮屏媒体查询压紧后不会出现滚动条 */
.phone-page {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 18px 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.phone-page::-webkit-scrollbar { display: none; }
/* 页面指示器 */
.phone-page-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
  flex-shrink: 0;
}
.phone-page-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: all 0.2s;
}
.phone-page-dot.active {
  width: 16px;
  border-radius: 3px;
  background: rgba(255,255,255,0.9);
}
.phone-widget {
 padding: 26px 8px 12px;
 text-align: center;
 color: currentColor;
 text-shadow: 0 1px 5px rgba(0,0,0,0.26);
}
.phone-widget-time { font-size:54px; font-weight:240; letter-spacing:1px; line-height: .96; }
.phone-widget-subline {
 margin-top: 8px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 max-width: 100%;
 opacity: .84;
}
.phone-widget-date { font-size:13px; margin-top:0; opacity: 1; }
.phone-widget-weather {
 font-size:13px;
 opacity: .9;
 white-space: nowrap;
}
.phone-system-grid, .phone-app-grid {
 display: grid;
 grid-template-columns: repeat(4,1fr);
 gap: 14px 14px;
 padding: 10px 6px 6px;
}
.phone-system-grid {
 padding-bottom: 6px;
}
.phone-home-spacer { flex:1; min-height:20px; }
.phone-app-grid { padding: 4px 6px 4px; }
/* 个人资料卡片：app 上方装饰条，磨砂半透明，文字右对齐 + 头像在最右 */
.phone-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 4px 10px;
  padding: 10px 12px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%),
    rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.28);
  -webkit-tap-highlight-color: transparent;
}
.phone-profile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  color: currentColor;
}
.phone-profile-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.28);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  cursor: text;
  caret-color: #fff;
  border-radius: 4px;
  padding: 0 2px;
  transition: background .12s;
}
.phone-profile-name:hover { background: rgba(255,255,255,0.08); }
.phone-profile-name:focus { background: rgba(255,255,255,0.14); }
.phone-profile-bio {
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 0.78;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.24);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  cursor: text;
  caret-color: #fff;
  border-radius: 4px;
  padding: 0 2px;
  transition: background .12s, opacity .12s;
}
.phone-profile-bio:hover { background: rgba(255,255,255,0.08); opacity: 0.92; }
.phone-profile-bio:focus { background: rgba(255,255,255,0.14); opacity: 1; }
.phone-profile-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 2px 6px rgba(0,0,0,0.18);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, filter .12s;
}
.phone-profile-avatar:active { transform: scale(.92); filter: brightness(.92); }
.phone-profile-avatar.has-avatar { background-color: rgba(0,0,0,0.2); }
/* 主屏 app-grid 和 dock 之间预留固定空间（之后做分页指示器用） */
.phone-home-bottom-spacer { flex-shrink: 0; min-height: 22px; }
/* 底部 dock：相机/设置/收起手机 三格均分，磨砂半透明 */
.phone-dock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 10px 4px max(env(safe-area-inset-bottom, 0px), 6px);
  padding: 10px 8px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%),
    rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.28);
}
.phone-dock .phone-app-icon { gap: 5px; }
.phone-dock .phone-app-icon-label { font-size:10.5px; }
.phone-app-icon {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap:7px;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 color: currentColor;
 position: relative;
}
/* App 图标未读红点（邮箱等）：叠在图标圆形右上角 */
.phone-app-icon-dot {
  position: absolute;
  top: -2px;
  right: calc(50% - 34px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e53935;
  border: 2px solid var(--bg, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  z-index: 3;
  pointer-events: none;
}
.phone-app-icon-circle {
 width:54px;
 height:54px;
 border-radius:16px;
 background: rgba(255,255,255,0.24);
 border:1px solid rgba(255,255,255,0.30);
 box-shadow: 0 8px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.34);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: transform .12s, filter .12s;
 backdrop-filter: blur(8px);
 overflow: hidden;
}
.phone-app-settings .phone-app-icon-circle { background: linear-gradient(145deg, rgba(255,255,255,0.30), rgba(255,255,255,0.16)); }
.phone-app-minimize .phone-app-icon-circle { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.20)), rgba(255,255,255,0.16)); }
/* 去边框（异形/透明图标）：全局开关开启且该 app 有自定义图标时生效。
   清掉背景/边框/阴影/毛玻璃，图标裸露。选择器带 shell 前缀 + !important，
   以压过 minimize 的 accent 底与 fudge 主题的 var(--text) 底。 */
.phone-shell .phone-app-icon-circle-bare,
.phone-shell.phone-theme-fudge .phone-app-icon-circle-bare,
.phone-shell.phone-theme-fudge .phone-app-minimize .phone-app-icon-circle-bare,
.phone-shell.phone-theme-fudge .phone-app-settings .phone-app-icon-circle-bare {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
/* 占位图标：和普通图标同款外框，内部留空，不响应点击 */
.phone-app-placeholder { pointer-events: none; }
.phone-app-icon-circle-placeholder {
  background: rgba(255,255,255,0.16);
  border: 1px dashed rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
}
/* 待解锁：占位框内居中放一把锁，半透明弱化 */
.phone-app-locked .phone-app-icon-circle-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-app-lock-glyph {
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,0.6);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}
.phone-app-lock-glyph svg { width: 21px; height: 21px; }
.phone-app-locked .phone-app-icon-label { opacity: 0.7; }
.phone-app-icon:active .phone-app-icon-circle { transform: scale(.92); filter: brightness(.92); }

/* 通用桌面：4 列 × 5 行。每格包含完整 APP 图标与名称区域，尺寸随手机可用区域自适应。 */
.phone-global-apps-page { flex-direction: column; position:relative; }
.phone-widget-library-open { position:absolute; z-index:8; top:4px; left:50%; transform:translateX(-50%); border:1px solid color-mix(in srgb,var(--accent) 55%,white); border-radius:999px; padding:5px 10px; background:color-mix(in srgb,var(--bg-secondary) 84%,transparent); color:var(--text); font-size:11px; font-weight:750; white-space:nowrap; }
.phone-widget-library-card { width:min(92vw, 390px); max-height:78vh; overflow:hidden; }
.phone-widget-library-head { position:relative; display:flex; align-items:center; justify-content:center; min-height:36px; padding:4px 42px 4px 16px; }
.phone-widget-library-head b { font-size:16px; }
.phone-widget-library-head .modal-corner-btn { position:absolute; top:0; right:4px; }
.phone-widget-library-list { display:flex; flex-direction:column; gap:10px; max-height:calc(78vh - 112px); overflow-y:auto; padding:2px; }
.phone-widget-library-item { display:grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows:auto auto; gap:7px 10px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--bg-secondary); min-width:0; }
.phone-widget-library-preview-wrap { grid-column:1 / -1; width:100%; aspect-ratio:16 / 7; min-height:72px; overflow:hidden; border:1px solid var(--border); border-radius:7px; background:var(--bg); }
.phone-widget-library-preview { display:block; width:100%; height:100%; border:0; pointer-events:none; background:transparent; }
.phone-widget-library-info { min-width:0; display:flex; align-items:center; gap:8px; }
.phone-widget-library-info b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:13px; }
.phone-widget-library-info small { flex:0 0 auto; color:var(--text-secondary); font-size:11px; }
.phone-widget-library-actions { display:flex; gap:6px; align-items:center; justify-content:flex-end; }
.phone-widget-library-actions button { border:1px solid var(--border); border-radius:6px; padding:5px 8px; background:var(--bg-tertiary); color:var(--text); font-size:11px; white-space:nowrap; }
.phone-widget-library-actions button.danger { color:var(--error); }
.phone-global-apps-grid {
  /* 桌面单元格是固定的 4×5 坐标系：组件只按整数格跨度占位，不能反过来撑缩行/列。 */
  /* 图标圆 54px + 间距 7px + 名称行约13px + 留白；一格必须包含完整 APP。 */
  --desktop-cell-h: 84px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, var(--desktop-cell-h));
  grid-auto-rows: var(--desktop-cell-h);
  align-content: start;
  width: 100%;
  min-height: calc(var(--desktop-cell-h) * 5 + 32px);
  padding: 8px 10px 0;
  box-sizing: border-box;
  gap: 8px 4px;
}
/* 不给 grid item 写 height：单格由轨道高度获得 84px，多格由 grid-row:span N 自动拉伸为 N 格。 */
.phone-global-app-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.phone-global-app-slot > .phone-app-icon { width: 100%; }
.phone-desktop-widget-slot { overflow: visible; border-radius: 10px; }
.phone-desktop-widget { position: relative; width: 100%; height: 100%; overflow: visible; border-radius: 10px; }
.phone-desktop-widget.is-editing { animation: phoneGlobalAppWiggle .18s ease-in-out infinite alternate; touch-action: none; }
.phone-desktop-widget.is-editing .phone-desktop-widget-frame { pointer-events: none; }
/* 编辑态独立手势层：不依赖 iframe 的 pointer-events 穿透，整个组件主体都能稳定拖动。 */
.phone-desktop-widget-drag-handle { position:absolute; inset:0; z-index:4; touch-action:none; cursor:grab; }
.phone-desktop-widget-drag-handle:active { cursor:grabbing; }
/* 普通桌面态必须明确可交互；仅 .is-editing 时由上面的规则冻结 iframe。 */
.phone-desktop-widget-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: transparent; overflow: hidden; border-radius: 10px; pointer-events: auto; touch-action: manipulation; }
.phone-desktop-widget-remove { position:absolute; top:-10px; right:-10px; z-index:6; width:21px; height:21px; padding:0; border:1.5px solid rgba(255,255,255,.9); border-radius:50%; background:#ef5350; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.28); font:16px/17px Arial,sans-serif; cursor:pointer; }
.phone-desktop-widget-remove:active { transform:scale(.86); }
.phone-global-app-slot.is-widget-drop-target { outline: 2px dashed color-mix(in srgb, var(--accent) 80%, white); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.phone-global-app { position: relative; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.phone-global-app.is-editing { animation: phoneGlobalAppWiggle .18s ease-in-out infinite alternate; touch-action: none; }
.phone-global-app.is-dragging { opacity: .18; animation: none; }
.phone-global-app-slot.is-drop-target { border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); outline: 1px dashed color-mix(in srgb, var(--accent) 65%, transparent); }
.phone-global-app-drag-ghost { position: fixed; left: 0; top: 0; z-index: 2147483645; pointer-events: none; opacity: .92; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); animation: none !important; }
.phone-global-app-remove {
  position: absolute; top: -5px; right: -4px; z-index: 3;
  width: 19px; height: 19px; padding: 0; border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 50%; background: #ef5350; color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.28); font-size: 16px; line-height: 15px;
  font-family: Arial, sans-serif; cursor: pointer;
}
.phone-global-app-remove:active { transform: scale(.86); }
@keyframes phoneGlobalAppWiggle {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.4deg); }
}
.phone-global-app.is-editing:nth-child(even) { animation-delay: -.09s; }

.phone-icon-glyph {
 width:26px;
 height:26px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 filter: drop-shadow(0 2px 5px rgba(0,0,0,0.42));
}
.phone-icon-glyph svg {
 width:25px;
 height:25px;
 display: block;
 stroke: currentColor;
}
.phone-app-icon-label {
 font-size:11px;
 font-weight:650;
 color: currentColor;
 text-align: center;
 text-shadow: 0 1px 4px rgba(0,0,0,0.30);
}
.phone-settings-page { padding: 14px 18px 24px; color: currentColor; }
.phone-settings-card + .phone-settings-card { margin-top: 14px; }
.phone-settings-card {
 border-radius:20px;
 padding:16px;
 background: rgba(255,255,255,0.18);
 border:1px solid rgba(255,255,255,0.24);
 box-shadow: 0 10px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
 backdrop-filter: blur(10px);
}
.phone-settings-title { font-size:16px; font-weight:850; margin-bottom:6px; }
.phone-settings-desc { font-size:12px; line-height:1.6; opacity: .78; margin-bottom:14px; }
.phone-settings-btn {
 width:100%;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height:40px;
 margin-top:10px;
 border-radius:14px;
 border: none;
 background: var(--accent);
 color: var(--on-accent);
 font-size:13px;
 font-weight:800;
 cursor: pointer;
}
.phone-settings-btn.secondary { background: rgba(255,255,255,0.18); color: currentColor; border:1px solid rgba(255,255,255,0.24); }
.phone-icon-btn {
 min-width:32px;
 height:31px;
 padding:0 8px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:none;
 border:1px solid var(--border);
 border-radius:8px;
 color:var(--text);
 cursor:pointer;
}
.phone-text-icon-btn {
 background:none;
 border:1px solid var(--border);
 border-radius:6px;
 padding:8px;
 font-size:12px;
 cursor:pointer;
 color:var(--text);
 display:flex;
 align-items:center;
 justify-content:center;
 gap:5px;
}
.phone-inline-icon-btn {
 margin-top:4px;
 background:none;
 border:none;
 color:var(--accent);
 font-size:11px;
 cursor:pointer;
 padding:0;
 display:inline-flex;
 align-items:center;
 gap:4px;
}
.phone-icon-btn svg,
.phone-text-icon-btn svg,
.phone-inline-icon-btn svg,
.phone-share-mini svg,
.phone-share-text svg,
.phone-collect-mini svg,
.phone-collect-text svg,
.phone-delete-text svg,
.phone-search-history-item svg,
.phone-map-action-btn svg,
.phone-forum-preview-action-btn svg,
.phone-moment-action-btn svg,
.phone-moment-refresh-btn svg,
.phone-moment-image-desc svg,
.phone-moments-cover-action svg,
.phone-moment-edit-btn svg,
.phone-memo-action-btn svg { display:block; flex-shrink:0; }
.phone-share-mini,
.phone-collect-mini {
 cursor: pointer;
 opacity: .66;
 color: var(--text-secondary);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 20px;
 height: 20px;
 border-radius: 999px;
 transition: opacity .15s, transform .15s, background .15s, color .15s;
 vertical-align: middle;
}
.phone-share-mini:hover,
.phone-share-text:hover {
 opacity: 1;
 color: var(--accent);
}
.phone-collect-mini:hover,
.phone-collect-text:hover {
 opacity: 1;
 color: var(--accent);
}
.phone-share-mini:active,
.phone-share-text:active,
.phone-collect-mini:active,
.phone-collect-text:active,
.phone-delete-text:active {
 transform: scale(.94);
}
.phone-share-mini:hover,
.phone-collect-mini:hover {
 background: var(--bg-tertiary);
}
.phone-share-text,
.phone-collect-text,
.phone-delete-text {
 cursor: pointer;
 opacity: .66;
 color: var(--text-secondary);
 font-size: 11px;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 transition: opacity .15s, transform .15s, color .15s;
}
.phone-delete-text {
 color: var(--danger, #e57373);
}
.phone-delete-text:hover {
 opacity: 1;
 color: var(--danger, #ff6b6b);
}

.phone-search-history-item {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 min-width: 0;
 opacity: .92;
}

/* 地图页 */
.phone-map-searchbar {
 display: flex;
 gap: 6px;
 margin-bottom: 12px;
 align-items: center;
}
.phone-map-search-input-wrap {
 flex: 1;
 min-width: 0;
 display: flex;
 align-items: center;
 gap: 6px;
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 0 10px;
 background: var(--bg-tertiary);
 color: var(--text-secondary);
 min-height: 32px;
 box-sizing: border-box;
}
.phone-map-search-input-wrap input {
 flex: 1;
 min-width: 0;
 border: none !important;
 outline: none;
 background: transparent !important;
 box-shadow: none !important;
 color: var(--text);
 font-size: 13px;
 padding: 6px 0;
 font-family: inherit;
}
.phone-map-search-btn {
  min-height: 32px;
  flex-shrink: 0;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.phone-map-result-card {
 background: var(--bg-tertiary);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px;
 margin-bottom: 8px;
}
.phone-map-result-head {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-bottom: 6px;
}
.phone-map-result-name {
 flex: 1;
 min-width: 0;
 font-size: 13px;
 line-height: 1.4;
 font-weight: 600;
 color: var(--text);
}
.phone-map-result-actions {
 display: inline-flex;
 align-items: center;
 justify-content: flex-end;
 gap: 6px;
 flex-shrink: 0;
}
.phone-map-action-btn,
.phone-forum-preview-action-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 4px;
 padding: 4px 8px;
 border-radius: 999px;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text-secondary);
 font-size: 11px;
 line-height: 1;
 cursor: pointer;
 font-family: inherit;
 transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.phone-map-action-btn:hover,
.phone-forum-preview-action-btn:hover {
 color: var(--accent);
 border-color: var(--accent);
 background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.phone-map-action-btn:active,
.phone-forum-preview-action-btn:active { transform: scale(.96); }
.phone-map-result-address {
 display: flex;
 align-items: center;
 gap: 4px;
 color: var(--text-secondary);
 font-size: 11px;
 line-height: 1.45;
 margin-top: 2px;
}
.phone-map-result-address svg { opacity: .78; }
.phone-map-region {
 display: inline-flex;
 align-items: center;
 padding: 0 6px;
 border-radius: 999px;
 font-size: 10px;
 font-weight: 600;
 color: var(--text-secondary);
 background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
 line-height: 1.5;
 margin-right: 2px;
 flex-shrink: 0;
}
.phone-map-result-desc {
 color: var(--text);
 font-size: 11px;
 line-height: 1.5;
 margin-top: 2px;
}
.phone-map-result-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-top: 8px;
}
.phone-map-result-foot-left {
 flex: 1;
 min-width: 0;
 display: flex;
 align-items: center;
 gap: 6px;
}
.phone-map-distance-pill {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: var(--text-secondary);
 font-size: 10px;
 line-height: 1.3;
}
/* 地图卡·评分（头部右侧） */
.phone-map-rating {
 display: inline-flex;
 align-items: center;
 gap: 3px;
 flex-shrink: 0;
}
.phone-map-rating-stars {
 color: #f5a623;
 font-size: 11px;
 line-height: 1;
 letter-spacing: -1px;
}
.phone-map-rating-num {
 color: #f5a623;
 font-size: 12px;
 font-weight: 700;
 line-height: 1;
}
/* 地图卡·分类 + 标签行 */
.phone-map-tagrow {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 4px;
 margin: 2px 0 4px;
}
.phone-map-cat {
 display: inline-flex;
 align-items: center;
 padding: 1px 7px;
 border-radius: 999px;
 font-size: 10px;
 font-weight: 600;
 color: var(--on-accent);
 background: var(--accent);
 line-height: 1.5;
}
.phone-map-tag {
 display: inline-flex;
 align-items: center;
 padding: 1px 7px;
 border-radius: 999px;
 font-size: 10px;
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 12%, transparent);
 border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
 line-height: 1.5;
}
/* 地图卡·状态 + 营业时间行 */
.phone-map-inforow {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
 margin-top: 4px;
}
.phone-map-status {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 11px;
 font-weight: 600;
 line-height: 1.3;
}
.phone-map-status-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 flex-shrink: 0;
}
.phone-map-hours {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: var(--text-secondary);
 font-size: 11px;
 line-height: 1.3;
}
.phone-map-hours svg { opacity: .75; }
/* 地图卡·热评 */
.phone-map-comment {
 margin-top: 8px;
 padding: 7px 9px;
 border-radius: 8px;
 background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
 border: 1px solid var(--border);
}
.phone-map-comment-user {
 display: flex;
 align-items: center;
 gap: 4px;
 color: var(--text-secondary);
 font-size: 10px;
 font-weight: 600;
 line-height: 1.3;
 margin-bottom: 3px;
}
.phone-map-comment-user svg { opacity: .7; }
.phone-map-comment-text {
 color: var(--text);
 font-size: 11px;
 line-height: 1.5;
}
/* 地图卡·购买/预订区（商品信息 + 按钮） */
.phone-map-buy-row {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 8px;
 padding: 8px 10px;
 border-radius: 10px;
 background: color-mix(in srgb, var(--accent) 8%, transparent);
 border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.phone-map-buy-info {
 flex: 1;
 min-width: 0;
}
.phone-map-buy-name {
 display: flex;
 align-items: center;
 gap: 4px;
 color: var(--text);
 font-size: 12px;
 font-weight: 600;
 line-height: 1.4;
}
.phone-map-buy-name svg { opacity: .8; color: var(--accent); flex-shrink: 0; }
.phone-map-buy-desc {
 color: var(--text-secondary);
 font-size: 10px;
 line-height: 1.45;
 margin-top: 2px;
}
.phone-map-buy-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 flex-shrink: 0;
 padding: 8px 14px;
 border-radius: 10px;
 border: none;
 background: var(--accent);
 color: var(--on-accent);
 font-size: 12px;
 font-weight: 600;
 line-height: 1;
 cursor: pointer;
 font-family: inherit;
 transition: filter .15s, transform .15s;
}
.phone-map-buy-btn:hover { filter: brightness(1.06); }
.phone-map-buy-btn:active { transform: scale(.98); }
/* 地图卡·出行方案区（复用 buy-row 结构，用中性色区分于购买区） */
.phone-map-transport-row {
 background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
 border-color: color-mix(in srgb, var(--text-secondary) 20%, transparent);
}
.phone-map-transport-row .phone-map-buy-name svg { color: var(--text-secondary); }
.phone-map-transport-free {
 flex-shrink: 0;
 padding: 6px 12px;
 font-size: 11px;
 font-weight: 600;
 color: var(--text-secondary);
 white-space: nowrap;
}
.phone-shell.has-custom-wallpaper .phone-map-comment {
 background: rgba(255, 255, 255, 0.08) !important;
 border-color: rgba(255, 255, 255, 0.18) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-comment-text,
.phone-shell.has-custom-wallpaper .phone-map-hours,
.phone-shell.has-custom-wallpaper .phone-map-status {
 color: rgba(255, 255, 255, 0.9) !important;
}
/* 全部订单聚合页：来源徽章配色 */
.phone-delivery-src-feiniao,
  .phone-delivery-src-youyu,
  .phone-delivery-src-shop,
  .phone-delivery-src-cottage,
  .phone-delivery-src-takeout {
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  color: #fff !important;
}
.phone-delivery-src-feiniao { background: #5b8def; }
.phone-delivery-src-youyu { background: #2bb3a3; }
.phone-delivery-src-shop { background: #f08a3c; }
.phone-delivery-src-cottage { background: #9b6dd6; }
.phone-delivery-src-takeout { background: #e0574a; }
.phone-shell.has-custom-wallpaper .phone-map-result-card {
 background: rgba(18, 20, 28, 0.30) !important;
 border-color: rgba(255, 255, 255, 0.24) !important;
color: rgba(255, 255, 255, 0.94) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-result-name,
.phone-shell.has-custom-wallpaper .phone-map-result-desc {
 color: rgba(255, 255, 255, 0.94) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-result-address,
.phone-shell.has-custom-wallpaper .phone-map-distance-pill,
.phone-shell.has-custom-wallpaper .phone-map-action-btn {
 color: rgba(255, 255, 255, 0.68) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-action-btn,
.phone-shell.has-custom-wallpaper .phone-forum-preview-action-btn {
 color: rgba(255, 255, 255, 0.68) !important;
 border-color: rgba(255, 255, 255, 0.22) !important;
 background: rgba(255,255,255,0.06) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-action-btn:hover,
.phone-shell.has-custom-wallpaper .phone-forum-preview-action-btn:hover {
 color: #fff !important;
 border-color: rgba(255,255,255,0.45) !important;
 background: rgba(255,255,255,0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-search-input-wrap {
 background: rgba(18, 20, 28, 0.38) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
color: rgba(255, 255, 255, 0.72) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-search-input-wrap input {
background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 color: rgba(255, 255, 255, 0.96) !important;
}
.phone-shell.has-custom-wallpaper .phone-map-search-input-wrap input::placeholder {
 color: rgba(255, 255, 255, 0.56) !important;
}

/* 地图轨迹 */
.phone-map-track-card {
 padding: 9px 10px;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--bg-tertiary);
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin-bottom: 8px;
}
.phone-map-track-time {
 color: var(--text-secondary);
 font-size: 10px;
 line-height: 1.3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.phone-map-track-location {
 color: var(--text);
 font-size: 12px;
 line-height: 1.45;
 word-break: break-word;
}

/* ===== 相机 App ===== */
.phone-camera-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.phone-camera-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* 拍摄页 */
.phone-camera-shoot-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 12px;
  gap: 14px;
  min-height: 0;
}
.phone-camera-hint {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0.78;
}
.phone-camera-text {
  flex: 1;
  min-height: 140px;
  resize: none;
  padding: 14px 14px;
  font-size: 14px;
  line-height: 1.65;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.phone-camera-text:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-tertiary));
}
.phone-camera-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 6px;
}
.phone-camera-btn-secondary {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.phone-camera-btn-secondary:hover { background: var(--bg-secondary); color: var(--text); }
.phone-camera-btn-secondary:active { transform: scale(.96); }
.phone-shell.has-custom-wallpaper .phone-camera-btn-secondary {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
/* 快门按钮：经典同心圆 */
.phone-camera-shutter {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 3px solid rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, background .12s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.phone-camera-shutter-inner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: block;
  transition: transform .12s, background .12s;
}
.phone-camera-shutter:hover .phone-camera-shutter-inner { background: var(--accent); }
.phone-camera-shutter:active { transform: scale(.92); }
.phone-camera-shutter:active .phone-camera-shutter-inner { transform: scale(.88); }
/* 相册：空状态 */
.phone-camera-album-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-secondary);
  text-align: center;
}
.phone-camera-album-empty-icon { opacity: .6; }
.phone-camera-album-empty-text { font-size: 14px; opacity: .7; }
.phone-camera-album-empty-sub { font-size: 12px; opacity: .5; }
/* 相册：拍立得网格 */
.phone-camera-album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 14px 14px 18px;
  align-content: start;
}
/* 相册页跟随自身滚动（flex 嵌套下 grid 的 flex:1+overflow 在部分 WebView 里算不出高度，改由 page 层滚） */
#phone-camera-album {
  overflow-y: auto;
  overflow-x: hidden;
}
.phone-camera-polaroid {
  display: flex;
  flex-direction: column;
  background: #faf6ec;
  padding: 8px 8px 16px;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  color: #2a2826;
  min-width: 0;
  overflow: hidden;
  opacity: 0.8;
}
.phone-camera-polaroid:hover { opacity: 1; }
.phone-camera-polaroid:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.12); }
.phone-camera-polaroid:active { transform: translateY(0); }
.phone-camera-polaroid-frame {
  aspect-ratio: 1 / 1;
  background: #ece4d3;
  border-radius: 2px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1.5;
  color: #4a4640;
  overflow: hidden;
}
.phone-camera-polaroid-content {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
/* 相册卡片底部 caption 区：地点+时间各自单行截断、左对齐 */
.phone-camera-polaroid-loc {
  margin-top: 8px;
  font-size: 10.5px;
  text-align: left;
  color: #5a5550;
  letter-spacing: 0.02em;
  line-height: 1.35;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-camera-polaroid-caption {
  margin-top: 3px;
  font-size: 9.5px;
  text-align: left;
  color: #8a857e;
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1.3;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== 照片详情 overlay（沉浸式阅读样式）===== */
#phone-photo-detail-overlay {
  background: rgba(0,0,0,0.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}
.phone-shell .phone-inner-modal .modal-content.phone-photo-detail-card {
  background: transparent !important;
  border: none !important;
  padding: 64px 24px 32px !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow-y: auto !important;
}
.phone-photo-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phone-photo-detail-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
/* 文字主体（沉浸式） */
.phone-photo-detail-text-immersive {
  flex: 0 1 auto;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255,255,255,0.92);
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
  width: 100%;
  max-width: 480px;
  padding: 28px 4px;
  font-weight: 350;
  letter-spacing: 0.01em;
}
/* 图片照片：直接铺一张图（小卡） */
.phone-camera-polaroid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
  display: block;
}
/* 图片照片：详情页大图 */
.phone-photo-detail-image-wrap {
  flex: 0 1 auto;
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 8px;
}
.phone-photo-detail-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  display: block;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}
.phone-photo-detail-img-caption {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  text-align: center;
  width: 100%;
  max-width: 480px;
  padding: 12px 8px 4px;
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 350;
  letter-spacing: 0.01em;
}
.phone-photo-detail-img-missing {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-style: italic;
  border-radius: 6px;
}
/* 调整镜头：尺寸选择区 */
.phone-camera-adjust-size-label {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.8;
  margin-top: 6px;
}
.phone-camera-adjust-ratios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.phone-camera-ratio-btn {
  flex: 1 1 auto;
  min-width: 52px;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.phone-camera-ratio-btn:hover { background: rgba(255,255,255,0.10); }
.phone-camera-ratio-btn.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
  color: var(--text);
}
.phone-camera-adjust-size-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.phone-camera-adjust-size-prefix { flex-shrink: 0; }
.phone-camera-adjust-size-x { opacity: 0.5; }
.phone-camera-adjust-size-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 6px;
  text-align: center;
  -moz-appearance: textfield;
}
.phone-camera-adjust-size-input::-webkit-outer-spin-button,
.phone-camera-adjust-size-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.phone-camera-adjust-size-input:focus {
  outline: none;
  border-color: var(--accent);
}
/* 描述/署名区（在文字或图片下方） */
.phone-photo-detail-meta {
  width: 100%;
  max-width: 480px;
  padding: 12px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 12px;
}
.phone-photo-detail-meta-loc {
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.04em;
  text-align: center;
}
.phone-photo-detail-meta-time {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  letter-spacing: 0.05em;
  text-align: center;
}
/* 按钮区（沉浸式背景下的玻璃按钮） */
.phone-photo-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-top: 22px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
}
.phone-photo-action {
  padding: 11px 12px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .12s, transform .12s;
}
.phone-photo-action:hover { background: rgba(255,255,255,0.14); }
.phone-photo-action:active { transform: scale(.96); }
.phone-photo-action-danger {
  color: #ff8a80;
  border-color: rgba(255,138,128,0.32);
  background: rgba(255,138,128,0.08);
}
.phone-photo-action-danger:hover { background: rgba(255,138,128,0.20); }
/* ===== 相册选择器（朋友圈"从相册选"）===== */
#phone-album-picker-overlay {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}
.phone-shell .phone-inner-modal .modal-content.phone-album-picker-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.phone-album-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.phone-album-picker-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-album-picker-close:hover { background: var(--bg); color: var(--text); }
.phone-album-picker-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  align-content: start;
}
/* ===== 调整镜头二级菜单 ===== */
.phone-shell .phone-inner-modal .modal-content.phone-camera-adjust-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  padding: 18px 18px 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
  max-width: 320px !important;
  width: 88% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.phone-camera-adjust-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.phone-camera-adjust-desc {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 4px;
}
.phone-camera-adjust-input {
  width: 100%;
  min-height: 56px;
  max-height: 100px;
  resize: none;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 4px;
  transition: border-color .12s;
}
.phone-camera-adjust-input:focus { border-color: var(--accent); }
.phone-camera-adjust-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.phone-camera-adjust-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
  text-align: left;
}
.phone-camera-adjust-btn:hover { background: var(--bg); }
.phone-camera-adjust-btn:active { transform: scale(.98); }
.phone-camera-adjust-btn-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.phone-camera-adjust-btn-sub {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.phone-camera-adjust-cancel {
  margin-top: 4px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.phone-camera-adjust-cancel:hover { color: var(--text); }
/* 文本框 AI 加载态 */
.phone-camera-text-loading {
  color: var(--text-secondary) !important;
  font-style: italic;
  opacity: 0.7;
}
.phone-tabbar { display: flex; border-top:1px solid var(--border); background: var(--bg-secondary); flex-shrink:0; }
.phone-tab {
 flex:1;
 text-align: center;
 padding: 10px 0;
 font-size:12px;
 color: var(--text-secondary);
 cursor: pointer;
 transition: color .15s, background .15s;
 border-top: 2px solid transparent;
 margin-top: -1px;
}
.phone-tab:hover { background: var(--bg-tertiary); }
.phone-tab.active { color: var(--accent); border-top-color: var(--accent); font-weight:600; }
#phone-fab {
 position: fixed;
 top: calc(50% + 48px);
 right: 12px;
 width:36px;
 height:36px;
 border-radius: 50%;
 background: var(--accent);
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 2px 8px rgba(0,0,0,0.30);
 cursor: pointer;
 z-index:200;
 -webkit-tap-highlight-color: transparent;
 transition: transform .15s;
}
#phone-fab:active { transform: scale(.9); }
/* 看直播最小化悬浮球：主播头像 + LIVE 红标，可拖动 */
.phone-live-float-ball {
  position: fixed;
  top: calc(50% - 60px);
  right: 12px;
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: visible;
  background: #15151a;
  border: 2px solid var(--accent, #f60);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  cursor: pointer; z-index: 100001;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.phone-live-float-ball img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.phone-live-ball-char {
  font-size: 18px; font-weight: 700; color: #fff;
}
.phone-live-ball-tag {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  background: var(--accent, #f60); color: var(--on-accent);
  font-size: 8px; font-weight: 700; letter-spacing: 0.5px;
  padding: 1px 5px; border-radius: 6px; line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.phone-live-float-ball:active { transform: scale(.92); }
/* v687.27：FAB 拖动模式视觉反馈 */
.floating-fab.fab-dragging {
  transform: scale(1.18) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
  transition: transform .1s, box-shadow .1s;
  opacity: 0.92;
}
.phone-notif-dot { position: absolute; top: 2px; right: 2px; width:8px; height:8px; border-radius: 50%; background: #e5393 5; display: none; }
/* 备忘录 */
.phone-memo-preview-card {
 background: var(--bg-tertiary);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px;
 margin-bottom: 8px;
 cursor: pointer;
 transition: transform .15s, border-color .15s, background .15s;
}
.phone-memo-preview-card:active { transform: scale(.99); }
.phone-memo-preview-title {
 font-size: 13px;
 font-weight: 600;
 color: var(--text);
 line-height: 1.35;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 margin-bottom: 5px;
}
.phone-memo-preview-meta {
 display: flex;
 align-items: center;
 min-width: 0;
}
.phone-memo-preview-line {
 flex: 1;
 min-width: 0;
 color: var(--text-secondary);
 font-size: 11px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.phone-memo-edit-actions {
 display: flex;
 gap: 8px;
 align-items: center;
 padding: 8px;
 border: 1px solid transparent;
 border-radius: 10px;
 background: transparent;
 flex-shrink: 0;
}
.phone-memo-save-btn,
.phone-memo-action-btn {
 border-radius: 6px;
 padding: 8px 12px;
 font-size: 12px;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 4px;
 font-family: inherit;
 white-space: nowrap;
}
.phone-memo-save-btn {
 flex: 1;
 background: var(--accent);
 color: var(--on-accent);
 border: none;
 font-size: 13px;
}
.phone-memo-action-btn {
 background: none;
 border: 1px solid var(--border);
 color: var(--text);
}
.phone-memo-action-btn.danger {
 border-color: var(--danger, #e53935);
 color: var(--danger, #e53935);
}
.phone-memo-action-btn:active,
.phone-memo-save-btn:active { transform: scale(.96); }

/* 好友圈顶部封面 */
.phone-moments-cover {
 height: 128px;
 margin: 0 12px 10px;
 border-radius: 12px;
 overflow: hidden;
 position: relative;
 flex-shrink: 0;
 background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, var(--bg-tertiary)), var(--bg-secondary));
 background-size: cover;
 background-position: center;
 border: 1px solid var(--border);
 cursor: pointer;
 box-shadow: 0 8px 22px rgba(0,0,0,0.14);
}
.phone-moments-cover::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.45));
 pointer-events: none;
}
.phone-moments-cover-action {
 position: absolute;
 top: 10px;
 right: 10px;
 width: 34px;
 height: 34px;
 border-radius: 999px;
 border: 1px solid rgba(255,255,255,0.32);
 background: rgba(0,0,0,0.28);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 z-index: 2;
}
.phone-moments-cover-hint {
 position: absolute;
 top: 12px;
 left: 12px;
 color: rgba(255,255,255,0.72);
 font-size: 10px;
 text-shadow: 0 1px 3px rgba(0,0,0,0.45);
 z-index: 1;
}
.phone-moments-profile {
 position: absolute;
 left: 12px;
 right: 12px;
 bottom: 12px;
 display: flex;
 align-items: center;
 gap: 10px;
 z-index: 1;
}
.phone-moment-avatar.cover {
 width: 42px;
 height: 42px;
 border: 2px solid rgba(255,255,255,0.72);
 box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.phone-moments-profile-text {
 min-width: 0;
 color: #fff;
 text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.phone-moments-profile-name {
 font-size: 15px;
 font-weight: 760;
 line-height: 1.25;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.phone-moments-profile-sub {
 font-size: 11px;
 opacity: .78;
 margin-top: 2px;
}
.phone-shell.has-custom-wallpaper .phone-moments-cover {
 border-color: rgba(255,255,255,0.24);
}

/* 好友圈动态流 */
.phone-moments-list {
 flex: 1;
 overflow-y: auto;
 padding: 0 12px 12px;
}
.phone-moment-card {
 background: var(--bg-tertiary);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 10px;
 margin-bottom: 10px;
}
.phone-moment-layout {
 display: flex;
 align-items: flex-start;
 gap: 10px;
}
.phone-moment-avatar {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 background: var(--accent);
 color: var(--on-accent);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 13px;
 font-weight: 700;
 flex-shrink: 0;
 object-fit: cover;
 overflow: hidden;
}
.phone-moment-avatar.npc { background: #888; color: #fff; }
.phone-moment-main {
 flex: 1;
 min-width: 0;
}
.phone-moment-main.mine-full {
 width: 100%;
}
.phone-moment-head {
 display: flex;
 align-items: baseline;
 gap: 8px;
 margin-bottom: 5px;
}
.phone-moment-name {
 font-size: 13px;
 font-weight: 700;
 color: var(--text);
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.phone-moment-time {
 margin-left: auto;
 font-size: 10px;
 color: var(--text-secondary);
 white-space: nowrap;
 flex-shrink: 0;
}
.phone-moment-text {
 font-size: 13px;
 line-height: 1.65;
 color: var(--text);
 white-space: pre-wrap;
 word-break: break-word;
 margin-bottom: 6px;
}
.phone-moment-image-wrap { margin: 6px 0; }
.phone-moment-image {
 max-width: 100%;
 max-height: 150px;
 border-radius: 8px;
 object-fit: cover;
 border: 1px solid var(--border);
 display: block;
}
.phone-moment-image-desc {
 display: flex;
 gap: 6px;
 align-items: flex-start;
 margin: 6px 0;
 padding: 7px 9px;
 background: var(--bg-secondary);
 border: 1px dashed var(--border);
 border-radius: 8px;
 font-size: 11px;
 line-height: 1.55;
 color: var(--text-secondary);
}
.phone-moment-visible {
 font-size: 10.5px;
 line-height: 1.45;
 color: var(--text-secondary);
 margin: 6px 0 8px;
 word-break: break-word;
}
.phone-moment-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 justify-content: flex-start;
 margin: 8px 0;
}
.phone-moment-action-btn,
.phone-moment-refresh-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 4px;
 padding: 4px 8px;
 border-radius: 999px;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text-secondary);
 font-size: 11px;
 line-height: 1;
 cursor: pointer;
 font-family: inherit;
 transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.phone-moment-action-btn:hover,
.phone-moment-refresh-btn:hover {
 color: var(--accent);
 border-color: var(--accent);
 background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.phone-moment-action-btn:active,
.phone-moment-refresh-btn:active { transform: scale(.96); }
.phone-moment-action-btn.danger {
 color: var(--danger, #e57373);
 border-color: color-mix(in srgb, var(--danger, #e57373) 50%, var(--border));
}
.phone-moment-refresh-btn { margin-top: 2px; }
.phone-moment-action-count {
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.8;
}
.phone-moment-comments {
 margin-top: 8px;
 padding-top: 8px;
 border-top: 1px solid var(--border);
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.phone-moment-comments-title {
 font-size: 11px;
 color: var(--text-secondary);
 margin-bottom: 1px;
}
.phone-moment-comment-card {
 background: var(--bg-secondary);
 border: 1px solid var(--border);
 border-radius: 7px;
 padding: 6px 8px;
 font-size: 11px;
 line-height: 1.55;
 color: var(--text);
}
.phone-moment-comment-name {
 color: var(--accent);
 font-weight: 700;
 margin-right: 4px;
}
.phone-moment-comment-text { color: var(--text); }
.phone-shell.has-custom-wallpaper .phone-moment-card,
.phone-shell.has-custom-wallpaper .phone-moment-image-desc,
.phone-shell.has-custom-wallpaper .phone-moment-comment-card {
 background: rgba(18, 20, 28, 0.38) !important;
 border-color: rgba(255, 255, 255, 0.22) !important;
 color: rgba(255, 255, 255, 0.94) !important;
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-moment-name,
.phone-shell.has-custom-wallpaper .phone-moment-text,
.phone-shell.has-custom-wallpaper .phone-moment-comment-text {
 color: rgba(255, 255, 255, 0.94) !important;
}
.phone-shell.has-custom-wallpaper .phone-moment-time,
.phone-shell.has-custom-wallpaper .phone-moment-visible,
.phone-shell.has-custom-wallpaper .phone-moment-comments-title,
.phone-shell.has-custom-wallpaper .phone-moment-image-desc,
.phone-shell.has-custom-wallpaper .phone-moment-action-btn,
.phone-shell.has-custom-wallpaper .phone-moment-refresh-btn {
 color: rgba(255, 255, 255, 0.68) !important;
}
.phone-shell.has-custom-wallpaper .phone-moment-action-btn,
.phone-shell.has-custom-wallpaper .phone-moment-refresh-btn {
 border-color: rgba(255, 255, 255, 0.22) !important;
 background: rgba(255,255,255,0.06) !important;
}
.phone-shell.has-custom-wallpaper .phone-moment-action-btn:hover,
.phone-shell.has-custom-wallpaper .phone-moment-refresh-btn:hover {
 color: #fff !important;
 border-color: rgba(255,255,255,0.45) !important;
 background: rgba(255,255,255,0.12) !important;
}

/* 好友圈生成加载 / 失败提示 */
.phone-generation-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 4px 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-tertiary);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.phone-generation-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: var(--accent);
  animation: phoneSpin .75s linear infinite;
  flex-shrink: 0;
}
.phone-generation-title { font-size: 13px; font-weight: 700; }
.phone-generation-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.phone-moment-generating-card { animation: phonePulse 1.2s ease-in-out infinite; }
.phone-generation-error {
  margin: 16px 4px;
  padding: 18px 12px;
  border: 1px solid rgba(255, 80, 80, .35);
  border-radius: 14px;
  background: rgba(255, 80, 80, .08);
  color: var(--danger);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}
/* 好友圈生成专用骨架屏：不依赖论坛/地图样式，确保手机里可见 */
.phone-moment-skeleton-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin: 0 4px 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.phone-moment-skeleton-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.phone-moment-skeleton-avatar,
.phone-moment-skeleton-line {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-tertiary) 88%, white 12%);
}
.phone-moment-skeleton-avatar::after,
.phone-moment-skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  animation: phoneMomentSkeletonShimmer 1.25s ease-in-out infinite;
}
.phone-moment-skeleton-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.phone-moment-skeleton-line { height: 10px; border-radius: 999px; }
.phone-moment-skeleton-line.user { width: 92px; }
.phone-moment-skeleton-line.time { width: 72px; margin-left: auto; }
.phone-moment-skeleton-line.summary-1 { width: 100%; margin-bottom: 7px; }
.phone-moment-skeleton-line.summary-2 { width: 78%; }
@keyframes phoneMomentSkeletonShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.phone-generation-inline-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.phone-generation-inline-label::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: var(--accent);
  animation: phoneSpin .75s linear infinite;
  flex-shrink: 0;
}
/* 论坛刷新评论：按钮旋转 + 评论区骨架屏（复用好友圈那套 wv-skeleton） */
.phone-forum-refresh-btn.spinning { pointer-events: none; opacity: .85; }
.phone-forum-refresh-btn.spinning svg { animation: phoneCallSpin .8s linear infinite; transform-origin: center; }
.phone-forum-comment-loading { animation: phonePulse 1.2s ease-in-out infinite; }
.phone-forum-comment-loading-title {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 8px 0 2px;
}
.phone-comment-skeleton-card {
  padding: 8px 10px !important;
  margin: 6px 0 0 !important;
}
.phone-moment-comment-loading {
  animation: phonePulse 1.2s ease-in-out infinite;
}
.phone-moment-comment-error {
  margin: 8px 0 0;
  padding: 10px;
}
@keyframes phoneSpin { to { transform: rotate(360deg); } }
@keyframes phonePulse { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

@keyframes phoneVoicePlay {
  0% { transform: scaleY(0.7); }
  50% { transform: scaleY(1.5); }
  100% { transform: scaleY(0.7); }
}
.phone-chat-voice-wave.playing > div {
  animation: phoneVoicePlay 0.8s ease-in-out infinite;
  transform-origin: center;
}
.phone-chat-voice-wave.playing > div:nth-child(1) { animation-delay: 0.0s; }
.phone-chat-voice-wave.playing > div:nth-child(2) { animation-delay: 0.15s; }
.phone-chat-voice-wave.playing > div:nth-child(3) { animation-delay: 0.3s; }
.phone-chat-voice-wave.playing > div:nth-child(4) { animation-delay: 0.45s; }
.phone-chat-voice-wave.playing > div:nth-child(5) { animation-delay: 0.6s; }

/* 全屏子面板（聊天设置等）：跟随壁纸主题 */
.phone-shell .phone-fullscreen-panel {
  background: var(--bg);
}
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel,
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel [style*="color:var(--text)"],
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel [style*="color: var(--text)"],
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel span,
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel label {
  color: rgba(255, 255, 255, 0.92) !important;
}
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel [style*="color:var(--text-secondary)"],
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel [style*="color: var(--text-secondary)"] {
  color: rgba(255, 255, 255, 0.48) !important;
}
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel [style*="background:var(--bg-tertiary)"],
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel [style*="background: var(--bg-tertiary)"] {
  background: rgba(255, 255, 255, 0.08) !important;
}
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel input {
  color: rgba(255, 255, 255, 0.92) !important;
}
.phone-shell.has-custom-wallpaper .phone-fullscreen-panel input::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
}

/* 发动态编辑页 / 可见范围弹窗 */
.phone-moment-edit-btn {
 background: none;
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 6px 10px;
 font-size: 11px;
 cursor: pointer;
 color: var(--text);
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-family: inherit;
}
.phone-visible-trigger {
 width: 100%;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--bg-tertiary);
 color: var(--text);
 padding: 8px 10px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 cursor: pointer;
 font-family: inherit;
 font-size: 12px;
 text-align: left;
}
.phone-visible-trigger span {
 color: var(--text-secondary);
 flex-shrink: 0;
}
.phone-visible-trigger strong {
 font-weight: 600;
 color: var(--text);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
#phone-visible-modal {
 z-index: 900 !important;
}
#phone-visible-modal .modal-content {
 position: relative;
 z-index: 901;
}
#confirm-modal,
#alert-modal {
 z-index: 99999 !important;
}
#confirm-modal .modal-content,
#alert-modal .modal-content {
 position: relative;
 z-index: 100000 !important;
}
#simple-input-modal {
  z-index: 920 !important;
}
#simple-input-modal .modal-content {
 position: relative;
 z-index: 921;
}
/* 多行模式：JS 加 .simple-input-multiline 时强制撑高 */
#simple-input-modal textarea.simple-input-multiline {
  min-height: 200px !important;
  height: 200px !important;
  max-height: 50vh !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}
/* 手机内弹窗（v621）：统一搬入 .phone-shell 内部，跟随壁纸透明度 + 毛玻璃 */
.phone-inner-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  overflow: hidden;
  overflow-y: auto;
}
.phone-inner-modal.hidden { display: none; }
.phone-inner-modal .modal-content {
  position: relative;
  z-index: 61;
  max-width: 340px;
  width: 100%;
  max-height: calc(100% - 32px);
  overflow-y: auto;
}
/* 有壁纸时：内弹蒙层加毛玻璃，下层内容不再叠影 */
.phone-shell.has-wallpaper .phone-inner-modal,
.phone-shell.has-wallpaper #phone-hs-edit-overlay {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* 有深色遮罩壁纸时：蒙层更深、弹窗卡片用深色背景 */
.phone-shell.has-custom-wallpaper .phone-inner-modal,
.phone-shell.has-custom-wallpaper #phone-hs-edit-overlay {
  background: rgba(0,0,0,0.55);
}
.phone-shell.has-custom-wallpaper .phone-inner-modal .modal-content {
  background: rgba(18, 20, 28, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.94) !important;
}
/* 深色壁纸下：内弹窗全部子元素文字强制白色系（穿透 inline style） */
.phone-shell.has-custom-wallpaper .phone-inner-modal h3,
.phone-shell.has-custom-wallpaper .phone-inner-modal [style*="color:var(--text)"],
.phone-shell.has-custom-wallpaper .phone-inner-modal [style*="color: var(--text)"],
.phone-shell.has-custom-wallpaper .phone-inner-modal div[style*="font-weight"],
.phone-shell.has-custom-wallpaper .phone-inner-modal label,
.phone-shell.has-custom-wallpaper .phone-inner-modal span {
  color: rgba(255, 255, 255, 0.94) !important;
}
.phone-shell.has-custom-wallpaper .phone-inner-modal [style*="color:var(--text-secondary)"],
.phone-shell.has-custom-wallpaper .phone-inner-modal [style*="color: var(--text-secondary)"],
.phone-shell.has-custom-wallpaper .phone-inner-modal .close-btn {
  color: rgba(255, 255, 255, 0.68) !important;
}
/* 深色壁纸下：内弹窗卡片/输入框背景统一深色 */
.phone-shell.has-custom-wallpaper .phone-inner-modal .phone-shop-target-item,
.phone-shell.has-custom-wallpaper .phone-inner-modal div[style*="background:var(--bg-tertiary)"],
.phone-shell.has-custom-wallpaper .phone-inner-modal div[style*="background: var(--bg-tertiary)"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.phone-shell.has-custom-wallpaper .phone-inner-modal input,
.phone-shell.has-custom-wallpaper .phone-inner-modal textarea {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.94) !important;
}
.phone-shell.has-custom-wallpaper .phone-inner-modal input::placeholder,
.phone-shell.has-custom-wallpaper .phone-inner-modal textarea::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}
/* 深色壁纸下：内弹窗按钮适配（排除自带玻璃质感的相机详情页按钮和关闭键） */
.phone-shell.has-custom-wallpaper .phone-inner-modal button:not(.phone-photo-action):not(.phone-photo-action-danger):not(.phone-photo-detail-close) {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}
.phone-shell.has-custom-wallpaper .phone-inner-modal button[style*="background:var(--accent)"],
.phone-shell.has-custom-wallpaper .phone-inner-modal button[style*="background: var(--accent)"],
.phone-shell.has-custom-wallpaper .phone-inner-modal button[style*="var(--accent)"][style*="color:#fff"],
.phone-shell.has-custom-wallpaper .phone-inner-modal button[style*="var(--accent)"][style*="color: #fff"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
/* 旧的全局 z-index 规则保留兼容（万一 fallback 到 body） */
#phone-shop-custom-modal:not(.phone-inner-modal),
#phone-shop-target-modal:not(.phone-inner-modal) {
  z-index: 950 !important;
}
#phone-shop-custom-modal:not(.phone-inner-modal) .modal-content,
#phone-shop-target-modal:not(.phone-inner-modal) .modal-content {
  position: relative;
  z-index: 951;
}
.phone-visible-modal-content {
 max-width: 360px;
 width: calc(100vw - 48px);
 max-height: 78vh;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.phone-visible-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-shrink: 0;
}
.phone-visible-header h3 {
 margin: 0;
 font-size: 16px;
 color: var(--text);
}
.phone-visible-all {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 8px 10px;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--bg-tertiary);
 font-size: 13px;
 cursor: pointer;
 color: var(--text);
}
.phone-visible-all .circle-check-text {
 flex: 1;
 min-width: 0;
}
.phone-visible-search {
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--bg-tertiary);
 color: var(--text);
 padding: 8px 10px;
 font-size: 13px;
 outline: none;
}
.phone-visible-list {
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-height: 120px;
.phone-visible-option {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 8px 10px;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--bg-tertiary);
 cursor: pointer;
}
.phone-visible-option .circle-check-ui {
 flex-shrink: 0;
}
.phone-visible-name {
 flex: 1;
 min-width: 0;
 color: var(--text);
 font-size: 13px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.phone-visible-source {
 flex-shrink: 0;
 font-size: 10px;
 color: var(--text-secondary);
 max-width: 96px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
}
.phone-visible-done {
 background: var(--accent);
 color: var(--on-accent);
 border: none;
 border-radius: 8px;
 padding: 9px 12px;
 font-size: 13px;
 cursor: pointer;
 font-family: inherit;
 flex-shrink: 0;
}
.phone-shell.has-custom-wallpaper .phone-moment-edit-btn,
.phone-shell.has-custom-wallpaper .phone-visible-trigger,
.phone-shell.has-custom-wallpaper .phone-memo-preview-card,
.phone-shell.has-custom-wallpaper .phone-memo-edit-actions,
.phone-shell.has-custom-wallpaper .phone-map-track-card,
.phone-shell.has-custom-wallpaper .phone-generation-hint,
.phone-shell.has-custom-wallpaper .phone-generation-error,
 .phone-shell.has-custom-wallpaper .phone-moment-skeleton-card {
  background: rgba(18, 20, 28, 0.38) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-moment-skeleton-avatar,
.phone-shell.has-custom-wallpaper .phone-moment-skeleton-line {
  background: rgba(255, 255, 255, 0.14) !important;
}
.phone-shell.has-custom-wallpaper .phone-memo-preview-title,
.phone-shell.has-custom-wallpaper .phone-map-track-location {
 color: rgba(255,255,255,.94) !important;
}
.phone-shell.has-custom-wallpaper .phone-memo-preview-line,
.phone-shell.has-custom-wallpaper .phone-map-track-time {
 color: rgba(255,255,255,.68) !important;
}

/* 自定义壁纸模式：锁定手机内部卡片为半透明深色块，保持文字可读 + 性能。
 * 注意：早期版本曾用 backdrop-filter:blur(18px) 实现真磨砂玻璃，但当列表里卡片数量
 * 较多时（如客服对话 20+ 条气泡、长帖列表）每张卡都开一层实时模糊，会让华为浏览器
 * 加载/滚动严重卡顿。改成纯 alpha 色块后视觉差异极小（壁纸下卡片读字反而更清晰）。
 */
.phone-shell.has-custom-wallpaper .phone-body [style*="background:var(--bg-tertiary)"],
.phone-shell.has-custom-wallpaper .phone-body [style*="background: var(--bg-tertiary)"],
.phone-shell.has-custom-wallpaper .phone-body [style*="background:var(--bg-secondary)"],
.phone-shell.has-custom-wallpaper .phone-body [style*="background: var(--bg-secondary)"],
.phone-shell.has-custom-wallpaper .phone-body input,
.phone-shell.has-custom-wallpaper .phone-body textarea,
.phone-shell.has-custom-wallpaper .phone-tabbar {
 background: rgba(18, 20, 28, 0.38) !important;
 border-color: rgba(255, 255, 255, 0.22) !important;
 color: rgba(255, 255, 255, 0.94) !important;
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-body [style*="color:var(--text-secondary)"],
.phone-shell.has-custom-wallpaper .phone-body [style*="color: var(--text-secondary)"],
.phone-shell.has-custom-wallpaper .phone-header [style*="color:var(--text-secondary)"],
.phone-shell.has-custom-wallpaper .phone-header [style*="color: var(--text-secondary)"] {
  color: rgba(255, 255, 255, 0.68) !important;
}
.phone-shell.has-custom-wallpaper .phone-body [style*="color:var(--text)"],
.phone-shell.has-custom-wallpaper .phone-body [style*="color: var(--text)"],
.phone-shell.has-custom-wallpaper .phone-header [style*="color:var(--text)"],
.phone-shell.has-custom-wallpaper .phone-header [style*="color: var(--text)"] {
  color: rgba(255, 255, 255, 0.92) !important;
}
.phone-shell.has-custom-wallpaper .phone-body input::placeholder,
.phone-shell.has-custom-wallpaper .phone-body textarea::placeholder {
 color: rgba(255, 255, 255, 0.48) !important;
}
.phone-shell.has-custom-wallpaper .phone-tab {
 color: rgba(255, 255, 255, 0.62) !important;
}
.phone-shell.has-custom-wallpaper .phone-tab.active {
 color: #fff !important;
 border-top-color: rgba(255, 255, 255, 0.78) !important;
}
/* 论坛详情 / 备忘录编辑：不走整页黑底适配，改回统一透明度层，避免黢黑 */
.phone-shell.has-custom-wallpaper .phone-forum-detail-scroll,
.phone-shell.has-custom-wallpaper .phone-forum-detail-actions,
.phone-shell.has-custom-wallpaper .phone-memo-edit-page {
  background: color-mix(in srgb, var(--bg-solid, var(--bg)) var(--phone-card-opacity-pct), transparent) !important;
  box-shadow: none !important;
}
.phone-shell.has-custom-wallpaper .phone-forum-detail-actions .wv-action-btn,
.phone-shell.has-custom-wallpaper .phone-memo-edit-page .phone-memo-action-btn:not(.danger) {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
}
.phone-shell.has-custom-wallpaper .phone-memo-edit-page .phone-memo-action-btn:not(.danger) svg {
  color: currentColor !important;
}
.phone-shell.has-custom-wallpaper .phone-memo-edit-page input,
.phone-shell.has-custom-wallpaper .phone-memo-edit-page textarea {
  background: color-mix(in srgb, var(--bg-tertiary-solid, var(--bg-tertiary)) var(--phone-card-opacity-pct), transparent) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
}
.phone-shell.has-custom-wallpaper .phone-forum-detail-actions,
.phone-shell.has-custom-wallpaper .phone-memo-edit-page .phone-memo-edit-actions {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.phone-shell.has-custom-wallpaper .phone-text-icon-btn {
 background: rgba(18, 20, 28, 0.22) !important;
 border-color: rgba(255, 255, 255, 0.25) !important;
 color: rgba(255, 255, 255, 0.92) !important;
 backdrop-filter: blur(14px) saturate(1.15);
 -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* ===== 心动模拟 APP ===== */
/* 卡片内部结构与主题色保持一致，样式与其他 APP 列表卡片相同路径：
   - 背景色/文字色：行内 style 用 var(--bg-tertiary)/var(--text-secondary) 等，由主题控制
   - 自定义壁纸下：已有的 .has-custom-wallpaper .phone-body [style*="background:var(--bg-tertiary)"] 规则
     自动把这些卡变成磨砂玻璃层，无需额外覆盖
   本段仅给出进度条填充动效（非主题相关） */
.hs-card-bar-fill {
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 客服对话气泡：因长列表（开场动画规则 + 用户对话可达 20+）不能用 backdrop-filter
   每条气泡单独的 blur 层会让华为浏览器加载/滚动卡顿。
   改用纯主题色半透明背景；自定义壁纸下用一次性 ::before 模糊（兜底类规则不命中类选择器）。 */
.hs-bubble-ai {
  background: var(--bg-tertiary);
  border: none;
  color: var(--text);
}
.hs-bubble-user {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-tertiary));
  border: none;
  color: var(--text);
}
/* 自定义壁纸下：气泡换成深色半透明纯色块，不开 backdrop-filter，避免大量 blur 层叠加 */
.phone-shell.has-custom-wallpaper .hs-bubble-ai {
  background: rgba(18, 20, 28, 0.38) !important;
  border-color: transparent !important;
  color: rgba(255, 255, 255, 0.94) !important;
}
.phone-shell.has-custom-wallpaper .hs-bubble-user {
  background: color-mix(in srgb, var(--accent) 28%, rgba(18, 20, 28, 0.38)) !important;
  border-color: transparent !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

/* 有壁纸时：卡片、底栏、顶栏、状态栏统一透明度（由 --phone-card-opacity-pct 控制，例如 "75%"） */
.phone-shell {
  --phone-card-opacity: 75;
  --phone-card-opacity-pct: 75%;
}

.wv-tag-pill {
  background: var(--bg-tertiary-solid, var(--bg-tertiary)) !important;
}
.phone-moment-card,
.phone-moment-comment-card,
.phone-memo-preview-card,
.phone-map-result-card,
.phone-map-track-card,
.wv-post-card,
.wv-comment-item,
.phone-body div[style*="background:var(--bg-tertiary)"]:not(.wv-tag-pill),
.phone-body div[style*="background: var(--bg-tertiary)"]:not(.wv-tag-pill),
.phone-body div[style*="background:var(--bg-secondary)"]:not(.wv-tag-pill),
.phone-body div[style*="background: var(--bg-secondary)"]:not(.wv-tag-pill) {
  background: var(--bg-tertiary) !important;
}
.phone-shell.has-wallpaper .phone-tabbar {
  background: color-mix(in srgb, var(--bg-secondary-solid, var(--bg-secondary)) var(--phone-card-opacity-pct), transparent) !important;
}
.phone-shell.has-wallpaper .phone-header {
  background: color-mix(in srgb, var(--bg-solid, var(--bg)) var(--phone-card-opacity-pct), transparent);
}
.phone-shell.has-wallpaper .phone-statusbar {
  background: color-mix(in srgb, var(--bg-solid, var(--bg)) var(--phone-card-opacity-pct), transparent);
}
/* 所有卡片类：壁纸下统一走透明度变量（使用 solid 变量绕过主题自带透明度）
   用两层背景：上层 accent 斜向渐变（固定淡色）+ 下层底色走 slider 透明度 */
.phone-shell.has-wallpaper .phone-moment-card,
.phone-shell.has-wallpaper .phone-moment-comment-card,
.phone-shell.has-wallpaper .phone-moment-image-desc,
.phone-shell.has-wallpaper .phone-memo-preview-card,
.phone-shell.has-wallpaper .phone-map-result-card,
.phone-shell.has-wallpaper .phone-map-track-card,
.phone-shell.has-wallpaper .phone-generation-hint,
.phone-shell.has-wallpaper .phone-generation-error,
.phone-shell.has-wallpaper .phone-moment-skeleton-card,
.phone-shell.has-wallpaper .wv-post-card,
.phone-shell.has-wallpaper .wv-comment-item,
.phone-shell.has-wallpaper .cottage-pet-profile-card,
.phone-shell.has-wallpaper .phone-body div[style*="background:var(--bg-tertiary)"]:not(.wv-tag-pill),
.phone-shell.has-wallpaper .phone-body div[style*="background: var(--bg-tertiary)"]:not(.wv-tag-pill),
.phone-shell.has-wallpaper .phone-body div[style*="background:var(--bg-secondary)"]:not(.wv-tag-pill),
.phone-shell.has-wallpaper .phone-body div[style*="background: var(--bg-secondary)"]:not(.wv-tag-pill) {
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent) !important;
  background-color: color-mix(in srgb, var(--bg-tertiary-solid, var(--bg-tertiary)) var(--phone-card-opacity-pct), transparent) !important;
}
/* 预设壁纸（可调透明度）模式：骨架卡走半透明、骨架线条块走浅色，与自定义壁纸模式保持一致 */
.phone-shell.has-wallpaper .wv-skeleton-card {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent) !important;
  background-color: color-mix(in srgb, var(--bg-tertiary-solid, var(--bg-tertiary)) var(--phone-card-opacity-pct), transparent) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.phone-shell.has-wallpaper .wv-skeleton-avatar,
.phone-shell.has-wallpaper .wv-skeleton-line,
.phone-shell.has-wallpaper .wv-skeleton-pill,
.phone-shell.has-wallpaper .wv-skeleton-meta,
.phone-shell.has-wallpaper .phone-moment-skeleton-avatar,
.phone-shell.has-wallpaper .phone-moment-skeleton-line {
  background: rgba(255, 255, 255, 0.16) !important;
}
.phone-shell.has-custom-wallpaper .phone-tabbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* ===== 虚拟手机 END ===== */

/* ===== 日历 Banner ===== */
.phone-cal-banner {
  margin: 8px 0 0;
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: currentColor;
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
.phone-cal-banner-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.phone-cal-banner-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone-cal-banner-clock {
  font-size: 28px;
  font-weight: 260;
  letter-spacing: 0.5px;
  line-height: 1;
}
.phone-cal-banner-date {
  font-size: 12px;
  opacity: 0.78;
}
.phone-cal-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.phone-cal-banner-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.18);
  white-space: nowrap;
}
.phone-cal-banner-countdown {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.82;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== 日历 App ===== */
.phone-cal-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.phone-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.phone-cal-title-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.phone-cal-nav-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.phone-cal-nav-btn:active { opacity: 0.6; }
.phone-cal-today-btn {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 20px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.phone-cal-today-btn:active { opacity: 0.6; }
.phone-cal-grid-wrap {
  padding: 0 12px;
  flex-shrink: 0;
}
.phone-cal-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.phone-cal-weekday {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 4px 0;
}
.phone-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}
.phone-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.phone-cal-cell:active { opacity: 0.7; }
.phone-cal-cell-empty { cursor: default; }
.phone-cal-daynum {
  font-size: 13px;
  color: var(--text);
  line-height: 1;
}
.phone-cal-today .phone-cal-daynum {
  color: var(--accent);
  font-weight: 700;
}
.phone-cal-selected {
  background: var(--accent);
}
.phone-cal-selected .phone-cal-daynum {
  color: #fff;
  font-weight: 600;
}
.phone-cal-selected.phone-cal-today .phone-cal-daynum { color: #fff; }
.phone-cal-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 2px;
}
.phone-cal-selected .phone-cal-dot { background: rgba(255,255,255,0.8); }

/* 日期下方事项面板 */
.phone-cal-day-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 12px 12px;
  margin-top: 10px;
  overflow: hidden;
}
.phone-cal-day-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 0 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.phone-cal-add-btn {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.phone-cal-ev-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-cal-ev-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.phone-shell.has-custom-wallpaper .phone-cal-ev-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.phone-cal-ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.phone-cal-ev-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone-cal-ev-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-cal-ev-wv-tag {
  font-size: 10px;
  color: var(--text-secondary);
  margin-left: 6px;
  opacity: 0.7;
  font-weight: 400;
}
.phone-cal-ev-meta {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
}
.phone-cal-ev-type-icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.7;
}
.phone-cal-ev-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.phone-cal-ev-icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.phone-cal-ev-icon-btn:active { opacity: 1; }
.phone-cal-ev-del-btn:active { color: #e55; }
.phone-cal-ev-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 24px 0;
  opacity: 0.7;
}

/* ===== 周程（每周作息表） ===== */
.phone-week-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
}
.phone-week-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.phone-week-enable {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
/* 开关 */
.phone-week-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.phone-week-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.phone-week-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: .2s;
}
.phone-week-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.phone-week-switch input:checked + .phone-week-slider {
  background: var(--accent);
}
.phone-week-switch input:checked + .phone-week-slider::before {
  transform: translateX(18px);
}
.phone-week-aigen-btn {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.phone-week-disabled-hint {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  opacity: 0.85;
}
/* 周几切换条：横向可滚动，长名字截断 */
.phone-week-daytabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-week-daytabs::-webkit-scrollbar { display: none; }
.phone-week-daytab {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  max-width: 88px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-week-daytab.today {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.phone-week-daytab.active {
  background: var(--accent);
  color: var(--on-accent);
}
.phone-week-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: middle;
}
.phone-week-daytab.active .phone-week-dot {
  background: #111;
}
.phone-week-slot-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-week-slot-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 10px 12px;
}
.phone-week-slot-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 48px;
  line-height: 1.3;
}
.phone-week-slot-time span {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 400;
}
.phone-week-slot-body {
  flex: 1;
  min-width: 0;
}
.phone-week-slot-title {
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-week-slot-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-week-slot-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ===== 第二页布局：左APP + 右纪念日卡片 ===== */
.phone-page2-row {
  display: flex;
  gap: 12px;
  padding-top: 10px;
  align-items: stretch;
}
.phone-page2-apps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 14px;
flex-shrink: 0;
align-self: start;
}

/* ===== 纪念日卡片 ===== */
.phone-anniversary-card {
  flex: 1;
  border-radius: 16px;
  background: rgba(255,255,255,0.45);
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
  background-size: cover;
  background-position: center;
  transition: transform .1s;
}
.phone-anniversary-card:active { transform: scale(0.97); }

/* ===== 番茄钟卡片 ===== */
.phone-tomato-card {
  flex: 1;
  border-radius: 16px;
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: transform .1s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.phone-tomato-card:active { transform: scale(0.97); }
@keyframes tomatoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.phone-tomato-svg-spin {
  animation: tomatoSpin 10s linear infinite;
  transform-origin: center;
}
.phone-tomato-clock {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.phone-tomato-label {
  font-size: 11px;
  color: var(--text);
  opacity: 0.6;
  margin-top: 6px;
}
.phone-tomato-ring {
  width: 80px;
  height: 80px;
  position: relative;
}
.phone-tomato-ring svg {
  transform: rotate(-90deg);
}
.phone-tomato-ring-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.phone-tomato-clock-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-tomato-goal {
  font-size: 11px;
  color: var(--text);
  opacity: 0.7;
  margin-top: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-anniversary-card-text {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.3);
  text-align: right;
  line-height: 1.4;
}
.phone-anniversary-card-title {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.9;
}
.phone-shell.has-custom-wallpaper .phone-anniversary-card {
  background-color: rgba(255,255,255,0.08);
}

/* ===== 配送小组件页 ===== */
.phone-widget-page-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.7;
  margin: 18px 2px 12px;
}
.phone-delivery-widget {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.phone-widget-apps {
  margin-top: 24px;
}
.phone-dw-row {
  display: flex;
  gap: 14px;
}
/* 快递方形卡片（与纪念日卡片同尺寸） */
.phone-dw-express {
  flex: 1;
  aspect-ratio: 1 / 1;
  max-width: 50%;
  border-radius: 18px;
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .1s;
  cursor: pointer;
}
.phone-dw-express:active { transform: scale(0.97); }
.phone-dw-express.has-bg .phone-dw-express-name,
.phone-dw-express.has-bg .phone-dw-express-num,
.phone-dw-express.has-bg .phone-dw-express-unit,
.phone-dw-express.has-bg .phone-dw-express-empty,
.phone-dw-express.has-bg .phone-dw-express-foot {
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.phone-dw-mini-col {
  flex: 1;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.phone-dw-mini {
  flex: 1;
  border-radius: 18px;
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: transform .1s;
  cursor: pointer;
}
.phone-dw-mini:active { transform: scale(0.97); }
.phone-dw-mini-label {
  font-size: 11px;
  color: var(--text);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-dw-mini-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-dw-mini-num.phone-dw-neg { color: #ef4444; }
.phone-dw-mini-empty {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.55;
}
.phone-dw-express-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-dw-express-num {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.phone-dw-express-unit {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.8;
}
.phone-dw-express-empty {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  opacity: 0.55;
}
.phone-dw-express-foot {
  font-size: 11px;
  color: var(--text);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 外卖长条进度卡片 */
.phone-dw-takeout {
  border-radius: 18px;
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
  padding: 14px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform .1s;
  cursor: pointer;
}
.phone-dw-takeout:active { transform: scale(0.98); }
.phone-dw-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.phone-dw-bar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-dw-bar-rem {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}
.phone-dw-bar-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(140,140,140,0.25);
  overflow: hidden;
}
.phone-dw-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--border), var(--accent));
  background-size: 200% 100%;
  animation: tomatoBarFlow 3s linear infinite;
  transition: width .4s ease;
}
@keyframes tomatoBarFlow {
  0% { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}
/* ===== 番茄钟 App 专注播放器卡片 ===== */
.phone-tomato-player {
  background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: none;
  border-radius: 22px;
  padding: 16px 20px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.phone-tomato-player-goal {
  font-size: 13px;
  color: var(--text);
  opacity: 0.7;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-tomato-player-goal.locked { cursor: default; opacity: 0.55; }
.phone-tomato-player-time {
  font-size: 56px;
  font-weight: 200;
  letter-spacing: 1px;
  color: var(--text);
  text-align: left;
  line-height: 1.1;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.phone-tomato-player-time.locked { cursor: default; }
/* 番茄钟全屏模式：隐藏标题栏 */
.phone-shell.phone-tomato-mode .phone-header { display: none; }
.phone-tomato-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.phone-tomato-exit {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .1s, color .15s;
}
.phone-tomato-exit:active { transform: scale(0.88); }
/* 番茄钟邀请陪伴横条卡片 */
.phone-tomato-companion {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform .1s;
}
.phone-tomato-companion:active { transform: scale(0.98); }
/* 遮罩模式：邀请陪伴卡片加边框 */
.phone-shell.has-custom-wallpaper .phone-tomato-companion {
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
}
/* 遮罩模式：时钟指针/刻度变白 */
.phone-shell.has-custom-wallpaper .tomato-clock-hour,
.phone-shell.has-custom-wallpaper .tomato-clock-min { stroke: #fff !important; }
.phone-shell.has-custom-wallpaper .tomato-clock-center { fill: #fff !important; }
.phone-shell.has-custom-wallpaper .phone-tomato-clock-face circle[fill="var(--accent)"] { fill: rgba(255,255,255,0.7) !important; }
.phone-tomato-comp-invite {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.phone-tomato-comp-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.phone-tomato-comp-avatar-fallback {
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}
.phone-tomato-comp-text { min-width: 0; flex: 1; }
.phone-tomato-comp-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.phone-tomato-comp-sub {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 2px;
}
.phone-tomato-comp-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .1s;
}
.phone-tomato-comp-play:active { transform: scale(0.9); }
/* 番茄钟陪伴消息气泡区域 */
.phone-tomato-comp-msgs {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding: 0 2px;
}
.phone-tomato-comp-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  animation: tomatoBubbleIn 0.3s ease;
}
@keyframes tomatoBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.phone-tomato-comp-bubble-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding-left: 4px;
}
.phone-tomato-comp-bubble-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  background: var(--bg-tertiary);
  border-radius: 12px 12px 12px 4px;
  padding: 8px 12px;
  max-width: 240px;
  word-break: break-word;
}
/* 番茄钟历史卡片 */
.phone-tomato-hist-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.phone-tomato-hist-card:active {
  transform: scale(0.97);
  background: var(--bg-tertiary);
}
.phone-tomato-hist-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-tomato-hist-info {
  flex: 1;
  min-width: 0;
}
.phone-tomato-hist-goal {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-tomato-hist-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.phone-tomato-hist-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* 遮罩模式：历史卡片 */
.phone-shell.has-custom-wallpaper .phone-tomato-hist-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.phone-shell.has-custom-wallpaper .phone-tomato-hist-card:active {
  background: rgba(255,255,255,0.14);
}
.phone-shell.has-custom-wallpaper .phone-tomato-hist-icon {
  background: rgba(255,255,255,0.1);
}
.phone-shell.has-custom-wallpaper .phone-tomato-hist-icon svg {
  stroke: rgba(255,255,255,0.85) !important;
}
.phone-shell.has-custom-wallpaper .phone-tomato-hist-goal {
  color: rgba(255,255,255,0.92);
}
.phone-shell.has-custom-wallpaper .phone-tomato-hist-meta,
.phone-shell.has-custom-wallpaper .phone-tomato-hist-date {
  color: rgba(255,255,255,0.6);
}
.phone-tomato-player-bar {
  height: 8px;
  width: 100%;
  border-radius: 99px;
  background: rgba(140,140,140,0.25);
  overflow: hidden;
  margin: 10px 0 0;
}
.phone-tomato-player-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--border), var(--accent));
  background-size: 200% 100%;
  animation: tomatoBarFlow 3s linear infinite;
  transition: width 1.1s linear;
}
.phone-tomato-player-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 20px;
  padding: 0 4px;
}
.phone-tomato-player-ctrl button {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .1s;
}
.phone-tomato-player-ctrl button:active { transform: scale(0.88); }
.phone-tomato-player-ctrl .tomato-btn-side { opacity: 0.55; }
.phone-tomato-player-ctrl .tomato-btn-step { opacity: 0.85; }
.phone-tomato-player-ctrl .tomato-btn-main { color: var(--accent); opacity: 1; }
.phone-dw-bar-foot {
  font-size: 11px;
  color: var(--text);
  opacity: 0.55;
}
/* 遮罩模式：配送卡片照搬日历 banner 风格（去毛玻璃，用渐变+边框+inset高光+阴影） */
.phone-shell.has-custom-wallpaper .phone-dw-express,
.phone-shell.has-custom-wallpaper .phone-dw-takeout,
.phone-shell.has-custom-wallpaper .phone-dw-mini {
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
/* 遮罩模式：次要文字提亮为白、去掉过低透明度，保证可读 */
.phone-shell.has-custom-wallpaper .phone-dw-express-name,
.phone-shell.has-custom-wallpaper .phone-dw-express-unit,
.phone-shell.has-custom-wallpaper .phone-dw-express-empty,
.phone-shell.has-custom-wallpaper .phone-dw-express-foot,
.phone-shell.has-custom-wallpaper .phone-dw-mini-label,
.phone-shell.has-custom-wallpaper .phone-dw-mini-empty,
.phone-shell.has-custom-wallpaper .phone-dw-bar-name,
.phone-shell.has-custom-wallpaper .phone-dw-bar-foot {
  color: rgba(255,255,255,0.9);
  opacity: 1;
}
/* 遮罩模式：进度条轨道提亮，避免在暗底上看不见 */
.phone-shell.has-custom-wallpaper .phone-dw-bar-track {
  background: rgba(255,255,255,0.2);
}

/* ===== 记账 App ===== */
.phone-ledger-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  gap: 12px;
  overflow-y: auto;
}
.phone-ledger-curtabs {
  display: flex;
  gap: 8px;
}
.phone-ledger-curtab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 13px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.phone-ledger-curtab.active {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.phone-ledger-summary {
  border-radius: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 16px;
}
.phone-ledger-sum-title {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.phone-ledger-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.phone-ledger-sum-cell {
  flex: 1;
  text-align: center;
}
.phone-ledger-sum-label {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.75;
  margin-bottom: 4px;
}
.phone-ledger-sum-val {
  font-size: 17px;
  font-weight: 700;
}
.phone-ledger-sum-val.in { color: #22c55e; }
.phone-ledger-sum-val.out { color: #ef4444; }
.phone-ledger-sum-bal {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 12px;
}
.phone-ledger-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-ledger-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .1s;
}
.phone-ledger-item:active { transform: scale(0.98); }
.phone-ledger-item-main {
  flex: 1;
  min-width: 0;
}
.phone-ledger-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-ledger-item-sub {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-ledger-item-amt {
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.phone-ledger-item-amt.in { color: #22c55e; }
.phone-ledger-item-amt.out { color: var(--text); }
.phone-ledger-add-btn {
  margin-top: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.phone-ledger-field {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.phone-ledger-field input,
.phone-ledger-field select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
}
.phone-shell.has-custom-wallpaper .phone-ledger-summary,
  .phone-shell.has-custom-wallpaper .phone-ledger-item {
    background-color: rgba(18, 20, 28, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }
/* 视图切换按钮（标题栏右上角） */
.phone-ledger-viewbtn {
  width: 36px; height: 36px;
  background: none; border: none;
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 0;
}
/* 日历视图 */
.phone-ledger-cal-month {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 4px 0 12px;
}
.phone-ledger-cal-grid {
  display: grid;
  gap: 4px;
}
.phone-ledger-cal-wd {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  padding-bottom: 4px;
}
.phone-ledger-cal-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}
.phone-ledger-cal-cell.empty { cursor: default; }
.phone-ledger-cal-cell.sel { background: var(--accent); }
.phone-ledger-cal-cell.sel .phone-ledger-cal-day { color: #111; font-weight: 700; }
.phone-ledger-cal-day {
  font-size: 13px;
  color: var(--text);
}
.phone-ledger-cal-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-top: 2px;
}
.phone-ledger-cal-dot.in { background: #22c55e; }
.phone-ledger-cal-dot.out { background: #ef4444; }
.phone-ledger-cal-detail {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-ledger-cal-detail-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
/* 年视图 */
.phone-ledger-year-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.phone-ledger-year-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.phone-ledger-year-row.cur {
  border-color: var(--accent);
}
.phone-ledger-year-m {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  width: 40px;
  flex-shrink: 0;
}
.phone-ledger-year-io {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
}
.phone-ledger-year-io .in { color: #22c55e; }
.phone-ledger-year-io .out { color: #ef4444; }
.phone-ledger-year-sur {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.phone-ledger-year-sur.in { color: #22c55e; }
.phone-ledger-year-sur.out { color: #ef4444; }
.phone-shell.has-custom-wallpaper .phone-ledger-year-row {
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ===== 音乐播放器卡片 ===== */
.phone-music-row {
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.phone-music-col {
  flex: 1;
  min-width: 0;
  max-width: 72%;
  display: flex;
  flex-direction: column;
}
.phone-music-col .phone-music-card {
  margin-top: 0;
  width: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* 主屏可编辑寄语：无边框，左对齐到 app 名同侧 */
.phone-home-note {
  font-size: 11px;
  font-style: italic;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  padding: 0 2px 6px 10px;
  outline: none;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
}
.phone-home-note:empty::before {
  content: attr(data-placeholder);
  opacity: 0.5;
}
.phone-music-side-apps {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.phone-music-card {
  margin-top: 12px;
  border-radius: 16px;
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
  padding: 12px 14px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  width: 74%;
}
.phone-shell.has-custom-wallpaper .phone-music-card {
  background: rgba(255,255,255,0.12);
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.phone-music-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 0; color: var(--text-secondary); cursor: pointer;
}
.phone-music-empty-icon { opacity: 0.5; }
.phone-music-empty-text { font-size: 13px; }
.phone-music-controls-disabled .phone-music-ctrl { opacity: 0.4; }
.phone-music-top { display: flex; align-items: center; gap: 10px; }
.phone-music-cover {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center;
}
.phone-music-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-music-cover-ph { color: var(--text-secondary); opacity: 0.45; }
.phone-music-meta { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: center; padding-top: 8px; }
.phone-music-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.phone-music-artist {
  font-size: 11px; color: var(--text-secondary); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.phone-music-lrc {
  font-size: 11px; color: var(--accent); margin-top: 3px; min-height: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-music-open {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); cursor: pointer;
}
.phone-music-open:active { transform: scale(0.92); }
.phone-music-progress { margin-top: 12px; padding: 4px 0; cursor: pointer; }
.phone-music-bar {
  position: relative; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,0.12);
}
.phone-music-bar-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px;
  background: var(--text); transition: width 0.1s linear;
}
.phone-music-bar-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--text); transform: translate(-50%, -50%);
}
.phone-music-times {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-secondary); margin-top: 2px;
}
.phone-music-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 8px; padding: 0;
}
.phone-music-ctrl {
  background: none; border: none; color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
.phone-music-ctrl:active { transform: scale(0.88); }
.phone-music-play {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--text); color: var(--bg, #fff);
}
.phone-shell.has-custom-wallpaper .phone-music-play { color: #222; background: #fff; }

/* 音乐库页 */
.phone-mlib-page { padding: 0; display: flex; flex-direction: column; height: 100%; }
.phone-mlib-header { padding: 16px 18px 10px; }
.phone-mlib-h-title { font-size: 20px; font-weight: 800; color: var(--text); }
.phone-mlib-h-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.phone-mlib-list { flex: 1; overflow-y: auto; padding: 0 12px; }
/* 网易云歌单：分组标题 + 同步进度条 */
.phone-music-pl-group {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px 6px; font-size: 12px; color: var(--text-secondary);
}
.phone-music-pl-refresh {
  background: none; border: none; padding: 2px 6px; cursor: pointer;
  font-size: 12px; color: var(--accent, #f60);
}
.phone-ne-sync { padding: 10px 12px 6px; }
.phone-ne-sync-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text-secondary); margin-bottom: 5px;
}
.phone-ne-sync-bar {
  height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(127, 127, 127, .22);
}
.phone-ne-sync-bar > i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--accent, #f60); transition: width .25s ease;
}
.phone-mlib-empty { text-align: center; color: var(--text-secondary); padding: 40px 0; font-size: 13px; }
/* 一起听历史 */
/* 外层滚动区已经给了 12px 边距，这里不再叠一层（否则比歌单页窄一圈） */
.phone-lt-hist-list { padding: 0; }
.phone-lt-hist-card { background: var(--bg-tertiary); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: background .15s; }

/* 一起听留言卡片 */
.lt-msg-card {
  border-radius: 18px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.phone-shell.has-custom-wallpaper .lt-msg-card {
  background: rgba(255,255,255,0.12);
}

/* 一起听历史详情页 */
.lt-detail-hero {
  text-align: center;
  padding: 20px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.phone-shell.has-custom-wallpaper .lt-detail-hero {
  background: rgba(255,255,255,0.12);
}
.lt-detail-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb, 0,0,0), 0.08);
}
.lt-detail-mode-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.lt-detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-left: 2px;
}
.lt-detail-section-bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.phone-lt-hist-card:active { background: var(--border); }
.phone-lt-hist-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.phone-lt-hist-obj { font-size: 14px; font-weight: 600; color: var(--text); }
.phone-lt-hist-mode { font-size: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 2px 8px; border-radius: 10px; }
.phone-lt-hist-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.phone-lt-hist-time { font-size: 11px; color: var(--text-secondary); opacity: .8; }
.phone-lt-detail-song { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.phone-lt-detail-song-idx { width: 22px; text-align: center; font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.phone-lt-detail-song-title { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-lt-detail-song-artist { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.phone-mlib-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-radius: 12px; cursor: pointer;
}
.phone-mlib-row:active { background: rgba(0,0,0,0.05); }
.phone-mlib-row.active { background: rgba(0,0,0,0.06); }
.phone-mlib-cover {
  width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center;
}
.phone-mlib-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-mlib-cover-ph { color: var(--text-secondary); opacity: 0.4; }
.phone-mlib-info { flex: 1; min-width: 0; }
.phone-mlib-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-mlib-playing { color: var(--accent); }
.phone-mlib-sub {
  font-size: 11px; color: var(--text-secondary); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-mlib-badge {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  background: rgba(0,0,0,0.08); font-size: 10px;
}
/* 歌名后面跟的关系小字（《XX》主题曲 / 同人曲…）。
   搜作品名搜出来的曲子才有 —— 一整页都跟同一部作品有关，
   靠这行小字才分得清哪首是官方主题曲、哪首是粉丝同人曲。
   不用 badge 那种带框的胶囊：一列 15 行里每行都挂个框太吵，
   弱化成灰色小字，扫一眼能分类但不抢歌名。
   inline 跟在歌名后面，整行仍靠 .phone-mlib-title 的 ellipsis 收口。 */
.phone-mlib-rel {
  font-size: 10px; font-weight: 400; color: var(--text-secondary);
  margin-left: 4px;
}
.phone-mlib-act {
  background: none; border: none; color: var(--text-secondary);
  font-size: 18px; padding: 4px 8px; cursor: pointer; flex-shrink: 0;
}
.phone-mlib-addbar {
  display: flex; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.phone-mlib-addbtn {
  flex: 1; padding: 11px 0; border-radius: 10px; border: none; cursor: pointer;
  background: var(--text); color: var(--bg, #fff); font-size: 14px; font-weight: 600;
}
.phone-mlib-addbtn.secondary { background: rgba(0,0,0,0.08); color: var(--text); }
.phone-mlib-addbtn:active { transform: scale(0.97); }

/* 音乐选项弹层 */
.phone-music-sheet-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.35); display: flex; align-items: flex-end;
  animation: phoneMusicFade 0.15s ease;
}
@keyframes phoneMusicFade { from { opacity: 0; } to { opacity: 1; } }
.phone-music-sheet {
  width: 100%; background: var(--bg, #fff); border-radius: 16px 16px 0 0;
  padding: 8px; padding-bottom: 16px;
}
.phone-music-sheet-title {
  text-align: center; font-size: 12px; color: var(--text-secondary);
  padding: 10px 0 6px;
}
.phone-music-sheet-btn {
  display: block; width: 100%; padding: 13px 0; border: none; cursor: pointer;
  background: none; font-size: 15px; color: var(--text); border-radius: 10px;
}
.phone-music-sheet-btn:active { background: rgba(0,0,0,0.05); }
.phone-music-sheet-btn.danger { color: #e05050; }
.phone-music-sheet-btn.cancel { margin-top: 6px; background: rgba(0,0,0,0.05); font-weight: 600; }

/* 音乐表单弹层 */
.phone-music-form { padding-bottom: 16px; }
.phone-music-form-field { padding: 6px 14px; }
.phone-music-form-label {
  font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;
}
.phone-music-form-input {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg, #fff); color: var(--text); font-size: 14px;
  font-family: inherit; resize: vertical;
}
.phone-music-form-input:focus { outline: none; border-color: var(--text); }
/* 表单里的图片字段（歌单封面）：缩略图方块 + 右侧提示与清除 */
.phone-music-form-imgrow { display: flex; align-items: center; gap: 12px; }
.phone-music-form-img {
  width: 60px; height: 60px; flex-shrink: 0; padding: 0; cursor: pointer;
  border: 1px dashed var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg, #fff); display: flex; align-items: center; justify-content: center;
}
.phone-music-form-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-music-form-img-ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); opacity: .45;
}
.phone-music-form-img-ph svg { width: 22px; height: 22px; }
.phone-music-form-imghint {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-size: 12px; color: var(--text-secondary);
}
.phone-music-form-imgclr {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--danger, #e55);
}
.phone-music-form-btns {
  display: flex; gap: 10px; padding: 12px 14px 0;
}
.phone-music-form-btns .phone-music-sheet-btn {
  flex: 1; border-radius: 10px; margin: 0;
}
.phone-music-form-btns .confirm {
  background: var(--text); color: var(--bg, #fff); font-weight: 600;
}

/* 音乐库 header 布局 */
.phone-mlib-header { display: flex; align-items: center; justify-content: space-between; }
.phone-mlib-h-text { flex: 1; }
.phone-mlib-add-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.08); color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.phone-mlib-add-btn:active { transform: scale(0.9); }

/* 音乐库列表 - 正在播放歌名变主题色 */
.phone-mlib-title.active { color: var(--accent); }

/* ===== 歌曲详情页 ===== */
.phone-mdetail-page {
  display: flex; flex-direction: column; height: 100%; padding: 0 20px;
}
.phone-mdetail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 0 12px;
}
.phone-mdetail-h-text { flex: 1; min-width: 0; }
.phone-mdetail-title {
  font-size: 20px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-mdetail-artist {
  font-size: 13px; color: var(--text-secondary); margin-top: 3px;
}
.phone-mdetail-theme-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 2px 9px;
  font-size: 11px; color: var(--accent);
  background: var(--accent-soft, rgba(255,138,76,0.12));
  border: 1px solid var(--accent); border-radius: 999px;
  max-width: 100%; white-space: nowrap; overflow: hidden;
}
/* 徽章里的场记板图标。原来这里是 🎬，emoji 的基线和字形随系统变，
   跟徽章文字对不齐也不吃 currentColor（换主题时图标不跟着变色）。
   换成 SVG 后靠 inline-flex + align-items 居中，比空格排版稳。 */
.phone-mdetail-theme-badge svg { flex-shrink: 0; }
/* 【为什么文字要单独包一层】改成 flex 之后 text-overflow: ellipsis 在
   徽章本身上失效了（它只对块级文本容器生效，flex 容器不算）。
   作品名可能很长，超出时得省略号收口而不是把图标挤掉，
   所以文字自己做一个可收缩的溢出容器，图标那边 flex-shrink:0 不让位。 */
.phone-mdetail-theme-badge .phone-badge-txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-mdetail-menu {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  padding: 6px; margin-top: 2px; flex-shrink: 0;
}
.phone-mdetail-menu:active { transform: scale(0.9); }
.phone-mdetail-cover-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0 4px;
  cursor: pointer;
}
.phone-mdetail-cover-wrap:active .phone-mdetail-cover { transform: scale(0.97); }
.phone-mdetail-cover {
  width: 240px; height: 240px; border-radius: 20px; overflow: hidden;
  background: rgba(0,0,0,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.phone-mdetail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-mdetail-cover-ph { color: var(--text-secondary); opacity: 0.3; }
.phone-mdetail-cover-ph svg { width: 48px; height: 48px; }
.phone-mdetail-progress { padding: 0 4px; }
.phone-mdetail-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 8px 20px;
}
.phone-mdetail-ctrl {
  background: none; border: none; color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
}
.phone-mdetail-ctrl:active { transform: scale(0.88); }
.phone-mdetail-play {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--text); color: var(--bg, #fff);
}
.phone-shell.has-custom-wallpaper .phone-mdetail-play { color: #222; background: #fff; }
.phone-mdetail-placeholder { visibility: hidden; }

/* 详情页歌词区 */
.phone-mdetail-lrc {
  max-height: 90px; overflow-y: auto; overflow-x: hidden; margin-bottom: 0;
  text-align: center; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  /* 上下各留半个框高（90/2=45）。没有这段留白，第一行上面没有可滚的空间，
     "把当前行摆到正中间"对开头几行就是做不到的 —— 表现为歌词刚开始时
     贴在框顶，只有唱到中段才居中。 */
  padding: 45px 0;
  /* 【必须显式声明】这个项目没有全局的 border-box reset。默认 content-box 下
     max-height 只管内容区，加上 90px 的上下 padding 这个框会实际占 180px，
     把封面和控制条挤下去。border-box 让 90px 就是它占的全部高度。 */
  box-sizing: border-box;
  /* offsetTop 的参照系。它算的是"到最近的定位祖先的距离"，这个框自己不定位
     的话，参照的是更上层的元素，算出来的 scrollTop 会把上面头部和封面的高度
     一起吃进去，当前行就摆不到中间。 */
  position: relative;
}
/* 点封面切过来的大歌词。高度 = 封面区 252 + 原歌词区 94，
   页面其余部分（歌名、进度、控制条）位置完全不动，看着像卡片翻面。 */
.phone-mdetail-lrc.full {
  max-height: 346px; height: 346px; cursor: pointer;
  /* 上下各留半个框高（346/2=173），跟小视图同一个道理：这是"当前行能被摆到
     正中间"所需的最小余量。之前写的 150px 差了 23px，表现为第一行和最后一行
     差 4.5px 到不了中线。
     用 padding 而不是 flex 居中：flex 会把溢出的行顶到滚不到的地方。 */
  padding: 173px 0;
  /* 跟小视图同理，这里也必须 border-box —— 否则 346 的高度加上 346 的 padding
     会让这个框实际占 692px，把进度条和控制键推出屏幕，"卡片翻面"（页面其余
     部分不动）就不成立了。 */
  box-sizing: border-box;
}
.phone-mdetail-lrc.full .phone-mdetail-lrc-line {
  font-size: 15px; padding: 7px 8px;
}
.phone-mdetail-lrc.full .phone-mdetail-lrc-line.active {
  font-size: 17px;
}
.phone-mdetail-lrc-empty {
  font-size: 12px; color: var(--text-secondary); opacity: 0.6; padding: 12px 0;
}
.phone-mdetail-lrc-line {
  font-size: 13px; color: var(--text-secondary); padding: 4px 8px;
  transition: color 0.2s, font-weight 0.2s, transform 0.2s;
  line-height: 1.5; word-break: break-word;
}
.phone-mdetail-lrc-line.active {
  color: var(--text); font-weight: 700; transform: scale(1.05);
}

/* 播放列表弹窗 */
.phone-mlist-popup {
  width: 100%; max-height: 60%; background: var(--bg, #fff);
  border-radius: 16px 16px 0 0; padding: 0; display: flex; flex-direction: column;
  min-height: 0;   /* 作为 overlay flex 的子项，不加会被内容撑破 max-height */
}
.phone-mlist-popup-header {
  font-size: 13px; color: var(--text-secondary); text-align: center;
  padding: 14px 0 8px; font-weight: 600;
  flex-shrink: 0;
}
/* min-height:0 是滚动能生效的关键：flex 子项的 min-height 默认是 auto，
   内容会把它撑到自然高度，overflow-y:auto 就永远不触发 —— 表现为列表滚不动、
   超出的部分直接被父级的 max-height 裁掉。 */
.phone-mlist-popup-list {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* 滚到头别把手势传给底层 */
}
.phone-mlist-popup-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
}
.phone-mlist-popup-row:active { background: rgba(0,0,0,0.05); }
.phone-mlist-popup-row.active .phone-mlist-popup-title { color: var(--accent); font-weight: 700; }
/* 歌名和歌手在同一行，谁被截断由 flex 收缩决定。
   【原来的问题】歌手写了 flex-shrink: 0（多长都不让压），歌名是 flex: 1
   （即 flex-shrink: 1，可压）—— 所以「好多好多人一起」那种超长歌手一来，
   被牺牲的永远是歌名，只剩一个省略号。歌名才是主要信息，反了。
   【现在】歌名保底拿到行宽的 45%（min-width），歌手改成可收缩并自己截断。
   歌手放不下就出省略号，不再动歌名。不给歌手设上限：歌名短的时候空间
   本来富余，给歌手用掉不浪费。 */
.phone-mlist-popup-title {
  font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 45%;
}
.phone-mlist-popup-artist {
  font-size: 11px; color: var(--text-secondary); margin-left: 8px;
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 弹窗里的关闭按钮：不加 flex-shrink:0 会被上面的列表挤扁 */
.phone-mlist-popup > .phone-music-sheet-btn {
  flex-shrink: 0;
  margin: 0 12px 12px;
  width: auto;
}

/* 详情页歌词下方操作按钮行 */
.phone-mdetail-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; padding: 4px 4px 8px;
}
.phone-mdetail-action-btn {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  padding: 6px; display: flex; align-items: center; justify-content: center;
}
.phone-mdetail-action-btn:active { transform: scale(0.9); color: var(--text); }

.phone-mdetail-bottom { margin-top: auto; }

/* ===== 歌曲评论页 ===== */
.phone-mcomment-page {
  display: flex; flex-direction: column; height: 100%; padding: 0;
}
.phone-mcomment-card {
  display: flex; align-items: center; gap: 12px; margin: 12px 16px 0;
  padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.04); cursor: pointer;
}
.phone-mcomment-card:active { transform: scale(0.98); }
.phone-mcomment-card-cover {
  width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: rgba(0,0,0,0.06);
}
.phone-mcomment-card-info { flex: 1; min-width: 0; }
.phone-mcomment-card-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-mcomment-card-artist {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.phone-mcomment-tip {
  font-size: 11px; color: var(--text-secondary); padding: 6px 18px 0;
}
.phone-mcomment-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 6px;
}
.phone-mcomment-bar-title {
  font-size: 15px; font-weight: 700; color: var(--text);
}
/* 评论 / 热评 切换。未选中的压暗压细，选中的和原来那个标题一个字重， */
/* 这样默认状态看起来仍像「评论」这个小标题，不像多了一排控件 */
.phone-mcomment-tabs {
  display: flex; align-items: baseline; gap: 14px; min-width: 0;
}
.phone-mcomment-tab {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--text-secondary);
  opacity: 0.6; line-height: 1.2;
  transition: opacity 0.15s, color 0.15s;
}
.phone-mcomment-tab.active {
  font-weight: 700; color: var(--text); opacity: 1;
}
.phone-mcomment-tab:active { transform: scale(0.96); }
/* 热评标记：跟在昵称后面的一个小角标 */
.phone-mcomment-hotmark {
  font-size: 10px; font-weight: 400; color: #e8613c;
  border: 1px solid rgba(232, 97, 60, 0.5); border-radius: 3px;
  padding: 0 3px; margin-left: 4px; vertical-align: 1px;
}
.phone-mcomment-refresh {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.phone-mcomment-refresh:active { transform: scale(0.95); }
.phone-mcomment-list {
  flex: 1; overflow-y: auto; padding: 0 16px;
}
.phone-mcomment-empty {
  text-align: center; color: var(--text-secondary); padding: 40px 0; font-size: 13px;
}
.phone-mcomment-row {
  padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex; gap: 10px;
}
.phone-mcomment-row:last-child { border-bottom: none; }
/* 评论删除按钮（音乐评论用 flex 靠右；好友圈评论卡用绝对定位到右上角） */
.phone-cmt-del {
  flex-shrink: 0; align-self: flex-start;
  background: transparent; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--text-secondary); opacity: 0.45; line-height: 0;
  border-radius: 6px; transition: opacity 0.15s, color 0.15s;
}
.phone-cmt-del:hover, .phone-cmt-del:active { opacity: 1; color: var(--error, #e0464b); }
.phone-moment-comment-card { position: relative; padding-right: 26px; }
.phone-moment-comment-card .phone-cmt-del {
  position: absolute; top: 4px; right: 4px;
}
.phone-mcomment-av {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 600;
}
.phone-mcomment-main { flex: 1; min-width: 0; }
.phone-mcomment-name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.phone-mcomment-content {
  font-size: 14px; color: var(--text); margin-top: 4px; line-height: 1.5;
  word-break: break-word;
}
.phone-mcomment-meta {
  font-size: 11px; color: var(--text-secondary); margin-top: 4px;
}
.phone-mcomment-input-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--border); background: var(--bg-secondary, var(--bg));
  flex-shrink: 0;
}
.phone-mcomment-input-bar input {
  flex: 1; background: var(--bg-tertiary, rgba(0,0,0,0.04));
  border: 1px solid var(--border); border-radius: 20px; padding: 8px 14px;
}
.phone-mcomment-send {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--accent, var(--text)); color: var(--on-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.phone-mcomment-send:active { transform: scale(0.9); }

.phone-mcomment-name.npc { color: var(--accent); }


/* ===== 语音/视频通话 全屏覆盖 ===== */
#phone-call-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: inherit;
  color: #fff;
}
.phone-call-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  z-index: 0;
}
.phone-call-bg.voice {
  /* 背景大图实时模糊是通话界面卡顿主因之一，30px 半径太重；降到 16px 视觉差异极小、开销大幅下降 */
  filter: blur(16px) brightness(0.55);
  transform: scale(1.2);
}
.phone-call-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 28%, rgba(0,0,0,0.28) 64%, rgba(0,0,0,0.75) 100%);
}
.phone-call-top {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  text-align: center;
  padding: 56px 20px 4px;
}
/* 通话页全屏时直接覆盖到灵动岛区域，单独留出安全距离 */
#phone-modal.phone-fullscreen-mode .phone-call-top {
  padding-top: max(56px, env(safe-area-inset-top, 0px));
}
.phone-call-voice-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 18px;
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 34px rgba(0,0,0,0.4);
}
.phone-call-name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.phone-call-status {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 7px;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.phone-call-msgs {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone-call-msgs::-webkit-scrollbar { width: 0; }
.phone-call-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.75;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.phone-call-bubble.them {
  align-self: flex-start;
  /* 原为 backdrop-filter: blur(8px)，但台词逐条入场+各自实时模糊会逐帧重算导致卡顿；
     改成不透明度更高的纯 alpha 色块，视觉几乎无差，彻底去掉每条气泡的实时背景模糊 */
  background: rgba(20,22,30,0.66);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.phone-call-bubble.me {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* 呼叫中界面 */
.phone-call-dialing {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 120px;
  text-align: center;
}
.phone-call-dial-avatar-wrap {
  position: relative;
  width: 118px;
  height: 118px;
  margin-bottom: 28px;
}
.phone-call-dial-avatar {
  position: relative;
  z-index: 2;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 42px rgba(0,0,0,0.42);
}
.phone-call-dial-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  animation: phoneCallPulse 1.8s ease-out infinite;
}
.phone-call-dial-ring.r2 { animation-delay: .45s; }
.phone-call-dial-ring.r3 { animation-delay: .9s; }
@keyframes phoneCallPulse {
  from { opacity: .7; transform: scale(.98); }
  to { opacity: 0; transform: scale(1.75); }
}
.phone-call-dial-status {
  font-size: 13px;
  margin-top: 9px;
  opacity: .82;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.phone-call-dial-status::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: phoneCallDots 1.2s steps(4, end) infinite;
}
@keyframes phoneCallDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75%,100% { content: '...'; }
}
/* AI 描述段：超圆角居中卡片 */
.phone-call-desc-card {
  align-self: center;
  max-width: 100%;
  padding: 9px 16px;
  border-radius: 22px;
  background: rgba(20,22,30,0.42);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.16);
}
/* AI 台词段：左对齐纯文本，无气泡，下方带时间 */
.phone-call-line {
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone-call-line-text {
  padding: 2px 4px;
  color: #fff;
  font-size: 13px;
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.phone-call-line-time {
  font-size: 9.5px;
  color: rgba(255,255,255,0.6);
  padding-left: 4px;
}
/* 台词下方的播放+时间行 */
.phone-call-line-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  margin-top: 2px;
}
.phone-call-line-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.phone-call-line-play:active { transform: scale(0.88); }
.phone-call-line-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: background .15s, transform .1s;
}
.phone-call-line-edit:active { transform: scale(0.88); }
.phone-call-line-play.playing {
  background: var(--accent, #4a8cff);
  color: var(--on-accent);
  animation: phoneCallPlayPulse 1s ease-in-out infinite;
}
@keyframes phoneCallPlayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}
/* 用户台词：右对齐纯文本，无气泡 */
.phone-call-me-text {
  align-self: flex-end;
  max-width: 100%;
  padding: 2px 4px;
  color: #fff;
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
  word-break: break-word;
  white-space: pre-wrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* 玩家消息编辑入口：挂在最后一段上，绝对定位到右下角 */
.phone-call-desc-card.has-edit,
.phone-call-me-text.has-edit {
  position: relative;
}
.phone-call-me-edit {
  position: absolute;
  right: -6px;
  bottom: -18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background .15s, transform .1s;
  z-index: 2;
}
.phone-call-me-edit:active { transform: scale(0.88); }
.phone-call-me-edit:hover { background: rgba(255,255,255,0.28); }
@keyframes phoneCallFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.phone-call-msgs > * {
  animation: phoneCallFadeUp .42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.phone-call-bottom {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: 14px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 全屏底部操作区避开 iOS Home Indicator */
#phone-modal.phone-fullscreen-mode .phone-call-bottom {
  padding-bottom: max(22px, calc(22px + env(safe-area-inset-bottom, 0px)));
}
.phone-call-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.phone-call-input-hint {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: -8px;
  letter-spacing: .02em;
}
.phone-call-input-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font-size: 14px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 22px;
  outline: none;
}
.phone-call-input-row input::placeholder { color: rgba(255,255,255,0.6); }
.phone-call-send-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.phone-call-action-row {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.phone-call-action-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform .15s;
}
.phone-call-action-btn:active { transform: scale(0.92); }
.phone-call-action-btn.hangup { background: #e53935; border-color: #e53935; }
.phone-call-action-btn.answer { background: #43a047; border-color: #43a047; }
.phone-call-refresh-corner {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform .15s;
}
#phone-modal.phone-fullscreen-mode .phone-call-refresh-corner {
  top: max(18px, env(safe-area-inset-top, 0px));
}
.phone-call-refresh-corner:active { transform: scale(0.9); }
.phone-call-refresh-corner.spinning { pointer-events: none; }
.phone-call-refresh-corner.spinning svg { animation: phoneCallSpin .8s linear infinite; }
@keyframes phoneCallSpin { to { transform: rotate(360deg); } }
/* 附近地图刷新按钮：点击旋转（纯图标，无边框底色） */
#phone-map-near-refresh.spinning { pointer-events: none; }
#phone-map-near-refresh.spinning svg { animation: phoneCallSpin .8s linear infinite; transform-origin: center; }

/* ===== 阅读 App ===== */
.phone-reading-home { padding: 14px 14px 24px; }

/* 书架顶栏：标题 + 齿轮 */
.phone-reading-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; position: relative;
}
.phone-reading-topbar-title { font-size: 15px; font-weight: 600; color: var(--text); }
.phone-reading-gear {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--text-secondary, #aaa); display: flex; align-items: center;
  border-radius: 50%; transition: background .15s;
}
.phone-reading-gear:active, .phone-reading-gear.active {
  background: var(--card-bg, rgba(255,255,255,0.08));
}

/* 设置浮窗 */
.phone-reading-prefs-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90;
}
.phone-reading-prefs {
  position: absolute; top: 100%; right: 0; z-index: 91;
  min-width: 200px; max-width: 260px;
  background: var(--card-bg, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.phone-reading-pref-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-size: 13px; color: var(--text);
}
.phone-reading-pref-row.disabled { opacity: 0.4; pointer-events: none; }
.phone-reading-pref-row input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent, #f60);
}
.phone-reading-mapping-btns { display: flex; gap: 6px; }
.phone-reading-mapping-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  background: transparent; color: var(--text-secondary, #aaa);
  transition: all .12s;
}
.phone-reading-mapping-btn.active {
  background: var(--accent, #f60); color: var(--on-accent); border-color: var(--accent, #f60);
}
.phone-reading-mapping-btn:active { opacity: 0.7; }
.phone-reading-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; opacity: 0.55; text-align: center; gap: 10px;
}
.phone-reading-empty svg { opacity: 0.5; }
.phone-reading-empty-icon { margin-bottom: 4px; }
.phone-reading-empty-title { font-size: 14px; font-weight: 600; color: var(--text); }
.phone-reading-empty-desc { font-size: 12px; color: var(--text-secondary, #888); }
.phone-reading-empty-btn {
  margin-top: 12px; padding: 6px 18px; border-radius: 16px; border: none;
  background: var(--accent, #f60); color: var(--on-accent); font-size: 13px; cursor: pointer;
}
.phone-reading-empty-btn:active { opacity: 0.8; }
/* 书架页右上角「+」按钮 */
.phone-reading-add-btn {
  flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: var(--bg-tertiary, rgba(127,127,127,0.1)); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.phone-reading-add-btn:active { opacity: 0.7; }
.phone-shell.has-custom-wallpaper .phone-reading-add-btn {
  background: rgba(255,255,255,0.16) !important; color: #fff !important;
}

/* 书架卡片：横向长条，左竖封面 + 右书名简介 */
.phone-reading-mine-section-title {
  padding: 14px 16px 2px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary, #aaa);
}
.phone-reading-shelf { display: flex; flex-direction: column; gap: 12px; padding: 0 14px; }

/* ===== 邮箱 App ===== */
.phone-email-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; opacity: 0.55; text-align: center; gap: 10px;
}
.phone-email-empty svg { opacity: 0.5; }
.phone-email-empty-icon { margin-bottom: 4px; }
.phone-email-empty-title { font-size: 14px; font-weight: 600; color: var(--text); }
.phone-email-empty-desc { font-size: 12px; color: var(--text-secondary, #888); }
.phone-email-empty-btn {
  margin-top: 12px; padding: 6px 18px; border-radius: 16px; border: none;
  background: var(--accent, #f60); color: var(--on-accent); font-size: 13px; cursor: pointer;
}
.phone-email-empty-btn:active { opacity: 0.8; }
.phone-email-mine-section-title {
  padding: 14px 16px 2px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary, #aaa);
}
.phone-email-list { display: flex; flex-direction: column; gap: 12px; padding: 0 14px; }
.phone-email-card {
  display: flex; align-items: stretch; gap: 12px;
  background: var(--card-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px; padding: 10px; cursor: pointer;
  min-height: 84px; box-sizing: border-box; overflow: hidden;
  position: relative;
  transition: transform .12s, box-shadow .12s;
}
.phone-email-card:active { transform: scale(0.97); }
/* 主屏未读信件提示条：个人主页卡上方，信封图标 + 文字，整条可点跳邮箱 */
.phone-mail-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 10px;
  padding: 8px 14px;
  width: fit-content;
  max-width: 90%;
  border-radius: 999px;
  background: rgba(229,57,53,0.12);
  color: #e53935;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, background .12s;
}
.phone-mail-notice:active { transform: scale(0.96); background: rgba(229,57,53,0.2); }
.phone-mail-notice svg { flex-shrink: 0; }
/* 未读圆点：卡片右上角 */
.phone-email-card-unread {
  position: absolute; top: 9px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); z-index: 2; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--card-bg, rgba(255,255,255,0.85));
}
.phone-email-card-ava {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; align-self: center;
  background: var(--accent-dim, rgba(100,100,200,0.15)); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
}
.phone-email-card-info {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-width: 0; overflow: hidden;
}
.phone-email-card-toprow { display: flex; align-items: center; gap: 6px; }
.phone-email-card-subject {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-email-card-dir {
  flex-shrink: 0; font-size: 10px; padding: 1px 7px; border-radius: 8px;
  color: #fff;
}
.phone-email-card-dir.dir-in { background: var(--accent, #f60); }
.phone-email-card-dir.dir-out { background: var(--decoration, #888); }
.phone-email-card-who {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-email-card-preview {
  font-size: 12px; color: var(--text-secondary, #888);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-email-card-time { flex-shrink: 0; font-size: 10px; color: var(--text-secondary, #aaa); }
.phone-shell.has-custom-wallpaper .phone-email-card {
  background: rgba(18, 20, 28, 0.35) !important;
}
/* 线程详情页：往来气泡 */
.phone-email-thread-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 13px; color: var(--text-secondary, #999); flex-shrink: 0;
}
.phone-email-thread-src {
  font-size: 10px; padding: 1px 8px; border-radius: 8px;
  background: var(--bg-tertiary, rgba(127,127,127,0.12)); color: var(--text-secondary, #999);
}
/* 信件小卡：标题 + 收发标签 + 正文截断（点击展开） */
.phone-email-letter-card {
  background: var(--card-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 12px; margin-bottom: 12px; cursor: pointer;
  transition: transform .12s;
}
.phone-email-letter-card:active { transform: scale(0.98); }
.phone-email-letter-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.phone-email-letter-ava {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-dim, rgba(100,100,200,0.15)); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; overflow: hidden;
}
.phone-email-letter-headinfo { flex: 1; min-width: 0; }
.phone-email-letter-subject {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-email-letter-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-secondary, #999); margin-top: 2px;
}
.phone-email-letter-dir {
  font-size: 10px; padding: 0 6px; border-radius: 7px; color: #fff; line-height: 15px;
}
.phone-email-letter-dir.dir-in { background: var(--accent, #f60); }
.phone-email-letter-dir.dir-out { background: var(--decoration, #888); }
.phone-email-letter-text {
  font-size: 13px; line-height: 1.65; color: var(--text-secondary, #bbb);
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.phone-email-thread-bar {
  flex-shrink: 0; padding: 10px 16px 16px;
}
.phone-email-reply-btn {
  width: 100%; padding: 12px; border: none; border-radius: 999px;
  background: var(--accent, #f60); color: var(--on-accent); font-size: 14px; font-weight: 600; cursor: pointer;
}
.phone-email-reply-btn:active { opacity: 0.85; }
.phone-shell.has-custom-wallpaper .phone-email-letter-card {
  background: rgba(18, 20, 28, 0.4) !important;
}
/* ===== 信纸读信弹窗（花哨） ===== */
/* 外层叠放容器：承接入场动画 + 背后斜纸 */
.phone-eletter-stack {
  position: relative;
  width: 100%; max-width: 360px;
  opacity: 0; transform: translateY(18px) scale(0.94);
  transition: opacity .28s ease, transform .28s cubic-bezier(0.34,1.4,0.5,1);
}
.phone-eletter-stack.show { opacity: 1; transform: translateY(0) scale(1); }
/* 背后露出的斜纸（两张信纸叠放感） */
.phone-eletter-stack::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: color-mix(in srgb, var(--bg) 78%, var(--text) 22%);
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 0;
  transform: rotate(-3.5deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.phone-eletter-paper {
  position: relative; z-index: 1;
  width: 100%; max-height: 78vh;
  display: flex; flex-direction: column;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    var(--bg);
  background-blend-mode: soft-light;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 0; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
/* 内圈虚线边饰（固定在纸上，不随内容滚动） */
.phone-eletter-paper::after {
  content: ''; position: absolute; inset: 7px; z-index: 4;
  border: 1px dashed color-mix(in srgb, var(--text) 26%, transparent);
  pointer-events: none;
}
.phone-eletter-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 22px 18px;
}
.phone-eletter-tag {
  display: inline-block; font-size: 10px; padding: 1px 9px; border-radius: 8px;
  color: #fff; margin-bottom: 10px;
}
.phone-eletter-tag.dir-in { background: var(--accent, #f60); }
.phone-eletter-tag.dir-out { background: var(--decoration, #99a); }
.phone-eletter-subject {
  font-family: Georgia, 'Songti SC', 'STSong', serif;
  font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--text);
  word-break: break-word;
}
.phone-eletter-metaline {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--text-secondary, #999); margin-top: 8px; margin-bottom: 18px;
}
.phone-eletter-time { flex-shrink: 0; }
.phone-eletter-body {
  font-family: Georgia, 'Songti SC', 'STSong', serif;
  font-size: 14px; line-height: 1.85; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.phone-eletter-dropcap {
  float: left; font-size: 46px; line-height: 0.86; font-weight: 700;
  padding: 4px 8px 0 0; color: var(--accent, #f60);
  font-family: Georgia, 'Songti SC', 'STSong', serif;
}
.phone-eletter-sign {
  margin-top: 20px; text-align: right;
  font-family: Georgia, 'Songti SC', 'STSong', serif;
  font-size: 14px; font-style: italic; color: var(--text-secondary, #888);
}
.phone-eletter-actions {
  flex-shrink: 0; display: flex; gap: 10px;
  padding: 12px 18px 18px;
}
.phone-eletter-close, .phone-eletter-reply, .phone-eletter-edit, .phone-eletter-share, .phone-eletter-del {
  flex: 1; padding: 11px; border: none; border-radius: 0;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.phone-eletter-close { background: var(--bg-tertiary, rgba(127,127,127,0.14)); color: var(--text); }
.phone-eletter-reply, .phone-eletter-edit, .phone-eletter-share { background: var(--accent, #f60); color: var(--on-accent); }
.phone-eletter-del { background: var(--bg-tertiary, rgba(127,127,127,0.14)); color: var(--danger, #e5484d); }
.phone-eletter-close:active, .phone-eletter-reply:active, .phone-eletter-edit:active, .phone-eletter-share:active, .phone-eletter-del:active { opacity: 0.85; }
/* 右上角叉叉关闭按钮 */
.phone-eletter-x {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary, #999);
}
.phone-eletter-x:active { opacity: 0.6; }
/* 详情页右上角「往来档案」按钮 */
.phone-email-archive-btn {
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--text, #eee);
}
.phone-email-archive-btn:active { opacity: 0.55; }
/* 往来档案弹窗 */
.phone-email-digest-box {
  width: 100%; max-width: 340px; max-height: 76vh;
  display: flex; flex-direction: column;
  background: var(--bg, #1b1d24); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
.phone-email-digest-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; font-size: 15px; font-weight: 700; color: var(--text);
}
.phone-email-digest-x {
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary, #999);
}
.phone-email-digest-x:active { opacity: 0.6; }
.phone-email-digest-list {
  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 20px;
}
.phone-email-digest-item {
  display: flex; gap: 10px; position: relative;
}
.phone-email-digest-item:not(:last-child) .phone-email-digest-dot::after {
  content: ''; position: absolute; left: 50%; top: 12px; bottom: -6px;
  width: 1px; transform: translateX(-50%);
  background: color-mix(in srgb, var(--text) 15%, transparent);
}
.phone-email-digest-dot {
  position: relative; flex-shrink: 0; width: 10px; margin-top: 5px;
}
.phone-email-digest-dot::before {
  content: ''; display: block; width: 7px; height: 7px; margin: 0 auto;
  border-radius: 50%; background: var(--accent, #f60);
}
.phone-email-digest-body {
  flex: 1; min-width: 0; padding-bottom: 14px;
}
.phone-email-digest-time {
  font-size: 11px; color: var(--text-secondary, #999); margin-bottom: 3px;
}
.phone-email-digest-text {
  font-size: 13px; line-height: 1.7; color: var(--text);
}
.phone-email-digest-empty {
  padding: 30px 0; text-align: center; font-size: 13px; color: var(--text-secondary, #999);
}
/* 阅读发现页「生成中」骨架卡（仿 phone-reading-shelf-card 横向布局；wv-skeleton-card/line 自带壁纸+遮罩适配） */
.phone-reading-skeleton-card {
  display: flex; align-items: stretch; gap: 12px;
  padding: 12px; margin: 0; border-radius: 12px;
}
.phone-reading-skeleton-cover {
  width: 56px; height: 72px; border-radius: 6px; flex-shrink: 0;
}
.phone-reading-skeleton-info {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0;
}
/* 书架左滑删除（仿电台 phone-radio-mine-swipe） */
.phone-reading-shelf-swipe {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.phone-reading-shelf-swipe-content {
  position: relative;
  transition: transform 0.25s ease;
  will-change: transform;
  z-index: 1;
}
.phone-reading-shelf-swipe-content.swiping { transition: none; }
.phone-reading-shelf-swipe-delete {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger, #e5484d);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 12px 12px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.phone-reading-shelf-swipe.swiped .phone-reading-shelf-swipe-delete {
  opacity: 1;
  pointer-events: auto;
}
/* 邮件线程左滑（合并 + 删除，仿书架 swipe） */
.phone-email-swipe {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 10px;
}
.phone-email-swipe-content {
  position: relative;
  transition: transform 0.25s ease;
  will-change: transform;
  z-index: 1;
}
.phone-email-swipe-content.swiping { transition: none; }
.phone-email-swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 160px;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.phone-email-swipe.swiped .phone-email-swipe-actions {
  opacity: 1;
  pointer-events: auto;
}
.phone-email-swipe-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.phone-email-swipe-btn.merge { background: var(--accent, #f60); }
.phone-email-swipe-btn.del { background: var(--danger, #e5484d); border-radius: 0 14px 14px 0; }
.phone-reading-shelf-card {
  display: flex; align-items: stretch; gap: 12px;
  background: var(--card-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px; padding: 10px; cursor: pointer;
  height: 100px; box-sizing: border-box; overflow: hidden;
  position: relative;
  transition: transform .12s, box-shadow .12s;
}
.phone-reading-shelf-card:active { transform: scale(0.97); }
/* 来源角标：卡片右上角小圆点。自写=主题色，导入=装饰色，AI 生成书不渲染 */
.phone-reading-shelf-dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--card-bg, rgba(255,255,255,0.85));
  z-index: 2; pointer-events: none;
}
.phone-reading-shelf-dot.dot-self { background: var(--accent); }
.phone-reading-shelf-dot.dot-import { background: var(--decoration); }
.phone-reading-shelf-cover {
  width: 56px; height: 100%; border-radius: 6px;
  background: var(--accent-dim, rgba(100,100,200,0.15));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.phone-reading-shelf-cover img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 6px;
}
.phone-reading-shelf-info {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 0; overflow: hidden;
}
/* 在读卡片：底部给绝对定位的进度行留出空间，简介不会压到进度上 */
.phone-reading-shelf-info.has-progress {
  justify-content: flex-start; padding-bottom: 16px;
}
.phone-reading-shelf-titlerow {
display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.phone-reading-shelf-title {
  font-size: 14px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex-shrink: 1; min-width: 0;
}
.phone-reading-shelf-author {
font-size: 11px; color: var(--text-tertiary, #888);
white-space: nowrap; flex-shrink: 0;
}
.phone-reading-shelf-cats {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px;
}
.phone-reading-shelf-cat {
font-size: 10px; line-height: 1; color: var(--text-secondary, #aaa);
padding: 3px 6px; border-radius: 4px;
background: var(--bg-tertiary, rgba(255,255,255,0.08));
white-space: nowrap;
}
.phone-reading-shelf-intro {
  font-size: 12px; color: var(--text-secondary, #aaa);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
.phone-reading-shelf-meta {
  font-size: 11px; color: var(--text-tertiary, #666); margin-top: 2px;
}
.phone-reading-shelf-progress {
  position: absolute; left: 78px; bottom: 9px;
  font-size: 10px; color: var(--accent, #f60);
}
.phone-reading-cover-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--accent, #f60); opacity: 0.6;
}

/* 发现页：搜索栏（仿论坛紧凑风格）+ 推荐列表 */
.phone-reading-discover { padding: 0; }
/* 发现页顶部类型 tab：长篇连载 / 短篇小说（胶囊分段控件） */
.phone-reading-type-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  border-radius: 10px; padding: 3px;
}
.phone-reading-type-tab {
  flex: 1; text-align: center; cursor: pointer;
  padding: 7px 0; border-radius: 8px;
  font-size: 13px; color: var(--text-secondary, #999);
  transition: background .18s ease, color .18s ease;
}
.phone-reading-type-tab.active {
  background: var(--accent, #f60); color: var(--on-accent); font-weight: 600;
}
.phone-reading-discover-bar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.phone-reading-discover-bar input {
  flex: 1; min-width: 0; outline: none;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 6px; padding: 6px 10px;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  font-size: 13px; color: var(--text);
}
.phone-reading-discover-bar input::placeholder { color: var(--text-tertiary, #666); }
.phone-reading-search-btn {
  flex-shrink: 0;
  background: var(--accent, #f60); color: var(--on-accent); border: none;
  border-radius: 6px; padding: 6px 12px; font-size: 12px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.phone-reading-search-btn:active { opacity: 0.8; }
/* 发现页：参考世界观复选框（用圆形复选框组件） */
.phone-reading-wvref { margin-bottom: 12px; font-size: 12px; color: var(--text-secondary, #aaa); }
.phone-reading-wvref .circle-check-text { font-size: 12px; }
/* 发现页内的书卡列表：去掉左右内缩，左右对齐搜索栏 */
.phone-reading-discover .phone-reading-shelf { padding: 0; }

/* 长篇目录页（全屏二级页） */
.phone-reading-toc-page { display: flex; flex-direction: column; height: 100%; }
.phone-reading-toc-scroll { flex: 1; overflow-y: auto; padding: 14px; }
.phone-reading-toc-head { display: flex; gap: 14px; margin-bottom: 18px; }
.phone-reading-toc-cover {
  width: 74px; height: 100px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: var(--accent-dim, rgba(100,100,200,0.15));
}
.phone-reading-toc-meta { min-width: 0; flex: 1; }
.phone-reading-toc-title { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.35; }
.phone-reading-toc-author { font-size: 12px; color: var(--text-secondary, #aaa); margin-top: 6px; }
.phone-reading-toc-intro {
  font-size: 12px; color: var(--text-secondary, #aaa); line-height: 1.6; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.phone-reading-toc-section {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 8px; padding-bottom: 6px;
}
.phone-reading-toc-list { display: flex; flex-direction: column; }
.phone-reading-toc-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 4px;
  cursor: pointer;
}
.phone-reading-toc-item:active { background: var(--bg-tertiary, rgba(255,255,255,0.04)); }
.phone-reading-toc-idx {
  font-size: 12px; color: var(--text-tertiary, #888); min-width: 24px; text-align: center; flex-shrink: 0;
}
.phone-reading-toc-name {
  font-size: 14px; color: var(--text); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-reading-toc-item.read .phone-reading-toc-name { color: var(--text-tertiary, #888); }
.phone-reading-toc-item.locked { cursor: default; opacity: 0.4; }
.phone-reading-toc-item.locked:active { background: none; }
.phone-reading-toc-lock { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; color: var(--text-secondary, #888); }
.phone-reading-toc-more {
  text-align: center; font-size: 13px; color: var(--accent, #f60);
  padding: 14px; margin-top: 6px; cursor: pointer;
}
.phone-reading-toc-footer {
  padding: 12px 14px;
  background: var(--bg, #111);
}
.phone-reading-toc-startbtn {
  width: 100%; background: var(--accent, #f60); color: var(--on-accent); border: none;
  border-radius: 10px; padding: 13px 0; font-size: 14px; font-weight: 600; cursor: pointer;
}
.phone-reading-toc-startbtn:active { opacity: 0.85; }

/* 我要写书：目录页「去生成蓝图」引导 */
.phone-reading-self-guide {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 28px;
}
.phone-reading-self-guide-icon { font-size: 40px; margin-bottom: 14px; }
.phone-reading-self-guide-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.phone-reading-self-guide-desc { font-size: 13px; color: var(--text-secondary, #888); line-height: 1.7; margin-bottom: 22px; }
.phone-reading-self-guide-btn {
  background: var(--accent, #f60); color: var(--on-accent); border: none; border-radius: 10px;
  padding: 12px 28px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.phone-reading-self-guide-btn:active { opacity: 0.85; }

/* 我要写书：故事蓝图编辑工作台 */
.rd-ol-savebtn {
  margin-left: auto; background: var(--accent, #f60); color: var(--on-accent); border: none;
  border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rd-ol-savebtn:active { opacity: 0.85; }
.rd-ol-sec {
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 8px;
}
.rd-ol-sec.rd-ol-sec-top { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.rd-ol-subsec {
  font-size: 13px; font-weight: 600; color: var(--text-secondary, #888);
  margin: 14px 0 10px;
}
.rd-ol-subsec.rd-ol-subsec-top { margin-top: 22px; }
.rd-ol-opt { font-size: 11px; font-weight: 400; color: var(--text-tertiary, #999); }
.rd-ol-fieldhint { font-size: 11.5px; color: var(--text-tertiary, #999); line-height: 1.6; margin: -2px 0 7px; }
.rd-ol-field { margin-bottom: 14px; }
.rd-ol-field > label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 6px;
}
.rd-ol-field input, .rd-ol-field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; font-size: 13.5px; color: var(--text); background: var(--bg-secondary);
  font-family: inherit; line-height: 1.6; resize: none;
}
.rd-ol-field textarea { resize: vertical; }
.rd-ol-field-inline { display: flex; align-items: center; gap: 10px; }
.rd-ol-field-inline > label { margin-bottom: 0; flex-shrink: 0; min-width: 56px; }
.rd-ol-field-inline input { flex: 1; }
.rd-ol-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 2px;
  margin-bottom: 12px; background: var(--bg-tertiary);
}
.rd-ol-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.rd-ol-del {
  background: none; border: none; color: var(--danger, #e54); font-size: 12px;
  cursor: pointer; padding: 2px 4px;
}
.rd-ol-addbtn {
  width: 100%; background: var(--bg-tertiary); color: var(--text-secondary, #888);
  border: 1px dashed var(--border); border-radius: 10px; padding: 10px 0;
  font-size: 13px; cursor: pointer; margin-bottom: 8px;
}
.rd-ol-addbtn:active { opacity: 0.8; }
.rd-ol-genbtn {
  width: 100%; background: var(--accent, #f60); color: var(--on-accent); border: none;
  border-radius: 10px; padding: 12px 0; font-size: 13.5px; font-weight: 600;
  cursor: pointer; margin-top: 6px;
}
.rd-ol-genbtn:active { opacity: 0.85; }
.rd-ol-genbtn:disabled { opacity: 0.55; }
.rd-ol-genbtn.rd-ol-regen { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--border); }
.rd-ol-genbtn.rd-ol-clear { background: none; color: var(--danger, #e54); border: 1px solid var(--border); margin-top: 8px; }
.rd-ol-empty { padding: 8px 0 4px; }
.rd-ol-empty-desc { font-size: 13px; color: var(--text-secondary, #888); line-height: 1.7; margin-bottom: 14px; }

/* 壁纸模式适配：壁纸下 --text 被强制为白色，输入框/卡片若仍是浅色背景会白底白字。
   这里把蓝图编辑工作台的输入框、卡片改成半透明深底 + 白字，确保可读。 */
.phone-shell.has-custom-wallpaper .rd-ol-field input,
.phone-shell.has-custom-wallpaper .rd-ol-field textarea {
  background: rgba(18, 20, 28, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}
.phone-shell.has-custom-wallpaper .rd-ol-field input::placeholder,
.phone-shell.has-custom-wallpaper .rd-ol-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
.phone-shell.has-custom-wallpaper .rd-ol-card {
  background: rgba(18, 20, 28, 0.30) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.phone-shell.has-custom-wallpaper .rd-ol-addbtn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.phone-shell.has-custom-wallpaper .rd-ol-genbtn.rd-ol-regen {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.phone-shell.has-custom-wallpaper .rd-ol-genbtn.rd-ol-clear {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-text-area {
  background: rgba(18, 20, 28, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

/* 我要写书：手动编辑正文文本框 */
.phone-reading-text-area {
  width: 100%; box-sizing: border-box; flex: 1; min-height: 60vh;
  border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  font-size: 15px; color: var(--text); background: var(--bg-secondary);
  font-family: inherit; line-height: 1.9; resize: none;
}
/* 壁纸适配 */
.phone-shell.has-custom-wallpaper .phone-reading-toc-title { color: rgba(255,255,255,0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-toc-name { color: rgba(255,255,255,0.92) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-toc-footer { background: rgba(18,20,28,0.55) !important; }

/* ===== 阅读器页（章节正文） ===== */
.phone-reading-chapter-page { display: flex; flex-direction: column; height: 100%; }
.phone-reading-chapter-scroll { flex: 1; overflow-y: auto; padding: 18px 20px 32px; }
.phone-reading-chapter-title { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.4; }
.phone-reading-chapter-sub { font-size: 12px; color: var(--text-secondary); margin-top: 6px; margin-bottom: 18px; }
.phone-reading-chapter-body { font-size: 16px; line-height: 1.9; color: var(--text); }
.phone-reading-chapter-p { margin: 0 0 16px; text-indent: 2em; word-break: break-word; }
.phone-reading-chapter-p.coread { position: relative; }
/* ===== 共读：段落想法图标 + 想法卡片 ===== */
.phone-reading-note-dot {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: middle;
  margin-left: 6px; padding: 1px 5px; border-radius: 9px; cursor: pointer;
  color: var(--text-secondary); opacity: 0.5; transition: all .15s; text-indent: 0;
  background: rgba(127,127,127,0.1);
}
.phone-reading-note-dot:active { opacity: 1; }
.phone-reading-note-dot.has { opacity: 1; color: var(--accent, #f60); background: rgba(255,102,0,0.12); }
.phone-reading-note-dot i { font-style: normal; font-size: 10px; font-weight: 700; }
.phone-reading-note-cards { margin: -6px 0 18px; display: flex; flex-direction: column; gap: 6px; text-indent: 0; }
.phone-reading-note-card {
  background: var(--bg-secondary, rgba(127,127,127,0.08)); border-radius: 8px;
  padding: 8px 12px;
}
.phone-reading-note-card-nm { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 2px; }
.phone-reading-note-card.me .phone-reading-note-card-nm { color: var(--accent, #f60); }
.phone-reading-note-card-tx { font-size: 13px; line-height: 1.55; color: var(--text); word-break: break-word; white-space: pre-wrap; }
/* 想法输入 / 共读伙伴选择 弹层 */
.phone-reading-note-overlay {
  position: absolute; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0,0,0,0.45); opacity: 0; transition: opacity .2s;
}
.phone-reading-note-overlay.show { opacity: 1; }
.phone-reading-note-sheet {
  width: 100%; box-sizing: border-box; background: var(--bg, #14161e); margin-top: auto; min-height: 0;
  border-radius: 16px 16px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  max-height: 78%; display: flex; flex-direction: column; overflow: hidden;
}
.phone-reading-note-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.phone-reading-note-sheet-hd { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; flex-shrink: 0; }
.phone-reading-note-exist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.phone-reading-note-exist-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,0.08);
  border-left: 2px solid rgba(127,127,127,0.3);
}
.phone-reading-note-exist-row.me { border-left-color: var(--accent, #f60); }
.phone-reading-note-exist-nm { font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.phone-reading-note-exist-tx { font-size: 13px; line-height: 1.5; color: var(--text); flex: 1; min-width: 0; word-break: break-word; }
.phone-reading-note-del { font-size: 11px; color: #e66; cursor: pointer; flex-shrink: 0; }
.phone-reading-note-input {
  width: 100%; box-sizing: border-box; min-height: 80px; resize: none;
  border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--bg-secondary, #1a1c24); color: var(--text); padding: 10px 12px;
  font-size: 14px; line-height: 1.6; outline: none;
}
.phone-reading-note-sheet-btns { display: flex; gap: 10px; margin-top: 14px; flex-shrink: 0; }
.phone-reading-note-cancel, .phone-reading-note-save {
  flex: 1; padding: 11px 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none;
}
.phone-reading-note-cancel { background: var(--bg-secondary, #1a1c24); color: var(--text-secondary); border: 1px solid var(--border, rgba(255,255,255,0.12)); }
.phone-reading-note-save { background: var(--accent, #f60); color: var(--on-accent); }
.phone-reading-note-cancel:active, .phone-reading-note-save:active { opacity: 0.85; }
.phone-reading-coread-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.phone-reading-coread-opt {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 10px;
  background: var(--bg-secondary, #1a1c24); border: 1px solid var(--border, rgba(255,255,255,0.1)); cursor: pointer;
}
.phone-reading-coread-opt.sel { border-color: var(--accent, #f60); background: rgba(255,102,0,0.1); }
.phone-reading-coread-opt:active { opacity: 0.85; }
.phone-reading-coread-nm { font-size: 14px; font-weight: 600; color: var(--text); }
.phone-reading-coread-de { font-size: 11px; color: var(--text-secondary); line-height: 1.4; word-break: break-word; }
/* fudge 主题：共读弹层对齐打赏面板（铺满、仅上两角圆、去多余边框） */
.phone-shell.phone-theme-fudge .phone-reading-note-sheet {
  border-radius: 18px 18px 0 0 !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}
.phone-shell.phone-theme-fudge .phone-reading-coread-opt {
  border-radius: 16px !important; border: none !important; background: var(--bg-secondary) !important;
}
.phone-shell.phone-theme-fudge .phone-reading-coread-opt.sel {
  background: rgba(255,102,0,0.1) !important; box-shadow: inset 0 0 0 1.5px var(--accent, #f60);
}
.phone-shell.phone-theme-fudge .phone-reading-note-input {
  border-radius: 16px !important; border: none !important; background: var(--bg-secondary) !important;
}
.phone-shell.phone-theme-fudge .phone-reading-note-cancel,
.phone-shell.phone-theme-fudge .phone-reading-note-save {
  border-radius: 999px !important; border: none !important;
}
.phone-reading-chapter-navrow { display: flex; gap: 12px; margin-top: 28px; }
.phone-reading-chapter-nav {
  flex: 1; padding: 12px 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,0.12)); background: var(--bg-secondary, #1a1c24); color: var(--text);
}
.phone-reading-chapter-nav.next { background: var(--accent, #f60); color: var(--on-accent); border-color: transparent; }
.phone-reading-chapter-nav:active { opacity: 0.85; }
.phone-reading-chapter-nav.disabled { opacity: 0.4; cursor: default; }
.phone-reading-chapter-nav.rewrite { background: var(--bg-tertiary, #15171e); color: var(--text-secondary, #aaa); }
/* 壁纸适配 */
.phone-shell.has-custom-wallpaper .phone-reading-chapter-title,
.phone-shell.has-custom-wallpaper .phone-reading-chapter-body { color: rgba(255,255,255,0.94) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-chapter-sub { color: rgba(255,255,255,0.6) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-chapter-nav { background: rgba(0,0,0,0.35) !important; color: rgba(255,255,255,0.92) !important; border-color: rgba(255,255,255,0.25) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-chapter-nav.next { background: var(--accent, #f60) !important; color: #fff !important; border-color: transparent !important; }
.phone-shell.has-custom-wallpaper .phone-reading-note-card { background: rgba(0,0,0,0.35) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-note-card-tx { color: rgba(255,255,255,0.92) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-note-card-nm { color: rgba(255,255,255,0.66) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-note-dot.has { color: #ffae73 !important; }

/* ===== 阅读器底部辅助功能条（笔记/本章说/打赏/分享）===== */
.phone-reading-actionbar {
  display: flex; justify-content: space-around; align-items: center;
  gap: 4px; margin-top: 26px; padding: 10px 6px;
  background: rgba(0,0,0,0.05); border-radius: 14px;
}
.phone-reading-actionbtn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  color: var(--text-secondary); transition: opacity .12s;
}
.phone-reading-actionbtn:active { opacity: 0.55; }
.phone-reading-actionbtn-ic { position: relative; display: flex; align-items: center; justify-content: center; color: var(--text); }
.phone-reading-actionbtn-tx { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.phone-reading-actionbtn-badge {
  position: absolute; top: -6px; right: -10px; min-width: 15px; height: 15px; padding: 0 3px;
  box-sizing: border-box; border-radius: 8px; background: var(--accent, #f60); color: var(--on-accent);
  font-size: 9px; line-height: 15px; text-align: center; font-weight: 600;
}
/* 壁纸适配：半透明深底裹起来，图标/文字转白 */
.phone-shell.has-custom-wallpaper .phone-reading-actionbar { background: rgba(0,0,0,0.28) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-actionbtn-ic { color: rgba(255,255,255,0.92) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-actionbtn-tx { color: rgba(255,255,255,0.7) !important; }

/* ===== 打赏礼物宫格（底部弹层内）===== */
.phone-reading-gift-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 6px 10px 10px;
}
.phone-reading-gift {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px 10px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-tertiary); cursor: pointer;
}
.phone-reading-gift:active { background: rgba(0,0,0,0.06); }
.phone-reading-gift-ic { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.phone-reading-gift-nm { font-size: 12px; color: var(--text); }
.phone-reading-gift-amt { font-size: 11px; font-weight: 600; color: var(--text-secondary); }

/* ===== 辅助条下方打赏记录小卡片 ===== */
.phone-reading-reward-cardwrap { text-align: center; margin-top: 8px; }
.phone-reading-reward-card {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(232,134,60,0.1); color: var(--accent);
  font-size: 11px;
}
.phone-reading-reward-card-ic { display: flex; align-items: center; }
.phone-reading-reward-card-tx { color: var(--accent); }
.phone-shell.has-custom-wallpaper .phone-reading-reward-card {
  background: rgba(0,0,0,0.28) !important; color: rgba(255,255,255,0.9) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-reward-card-ic,
.phone-shell.has-custom-wallpaper .phone-reading-reward-card-tx { color: rgba(255,255,255,0.9) !important; }

/* ===== 本章说·评论区页 ===== */
.phone-reading-cmt-page { display: flex; flex-direction: column; height: 100%; }
.phone-reading-cmt-scroll { flex: 1; overflow-y: auto; padding: 16px 16px 32px; }
/* 作者的话 */
.phone-reading-authornote {
  background: var(--bg-secondary, #1a1c24); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.phone-reading-authornote-hd { font-size: 12px; font-weight: 700; color: var(--accent, #f60); margin-bottom: 6px; }
.phone-reading-authornote-tx { font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.phone-reading-addnote-btn {
  width: 100%; background: var(--bg-secondary, #1a1c24); border: 1px dashed var(--border);
  color: var(--text-secondary, #888); border-radius: 12px; padding: 12px 0;
  font-size: 13px; cursor: pointer; margin-bottom: 16px;
}
.phone-reading-addnote-btn:active { opacity: 0.8; }
.phone-reading-cmt-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.phone-reading-cmt-count { font-size: 12px; color: var(--text-secondary); }
.phone-reading-cmt-refresh {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 8px;
}
.phone-reading-cmt-refresh:active { opacity: 0.6; }
.phone-reading-cmt-row { display: flex; gap: 10px; padding: 10px 0; }
.phone-reading-cmt-av {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 600;
}
.phone-reading-cmt-main { flex: 1; min-width: 0; }
.phone-reading-cmt-name { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.phone-reading-cmt-npc { font-size: 10px; color: var(--accent, #f60); border: 1px solid var(--accent, #f60); border-radius: 4px; padding: 0 4px; font-weight: 500; }
.phone-reading-cmt-me { font-size: 10px; color: var(--on-accent); background: var(--accent, #f60); border-radius: 4px; padding: 0 4px; font-weight: 500; }
.phone-reading-cmt-tx { font-size: 14px; line-height: 1.6; color: var(--text); word-break: break-word; white-space: pre-wrap; }
/* 底部发送评论栏 */
.phone-reading-cmt-inputbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08)); background: var(--bg, #14161e);
}
.phone-reading-cmt-send {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: none; border-radius: 50%; background: var(--accent, #f60); color: var(--on-accent); cursor: pointer;
}
.phone-reading-cmt-send:active { opacity: 0.85; }
/* 评论区壁纸适配 */
.phone-shell.has-custom-wallpaper .phone-reading-authornote { background: rgba(0,0,0,0.3) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-authornote-tx,
.phone-shell.has-custom-wallpaper .phone-reading-cmt-tx { color: rgba(255,255,255,0.92) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-cmt-name { color: rgba(255,255,255,0.66) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-cmt-count { color: rgba(255,255,255,0.6) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-cmt-refresh { color: rgba(255,255,255,0.8) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-cmt-inputbar { background: rgba(0,0,0,0.4) !important; border-top-color: rgba(255,255,255,0.12) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-cmt-inputbar input { color: rgba(255,255,255,0.92) !important; }

/* ===== 书籍设置页 ===== */
.phone-reading-toc-head { position: relative; }
.phone-reading-toc-gear {
  position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-secondary); cursor: pointer; opacity: 0.8;
}
.phone-reading-toc-gear:active { opacity: 1; }
.phone-shell.has-custom-wallpaper .phone-reading-toc-gear { color: rgba(255,255,255,0.85) !important; }
.phone-reading-set-page { padding: 8px 14px 24px; }
.phone-reading-set-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 4px;
}
.phone-reading-set-rowmain { flex: 1; min-width: 0; }
.phone-reading-set-rowlabel { font-size: 15px; color: var(--text); }
.phone-reading-set-rowdesc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.phone-reading-set-btn {
  flex-shrink: 0; padding: 7px 16px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,0.14)); background: var(--bg-secondary, #1a1c24); color: var(--text);
}
.phone-reading-set-btn:active { opacity: 0.85; }
.phone-reading-set-btn.danger { color: #e66; border-color: rgba(230,102,102,0.4); }
  .phone-reading-set-btn.phone-set-btn-ghost { background: transparent; color: var(--text-secondary); }
.phone-shell.has-custom-wallpaper .phone-reading-set-rowlabel { color: rgba(255,255,255,0.94) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-set-rowdesc { color: rgba(255,255,255,0.6) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-set-btn {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-set-btn.danger {
  color: #ff9b9b !important;
  border-color: rgba(255,155,155,0.45) !important;
}
/* 作者文风全屏页的输入框（行内 style 用 !important 覆盖） */
.phone-shell.has-custom-wallpaper .phone-reading-style-input {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-style-input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* ===== 查看大纲页 ===== */
.phone-reading-ol-page { padding: 12px 16px 28px; }
.phone-reading-ol-warn {
  font-size: 12px; color: #e6a23c; background: rgba(230,162,60,0.12);
  padding: 8px 12px; border-radius: 8px; margin-bottom: 14px;
}
.phone-reading-ol-sec {
  font-size: 13px; font-weight: 700; color: var(--accent, #f60);
  margin: 16px 0 6px;
}
.phone-reading-ol-text { font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.phone-reading-ol-item {
  font-size: 13px; line-height: 1.65; color: var(--text);
  padding: 8px 0; word-break: break-word;
}
.phone-reading-ol-item.recovered { opacity: 0.5; }
.phone-shell.has-custom-wallpaper .phone-reading-ol-text,
.phone-shell.has-custom-wallpaper .phone-reading-ol-item { color: rgba(255,255,255,0.9) !important; }

/* 壁纸适配 */
.phone-shell.has-custom-wallpaper .phone-reading-shelf-card {
  background: rgba(18, 20, 28, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-shelf-title { color: rgba(255,255,255,0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-shelf-author { color: rgba(255,255,255,0.6) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-shelf-cat {
  color: rgba(255,255,255,0.78) !important;
  background: rgba(255,255,255,0.14) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-shelf-intro { color: rgba(255,255,255,0.66) !important; }
.phone-shell.has-custom-wallpaper .phone-reading-discover-bar input {
  background: rgba(18, 20, 28, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255,255,255,0.92) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-prefs {
  background: rgba(18, 20, 28, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.phone-shell.has-custom-wallpaper .phone-reading-topbar-title { color: rgba(255,255,255,0.96) !important; }

/* ===== 电台 App ===== */
.phone-radio-home { padding: 14px 14px 24px; }
.phone-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.phone-radio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 12px 16px;
  border-radius: 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.phone-radio-card:active { transform: scale(0.97); }
.phone-radio-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.phone-radio-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--accent) 16%, transparent);
}
.phone-radio-card-icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30)); }
.phone-radio-card-icon-add {
  background: var(--bg-tertiary);
  border: 1px dashed var(--border);
  box-shadow: none;
}
.phone-radio-card-name { font-size: 14px; font-weight: 650; color: var(--text); }
.phone-radio-card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.phone-radio-card-add .phone-radio-card-name,
.phone-radio-card-add .phone-radio-card-desc { color: var(--text-secondary); }

/* 频道空状态 */
.phone-radio-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 24px;
  text-align: center;
}
.phone-radio-onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.phone-radio-onair-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
}
.phone-radio-onair.off .phone-radio-onair-dot { background: #888; opacity: .5; }
.phone-radio-onair:not(.off) { color: #e0464b; border-color: color-mix(in srgb, #e0464b 40%, var(--border)); }
.phone-radio-onair:not(.off) .phone-radio-onair-dot { background: #e0464b; animation: phoneRadioBlink 1.2s ease-in-out infinite; }
@keyframes phoneRadioBlink { 50% { opacity: .3; } }
.phone-radio-mic {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary));
  border: 1px solid var(--border);
}
.phone-radio-mic svg { width: 40px; height: 40px; opacity: .7; }
/* 圆环长按调频器 */
.phone-radio-tuner {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  margin-top: -10px;
}
.phone-radio-tuner-ring { display: block; filter: drop-shadow(inset 0 2px 4px rgba(0,0,0,0.3)); }
.phone-radio-tuner-track { stroke: rgba(128,128,128,0.22); filter: url(#none); }
.phone-radio-tuner-ring { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.phone-radio-tuner-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.phone-radio-tuner-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary));
  border: 1px solid var(--border);
  transition: transform .2s ease;
  cursor: pointer;
}
.phone-radio-tuner-icon svg { width: 28px; height: 28px; stroke: var(--accent); opacity: .9; }
.phone-radio-tuner-hint { font-size: 12px; color: var(--text-secondary); letter-spacing: .04em; margin-top: 6px; }
.phone-radio-tuner.holding .phone-radio-tuner-icon { transform: scale(1.08); }
/* 电波跳动动画（加载态） */
.phone-radio-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.phone-radio-wave span {
  display: block;
  width: 4px;
  border-radius: 3px;
  background: var(--accent);
  animation: radioWaveJump .8s ease-in-out infinite;
}
.phone-radio-wave span:nth-child(1) { height: 14px; animation-delay: 0s; }
.phone-radio-wave span:nth-child(2) { height: 22px; animation-delay: .1s; }
.phone-radio-wave span:nth-child(3) { height: 30px; animation-delay: .2s; }
.phone-radio-wave span:nth-child(4) { height: 22px; animation-delay: .3s; }
.phone-radio-wave span:nth-child(5) { height: 14px; animation-delay: .4s; }
@keyframes radioWaveJump {
  0%, 100% { transform: scaleY(0.5); opacity: .5; }
  50% { transform: scaleY(1.2); opacity: 1; }
}
.phone-radio-tuner.loading { pointer-events: none; }

/* 杂志式封面卡片 + 控制栏 */
.phone-radio-deck {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 18px 12px;
  gap: 18px;
}
.phone-radio-stack {
  position: relative;
  width: 100%;
  max-width: 320px;
}
.phone-radio-stack.has-next::after {
  content: '';
  position: absolute;
  top: 10px;
  right: -8px;
  bottom: -10px;
  left: 8px;
  border-radius: 18px;
  background: var(--bg-secondary);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  z-index: 0;
}
.phone-radio-prog-card {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 360px;
  box-sizing: border-box;
  padding: 14px 14px 18px;
  border-radius: 18px;
  background: var(--bg-secondary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* FM 数字，居中 */
.phone-radio-fm {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: 2px;
}
/* 大横封面 */
.phone-radio-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--decoration));
}
.phone-radio-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 标题 + 标签 一行 */
.phone-radio-prog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.phone-radio-prog-name { font-size: 19px; font-weight: 700; color: var(--text); text-align: left; min-width: 0; }
.phone-radio-prog-tags { display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
.phone-radio-card-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-tertiary));
  color: var(--accent);
  font-weight: 600;
}
.phone-radio-prog-host { font-size: 12px; color: var(--text-secondary); text-align: left; }
.phone-radio-prog-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 正在播·本期节目名（副信息，贴卡片底部） */
.phone-radio-prog-now {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-radio-now-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-tertiary));
  color: var(--accent);
}
.phone-radio-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}
.phone-radio-ctrl-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .1s;
}
.phone-radio-ctrl-btn:active { transform: scale(0.9); }
.phone-radio-ctrl-btn:disabled { opacity: .3; pointer-events: none; }
.phone-radio-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .1s;
}
.phone-radio-play-btn svg { margin-left: 2px; }
.phone-radio-play-btn:active { transform: scale(0.95); }
.phone-radio-counter { font-size: 11px; color: var(--text-secondary); }
/* 圆点指示器 */
.phone-radio-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 8px;
  margin: 2px 0;
}
.phone-radio-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-secondary) 35%, transparent);
  transition: all .2s;
}
.phone-radio-dot.active {
  width: 18px;
  border-radius: 4px;
  background: var(--accent);
}
.phone-radio-dot.edge {
  width: 4px;
  height: 4px;
  opacity: .5;
}
.phone-shell.has-custom-wallpaper .phone-radio-dot { background: rgba(255,255,255,0.35); }
.phone-shell.has-custom-wallpaper .phone-radio-dot.active { background: #fff; }
/* 控制栏卡片：包裹播放/切换三键 + 计数器 */
.phone-radio-ctrl-card {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--bg-secondary);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
/* 删除此频道长条按钮 */
.phone-radio-delete-btn {
  width: 100%;
  max-width: 320px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 14px;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s, color .15s;
}
.phone-radio-delete-btn:active { transform: scale(0.98); color: var(--error); }
/* 重新调频长条按钮 */
.phone-radio-retune-btn {
  width: 100%;
  max-width: 320px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: transform .1s;
}
.phone-radio-retune-btn:active { transform: scale(0.98); }
.phone-radio-retune-btn.loading { pointer-events: none; }
.phone-radio-retune-label { display: inline-flex; align-items: center; gap: 6px; }
/* 内联电波动画（按钮里，无绝对定位） */
.phone-radio-wave-inline {
  position: static;
  inset: auto;
  height: 26px;
}
.phone-shell.has-custom-wallpaper .phone-radio-retune-btn {
  background: rgba(18, 20, 28, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}

/* 遮罩适配 */
.phone-shell.has-custom-wallpaper .phone-radio-prog-card {
  background: rgba(18, 20, 28, 0.38) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
}
.phone-shell.has-custom-wallpaper .phone-radio-prog-name,
.phone-shell.has-custom-wallpaper .phone-radio-prog-now { color: rgba(255,255,255,0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-prog-host,
.phone-shell.has-custom-wallpaper .phone-radio-prog-desc,
.phone-shell.has-custom-wallpaper .phone-radio-counter { color: rgba(255,255,255,0.7) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-stack.has-next::after {
  background: rgba(18, 20, 28, 0.25) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-ctrl-btn { border-color: rgba(255,255,255,0.22); color: #fff; }
.phone-shell.has-custom-wallpaper .phone-radio-ctrl-card {
  background: rgba(18, 20, 28, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
}
.phone-shell.has-custom-wallpaper .phone-radio-delete-btn { color: rgba(255,255,255,0.66); }
.phone-shell.has-custom-wallpaper .phone-radio-tuner-track { stroke: rgba(255,255,255,0.15); }
.phone-shell.has-custom-wallpaper .phone-radio-tuner-icon {
  background: rgba(18, 20, 28, 0.35);
  border-color: rgba(255, 255, 255, 0.22);
}
.phone-shell.has-custom-wallpaper .phone-radio-tuner-icon svg { stroke: #fff; }
.phone-radio-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
.phone-radio-empty-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; max-width: 220px; }
.phone-radio-tune-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 9px 20px;
  border: none;
  border-radius: 22px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease;
}
.phone-radio-tune-btn:active { transform: scale(0.95); }
.phone-radio-deck { padding: 16px; }
/* 分类表单 — 图标选择器 */
.radio-cat-icon-pick {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .1s ease, border-color .1s ease;
}
.radio-cat-icon-pick svg { width: 22px; height: 22px; stroke: var(--text-secondary); }
.radio-cat-icon-pick:active { transform: scale(0.92); }
.radio-cat-icon-pick.active {
  background: var(--accent);
  border-color: var(--accent);
}
.radio-cat-icon-pick.active svg { stroke: #fff; }

/* 电台 — 遮罩（自定义壁纸）模式适配：深色玻璃卡片 + 白字 */
.phone-shell.has-custom-wallpaper .phone-radio-card {
  background: rgba(18, 20, 28, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-card-name { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-card-desc { color: rgba(255, 255, 255, 0.66) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-card-icon-add {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-card-add .phone-radio-card-name,
.phone-shell.has-custom-wallpaper .phone-radio-card-add .phone-radio-card-desc { color: rgba(255, 255, 255, 0.66) !important; }
/* 空状态页 */
.phone-shell.has-custom-wallpaper .phone-radio-onair {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-mic {
  background: rgba(18, 20, 28, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-mic svg { stroke: #fff !important; }
.phone-shell.has-custom-wallpaper .phone-radio-empty-title { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-empty-desc { color: rgba(255, 255, 255, 0.66) !important; }

/* ===== 电台详情页（整页 overlay）===== */
.phone-radio-detail {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.phone-radio-detail-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.phone-radio-detail-back {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.phone-radio-detail-headinfo { flex: 1; min-width: 0; }
.phone-radio-detail-set {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.phone-radio-detail-set:active { transform: scale(0.9); }
.phone-radio-detail-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-radio-detail-fm {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
}
.phone-radio-detail-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.phone-radio-detail-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-radio-detail-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.phone-radio-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 32px;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
}
.phone-radio-detail-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  flex-shrink: 0;
  padding: 8px 16px 8px;
}
.phone-radio-detail-show { font-size: 18px; font-weight: 700; color: var(--text); }
.phone-radio-detail-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.phone-radio-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.phone-radio-detail-host { font-size: 12px; color: var(--text-secondary); }
.phone-radio-detail-dur { font-size: 12px; color: var(--accent); font-weight: 600; }
/* 段落逐条浮现 */
.phone-radio-detail-body [data-seg-idx] {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.phone-radio-detail-body [data-seg-idx].seg-hidden {
  opacity: 0;
  transform: translateY(16px);
}
.phone-radio-detail-end.seg-hidden { opacity: 0; }
.phone-radio-detail-end { transition: opacity 0.5s ease; }
/* 未播提示：居中小字 */
.phone-radio-detail-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.phone-radio-detail-hint.hint-hidden { opacity: 0; }
/* 互动卡片：读留言 */
.phone-radio-interact {
  align-self: center;
  max-width: 94%;
  margin: 14px auto;
  padding: 16px 18px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--decoration) 14%, transparent));
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
.phone-radio-interact-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.phone-radio-interact-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.phone-radio-interact-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.phone-radio-interact-btn {
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.phone-radio-interact-btn.ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.phone-radio-interact-btn:disabled { opacity: 0.55; cursor: default; }
/* 互动卡片已完成态 */
.phone-radio-interact.done,
.phone-radio-interact.skip {
  background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
  border-color: color-mix(in srgb, var(--text-secondary) 25%, transparent);
}
.phone-radio-interact.done .phone-radio-interact-desc {
  color: var(--accent);
}
.phone-radio-interact.skip .phone-radio-interact-desc {
  color: var(--text-tertiary);
}
/* 投票卡片：问题 + 选项按钮列表 */
.phone-radio-vote-q {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.5;
}
.phone-radio-vote-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.phone-radio-vote-opt {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  text-align: left;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}
.phone-radio-vote-opt:active { transform: scale(0.98); }
.phone-radio-vote-opt:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.phone-radio-vote-opt:disabled { opacity: 0.55; cursor: default; }

/* 叙述行：居中圆角小卡片（学通话） */
.phone-radio-narr {
  align-self: center;
  max-width: 92%;
  margin: 12px auto;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}
/* 台词气泡 */
.phone-radio-line {
  display: flex;
  flex-direction: column;
  margin: 14px 0;
}
.phone-radio-line-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
}
.phone-radio-line-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-radio-line-avatar-fallback,
.phone-radio-line-avatar-guest {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.phone-radio-line.is-host .phone-radio-line-avatar-fallback { background: var(--accent); }
.phone-radio-line.is-guest .phone-radio-line-avatar-guest { background: var(--decoration); }
.phone-radio-line-avatar-guest svg { width: 15px; height: 15px; }
.phone-radio-line-head {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 6px;
}
.phone-radio-line-name { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.phone-radio-line-bubble {
  padding: 9px 13px;
  border-radius: 4px 16px 16px 16px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-left: 0;
  max-width: 100%;
}
.phone-radio-line.is-guest .phone-radio-line-bubble {
  background: color-mix(in srgb, var(--decoration) 12%, var(--bg-secondary));
  border-radius: 16px 4px 16px 16px;
}
/* 嘉宾整体靠右：头像名字行反向、气泡右对齐 */
.phone-radio-line.is-guest { align-items: flex-end; }
.phone-radio-line.is-guest .phone-radio-line-head { flex-direction: row-reverse; }
/* 来电听众（打进热线的虚构听众）：右对齐、装饰色、电话听筒头像 */
.phone-radio-line.is-caller { align-items: flex-end; }
.phone-radio-line.is-caller .phone-radio-line-head { flex-direction: row-reverse; }
.phone-radio-line-avatar-caller {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--decoration);
  color: #fff;
}
.phone-radio-line-avatar-caller svg { width: 15px; height: 15px; }
.phone-radio-line.is-caller .phone-radio-line-bubble {
  background: color-mix(in srgb, var(--decoration) 12%, var(--bg-secondary));
  border-radius: 16px 4px 16px 16px;
}
.phone-radio-detail-interact:empty { display: none; }
.phone-radio-detail-end {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 28px;
  letter-spacing: .1em;
}
/* 详情页底部播放器（照搬音乐播放器详情） */
.phone-radio-detail-player {
  flex-shrink: 0;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.phone-radio-player-progress { 
  padding: 8px 0; 
  display: flex;
  justify-content: center;
}
/* 频谱动画 */
.phone-radio-spectrum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  width: 100%;
}
.phone-radio-spectrum-bar {
  display: block;
  width: 3px;
  height: 8px;
  background: linear-gradient(to top, var(--accent), var(--decoration));
  border-radius: 2px;
  transform-origin: center;
}
.phone-radio-spectrum.playing .phone-radio-spectrum-bar {
  animation: spectrum-wave 0.8s ease-in-out infinite;
}
@keyframes spectrum-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1.4); opacity: 1; }
}
.phone-radio-player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 2px;
}
.phone-shell.has-custom-wallpaper .phone-radio-detail-player {
  background: rgba(18, 20, 28, 0.35);
}
/* 壁纸适配：详情页是盖在 phone-body 之上的全屏 overlay，本就该不透明自成一页
   （半透明会透出底下首页卡片，叠影）。壁纸模式下 --text 被转白，浅色主题原 var(--bg)
   会白底白字，这里用不透明深色背景，文字白色即正常。 */
.phone-shell.has-custom-wallpaper .phone-radio-detail {
  background: #14161e;
}
.phone-shell.has-custom-wallpaper .phone-radio-detail-name,
.phone-shell.has-custom-wallpaper .phone-radio-detail-show { color: rgba(255,255,255,0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-detail-back { color: rgba(255,255,255,0.92) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-detail-host,
.phone-shell.has-custom-wallpaper .phone-radio-detail-hint { color: rgba(255,255,255,0.7) !important; }
/* 台词气泡：深色块 + 白字（详情页底已是深色，用稍亮的色块区分层次） */
.phone-shell.has-custom-wallpaper .phone-radio-line-bubble {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-line.is-guest .phone-radio-line-bubble,
.phone-shell.has-custom-wallpaper .phone-radio-line.is-caller .phone-radio-line-bubble {
  background: color-mix(in srgb, var(--decoration) 30%, rgba(255, 255, 255, 0.08)) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-line-name { color: rgba(255, 255, 255, 0.7) !important; }
/* 旁白/音效行 */
.phone-shell.has-custom-wallpaper .phone-radio-narr {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
/* 历史节目卡片：深色块 + 白字（在不透明深色设置 overlay 上区分层次） */
.phone-shell.has-custom-wallpaper .phone-radio-hist-item {
  background: rgba(255, 255, 255, 0.08) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-hist-name { color: rgba(255, 255, 255, 0.94) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-hist-meta,
.phone-shell.has-custom-wallpaper .phone-radio-hist-time { color: rgba(255, 255, 255, 0.66) !important; }
/* 设置页输入框：深色块 + 白字（在不透明深色设置 overlay 上区分层次） */
.phone-shell.has-custom-wallpaper .phone-radio-set-field input,
.phone-shell.has-custom-wallpaper .phone-radio-set-field textarea,
.phone-shell.has-custom-wallpaper .phone-radio-set-field select,
.phone-shell.has-custom-wallpaper .phone-radio-set-voice-body .phone-radio-set-field input,
.phone-shell.has-custom-wallpaper .phone-radio-set-voice-body .phone-radio-set-field select {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-set-field input::placeholder,
.phone-shell.has-custom-wallpaper .phone-radio-set-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-set-field label { color: rgba(255, 255, 255, 0.88) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-set-voice { background: rgba(255, 255, 255, 0.06) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-set-tip {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.66) !important;
}
/* 「我的」页全局偏好折叠栏（phone-body 内容，底下是壁纸，用深色半透明玻璃块托白字） */
.phone-shell.has-custom-wallpaper .phone-radio-prefs {
  background: rgba(18, 20, 28, 0.42) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-prefs-title,
.phone-shell.has-custom-wallpaper .phone-radio-pref-row { color: rgba(255, 255, 255, 0.92) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-prefs-chevron { color: rgba(255, 255, 255, 0.66) !important; }

/* ===== 连线（call）玩法 UI ===== */
/* 玩家发言气泡（右对齐，区别于主播/嘉宾的台词行） */
.phone-radio-call-msg {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.phone-radio-call-msg.is-me .phone-radio-call-bubble {
  padding: 9px 13px;
  border-radius: 16px 16px 4px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  line-height: 1.65;
  word-break: break-word;
  max-width: 78%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* 连线中主播台词行加一点呼吸感，区分于正文已播内容 */
.phone-radio-call-hostline { animation: radio-call-fadein 0.3s ease; }
@keyframes radio-call-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 底部连线输入条（替换播放器位置） */
.phone-radio-call-bar {
  flex-shrink: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-shell.has-custom-wallpaper .phone-radio-call-bar {
  background: rgba(18, 20, 28, 0.55);
  backdrop-filter: blur(8px);
}
.phone-radio-call-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.phone-radio-call-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 0 0 rgba(255,90,90,0.6);
  animation: radio-call-pulse 1.4s ease-out infinite;
}
@keyframes radio-call-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,90,90,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(255,90,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); }
}
.phone-radio-call-inputrow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.phone-radio-call-inputrow textarea {
  flex: 1;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-tertiary);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  outline: none;
  resize: none;
  max-height: 90px;
  font-family: inherit;
}
.phone-radio-call-send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.phone-radio-call-send:active { transform: scale(0.94); }
.phone-radio-call-actions {
  display: flex;
  gap: 10px;
}
.phone-radio-call-refresh,
.phone-radio-call-hangup {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}
.phone-radio-call-refresh {
  flex: 2;
  background: var(--bg-tertiary);
  color: var(--text);
}
.phone-radio-call-refresh:disabled { opacity: 0.5; cursor: default; }
.phone-radio-call-hangup {
  background: color-mix(in srgb, #ff5a5a 16%, var(--bg-tertiary));
  color: #ff5a5a;
}
.phone-radio-call-refresh:active,
.phone-radio-call-hangup:active { transform: scale(0.97); }

/* ===== 电台设置页 ===== */
.phone-radio-set-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 4px 16px 10px;
}
.phone-radio-set-tab {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 12px;
  transition: all 0.18s;
}
.phone-radio-set-tab.active {
  background: var(--accent);
  color: var(--on-accent);
}
.phone-radio-set-section { margin-bottom: 18px; }
.phone-radio-set-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background-color: var(--bg-secondary);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
}
.phone-radio-set-cover-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-secondary);
  opacity: 0.6;
  font-size: 13px;
}
.phone-radio-set-cover-edit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-radio-set-field {
  flex: 1;
  margin-bottom: 16px;
}
.phone-radio-set-field-row {
  display: flex;
  gap: 12px;
}
.phone-radio-set-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
}
.phone-radio-set-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-secondary);
}
.phone-radio-set-field input,
.phone-radio-set-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-secondary);
  font-family: inherit;
  resize: none;
  line-height: 1.5;
}
.phone-radio-set-field input:focus,
.phone-radio-set-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.phone-radio-set-tip {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
}
.phone-radio-set-save {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
}
.phone-radio-set-save:active { transform: scale(0.98); }

/* 历史节目列表 */
.phone-radio-hist-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 48px 24px;
  line-height: 1.7;
}
.phone-radio-hist-list { display: flex; flex-direction: column; gap: 10px; }
.phone-radio-hist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: transform 0.12s;
}
.phone-radio-hist-item:active { transform: scale(0.98); }
.phone-radio-hist-cover {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--accent);
}
.phone-radio-hist-cover-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.phone-radio-hist-cover-ph svg { width: 22px; height: 22px; }
.phone-radio-hist-info { flex: 1; min-width: 0; }
.phone-radio-hist-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-radio-hist-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-radio-hist-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.phone-radio-hist-tag {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.phone-radio-hist-time {
  font-size: 10px;
  color: var(--text-secondary);
}
.phone-radio-hist-play {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-radio-hist-play svg { width: 18px; height: 18px; }
.phone-shell.has-custom-wallpaper .phone-radio-hist-play { background: #fff; color: #222; }

/* 语音朗读区块 */
.phone-radio-set-voice {
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-secondary);
}
.phone-radio-set-voice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.phone-radio-set-voice-body { margin-top: 14px; }
.phone-radio-set-voice-body .phone-radio-set-field input,
.phone-radio-set-voice-body .phone-radio-set-field select {
  background: var(--bg);
}
.phone-radio-set-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-secondary);
  font-family: inherit;
}
.phone-radio-engine-tabs {
  display: flex;
  gap: 8px;
}
.phone-radio-engine-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.phone-radio-engine-tab.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
/* 开关 */
.phone-radio-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.phone-radio-switch input { opacity: 0; width: 0; height: 0; }
.phone-radio-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 13px;
  transition: 0.2s;
}
.phone-radio-switch-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.phone-radio-switch input:checked + .phone-radio-switch-slider { background: var(--accent); }
.phone-radio-switch input:checked + .phone-radio-switch-slider::before { transform: translateX(18px); }

/* 角色独立音色区块 */
.phone-radio-role-block {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg);
}
.phone-radio-role-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.phone-radio-role-block .phone-radio-engine-tabs { margin-bottom: 10px; }
.phone-radio-voice-pick {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-secondary);
  font-family: inherit;
}
.phone-radio-voice-pick:focus {
  outline: none;
  border-color: var(--accent);
}

/* ===== 电台「我的」页：个人资料头部 ===== */
.phone-radio-mine-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 14px;
}
.phone-radio-mine-ava {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.phone-radio-mine-ava-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 22px;
  font-weight: 600;
}
.phone-radio-mine-header-info {
  flex: 1;
  min-width: 0;
}
.phone-radio-mine-header-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-radio-mine-header-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 「我的订阅」分区标题 */
.phone-radio-mine-section-title {
  padding: 14px 16px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ===== 电台「我的」页：全局偏好横条 ===== */
.phone-radio-prefs {
  margin: 10px 12px 0;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border-radius: 12px;
  overflow: hidden;
}
.phone-radio-prefs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.phone-radio-prefs-gear {
  display: inline-flex;
  color: var(--accent);
}
.phone-radio-prefs-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.phone-radio-prefs-chevron {
  display: inline-flex;
  color: var(--text-secondary);
}
.phone-radio-prefs-body {
  padding: 4px 14px 12px;
}
.phone-radio-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--text);
}

/* ===== 怪谈类惊吓特效（glitch）===== */
/* 详情页本体：触发瞬间整页抖动 + 反色/RGB分离闪一下（作用在真实内容上才看得见） */
.phone-radio-detail.phone-radio-glitching {
  animation: phone-radio-glitch-shake 0.5s linear, phone-radio-glitch-split 0.5s linear;
}
.phone-radio-glitch {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
}
/* SVG 分形噪点雪花 */
.phone-radio-glitch-noise {
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.5"/%3E%3C/svg%3E');
  mix-blend-mode: overlay;
  opacity: 0;
  animation: phone-radio-glitch-noise 0.5s steps(4, end);
}
.phone-radio-glitch-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 3px
  );
  mix-blend-mode: overlay;
  opacity: 0;
  animation: phone-radio-glitch-flash 0.5s steps(3, end);
}
@keyframes phone-radio-glitch-shake {
  0%   { transform: translate(0, 0) skewX(0deg); }
  8%   { transform: translate(-3px, 1px) skewX(-1deg); }
  16%  { transform: translate(3px, -1px) skewX(1deg); }
  24%  { transform: translate(-2px, -1px) skewX(0deg); }
  32%  { transform: translate(3px, 1px) skewX(1deg); }
  40%  { transform: translate(-3px, 1px) skewX(-1deg); }
  50%  { transform: translate(2px, -1px) skewX(1deg); }
  60%  { transform: translate(-2px, 1px) skewX(-1deg); }
  70%  { transform: translate(2px, -1px) skewX(0deg); }
  82%  { transform: translate(-1px, 1px) skewX(0deg); }
  92%  { transform: translate(1px, 0) skewX(0deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}
/* 整页反色/色相/RGB分离闪烁 */
@keyframes phone-radio-glitch-split {
  0%   { filter: none; }
  10%  { filter: invert(1) hue-rotate(90deg); }
  14%  { filter: none; }
  46%  { filter: none; }
  52%  { filter: invert(1) hue-rotate(-60deg); }
  56%  { filter: none; }
  100% { filter: none; }
}
@keyframes phone-radio-glitch-noise {
  0%   { opacity: 0; background-position: 0 0; }
  20%  { opacity: 0.5; }
  50%  { opacity: 0.25; background-position: 22px 18px; }
  80%  { opacity: 0.45; background-position: -16px 10px; }
  100% { opacity: 0; }
}
@keyframes phone-radio-glitch-flash {
  0%   { opacity: 0; }
  30%  { opacity: 0.9; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; }
}

/* ===== 问卜玩法：递交特效（卡片消散 + 符光上浮） ===== */
/* 卡片整体淡出、微缩、轻微上浮，像化作一缕青烟散去 */
.phone-radio-div-dissolve {
  animation: phone-radio-div-dissolve 0.6s ease-in forwards;
  position: relative;
}
@keyframes phone-radio-div-dissolve {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  60%  { opacity: 0.5; transform: translateY(-8px) scale(0.98); filter: blur(0.5px); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.95); filter: blur(3px); }
}
/* 符光层：覆盖在卡片上，不挡交互（卡片此时已锁） */
.phone-radio-div-spark-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
/* 单颗光点：从卡片底部附近升起、边升边淡、伴随微光 */
.phone-radio-div-spark {
  position: absolute;
  bottom: 30%;
  border-radius: 50%;
  background: var(--accent, #b9a3ff);
  box-shadow: 0 0 6px 2px var(--accent, #b9a3ff);
  opacity: 0;
  animation-name: phone-radio-div-spark;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes phone-radio-div-spark {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-70px) scale(1.1); }
}


/* ===== 电台「我的」页：订阅小卡 ===== */
.phone-radio-mine-list {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 左滑删除容器 */
.phone-radio-mine-swipe {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.phone-radio-mine-swipe-content {
  position: relative;
  transition: transform 0.25s ease;
  will-change: transform;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
}
.phone-radio-mine-swipe-content.swiping {
  transition: none; /* 滑动时禁用动画 */
}
.phone-radio-mine-swipe-delete {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 14px 14px 0; /* 右侧圆角 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.phone-radio-mine-swipe.swiped .phone-radio-mine-swipe-delete {
  opacity: 1;
  pointer-events: auto;
}
.phone-radio-mine-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.phone-radio-mine-card:active {
  transform: scale(0.985);
  background: var(--bg-tertiary);
}
.phone-radio-mine-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.phone-radio-mine-cover {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-radio-mine-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phone-radio-mine-cover-fallback {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}
.phone-radio-mine-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.phone-radio-mine-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-radio-mine-fm {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-tertiary));
}
.phone-radio-mine-host {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.phone-radio-mine-mic {
  flex-shrink: 0;
  opacity: 0.8;
}
.phone-radio-mine-tags {
  display: inline-flex;
  gap: 4px;
}
.phone-radio-mine-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.phone-radio-mine-next {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.phone-radio-mine-next-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.phone-radio-mine-next-line {
  flex: 1;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 100%);
}
.phone-radio-mine-next-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-radio-mine-next-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.phone-shell.has-custom-wallpaper .phone-radio-mine-card {
  background: color-mix(in srgb, var(--accent) 12%, rgba(18, 20, 28, 0.42)) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-mine-name { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-mine-host { color: rgba(255, 255, 255, 0.7) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-mine-next {
  background: rgba(0, 0, 0, 0.22) !important;
}
.phone-shell.has-custom-wallpaper .phone-radio-mine-next-name { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-mine-next-desc { color: rgba(255, 255, 255, 0.7) !important; }

/* ===== 小屋 App ===== */
.cottage-ai-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.cottage-ai-btn:active { background: rgba(255,255,255,0.10); }
.cottage-ai-mode-opt:active { background: rgba(255,255,255,0.08); }
.cottage-home { padding: 16px 16px 24px; color: var(--text); }
/* 商城页：两个入口卡片 */
.cottage-mall { padding: 16px 16px 24px; color: var(--text); display: flex; flex-direction: column; gap: 12px; }
.cottage-mall-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.22);
  cursor: pointer;
  transition: transform 0.12s;
}
.cottage-mall-card:active { transform: scale(0.985); }
.cottage-mall-card-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
}
.cottage-mall-card-icon svg { width: 24px; height: 24px; stroke: #fff; }
.cottage-mall-card-name { font-size: 15px; font-weight: 650; margin-bottom: 3px; }
.cottage-mall-card-desc { font-size: 12px; color: var(--text-secondary); }
/* 商城 / 仓库：平铺筛选标签 */
.cottage-mall-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cottage-mall-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card, rgba(255,255,255,0.04));
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.cottage-mall-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
/* 商城 / 仓库：配送中订单提示条 */
.cottage-mall-orders-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: rgba(255,255,255,0.04);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* 购买弹窗：付款方式 / 到货方式选项 */
.cottage-buy-opt {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.cottage-buy-opt.active {
  border-color: var(--accent);
  background: rgba(255,255,255,0.05);
  font-weight: 600;
}
.cottage-buy-ship-opt {
  text-align: center;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.cottage-buy-ship-opt.active {
  border-color: var(--accent);
  background: rgba(255,255,255,0.05);
  font-weight: 600;
}
.cottage-house-list { display: flex; flex-direction: column; gap: 12px; }
.cottage-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.cottage-house-card {
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.22);
  cursor: pointer;
  transition: transform .1s;
}
.cottage-house-card:active { transform: scale(0.98); }
.cottage-house-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cottage-house-name { font-size: 16px; font-weight: 750; }
.cottage-house-badge {
  font-size: 10px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}
.cottage-house-addr { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.cottage-house-meta { font-size: 12px; color: var(--text-secondary); opacity: 0.85; }
.cottage-add-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed var(--accent);
  background: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.cottage-add-btn:active { background: rgba(255,255,255,0.08); }

/* 住所详情页 */
.cottage-house-page { padding: 16px 16px 24px; color: var(--text); }
.cottage-info-card {
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.24);
  cursor: pointer;
  position: relative;
  transition: transform .1s;
}
.cottage-info-card:active { transform: scale(0.99); }
/* 有图片时：文字铺在深色蒙版上，统一白字 */
.cottage-info-card-img { height: 140px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; border: none; overflow: hidden; }
.cottage-info-card-img .cottage-info-name,
.cottage-info-card-img .cottage-info-addr,
.cottage-info-card-img .cottage-info-style { color: #fff; }
.cottage-info-card-img .cottage-info-style {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cottage-info-card-img .cottage-info-addr { margin-bottom: 6px; }
.cottage-info-card-img .cottage-info-style-empty { color: rgba(255,255,255,0.8); }
.cottage-info-card-img .cottage-info-edit-hint { display: none; }
.cottage-info-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cottage-info-name { font-size: 18px; font-weight: 800; }
.cottage-info-addr { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.cottage-info-style { font-size: 13px; line-height: 1.5; color: var(--text); }
.cottage-info-style-empty { color: var(--text-secondary); opacity: 0.8; }
.cottage-info-edit-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  text-align: right;
}
.cottage-set-cur-btn {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.cottage-set-cur-btn:active { background: rgba(255,255,255,0.08); }

/* 楼层下拉框 */
.cottage-floor-select {
  position: relative;
  z-index: 60;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}
.cottage-floor-arrow { font-size: 12px; opacity: 0.7; }
.cottage-floor-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.cottage-floor-menu.hidden { display: none; }
.cottage-floor-opt {
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cottage-floor-opt:active { background: rgba(255,255,255,0.08); }
.cottage-floor-opt.active .cottage-floor-opt-name { color: var(--accent); font-weight: 700; }
.cottage-floor-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cottage-floor-opt-act {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.cottage-floor-opt-act:active { background: rgba(255,255,255,0.12); }
.cottage-floor-opt-del { color: #e0464b; }
.cottage-floor-opt-add { color: var(--accent); font-size: 13px; }

/* 房间网格：两列卡片 */
.cottage-room-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cottage-room-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.22);
  cursor: pointer;
  transition: transform .12s ease;
}
.cottage-room-card:active { transform: scale(0.97); }
.cottage-room-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--accent) 16%, transparent);
}
.cottage-room-icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30)); }
.cottage-room-icon-add {
  background: var(--bg-tertiary);
  border: 1px dashed var(--border);
  box-shadow: none;
}
.cottage-room-icon-add svg { stroke: var(--text-secondary); filter: none; }
.cottage-room-name { font-size: 14px; font-weight: 650; color: var(--text); }
.cottage-room-card-add .cottage-room-name { color: var(--text-secondary); }

/* 房间详情页：装修 / 家具 / 装饰 三栏 */
.cottage-room-page { padding: 16px 16px 24px; color: var(--text); }

/* 房间顶部信息卡片 */
.cottage-room-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.22);
  cursor: pointer;
  transition: transform .1s;
  margin-bottom: 4px;
}
.cottage-room-info:active { transform: scale(0.98); }
.cottage-room-info-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--accent) 16%, transparent);
}
.cottage-room-info-icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30)); }
.cottage-room-info-text { flex: 1; min-width: 0; }
.cottage-room-info-name { font-size: 16px; font-weight: 750; margin-bottom: 3px; }
.cottage-room-info-desc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 图标选择网格（房间编辑弹窗） */
.cottage-icon-pick {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  cursor: pointer;
}
.cottage-icon-pick svg { width: 22px; height: 22px; stroke: var(--text-secondary) !important; }
.cottage-icon-pick.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary)); }
.cottage-icon-pick.active svg { stroke: var(--accent) !important; }

.cottage-sec-title {
  font-size: 15px;
  font-weight: 800;
  margin: 18px 2px 10px;
}
.cottage-sec-title:first-child { margin-top: 2px; }
.cottage-item-list { display: flex; flex-direction: column; gap: 10px; }
.cottage-item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  cursor: pointer;
  transition: transform .1s;
}
.cottage-item-card:active { transform: scale(0.98); }
.cottage-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}
.cottage-item-name { font-size: 14px; font-weight: 650; flex-shrink: 0; }
.cottage-item-desc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cottage-item-pos {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.85;
  max-width: 35%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cottage-item-add {
  padding: 11px;
  border-radius: 12px;
  border: 1px dashed var(--accent);
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

/* ===== 衣橱 App ===== */
.wardrobe-shell {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wardrobe-top {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.wardrobe-portrait {
  width: 100px;
  height: 150px;
  border-radius: 14px;
  background: var(--bg-tertiary) center/cover no-repeat;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: opacity .2s;
}
.wardrobe-portrait:active { opacity: .7; }
.wardrobe-portrait-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-secondary);
}
.wardrobe-portrait-empty span {
  font-size: 11px;
}
.wardrobe-top-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wardrobe-card-head {
  /* 标题区贴顶 */
}
.wardrobe-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.wardrobe-card-hint {
  font-size: 12px;
  color: var(--text-secondary);
}
.wardrobe-top-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wardrobe-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.wardrobe-btn:active { opacity: .7; }
.wardrobe-btn svg { flex-shrink: 0; color: var(--accent); }
.wardrobe-parts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wardrobe-part {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.wardrobe-part-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.wardrobe-part-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.wardrobe-part-add {
  padding: 4px 10px;
  border: none;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.wardrobe-part-add:active { opacity: .7; }
.wardrobe-part-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wardrobe-part-empty {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0;
}
.wardrobe-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-tertiary);
  border-radius: 9px;
  cursor: pointer;
}
.wardrobe-item:active { background: var(--bg-secondary); }
.wardrobe-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex-shrink: 0;
}
.wardrobe-item-desc {
  font-size: 11px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wardrobe-item-del {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wardrobe-item-del:active { color: #f44; }
/* 衣橱 — 套装列表弹窗 */
.wardrobe-suit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wardrobe-suit-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  gap: 10px;
}
.wardrobe-suit-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.wardrobe-suit-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.wardrobe-suit-preview {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wardrobe-suit-del {
  flex-shrink: 0;
  padding: 5px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wardrobe-suit-del:active { color: #f44; }

/* 遮罩模式：衣橱卡片照搬配送卡玻璃风（渐变+边框+inset高光），文字提亮 */
.phone-shell.has-custom-wallpaper .wardrobe-part,
.phone-shell.has-custom-wallpaper .wardrobe-item,
.phone-shell.has-custom-wallpaper .wardrobe-btn,
.phone-shell.has-custom-wallpaper .wardrobe-part-add {
  background: linear-gradient(to top, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%), rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.24);
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
.phone-shell.has-custom-wallpaper .wardrobe-portrait-empty {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
}
.phone-shell.has-custom-wallpaper .wardrobe-card-hint,
.phone-shell.has-custom-wallpaper .wardrobe-part-name,
.phone-shell.has-custom-wallpaper .wardrobe-item-name,
.phone-shell.has-custom-wallpaper .wardrobe-item-desc,
.phone-shell.has-custom-wallpaper .wardrobe-part-empty {
  color: rgba(255,255,255,0.9);
}
.phone-shell.has-custom-wallpaper .wardrobe-part-add,
.phone-shell.has-custom-wallpaper .wardrobe-btn {
  color: #fff;
}
.cottage-item-add:active { background: rgba(255,255,255,0.08); }

/* ============================================================
   手机主题：主题选择器 UI（设置页通用）
   ============================================================ */
.phone-theme-options {
  display: flex;
  gap: 12px;
}
.phone-theme-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
  border: 2px solid transparent;
  color: currentColor;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.phone-theme-option.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.phone-theme-swatch {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.phone-theme-swatch-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14));
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
}
.phone-theme-swatch-fudge {
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
.phone-theme-name { font-size: 12px; font-weight: 700; }

/* ============================================================
   矮屏适配：内容高度紧张时压紧主屏三页的间距与图标尺寸，
   让常见小屏 / 带地址栏的浏览器不用滚动就能看全所有 app。
   极端不够时仍由 .phone-page 的纵向滚动兜底。
   ============================================================ */
@media (max-height: 740px) {
  .phone-app-icon-circle { width: 48px; height: 48px; }
  .phone-app-icon { gap: 5px; }
  .phone-system-grid, .phone-app-grid { gap: 10px 14px; padding: 6px 6px 4px; }
  .phone-app-grid { padding: 2px 6px 2px; }
  .phone-widget { padding: 16px 8px 8px; }
  .phone-home-bottom-spacer { min-height: 12px; }
  .phone-home-spacer { min-height: 8px; }
  .phone-page2-row { padding-top: 10px; gap: 10px; }
  .phone-page2-apps { gap: 10px 14px; }
  .phone-delivery-widget { margin-top: 12px; gap: 10px; }
  .phone-music-row { margin-top: 8px; gap: 10px; }
  .phone-dock { margin: 6px 4px max(env(safe-area-inset-bottom, 0px), 4px); padding: 8px 8px; }
  /* 卡片同步缩小：番茄钟 */
  .phone-tomato-card { padding: 8px; }
  .phone-tomato-ring { width: 64px; height: 64px; }
  .phone-tomato-clock { font-size: 22px; }
  .phone-tomato-label { margin-top: 4px; }
  /* 音乐卡片 */
  .phone-music-card { padding: 8px 12px 8px; }
  .phone-music-cover { width: 38px; height: 38px; }
  /* 个人资料卡 */
  .phone-profile-card { padding: 8px 12px; margin-bottom: 8px; }
  .phone-profile-name { font-size: 15px; }
  /* 飞鸟快递方卡（aspect-ratio 是高度大户，压扁） */
  .phone-dw-express { aspect-ratio: 4 / 3; padding: 12px; }
  .phone-dw-mini { padding: 10px 12px; }
  /* 纪念日卡（flex:1 会被同行撑高，限高压住） */
  .phone-anniversary-card { max-height: 150px; padding: 10px; }
  /* 日历卡片（第三页顶部 banner） */
  .phone-cal-banner { margin-top: 12px; padding: 10px 14px 10px; }
  .phone-cal-banner-clock { font-size: 23px; }
  .phone-cal-banner-countdown { margin-top: 5px; }
}
@media (max-height: 640px) {
  .phone-app-icon-circle { width: 44px; height: 44px; }
  .phone-app-icon-label { font-size: 10.5px; }
  .phone-system-grid, .phone-app-grid { gap: 8px 12px; }
  .phone-page2-apps { gap: 8px 12px; }
  .phone-widget { padding: 10px 8px 6px; }
  .phone-page2-row { padding-top: 6px; }
  /* 卡片再缩一档 */
  .phone-tomato-ring { width: 56px; height: 56px; }
  .phone-tomato-clock { font-size: 19px; }
  .phone-music-card { padding: 6px 10px 6px; }
  .phone-music-cover { width: 34px; height: 34px; }
  .phone-music-title { font-size: 13px; }
  .phone-dw-express { aspect-ratio: 3 / 2; padding: 10px; }
  .phone-anniversary-card { max-height: 120px; }
  .phone-profile-card { padding: 6px 10px; }
  .phone-cal-banner { margin-top: 8px; padding: 8px 14px; }
  .phone-cal-banner-clock { font-size: 20px; }
}

/* ===== 视频 App ===== */
.phone-video-home { padding: 14px 14px 24px; }
.phone-video-cat-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  border-radius: 10px; padding: 3px;
}
.phone-video-cat-tab {
  flex: 1; text-align: center; cursor: pointer;
  padding: 7px 0; border-radius: 8px;
  font-size: 13px; color: var(--text-secondary, #999);
  transition: background .18s ease, color .18s ease;
}
.phone-video-cat-tab.active {
  background: var(--accent, #f60); color: var(--on-accent); font-weight: 600;
}
.phone-video-detail-tabs {
  display: flex; gap: 22px;
  padding: 4px 16px 0;
  flex-shrink: 0;
}
.phone-video-detail-tab {
  position: relative;
  cursor: pointer;
  padding: 6px 0 9px;
  font-size: 14px;
  color: var(--text-secondary, #999);
  transition: color .18s ease;
}
.phone-video-detail-tab.active {
  color: var(--accent, #f60);
  font-weight: 700;
}
.phone-video-detail-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent, #f60);
}
.phone-video-detail-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px;
}
.phone-video-searchbar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.phone-video-search {
  flex: 1; min-width: 0; outline: none;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 6px; padding: 6px 10px;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  font-size: 13px; color: var(--text);
}
.phone-video-search::placeholder { color: var(--text-tertiary, #666); }
.phone-video-search-btn {
  flex-shrink: 0;
  background: var(--accent, #f60); color: var(--on-accent); border: none;
  border-radius: 6px; padding: 6px 12px; font-size: 12px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.phone-video-search-btn:active { opacity: 0.8; }
/* 缩略图网格：两列，16:9 横构图 */
.phone-video-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px;
}
.phone-video-card { cursor: pointer; }
.phone-video-skeleton-cover {
  width: 100%; aspect-ratio: 16 / 9;
  height: auto; border-radius: 9px;
}
.phone-video-card-cover {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 9px; overflow: hidden;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
}
.phone-video-card-coverfallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary, #888); opacity: 0.5;
}
.phone-video-card-coverfallback .phone-icon-glyph svg { width: 34px; height: 34px; }
.phone-video-card-dur {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
}
.phone-video-card-live {
  position: absolute; left: 6px; top: 6px;
  background: #e23b3b; color: #fff;
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  font-weight: 600; letter-spacing: 0.3px;
}
.phone-video-card-rating {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(0,0,0,0.7); color: #ffd24d;
  font-size: 11px; padding: 1px 5px; border-radius: 4px;
  font-weight: 700;
}
/* 自制作品角标：左上角橙色小胶囊（与评分/时长角标区分开） */
.phone-video-card-make {
  position: absolute; left: 6px; top: 6px;
  background: var(--accent, #d97706); color: var(--on-accent);
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  font-weight: 600; letter-spacing: 0.3px;
}
/* 观看历史「管理」态：卡片右上角删除角标 */
.phone-video-card-del {
  position: absolute; right: 5px; top: 5px;
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(226,59,59,0.92); color: #fff;
  border: none; border-radius: 50%; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.phone-video-card-del:active { opacity: 0.8; }
/* 观看历史「管理」态：顶部提示条 */
.phone-video-mine-edittip {
  font-size: 11px; color: var(--text-secondary, #999);
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
  line-height: 1.6;
}
/* 生成开关横排容器（视频/阅读发现页共用）：圆形复选框 + 横向排列 */
.phone-genrow {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 2px 2px 14px;
}
.phone-genrow .circle-check-label {
  flex: 0 0 auto; width: auto;
  justify-content: flex-start; gap: 7px;
  font-size: 12px; color: var(--text-secondary, #aaa);
}
.phone-genrow .circle-check-label .circle-check-text { flex: 0 0 auto; font-size: 12px; }
.phone-genrow .circle-check-ui { width: 16px; height: 16px; flex: 0 0 16px; border-width: 2px; }
.phone-video-card-title {
  margin-top: 6px; font-size: 13px; color: var(--text);
  line-height: 1.4; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.phone-video-card-by {
  margin-top: 3px; font-size: 11px; color: var(--text-secondary, #999);
}
.phone-video-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px; gap: 14px;
}
.phone-video-empty-icon { color: var(--text-tertiary, #888); opacity: 0.4; }
.phone-video-empty-icon .phone-icon-glyph svg { width: 44px; height: 44px; }
.phone-video-empty-text { font-size: 13px; color: var(--text-secondary, #999); }
.phone-video-mine-section {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: 16px 0 8px; padding-left: 2px;
}
.phone-video-mine-section:first-child { margin-top: 4px; }

/* 「我的」页·关注的直播：横排圆头像，左右滑 */
.phone-live-follow-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-live-follow-row::-webkit-scrollbar { display: none; }
.phone-live-follow-card {
  flex: 0 0 auto;
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.phone-live-follow-card:active { opacity: 0.7; }
.phone-live-follow-ava {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.phone-live-follow-ava-char {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.phone-live-follow-name {
  max-width: 54px;
  font-size: 11px;
  color: var(--text-secondary, #999);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-live-follow-del {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: #e74c3c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

/* ===== 直播全屏竖刷（A2）===== */
/* 全屏模式：藏掉手机公共顶栏，竖刷顶到状态栏下 */
.phone-shell.phone-live-fullscreen .phone-header { display: none; }
.phone-live-feed {
  position: relative;
  height: 100%;
  background: #000;
  overflow: hidden;
}
/* 顶部悬浮条：返回 + 分类 */
.phone-live-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: max(12px, env(safe-area-inset-top, 12px)) 14px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
  pointer-events: none;
}
.phone-live-topbar > * { pointer-events: auto; }
.phone-live-back {
  background: rgba(0,0,0,0.3); border: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; flex-shrink: 0;
  padding: 0;
}
.phone-live-back:active { opacity: 0.7; }
.phone-live-cat-tabs {
  display: flex; gap: 16px; flex: 1;
}
.phone-live-cat-tab {
  font-size: 15px; color: rgba(255,255,255,0.7);
  cursor: pointer; padding: 2px 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.phone-live-cat-tab.active {
  color: #fff; font-weight: 700;
  border-bottom: 2px solid #fff;
}
/* 关注预览页标题 */
.phone-live-follow-feed-title {
  font-size: 16px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  flex: 1;
}
/* 关注预览页右上角设置按钮 */
.phone-livefollow-set {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
}
.phone-livefollow-set:active { opacity: 0.7; }
/* 竖刷滚动容器 */
.phone-live-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-live-scroll::-webkit-scrollbar { display: none; }
/* 单屏直播间 */
.phone-live-page {
  position: relative;
  height: 100%; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  box-sizing: border-box;
  overflow: hidden;
}
.phone-live-cover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.phone-live-cover-img { width: 100%; height: 100%; object-fit: cover; }
.phone-live-cover-kw {
  position: absolute; left: 0; right: 0; bottom: 92px;
  font-size: 11px; color: rgba(255,255,255,0.28);
  padding: 0 36px; text-align: center; line-height: 1.6;
  font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 信息覆盖层 */
.phone-live-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 16px 70px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.55) 100%);
  color: #fff;
}
/* 顶部主播信息 */
.phone-live-top {
  display: flex; align-items: center; gap: 10px;
}
.phone-live-ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.6);
  flex-shrink: 0;
  overflow: hidden;
}
.phone-live-streamer { flex: 1; min-width: 0; }
.phone-live-streamer-name {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.phone-live-group-badge {
  font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,0.25); border-radius: 4px;
  padding: 1px 5px;
}
.phone-live-online {
  font-size: 11px; color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.phone-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff3b3b; display: inline-block;
  box-shadow: 0 0 5px #ff3b3b;
  animation: phone-live-pulse 1.4s ease-in-out infinite;
}
@keyframes phone-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.phone-live-tag-chip {
  font-size: 11px; color: #fff;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 11px; padding: 3px 9px;
  flex-shrink: 0;
}
/* 中部标题 + 进间按钮 */
.phone-live-center {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
.phone-live-title {
  font-size: 18px; font-weight: 700; line-height: 1.4;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  max-width: 90%;
}
.phone-live-intro {
  font-size: 12px; color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); max-width: 85%;
}
.phone-live-enter-btn {
  margin-top: 4px;
  background: var(--accent, #f60); color: var(--on-accent); border: none;
  border-radius: 22px; padding: 11px 30px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.phone-live-enter-btn:active { opacity: 0.85; transform: scale(0.97); }
/* 底部信息 */
.phone-live-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.phone-live-airtime {
  font-size: 11px; color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.phone-live-swipe-hint {
  font-size: 11px; color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* 底部 tab（直播页专用，悬浮在竖刷之上） */
.phone-live-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 6;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
}
.phone-live-tabbar .phone-tab { color: rgba(255,255,255,0.7); }
.phone-live-tabbar .phone-tab.active { color: #fff; }
/* 边界拽动黑带（顶/底各一条，高度跟随拽动，到阈值变橙） */
.phone-live-band {
  position: absolute; left: 0; right: 0; z-index: 7;
  height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.4));
  transition: height .12s ease-out, background .15s ease;
  pointer-events: none;
}
.phone-live-band-top { top: 0; }
.phone-live-band-bottom { bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0.4)); }
.phone-live-band-text {
  font-size: 13px; color: rgba(255,255,255,0.9);
  white-space: nowrap;
}
.phone-live-band.phone-live-band-ready {
  background: linear-gradient(180deg, rgba(255,102,0,0.9), rgba(255,102,0,0.45));
}
.phone-live-band-bottom.phone-live-band-ready {
  background: linear-gradient(0deg, rgba(255,102,0,0.9), rgba(255,102,0,0.45));
}
.phone-live-band.phone-live-band-ready .phone-live-band-text { font-weight: 700; color: #fff; }
/* 全屏 loading 遮罩 */
.phone-live-loading {
  position: absolute; inset: 0; z-index: 99;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);
  /* 阻断底层 scroll-snap 滚动容器接管触摸，否则 WebView 里取消按钮的 tap 会被滚动吞掉 */
  touch-action: none;
}
.phone-live-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent, #f60);
  animation: phone-live-spin 0.8s linear infinite;
}
@keyframes phone-live-spin { to { transform: rotate(360deg); } }
.phone-live-loading-text { font-size: 13px; color: rgba(255,255,255,0.85); }
.phone-live-loading-cancel {
  margin-top: 6px;
  padding: 7px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  cursor: pointer;
}
.phone-live-loading-cancel:active { background: rgba(255,255,255,0.18); }
/* 空态 */
.phone-live-empty {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: rgba(255,255,255,0.7);
}
.phone-live-empty-icon { opacity: 0.4; }
.phone-live-empty-icon .phone-icon-glyph svg { width: 48px; height: 48px; }
.phone-live-empty-text { font-size: 13px; }
.phone-live-empty-btn {
  background: var(--accent, #f60); color: var(--on-accent); border: none;
  border-radius: 20px; padding: 9px 24px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.phone-live-empty-btn:active { opacity: 0.85; }

/* ===== A3 直播间详情（全屏 overlay）===== */
.phone-liveroom {
  position: absolute; inset: 0; z-index: 70;
  overflow: hidden;
  display: flex; flex-direction: column;
  color: #fff;
  font-size: 13px;
}
/* 背景层：封面图 or 渐变 */
.phone-liveroom-bg { position: absolute; inset: 0; z-index: 0; }
.phone-liveroom-bg img { display: block; }
/* 压暗遮罩：上下加深，让文字/弹幕看得清 */
.phone-liveroom-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.12) 22%,
    rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.45) 82%, rgba(0,0,0,0.62) 100%);
}

/* 顶部：返回 + 主播信息 + 关注 */
.phone-liveroom-top {
  position: relative; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top, 10px)) 12px 0;
}
.phone-liveroom-back {
  width: 30px; height: 30px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.32); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.phone-liveroom-streamer {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.32); border-radius: 20px;
  padding: 4px 10px 4px 4px;
}
.phone-liveroom-ava {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#ff8a3d,#ff5e62);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.phone-liveroom-sname { font-size: 12px; font-weight: 600; line-height: 1.2; }
.phone-liveroom-sonline {
  font-size: 10px; opacity: 0.85; display: flex; align-items: center; gap: 3px;
}
.phone-liveroom-follow {
  flex-shrink: 0;
  border: none; border-radius: 16px;
  background: var(--accent, #f60); color: var(--on-accent);
  font-size: 12px; font-weight: 600; padding: 5px 14px; cursor: pointer;
}
.phone-liveroom-follow.followed { background: rgba(255,255,255,0.25); }
/* 用户自播：下播按钮钉在右上角（脱离顶部信息流，避免长热度/粉丝把它挤走） */
.phone-userlive .phone-userlive-stop {
  position: absolute; top: 10px; right: 12px; z-index: 6;
}
/* 给顶部信息行右侧留出下播按钮的空间，避免主播信息条延伸到按钮下方 */
.phone-userlive .phone-liveroom-top { padding-right: 70px; }
/* 刷新按钮（顶部关注旁，让主播回应你的互动） */
.phone-liveroom-refresh {
  flex-shrink: 0; margin-left: auto;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.phone-liveroom-refresh + .phone-liveroom-follow { margin-left: 8px; }
.phone-liveroom-refresh.loading { opacity: 0.6; pointer-events: none; }
.phone-liveroom-refresh.loading svg { animation: phone-live-spin 0.9s linear infinite; }
@keyframes phone-live-spin { to { transform: rotate(360deg); } }

/* 打赏榜：顶部下方一角浮一个迷你榜 */
.phone-liveroom-rank {
  position: relative; z-index: 4;
  align-self: flex-start;
  margin: 8px 0 0 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px; padding: 6px 9px;
  display: flex; flex-direction: column; gap: 3px;
  backdrop-filter: blur(2px);
}
.phone-liveroom-rank-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 1.3;
}
.phone-liveroom-rank-no {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 50%; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.25); color: #fff;
}
.phone-liveroom-rank-no.rank-1 { background: #ffcf3a; color: #5a3d00; }
.phone-liveroom-rank-no.rank-2 { background: #d6d6e0; color: #44444c; }
.phone-liveroom-rank-no.rank-3 { background: #e8a877; color: #4d2a0e; }
.phone-liveroom-rank-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.92; }
.phone-liveroom-rank-amt { margin-left: auto; color: #ffd86b; font-weight: 600; }
/* 榜单里「我」那行：高亮 */
.phone-liveroom-rank-item.is-me .phone-liveroom-rank-name { color: var(--accent, #f60); font-weight: 700; opacity: 1; }
.phone-liveroom-rank-item.is-me .phone-liveroom-rank-amt { color: var(--accent, #f60); }
/* 没进前三时单独挂底的「我」那行：上方加分隔 */
.phone-liveroom-rank-item.is-mine-row { margin-top: 3px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.18); }
.phone-liveroom-rank-item.is-mine-row .phone-liveroom-rank-no { background: var(--accent, #f60); color: var(--on-accent); }

/* 主播实况区：正中间，每次一条，淡入淡出 */
.phone-liveroom-stage {
  position: relative; z-index: 3;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 22px;
}
/* ===== 直播 PK 面板（悬浮舞台顶部） ===== */
.phone-live-pk-panel {
  position: absolute;
  z-index: 6;
  background: rgba(20,16,28,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: opacity 0.5s ease, transform 0.5s ease;
  cursor: pointer;
}
/* 收起态：缩在榜单右侧的窄条（榜单在左 align-self:flex-start，右半边是空的） */
.phone-live-pk-panel.collapsed {
  top: 10px; right: 12px;
  width: 44%; max-width: 168px;
  padding: 7px 10px 8px;
}
.phone-live-pk-mini-head {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px; margin-bottom: 5px;
}
.phone-live-pk-mini-head.win { color: #ffcf45; }
.phone-live-pk-mini-head.lose { color: #b9b3c4; }
.phone-live-pk-mini-mine {
  font-size: 10.5px; color: #ff9d6e; font-weight: 600;
  margin-top: 4px;
}
.phone-live-pk-mini-toggle {
  font-size: 9.5px; opacity: .55;
  margin-top: 3px; text-align: right;
}
/* 展开态：完整大卡，横跨舞台顶部 */
.phone-live-pk-panel.expanded {
  top: 10px; left: 12px; right: 12px;
  padding: 9px 12px 10px;
}
.phone-live-pk-panel.settled { opacity: 0.92; }
.phone-live-pk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 7px;
}
.phone-live-pk-title {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .3px;
}
.phone-live-pk-title.win { color: #ffcf45; }
.phone-live-pk-title.lose { color: #b9b3c4; }
.phone-live-pk-vs {
  font-size: 11px; opacity: .7;
  max-width: 52%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-live-pk-bar {
  display: flex; height: 9px;
  border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,0.1);
}
.phone-live-pk-bar-me {
  background: linear-gradient(90deg, #ff7a3d, #ff5b8a);
  transition: width 0.5s ease;
}
.phone-live-pk-bar-opp {
  background: linear-gradient(90deg, #5b8cff, #8a5bff);
  transition: width 0.5s ease;
}
.phone-live-pk-vals {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 5px;
  font-size: 11px;
}
.phone-live-pk-val-me { color: #ff9d6e; font-weight: 600; }
.phone-live-pk-val-opp { color: #9db4ff; font-weight: 600; }
.phone-live-pk-mine { opacity: .8; font-weight: 400; font-size: 10px; }
.phone-live-pk-pun {
  margin-top: 6px;
  font-size: 10.5px; line-height: 1.5;
  opacity: .82;
}

/* ===== 直播购物车面板（和 PK 共用榜单右侧位置） ===== */
.phone-live-cart-panel {
  position: absolute;
  z-index: 6;
  background: rgba(20,16,28,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: opacity 0.4s ease;
}
/* 收起态：缩在榜单右侧的窄条 */
.phone-live-cart-panel.collapsed {
  top: 10px; right: 12px;
  width: 44%; max-width: 168px;
  padding: 8px 11px 9px;
  cursor: pointer;
}
.phone-live-cart-mini-head {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px; color: #ffcf45;
}
.phone-live-cart-mini-toggle {
  font-size: 9.5px; opacity: .55;
  margin-top: 4px; text-align: right;
}
/* 展开态：完整卡，横跨舞台顶部 */
.phone-live-cart-panel.expanded {
  top: 10px; left: 12px; right: 12px;
  padding: 9px 12px 10px;
}
.phone-live-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.phone-live-cart-title {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .3px; color: #ffcf45;
}
.phone-live-cart-fold {
  font-size: 10.5px; opacity: .6; cursor: pointer;
}
.phone-live-cart-list {
  display: flex; flex-direction: column; gap: 7px;
  max-height: 168px; overflow-y: auto;
}
.phone-live-cart-list::-webkit-scrollbar { display: none; }
.phone-live-cart-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 7px 9px;
}
.phone-live-cart-item-info { min-width: 0; flex: 1; }
.phone-live-cart-item-name {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-live-cart-item-desc {
  font-size: 10px; opacity: .68;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-live-cart-buy-btn {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  background: linear-gradient(90deg, #ff7a3d, #ff5b8a);
  border: none; border-radius: 9px;
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 11px; cursor: pointer;
  line-height: 1.1;
}
.phone-live-cart-buy-btn span { font-size: 8.5px; font-weight: 400; opacity: .9; }
.phone-live-cart-buy-btn:active { opacity: .8; }

/* ===== 直播连线面板（和 PK/购物车共用榜单右侧位置） ===== */
.phone-live-call-panel {
  position: absolute;
  z-index: 6;
  top: 10px; right: 12px;
  width: 44%; max-width: 168px;
  background: rgba(20,16,28,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  padding: 8px 11px 10px;
}
.phone-live-call-head {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 5px;
}
.phone-live-call-icon { font-size: 13px; }
.phone-live-call-icon.idle { opacity: .6; }
.phone-live-call-panel.busy .phone-live-call-icon { color: #4cda6a; }
.phone-live-call-title {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px;
}
.phone-live-call-panel.busy .phone-live-call-title { color: #4cda6a; }
.phone-live-call-peer {
  font-size: 10.5px; opacity: .8;
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-live-call-btn {
  display: block; width: 100%;
  background: linear-gradient(90deg, #34b858, #28a745);
  border: none; border-radius: 9px;
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 6px 0; cursor: pointer;
  text-align: center;
}
.phone-live-call-btn:active { opacity: .8; }
.phone-live-call-panel:not(.busy) .phone-live-call-btn {
  background: linear-gradient(90deg, #34b858, #28a745);
}
[data-call-hangup] {
  background: linear-gradient(90deg, #e65c5c, #cc3333) !important;
}

/* ===== 连线气泡（绿色电话图标+水友名+内容，区分主播气泡） ===== */
/* 结构对齐主播台词气泡：inline-block 一整块，名字/图标作行内前缀，正文接着流排，只用绿色系区分 */
.phone-liveroom-callline {
  display: inline-block;
  max-width: 100%;
  background: rgba(40,167,69,0.22);
  border: 1px solid rgba(76,218,106,0.3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12.5px; line-height: 1.7;
  color: #fff;
  text-align: center;
  backdrop-filter: blur(3px);
}
.phone-liveroom-callline-icon {
  font-size: 11px; color: #4cda6a;
  margin-right: 3px;
}
.phone-liveroom-callline-name {
  font-size: 12.5px; font-weight: 700;
  color: #4cda6a;
  margin-right: 6px;
}
.phone-liveroom-callline-text {
  color: #dafce5;
}

.phone-liveroom-act {
  max-width: 90%;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  text-align: center;
}
.phone-liveroom-act.show { opacity: 1; transform: translateY(0); }
/* 叙述/台词共用一个框（复用电台叙述卡：居中大圆角 + 半透明黑底白字） */
.phone-liveroom-narr,
.phone-liveroom-line {
  display: inline-block;
  max-width: 100%;
  background: rgba(0,0,0,0.42);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12.5px; line-height: 1.7;
  color: #fff;
  text-align: center;
  backdrop-filter: blur(3px);
}
/* 台词：只比叙述多一个主播名 */
.phone-liveroom-line-name {
  color: #ffce8a; font-weight: 700; margin-right: 6px;
}
.phone-liveroom-line-text { color: #fff; }

/* 弹幕区：底部往上冒、可滚 */
.phone-liveroom-danmu {
  position: relative; z-index: 3;
  flex-shrink: 0;
  height: 168px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 0 12px 6px;
  display: flex; flex-direction: column; gap: 4px;
}
/* 内容少时贴底（margin-top:auto 顶到底部），内容多时能正常往上滚——
   不用 justify-content:flex-end，那会导致溢出时顶部被裁、滚不到。 */
.phone-liveroom-danmu > .phone-liveroom-dm:first-child { margin-top: auto; }
.phone-liveroom-danmu::-webkit-scrollbar { display: none; }
.phone-liveroom-dm {
  align-self: flex-start; max-width: 86%;
  background: rgba(0,0,0,0.3);
  border-radius: 13px; padding: 4px 10px;
  font-size: 12px; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.phone-liveroom-dm.in { opacity: 1; transform: translateY(0); }
.phone-liveroom-dm-name { color: #8fd0ff; }
.phone-liveroom-dm-text { color: rgba(255,255,255,0.95); }
/* 高亮弹幕 */
.phone-liveroom-dm.hl {
  background: linear-gradient(90deg, rgba(255,102,0,0.5), rgba(255,140,40,0.32));
  border: 1px solid rgba(255,190,110,0.6);
  box-shadow: 0 0 8px rgba(255,140,40,0.4);
}
.phone-liveroom-dm-hl-tag {
  display: inline-block;
  background: #ffce5a; color: #5a3700;
  font-size: 9px; font-weight: 700;
  border-radius: 5px; padding: 0 4px; margin-right: 5px;
  vertical-align: middle;
}
.phone-liveroom-dm.hl .phone-liveroom-dm-name { color: #fff; font-weight: 600; }
/* 红字弹幕（水友自己改色，强调重要发言）：暖色字 + 微底 */
.phone-liveroom-dm.color { background: rgba(255,80,80,0.16); border: 1px solid rgba(255,120,120,0.34); }
.phone-liveroom-dm.color .phone-liveroom-dm-name { color: #ff8d6e; font-weight: 600; }
.phone-liveroom-dm.color .phone-liveroom-dm-text { color: #ffd0b8; }
/* 用户自播：系统小结行（淡淡的、居中、无气泡感） */
.phone-liveroom-dm.phone-userlive-sys {
  align-self: center; max-width: 94%;
  background: rgba(255,255,255,0.06); border: none;
  text-align: center; font-size: 11.5px;
}
.phone-liveroom-dm.phone-userlive-sys .phone-liveroom-dm-text { color: rgba(255,255,255,0.62); font-style: italic; }
/* 用户自播：打赏行 */
.phone-liveroom-dm.phone-userlive-gift { background: linear-gradient(90deg, rgba(255,170,40,0.34), rgba(255,120,30,0.2)); border: 1px solid rgba(255,200,120,0.5); }
.phone-userlive-gift-tag { display: inline-block; background: #ffae28; color: #5a3700; font-size: 9px; font-weight: 700; border-radius: 5px; padding: 0 4px; margin-right: 5px; vertical-align: middle; }
.phone-userlive-gift .phone-liveroom-dm-name { color: #ffe0a8; font-weight: 600; }
/* 用户自播：历史回放列表 */
.phone-live-sess-list { display: flex; flex-direction: column; gap: 8px; }
.phone-live-sess-item { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: background 0.18s; }
.phone-live-sess-item:active { background: rgba(255,255,255,0.12); }
.phone-live-sess-title { font-size: 14px; font-weight: 600; color: #fff; }
.phone-live-sess-meta { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 4px; }
/* 用户自播：回放详情时间轴 */
.phone-live-replay { display: flex; flex-direction: column; gap: 14px; }
.phone-live-replay-block { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px 14px; }
.phone-live-replay-time { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.phone-live-replay-sum { font-size: 13px; color: #ffd9b0; line-height: 1.5; margin-bottom: 8px; font-style: italic; }
.phone-live-replay-dm { font-size: 12.5px; color: rgba(255,255,255,0.9); line-height: 1.6; }
.phone-live-replay-dm b { color: #8fd0ff; font-weight: 600; }
.phone-live-replay-dm.color b { color: #ff8d6e; }
.phone-live-replay-dm.color { color: #ffd0b8; }
.phone-live-replay-dm.hl { color: #ffe0a8; }
.phone-live-replay-gift { font-size: 12.5px; color: #ffe0a8; line-height: 1.6; }
.phone-live-replay-gift b { font-weight: 600; }
/* 「我」发的弹幕：右侧、主色调 */
.phone-liveroom-dm.me { align-self: flex-end; background: rgba(255,102,0,0.34); border: 1px solid rgba(255,170,90,0.5); }
.phone-liveroom-dm.me .phone-liveroom-dm-name { color: #ffd9b0; font-weight: 600; }
/* 打赏面板：数量行 + 实时总额 */
.phone-live-gift-qty {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 10px;
}
.phone-live-gift-qty-lb { font-size: 13px; color: var(--text-2, #888); }
.phone-live-gift-qty-btn {
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card, #fff); color: var(--text, #222);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.phone-live-gift-qty-input {
  width: 52px; height: 28px; text-align: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card, #fff); color: var(--text, #222); font-size: 14px;
}
.phone-live-gift-qty-total { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--accent, #f60); }
/* 礼物选中态 */
.phone-reading-gift.sel { border-color: var(--accent, #f60); background: rgba(255,102,0,0.08); }
/* 高亮留言输入 */
.phone-live-hl-input {
  width: calc(100% - 24px); margin: 4px 12px 10px; box-sizing: border-box;
  min-height: 72px; resize: none;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; font-size: 14px; line-height: 1.5;
  background: var(--card, #fff); color: var(--text, #222);
}
.phone-music-sheet-btn.confirm { background: var(--accent, #f60); color: var(--on-accent); }

/* 底部操作条 */
.phone-liveroom-bar {
  position: relative; z-index: 4;
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.phone-liveroom-input {
  flex: 1; min-width: 0;
  border: none; border-radius: 18px;
  background: rgba(255,255,255,0.18);
  color: #fff; font-size: 13px;
  padding: 8px 14px; outline: none;
}
.phone-liveroom-input::placeholder { color: rgba(255,255,255,0.6); }
.phone-liveroom-act-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.phone-liveroom-act-btn:active { background: rgba(255,255,255,0.3); }

/* ===== 直播间设置页（全屏黑底）===== */
.phone-liveset-top {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
}
/* 自播设置页全屏覆盖手机内容区，顶部不能只依赖公共手机顶栏 */
#phone-modal.phone-fullscreen-mode .phone-liveset-top {
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}
.phone-liveset-back {
  width: 30px; height: 30px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.phone-liveset-title { font-size: 15px; font-weight: 600; }
.phone-liveset-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px;
}
#phone-modal.phone-fullscreen-mode .phone-liveset-body {
  padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px)));
  -webkit-overflow-scrolling: touch;
}
.phone-liveset-sec { margin-bottom: 22px; }
.phone-liveset-sec-t {
  font-size: 13px; font-weight: 700; color: #ffce8a;
  margin-bottom: 10px;
}
.phone-liveset-hint {
  font-size: 11px; color: rgba(255,255,255,0.5);
  line-height: 1.6; margin-bottom: 8px;
}
/* 外观：头像 + 壁纸预览 + 换按钮 */
.phone-liveset-face {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 14px;
  align-items: center;
}
.phone-liveset-ava {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg,#ff8a3d,#ff5e62);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  overflow: hidden;
}
.phone-liveset-ava img { border-radius: 50%; }
.phone-liveset-wall {
  width: 44px; height: 44px; border-radius: 10px;
  background-color: #2a2a32;
}
.phone-liveset-btn {
  justify-self: start;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 16px;
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 12px; padding: 6px 16px; cursor: pointer;
}
.phone-liveset-btn:active { background: rgba(255,255,255,0.18); }
/* 核心设定 */
.phone-liveset-concept {
  width: 100%; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
  background: rgba(255,255,255,0.05); color: #fff;
  font-size: 13px; line-height: 1.7; padding: 10px 12px;
  font-family: inherit; resize: none;
}
/* 品类标签 / 运营规格 选择行 */
.phone-liveset-field {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.phone-liveset-field-label {
  font-size: 13px; color: rgba(255,255,255,0.75); flex-shrink: 0; width: 64px;
}
.phone-liveset-select {
  flex: 1; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  background: rgba(255,255,255,0.05); color: #fff;
  font-size: 13px; padding: 8px 10px; font-family: inherit;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.phone-liveset-select-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-liveset-select-arrow { flex-shrink: 0; opacity: 0.6; }
.phone-liveset-select option { background: #15151a; color: #fff; }
/* 运营设定一句话输入 */
.phone-liveset-scalenote {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  background: rgba(255,255,255,0.05); color: #fff;
  font-size: 13px; padding: 8px 12px; font-family: inherit;
}
.phone-liveset-scalenote::placeholder { color: rgba(255,255,255,0.3); }
/* 收款货币卡片选择（同钱包转账卡片风格，深色适配） */
.phone-liveset-field.phone-ul-cur-field {
  flex-direction: column; align-items: stretch; gap: 6px;
}
.phone-liveset-field.phone-ul-cur-field .phone-liveset-field-label { width: auto; }
.phone-ul-cur-list {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
}
.phone-ul-cur-card {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  transition: border-color .15s, background .15s;
}
.phone-ul-cur-card input[type="radio"] { accent-color: var(--accent, #f60); flex-shrink: 0; }
.phone-ul-cur-card .phone-ul-cur-name { flex: 1; font-size: 13px; color: #fff; }
.phone-ul-cur-card .phone-ul-cur-bal { font-size: 12px; color: rgba(255,255,255,0.55); }
.phone-ul-cur-card.on {
  border-color: var(--accent, #f60);
  background: color-mix(in srgb, var(--accent, #f60) 16%, transparent);
}
/* 累计打赏统计行 */
.phone-ul-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 8px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
.phone-ul-stat-label { font-size: 13px; color: rgba(255,255,255,0.75); }
.phone-ul-stat-val { font-size: 15px; font-weight: 700; color: var(--accent, #f60); }
/* 用户自播舞台：加载态（观众正在涌入）+ 失败态 */
.phone-userlive-loading {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.92);
}
.phone-ul-load-dots { display: inline-flex; gap: 6px; }
.phone-ul-load-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #f60); display: inline-block;
  animation: phone-ul-load-bounce 1.2s ease-in-out infinite;
}
.phone-ul-load-dots i:nth-child(2) { animation-delay: 0.18s; }
.phone-ul-load-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes phone-ul-load-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-7px); opacity: 1; }
}
.phone-ul-load-txt { font-size: 13px; opacity: 0.85; letter-spacing: 0.5px; }
.phone-userlive-loadfail {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.85);
}
.phone-ul-fail-txt { font-size: 13px; opacity: 0.8; }
.phone-ul-fail-retry {
  border: 1px solid rgba(255,255,255,0.3); border-radius: 16px;
  background: rgba(255,255,255,0.1); color: #fff;
  font-size: 12px; font-weight: 600; padding: 5px 20px; cursor: pointer;
}
.phone-ul-fail-retry:active { opacity: 0.8; }
.phone-liveset-save {
  margin-top: 8px;
  border: none; border-radius: 16px;
  background: var(--accent, #f60); color: var(--on-accent);
  font-size: 12px; font-weight: 600; padding: 7px 20px; cursor: pointer;
}
.phone-liveset-save:active { opacity: 0.85; }
/* 观看设置开关行 */
.phone-liveset-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px; padding: 12px 14px;
}
.phone-liveset-switch-text { font-size: 13px; line-height: 1.5; }
.phone-liveset-switch-sub { font-size: 11px; color: rgba(255,255,255,0.5); }
/* 入口行（历史发言等二级页入口） */
.phone-liveset-entry {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.06);
  border-radius: 12px; padding: 13px 14px;
  font-size: 13px; color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.phone-liveset-entry:active { background: rgba(255,255,255,0.12); }
.phone-liveset-entry svg { color: rgba(255,255,255,0.4); flex-shrink: 0; }
/* 历史发言 */
.phone-liveset-hist {
  display: flex; flex-direction: column; gap: 7px;
}
.phone-liveset-hist-empty {
  font-size: 12px; color: rgba(255,255,255,0.45);
  text-align: center; padding: 20px 0;
}
.phone-liveset-h {
  font-size: 12.5px; line-height: 1.55;
  padding: 7px 11px; border-radius: 10px;
  max-width: 92%;
}
.phone-liveset-h.host {
  align-self: flex-start;
  background: rgba(255,102,0,0.16);
  border: 1px solid rgba(255,170,90,0.28);
}
.phone-liveset-h.narr {
  align-self: center; text-align: center;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  font-size: 11.5px;
}
.phone-liveset-h.dm {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
}
.phone-liveset-h.dm.hl {
  background: linear-gradient(90deg, rgba(255,102,0,0.32), rgba(255,140,40,0.18));
  border: 1px solid rgba(255,190,110,0.4);
}
.phone-liveset-h-name { color: #ffce8a; font-weight: 700; margin-right: 6px; }
.phone-liveset-h-dmname { color: #8fd0ff; margin-right: 5px; }
.phone-liveset-h-text { color: rgba(255,255,255,0.95); }

/* ===== 名场面演出特效层 ===== */
/* 火光：底图明暗呼吸 */
.phone-video-fx-fire { animation: pv-fire-flicker 2.4s ease-in-out infinite; }
@keyframes pv-fire-flicker {
  0%   { filter: brightness(0.82); opacity: 0.86; }
  30%  { filter: brightness(1.12); opacity: 1; }
  55%  { filter: brightness(0.9); opacity: 0.9; }
  78%  { filter: brightness(1.06); opacity: 0.98; }
  100% { filter: brightness(0.82); opacity: 0.86; }
}

/* 舞台抖动（冲击） */
.phone-video-fx-shake { animation: pv-shake 0.6s cubic-bezier(.36,.07,.19,.97); }
@keyframes pv-shake {
  0%,100% { transform: translate(-50%,-50%) rotate(90deg); }
  10% { transform: translate(calc(-50% - 4px),calc(-50% - 2px)) rotate(90deg); }
  25% { transform: translate(calc(-50% + 5px),calc(-50% + 3px)) rotate(90deg); }
  40% { transform: translate(calc(-50% - 5px),calc(-50% + 2px)) rotate(90deg); }
  55% { transform: translate(calc(-50% + 4px),calc(-50% - 3px)) rotate(90deg); }
  70% { transform: translate(calc(-50% - 3px),calc(-50% + 2px)) rotate(90deg); }
  85% { transform: translate(calc(-50% + 2px),calc(-50% - 1px)) rotate(90deg); }
}

/* 下雨：三层不同间距/速度/明暗的雨丝，各自纯垂直无缝循环（tile高度=条纹垂直周期整数倍，避免接缝断层） */
.phone-video-fx-rain {
  background-image:
    repeating-linear-gradient(100deg, transparent 0 28.54px, rgba(205,220,240,0.34) 28.54px 29.54px),
    repeating-linear-gradient(103deg, transparent 0 18.49px, rgba(180,200,228,0.20) 18.49px 19.49px),
    repeating-linear-gradient(99deg,  transparent 0 11.70px, rgba(160,185,215,0.12) 11.70px 12.70px);
  background-size: 100% 300px, 100% 240px, 100% 180px;
  animation: pv-rain-1 0.6s linear infinite, pv-rain-2 0.8s linear infinite, pv-rain-3 1.05s linear infinite;
}
@keyframes pv-rain-1 { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 300px, 0 0, 0 0; } }
@keyframes pv-rain-2 { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 240px, 0 0; } }
@keyframes pv-rain-3 { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 0, 0 180px; } }

/* 下雪：多层圆点缓降 */
.phone-video-fx-snow {
  background-image:
    radial-gradient(2px 2px at 20% 10%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 60% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 80% 20%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 40% 60%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 90% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 10% 80%, rgba(255,255,255,0.75), transparent);
  background-size: 100% 100%;
  animation: pv-snow 7s linear infinite;
}
@keyframes pv-snow { from { background-position: 0 -100%; } to { background-position: 6% 100%; } }

/* 光斑：缓慢漂浮的柔光圆点 */
.phone-video-fx-bokeh {
  background-image:
    radial-gradient(circle at 25% 35%, rgba(255,225,170,0.22), transparent 22%),
    radial-gradient(circle at 70% 55%, rgba(255,240,200,0.18), transparent 18%),
    radial-gradient(circle at 50% 80%, rgba(255,230,180,0.15), transparent 20%);
  animation: pv-bokeh 9s ease-in-out infinite alternate;
}
@keyframes pv-bokeh {
  from { transform: translate(0,0) scale(1); opacity: 0.85; }
  to   { transform: translate(2%,-3%) scale(1.06); opacity: 1; }
}

/* 星光微闪：多层细小亮点整体明灭闪烁（梦境/浪漫/星空） */
.phone-video-fx-sparkle {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(210,230,255,0.85), transparent),
    radial-gradient(2px 2px at 45% 30%, rgba(255,250,225,0.9), transparent),
    radial-gradient(1px 1px at 60% 75%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 74% 22%, rgba(225,235,255,0.9), transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(255,250,230,0.85), transparent),
    radial-gradient(2px 2px at 52% 88%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 18% 90%, rgba(220,230,255,0.8), transparent);
  animation: pv-sparkle 2.6s ease-in-out infinite;
}
@keyframes pv-sparkle {
  0%,100% { opacity: 0.35; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.04); }
}

/* 萤火虫：绿色小光点飞舞，两层不同节奏的漂浮 + 整体忽明忽暗 */
.phone-video-fx-firefly {
  position: relative;
}
.phone-video-fx-firefly::before,
.phone-video-fx-firefly::after {
  content: '';
  position: absolute;
  inset: 0;
}
.phone-video-fx-firefly::before {
  background-image:
    radial-gradient(6px 6px at 20% 40%, rgba(170,255,120,1), rgba(120,220,80,0.45) 45%, transparent 75%),
    radial-gradient(5px 5px at 55% 70%, rgba(190,255,140,0.95), rgba(120,220,80,0.4) 45%, transparent 72%),
    radial-gradient(7px 7px at 78% 35%, rgba(160,255,110,1), rgba(120,220,80,0.4) 45%, transparent 75%),
    radial-gradient(5px 5px at 38% 85%, rgba(200,255,150,0.95), rgba(120,220,80,0.35) 45%, transparent 72%);
  animation: pv-firefly-a 5.5s ease-in-out infinite alternate, pv-firefly-blink 1.9s ease-in-out infinite;
}
.phone-video-fx-firefly::after {
  background-image:
    radial-gradient(5px 5px at 35% 25%, rgba(180,255,130,0.95), rgba(120,220,80,0.4) 45%, transparent 72%),
    radial-gradient(7px 7px at 68% 58%, rgba(150,250,100,1), rgba(120,220,80,0.4) 45%, transparent 75%),
    radial-gradient(5px 5px at 88% 78%, rgba(200,255,150,0.95), rgba(120,220,80,0.35) 45%, transparent 72%),
    radial-gradient(6px 6px at 14% 65%, rgba(165,255,115,1), rgba(120,220,80,0.4) 45%, transparent 75%);
  animation: pv-firefly-b 6.8s ease-in-out infinite alternate, pv-firefly-blink 2.4s ease-in-out infinite 0.6s;
}
@keyframes pv-firefly-a {
  from { transform: translate(0,0); }
  to   { transform: translate(5%,-7%); }
}
@keyframes pv-firefly-b {
  from { transform: translate(0,0); }
  to   { transform: translate(-6%,-4%); }
}
@keyframes pv-firefly-blink {
  0%,100% { opacity: 0.25; }
  50%     { opacity: 1; }
}

/* 回忆滤镜：旧照片暖黄调 + 暗角 + 游动颗粒（即便底图黑白也看得出变化） */
.phone-video-fx-memory {
  /* 底层封面：降饱和 + 压暗 + 暖调 + 轻微柔焦（黑白图也会被压暗染暖） */
  backdrop-filter: sepia(0.45) saturate(0.65) brightness(0.82) contrast(1.04) blur(0.6px);
  -webkit-backdrop-filter: sepia(0.45) saturate(0.65) brightness(0.82) contrast(1.04) blur(0.6px);
  /* 暖黄叠层 + 四周暗角（径向渐变，中间透、四周暗） */
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(20,12,4,0.32) 78%, rgba(12,7,2,0.6) 100%),
    linear-gradient(rgba(120,86,40,0.16), rgba(90,62,28,0.2));
  animation: pv-memory-breathe 6s ease-in-out infinite;
}
/* 胶片颗粒：细密噪点，缓慢游动 */
.phone-video-fx-memory::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(0.6px 0.6px at 10% 20%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.6px 0.6px at 30% 60%, rgba(0,0,0,0.18), transparent),
    radial-gradient(0.6px 0.6px at 55% 35%, rgba(255,255,255,0.15), transparent),
    radial-gradient(0.6px 0.6px at 75% 70%, rgba(0,0,0,0.16), transparent),
    radial-gradient(0.6px 0.6px at 88% 25%, rgba(255,255,255,0.16), transparent),
    radial-gradient(0.6px 0.6px at 45% 85%, rgba(0,0,0,0.15), transparent);
  background-size: 140px 140px;
  opacity: 0.5;
  animation: pv-memory-grain 0.5s steps(3) infinite;
}
/* 暖色漏光：一道斜向暖光缓慢漂移 */
.phone-video-fx-memory::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,196,120,0.14) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: pv-memory-light 11s ease-in-out infinite alternate;
}
@keyframes pv-memory-breathe {
  0%,100% { opacity: 0.92; }
  50%     { opacity: 1; }
}
@keyframes pv-memory-grain {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-4px,3px); }
  66%  { transform: translate(3px,-3px); }
  100% { transform: translate(-2px,2px); }
}
@keyframes pv-memory-light {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* 故障花屏：RGB 色差错位 + 横向撕裂条 + 抽搐（信号损坏/数据故障/赛博入侵） */
.phone-video-fx-glitch {
  mix-blend-mode: screen;
  animation: pv-glitch-shift 0.4s steps(2) infinite;
}
/* 青/红色差错位的两层 */
.phone-video-fx-glitch::before,
.phone-video-fx-glitch::after {
  content: '';
  position: absolute;
  inset: 0;
}
.phone-video-fx-glitch::before {
  background: rgba(0,200,255,0.16);
  animation: pv-glitch-cyan 0.35s steps(2) infinite;
}
.phone-video-fx-glitch::after {
  /* 横向撕裂条：随机几条亮暗带，配合位移做信号断裂 */
  background: repeating-linear-gradient(
    0deg,
    transparent 0 6px,
    rgba(255,0,80,0.1) 6px 7px,
    transparent 7px 22px,
    rgba(255,255,255,0.06) 22px 24px,
    transparent 24px 40px
  );
  animation: pv-glitch-tear 0.55s steps(4) infinite;
}
@keyframes pv-glitch-shift {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(2px,-1px); }
  100% { transform: translate(-1px,1px); }
}
@keyframes pv-glitch-cyan {
  0%   { transform: translate(-3px,0); opacity: 0.6; }
  50%  { transform: translate(3px,0); opacity: 0.9; }
  100% { transform: translate(-2px,1px); opacity: 0.5; }
}
@keyframes pv-glitch-tear {
  0%   { transform: translateY(0); opacity: 0.7; }
  25%  { transform: translateY(-8px); opacity: 1; }
  50%  { transform: translateY(5px); opacity: 0.5; }
  75%  { transform: translateY(-3px); opacity: 0.9; }
  100% { transform: translateY(6px); opacity: 0.6; }
}

/* 科技扫描：横向扫描线缓慢移动 + 青蓝 HUD 网格 + 辉光（未来/赛博/全息界面） */
.phone-video-fx-scan {
  background:
    repeating-linear-gradient(0deg, rgba(0,230,255,0.05) 0 2px, transparent 2px 4px),
    linear-gradient(rgba(0,40,60,0.12), rgba(0,30,50,0.18));
  box-shadow: inset 0 0 60px rgba(0,200,255,0.2);
}
/* 移动的亮扫描线 */
.phone-video-fx-scan::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 14%;
  background: linear-gradient(transparent, rgba(0,235,255,0.28), transparent);
  animation: pv-scan-line 3.4s linear infinite;
}
/* 青蓝网格 */
.phone-video-fx-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,220,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,220,255,0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  animation: pv-scan-grid 8s linear infinite;
}
@keyframes pv-scan-line {
  from { top: -14%; }
  to   { top: 100%; }
}
@keyframes pv-scan-grid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 36px 36px, 36px 36px; }
}

/* 花瓣飘落：整张花瓣大图放大铺满，从左上极缓慢平移到右下（来回循环，不露边） */
.phone-video-fx-petal {
  background-image: url('img/fx/petal.png');
  background-size: 130%;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  animation: pv-petal-drift 26s ease-in-out infinite alternate;
}
@keyframes pv-petal-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* 气泡：整张气泡图铺满，静态浮动（轻微透明度呼吸，不死板） */
.phone-video-fx-bubble {
  background-image: url('img/fx/bubble.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: pv-bubble-breathe 7s ease-in-out infinite;
}
@keyframes pv-bubble-breathe {
  0%,100% { opacity: 0.78; }
  50%     { opacity: 1; }
}

/* 烟雾：整张烟雾图缓慢平移+缩放，透明度大幅起伏做若隐若现。
   主层 opacity 留给持续层进出场淡入淡出（_setPersist 控制），
   若隐若现的起伏放到 ::before，避免和进场淡入抢 opacity。 */
.phone-video-fx-smoke::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/fx/smoke.png');
  background-size: 150%;
  background-repeat: no-repeat;
  background-position: center;
  animation: pv-smoke-drift 22s ease-in-out infinite alternate, pv-smoke-fade 9s ease-in-out infinite;
}
@keyframes pv-smoke-drift {
  from { background-position: 20% 40%; background-size: 150%; }
  to   { background-position: 75% 60%; background-size: 170%; }
}
@keyframes pv-smoke-fade {
  0%,100% { opacity: 0.3; }
  50%     { opacity: 0.85; }
}

/* 心形漂浮：粉红爱心从底部缓缓升起，边飘边左右摇摆、渐隐（甜蜜/告白/少女漫） */
.phone-video-fx-hearts .pv-heart {
  position: absolute;
  bottom: -8%;
  color: #ff6f9c;
  text-shadow: 0 0 6px rgba(255,120,160,0.7);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: pv-heart-rise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes pv-heart-rise {
  0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.95; }
  50%  { transform: translateY(-50vh) translateX(14px) scale(1); }
  80%  { opacity: 0.9; }
  100% { transform: translateY(-100vh) translateX(-10px) scale(1.05); opacity: 0; }
}

/* 聚焦追光：一束圆形高光打在画面中心，四周压暗（舞台/独白/高光时刻） */
.phone-video-fx-spotlight {
  background: radial-gradient(circle at 50% 42%,
    transparent 0%,
    transparent 18%,
    rgba(0,0,0,0.32) 46%,
    rgba(0,0,0,0.72) 78%,
    rgba(0,0,0,0.88) 100%);
  animation: pv-spotlight-breathe 5.5s ease-in-out infinite;
}
@keyframes pv-spotlight-breathe {
  0%,100% { opacity: 0.92; }
  50%     { opacity: 1; }
}


/* ===== 音乐「我的」页：身份卡与偏好分段控件 ===== */
/* 身份来源角标：跟在昵称后面，说明这个名字是从哪来的 */
.phone-music-id-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  vertical-align: middle;
  background: rgba(255, 122, 26, 0.16);
  color: var(--accent);
}
.phone-music-id-tag.warn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
/* 二选一用分段控件而不是开关：开关暗示「开/关」，这里两边是并列的选项 */
.phone-music-seg {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.phone-music-seg-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.phone-music-seg-btn.active {
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-weight: 600;
}
.phone-music-pref-hint {
  padding: 2px 0 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.phone-shell.has-custom-wallpaper .phone-music-pref-hint { color: rgba(255, 255, 255, 0.66) !important; }
/* mine tab 去掉了页头，身份卡直接贴顶，补一点上边距免得挤着 */
.phone-mlib-page > div > .phone-radio-mine-header:first-child {
  padding-top: 22px;
}

/* ===== 壁纸模式：我的歌单 / 一起听记录 两个子页 ===== */
/* 个人资料头部 */
.phone-shell.has-custom-wallpaper .phone-radio-mine-header-name { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-radio-mine-header-sub { color: rgba(255, 255, 255, 0.7) !important; }
/* 头像兜底块（没头像时那个字母圆） */
.phone-shell.has-custom-wallpaper .phone-radio-mine-ava-fallback {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
/* 身份标记：实心 accent 底在壁纸上会糊，改描边 */
.phone-shell.has-custom-wallpaper .phone-music-id-tag {
  background: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.36) !important;
}
/* 本地 / 云端 切换 */
.phone-shell.has-custom-wallpaper .phone-mpl-tab { color: rgba(255, 255, 255, 0.7) !important; }
.phone-shell.has-custom-wallpaper .phone-mpl-tab.active { color: #fff !important; }
/* 歌单卡 */
.phone-shell.has-custom-wallpaper .phone-music-pl-card {
  background: color-mix(in srgb, var(--accent) 12%, rgba(18, 20, 28, 0.42)) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.phone-shell.has-custom-wallpaper .phone-music-pl-name { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-music-pl-sub { color: rgba(255, 255, 255, 0.7) !important; }
.phone-shell.has-custom-wallpaper .phone-music-pl-cover {
  background: rgba(255, 255, 255, 0.1) !important;
}
/* 一起听记录卡（原本没有 border，壁纸下补一条描边才立得住） */
.phone-shell.has-custom-wallpaper .phone-lt-hist-card {
  background: color-mix(in srgb, var(--accent) 12%, rgba(18, 20, 28, 0.42)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.phone-shell.has-custom-wallpaper .phone-lt-hist-obj { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-lt-hist-mode {
  background: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.phone-shell.has-custom-wallpaper .phone-lt-hist-meta,
.phone-shell.has-custom-wallpaper .phone-lt-hist-time { color: rgba(255, 255, 255, 0.7) !important; }
/* 两个页面的空态文案 */
.phone-shell.has-custom-wallpaper .phone-mlib-empty { color: rgba(255, 255, 255, 0.7) !important; }
/* 推荐歌单：标题和歌单名直接压在壁纸上（不在卡里），要跟着变浅 */
.phone-shell.has-custom-wallpaper .phone-recpl-title,
.phone-shell.has-custom-wallpaper .phone-recpl-name { color: #fff !important; }
.phone-shell.has-custom-wallpaper .phone-recpl-sub,
.phone-shell.has-custom-wallpaper .phone-recpl-empty { color: rgba(255, 255, 255, 0.72) !important; }
/* 壁纸下 --bg-secondary 是半透明白，条状容器压在图上要自己撑出底 */
.phone-shell.has-custom-wallpaper .phone-tl-list {
  background: rgba(0, 0, 0, 0.28) !important;
}
.phone-shell.has-custom-wallpaper .phone-tl-name { color: #fff !important; }
.phone-shell.has-custom-wallpaper .phone-tl-meta,
.phone-shell.has-custom-wallpaper .phone-tl-arrow,
.phone-shell.has-custom-wallpaper .phone-tl-icon { color: rgba(255, 255, 255, 0.72) !important; }
/* 虚拟版压在壁纸上 */
/* 已生成标记：壁纸下 --accent 直接压在图上偏暗，加一点字重撑住。
   跟热搜前三名的序号同一套处理（那边也是 accent + 不降透明度）。 */
.phone-shell.has-custom-wallpaper .phone-disc-row-i.phone-v-row-done {
  color: var(--accent) !important; opacity: 1 !important; font-weight: 700 !important;
}
/* 伪播放页压在壁纸上。歌名歌手歌词都走真播放页的类，那边已经有壁纸适配，
   这里只补 credits 这一条自己的。 */
.phone-shell.has-custom-wallpaper .phone-vp-credits { color: rgba(255, 255, 255, 0.72) !important; }
/* 单曲详情页压在壁纸上：介绍散文和歌词都是长文本，
   --text-secondary 在图上几乎读不了，全部提到 0.82 白。 */
.phone-shell.has-custom-wallpaper .phone-v-trk-name { color: rgba(255, 255, 255, 0.96) !important; }
.phone-shell.has-custom-wallpaper .phone-v-trk-sec-title,
.phone-shell.has-custom-wallpaper .phone-v-trk-busy-text { color: #fff !important; }
.phone-shell.has-custom-wallpaper .phone-v-trk-desc,
.phone-shell.has-custom-wallpaper .phone-v-lrc-line { color: rgba(255, 255, 255, 0.82) !important; }
.phone-shell.has-custom-wallpaper .phone-v-trk-artist,
.phone-shell.has-custom-wallpaper .phone-v-trk-credits { color: rgba(255, 255, 255, 0.7) !important; }
/* 骨架灰块在壁纸上要自己撑出底，--bg-secondary 是半透明白会几乎看不见 */
.phone-shell.has-custom-wallpaper .phone-v-sk-line {
  background: rgba(255, 255, 255, 0.22) !important;
}
/* 热搜榜压在壁纸上 */
.phone-shell.has-custom-wallpaper .phone-hots-title,
.phone-shell.has-custom-wallpaper .phone-hots-word { color: #fff !important; }
.phone-shell.has-custom-wallpaper .phone-hots-sub,
.phone-shell.has-custom-wallpaper .phone-hots-desc { color: rgba(255, 255, 255, 0.72) !important; }
/* 非前三的序号在壁纸上要再亮一点，0.7 透明度压在图上会看不见 */
.phone-shell.has-custom-wallpaper .phone-hots-i {
  color: rgba(255, 255, 255, 0.8) !important; opacity: 1 !important;
}
.phone-shell.has-custom-wallpaper .phone-hots-i.top { color: var(--accent) !important; }
/* 发现页：搜索框、日推卡、引导卡都用了 --bg-secondary，
   壁纸下那个值是浅色的，压在壁纸上会变成一块白牌。沿用歌单卡同一套配方。 */
.phone-shell.has-custom-wallpaper .phone-nes-bar,
.phone-shell.has-custom-wallpaper .phone-recpl-cover,
.phone-shell.has-custom-wallpaper .phone-disc-search,
.phone-shell.has-custom-wallpaper .phone-disc-daily,
.phone-shell.has-custom-wallpaper .phone-disc-guide {
  background: color-mix(in srgb, var(--accent) 12%, rgba(18, 20, 28, 0.42)) !important;
}
.phone-shell.has-custom-wallpaper .phone-disc-search { color: rgba(255, 255, 255, 0.72) !important; }
.phone-shell.has-custom-wallpaper .phone-disc-daily-title,
.phone-shell.has-custom-wallpaper .phone-disc-line-name,
.phone-shell.has-custom-wallpaper .phone-disc-guide-title,
.phone-shell.has-custom-wallpaper .phone-disc-page-title { color: rgba(255, 255, 255, 0.96) !important; }
/* 描边按钮：--border 在壁纸上几乎看不见，文字也要转白 */
.phone-shell.has-custom-wallpaper .phone-disc-addpl {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.phone-shell.has-custom-wallpaper .phone-disc-addpl:active {
  background: rgba(255, 255, 255, 0.12) !important;
}
.phone-shell.has-custom-wallpaper .phone-disc-daily-sub,
.phone-shell.has-custom-wallpaper .phone-disc-line-i,
.phone-shell.has-custom-wallpaper .phone-disc-line-artist,
.phone-shell.has-custom-wallpaper .phone-disc-guide-text,
.phone-shell.has-custom-wallpaper .phone-disc-page-sub,
.phone-shell.has-custom-wallpaper .phone-disc-row-i:not(.phone-v-row-done) { color: rgba(255, 255, 255, 0.7) !important; }
/* ===== 歌单卡（我的歌单页）===== */
/* 歌单页的 本地 / 云端 切换。文字式，和评论页的「评论 / 热评」同一套语言 ——
   这个手机里凡是页内切换都长这样，不再引入第二种风格。
   不用填充式胶囊是因为那东西的视觉重量比它下面的歌单卡片还重，
   而它只是个切换器；真正该被看见的是那些封面。 */
.phone-mpl-tabs {
  display: flex; align-items: baseline; gap: 16px;
  padding: 0 2px; margin-bottom: 12px;
}
.phone-mpl-tab {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--text-secondary);
  opacity: 0.6; line-height: 1.2;
  transition: opacity 0.15s, color 0.15s;
}
.phone-mpl-tab.active {
  font-weight: 700; color: var(--text); opacity: 1;
}
.phone-mpl-tab:active { transform: scale(0.96); }
/* ============================================================
   发现页（原音乐库页）
   ============================================================ */
.phone-disc-page {
  padding: 12px 14px 8px;
}
/* 搜索框。它不是真 input —— 点下去拉起现有的搜索弹层（_searchNeteaseMusic），
   那里已经有完整的输入、结果列表、错误提示。在这里再做一个真输入框
   就得把那套逻辑再写一遍，而且两个入口的结果页会开始走样。 */
.phone-disc-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin-bottom: 14px;
  background: var(--bg-secondary); border-radius: 18px;
  color: var(--text-secondary); font-size: 13px;
  cursor: pointer; transition: opacity 0.15s;
}
.phone-disc-search:active { opacity: 0.7; }
/* 日推卡：左封面右歌名。卡高由封面定（四行歌名刚好填满），
   所以右侧用 space-between 把头部和列表拉开，不会留一块空白。 */
.phone-disc-daily {
  display: flex; gap: 12px;
  padding: 10px; border-radius: 12px;
  background: var(--bg-secondary);
  cursor: pointer; transition: transform 0.15s;
}
.phone-disc-daily:active { transform: scale(0.985); }
.phone-disc-cover {
  position: relative; flex-shrink: 0;
  width: 96px; height: 96px; border-radius: 8px; overflow: hidden;
}
.phone-disc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 拉到封面之前的占位。用 accent 起手的渐变而不是灰块 ——
   灰块看起来像加载失败，渐变看起来像「还没揭开」。 */
.phone-disc-cover-ph {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 70%, #fff),
    color-mix(in srgb, var(--accent) 92%, #000));
}
.phone-disc-cover-play {
  position: absolute; right: 6px; bottom: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); color: #222;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.phone-disc-daily-right {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
.phone-disc-daily-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.phone-disc-daily-title { font-size: 14px; font-weight: 700; color: var(--text); }
.phone-disc-daily-sub { font-size: 10px; color: var(--text-secondary); }
.phone-disc-lines { display: flex; flex-direction: column; gap: 1px; }
/* 一行一首。歌名可伸缩、歌手固定不抢位 —— 反过来的话
   遇到长歌手名会把歌名挤到只剩两三个字。 */
.phone-disc-line {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; line-height: 1.75;
  white-space: nowrap; overflow: hidden;
}
.phone-disc-line-i {
  flex-shrink: 0; width: 11px;
  color: var(--text-secondary); opacity: 0.5;
  font-size: 10px;
}
.phone-disc-line-name {
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}
.phone-disc-line-artist {
  flex-shrink: 0; max-width: 42%;
  color: var(--text-secondary); font-size: 10px;
  overflow: hidden; text-overflow: ellipsis;
}
.phone-disc-line-dim { color: var(--text-secondary); opacity: 0.7; }
/* 没配 API 时的引导。不用空态那一行小字，因为这不是「暂时没内容」，
   是「需要你去做一件事」，得有足够的体量把话说清楚。 */
.phone-disc-guide {
  padding: 22px 16px; border-radius: 12px;
  background: var(--bg-secondary);
}
.phone-disc-guide-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.phone-disc-guide-text { font-size: 12px; line-height: 1.75; color: var(--text-secondary); }
.phone-disc-err {
  padding: 20px 16px; font-size: 12px; line-height: 1.7;
  color: var(--danger); text-align: center;
}
/* 日推列表页 */
.phone-disc-page-head { padding: 14px 16px 10px; }
.phone-disc-page-title { font-size: 17px; font-weight: 700; color: var(--text); }
.phone-disc-page-sub { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.phone-disc-row-i {
  flex-shrink: 0; width: 18px;
  font-size: 11px; color: var(--text-secondary); opacity: 0.6;
  text-align: center;
}
.phone-disc-row-vip {
  font-size: 9px; color: var(--danger);
  border: 1px solid var(--danger); border-radius: 3px;
  padding: 0 3px; margin-left: 5px; vertical-align: 1px;
}
/* 日推页的「加入歌单」。描边而不是实心——这一页的主行为是
   它左边那个实心的「播放全部」，两个都填充会打起来。
   样式跟批量操作条的 .phone-music-seladd 一致，但不能直接用那个类：
   它带 margin-left: auto，会被推到最右边去，而这里要紧跟播放按钮。 */
.phone-disc-addpl {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.phone-disc-addpl:active { background: rgba(0,0,0,0.05); }
/* ===== 搜索页（底部 tab 之一）=====
   原来搜索是个 overlay 弹层。改成 tab 页的直接原因是层级：
   加入歌单要弹 _musicSheet，那个面板挂在 #phone-modal 里（z-index 200），
   而弹层是挂 body 的顶层，面板会被完全盖住。 */
.phone-nes-page { padding: 10px 12px 8px; }
/* 搜索条。这里是真 input（发现页那个 .phone-disc-search 只是个入口条），
   所以要自己处理边框和 focus —— 手机壳的全局规则去掉了默认 focus 高亮。 */
.phone-nes-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px; margin-bottom: 6px;
  background: var(--bg-secondary); border-radius: 20px;
  color: var(--text-secondary);
}
.phone-nes-bar input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-size: 13px; color: var(--text);
  padding: 2px 0;
}
.phone-nes-bar input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.phone-nes-go {
  flex-shrink: 0; border: none; cursor: pointer;
  padding: 6px 14px; border-radius: 16px;
  font-size: 12px; font-weight: 600;
  background: var(--accent); color: var(--on-accent);
}
.phone-nes-go:active { opacity: 0.8; }
/* 行内可点区。搜索页的行不是整体可点 —— 右边那个 ＋ 是独立按钮，
   整行 onclick 会和它抢事件。所以点击区收窄到封面+文字这一块，
   并且把 .phone-mlib-row 的 cursor/按下态挪到这里来。 */
.phone-nes-page .phone-mlib-row { cursor: default; gap: 8px; }
.phone-nes-page .phone-mlib-row:active { background: none; }
.phone-nes-tap {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
  cursor: pointer; border-radius: 10px;
  padding: 2px 4px; margin: -2px -4px;
}
.phone-nes-tap:active { background: rgba(0,0,0,0.05); }
.phone-nes-dur { flex-shrink: 0; font-size: 11px; color: var(--text-secondary); }
/* 状态标。空的时候不占位（没有 padding/min-width），
   否则每行右边都留一块空白。 */
.phone-nes-badge { flex-shrink: 0; font-size: 10px; line-height: 1; }
.phone-nes-playing { color: var(--accent); }
.phone-nes-added { color: var(--text-secondary); opacity: 0.75; }
/* 加入歌单按钮。圆形描边，已入库的换成对勾并染成主色 ——
   对勾表示「这首已经在库里」，但按钮仍然可点，它管的是加进歌单。 */
.phone-nes-add {
  flex-shrink: 0; width: 26px; height: 26px;
  padding: 0; line-height: 1;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 14px;
}
.phone-nes-add:active { background: rgba(0,0,0,0.06); }
.phone-nes-add.in-lib { color: var(--accent); border-color: var(--accent); }
/* ===== 发现页：推荐歌单 ===== */
.phone-recpl-sec { margin-top: 18px; }
.phone-recpl-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
}
.phone-recpl-title { font-size: 15px; font-weight: 700; color: var(--text); }
.phone-recpl-sub { font-size: 11px; color: var(--text-secondary); }
/* 横滑那一排。
   【为什么不用负边距】原来写的是 margin: 0 -14px + padding: 0 14px，
   想让卡「出血」到屏幕边缘又保持左对齐。但 overflow-x 容器在内容溢出时，
   起始侧的 padding 在移动端 WebView 里不稳定 —— 实测第一张卡贴到了
   容器左边缘，比上面的区标题还靠左，看着像没对齐。
   现在让这一排就待在父级（.phone-disc-page，左右各 14px）里，
   右侧滑到底的空隙用最后一张卡的 margin-right 补。 */
.phone-recpl-row {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* 滑到最右边时留出和左边一样的余量，不然最后一张会顶着屏幕边 */
.phone-recpl-row > .phone-recpl-card:last-child { margin-right: 14px; }
.phone-recpl-row::-webkit-scrollbar { display: none; }
/* 108px：一屏能看到三个半，露出的那半张是「还能往右滑」的唯一暗示 ——
   移动端没有滚动条，全靠这个。 */
.phone-recpl-card {
  flex: 0 0 108px; width: 108px;
  cursor: pointer; scroll-snap-align: start;
}
.phone-recpl-card:active { opacity: 0.7; }
.phone-recpl-cover {
  position: relative;
  width: 108px; height: 108px;
  border-radius: 10px; overflow: hidden;
  background: var(--bg-secondary);
}
.phone-recpl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 播放量角标。压在封面上，所以要自带半透明底 —— 封面亮暗未知，
   光靠白字在浅色封面上会看不见。 */
.phone-recpl-pc {
  position: absolute; top: 4px; right: 5px;
  font-size: 9px; color: #fff;
  background: rgba(0,0,0,0.42);
  border-radius: 8px; padding: 1px 5px;
  backdrop-filter: blur(2px);
}
/* 名字最多两行。定高（而不是靠内容撑）是为了让每张卡等高，
   一行和两行的卡混排时下边缘不会参差。 */
.phone-recpl-name {
  margin-top: 6px;
  font-size: 12px; line-height: 1.35;
  color: var(--text);
  height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 骨架屏。高度跟真实卡一致，数据到了不会把下面的内容顶一下。 */
.phone-recpl-cover-ph,
.phone-recpl-name-ph {
  background: var(--bg-secondary);
  animation: phoneRecPlPulse 1.4s ease-in-out infinite;
}
.phone-recpl-name-ph { border-radius: 4px; height: 1.2em; }
@keyframes phoneRecPlPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.phone-recpl-empty {
  padding: 16px 4px; font-size: 12px; line-height: 1.6;
  color: var(--text-secondary); text-align: center;
}
/* 推荐歌单详情页的「加载更多」 */
/* 榜单：纯列表条，不带封面。
   【为什么不复用横滑卡】上面已经有一排方形封面（推荐歌单），榜单再来一排
   一模一样的方块会让整页变成连续的色块墙，节奏没有起伏。而且四个榜的官方封面
   长得几乎一样（都是渐变底 + 榜名），封面在这里不提供任何辨识度 ——
   榜名本身才是信息。做成条状还能顺带放「更新频率 · 曲目数」这两条元信息。 */
.phone-tl-list {
  background: var(--bg-secondary); border-radius: 12px;
  overflow: hidden;
}
.phone-tl-row {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px;
  cursor: pointer; transition: opacity 0.15s;
}
.phone-tl-row:active { opacity: 0.6; }
/* svg 图标容器。flex 居中而不是靠 line-height —— svg 是替换元素，
   基线对齐在不同行高下会飘。opacity 让它比榜名退后半档，
   图标只是分辨用的锚点，不该跟文字抢注意力。 */
.phone-tl-icon {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--text-secondary); opacity: 0.85;
}
.phone-tl-icon svg { display: block; }
.phone-tl-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  flex: 0 0 auto;
}
/* meta 吃掉中间所有剩余空间并右对齐，把箭头顶到最右 —— 不用额外的 spacer */
.phone-tl-meta {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-tl-arrow {
  flex: 0 0 auto; font-size: 16px; line-height: 1;
  color: var(--text-secondary); opacity: 0.6;
}
/* 热搜榜。搜索页空态时占据整个 body。
   做成竖排列表而不是胶囊标签云：热搜词长短差得很多（「甲乙丙丁」和
   「秋天最痛旋律」那种描述），wrap 成标签云会参差不齐；而且竖排能给
   序号留固定的一栏，1/2/3 对齐后榜单感才成立。 */
.phone-hots-sec { padding: 4px 14px 18px; }
.phone-hots-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 6px 0 6px 2px;
}
.phone-hots-title { font-size: 14px; font-weight: 700; color: var(--text); }
.phone-hots-sub { font-size: 11px; color: var(--text-secondary); }
.phone-hots-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 4px;
  cursor: pointer; transition: opacity 0.15s;
}
.phone-hots-row:active { opacity: 0.55; }
/* 序号固定宽度右对齐：两位数（10-20）跟一位数才能对齐到同一条竖线 */
.phone-hots-i {
  flex: 0 0 18px; text-align: right;
  font-size: 12px; font-family: ui-monospace, monospace;
  color: var(--text-secondary); opacity: 0.7;
}
.phone-hots-i.top { color: var(--accent); opacity: 1; font-weight: 700; }
.phone-hots-word {
  flex: 0 1 auto; min-width: 0;
  font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-hots-hot {
  flex: 0 0 auto;
  padding: 0 4px; border-radius: 3px;
  background: var(--accent); color: #fff;
  font-size: 9px; line-height: 1.5;
}
/* 描述吃掉剩余空间。它是次要信息，放不下就截断，不挤词本身
   （词已经是 flex: 0 1 auto，只有描述也放不下时才轮到它收缩） */
.phone-hots-desc {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; color: var(--text-secondary); opacity: 0.8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== 发现页虚拟版（天枢城本地音乐） ===== */
/* 渐变封面。虚拟歌没有真封面图，色相由 id 哈希决定（见 _vGrad），
   同一首歌每次渲染颜色一致。
   inline style 只给 background，尺寸圆角靠这里的类 —— 三个位置
   （日推卡 96px / 歌单卡 108px / 列表行 46px）尺寸不同，
   所以 phone-v-cover 只负责「填满父级」，具体大小由并用的原类给。 */
.phone-v-cover {
  width: 100%; height: 100%;
  border-radius: inherit;
  flex-shrink: 0;
}
/* 日推卡的封面在 flex 行里是独立一格，没有父级尺寸可继承，得自己定 */
.phone-v-cover-daily {
  width: 96px; height: 96px; border-radius: 8px;
}
/* 列表行的 46px 封面：并用 phone-mlib-cover 时它已经有尺寸了，
   但 mlib-cover 自带浅灰底和 flex 居中，渐变会被居中缩成一点 —— 撑满它 */
.phone-mlib-cover.phone-v-cover { width: 46px; height: 46px; }
.phone-recpl-cover.phone-v-cover { width: 108px; height: 108px; }
/* 骨架屏。一句提示 + 跟真内容同形状的灰块，告诉用户刷新之后会得到什么。
   动画复用 phone-recpl-cover-ph 那套脉冲（全站骨架屏同一个语言）。 */
/* 骨架整体压暗一档：它是「还没有的东西」，不该跟真内容一样显眼。
   区标题（推荐歌单/榜单）不压 —— 那几个字是真的，刷新前后都在。 */
.phone-v-sk { opacity: 0.75; pointer-events: none; }
/* 生成中：整块骨架轻微呼吸。撤掉「正在生成…」那行文字后，
   这是页面上唯一的进度反馈（顶栏刷新按钮同时置灰）。
   幅度压得很小 —— 它跟占位行自己的脉冲动画会叠加，太大会晃眼。 */
.phone-v-sk-busy { animation: phoneVSkBusy 1.4s ease-in-out infinite; }
@keyframes phoneVSkBusy {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 0.45; }
}
/* 发现页顶栏刷新按钮：生成中图标转圈。
   复用 phoneCallSpin（通话/附近地图刷新用的同一个 keyframes），全站转圈一个语言。
   disabled 单独降透明度 —— 光禁用不给视觉反馈的话，点下去像没响应。 */
.phone-v-refresh.spinning { pointer-events: none; }
.phone-v-refresh.spinning svg {
  animation: phoneCallSpin .8s linear infinite;
  transform-origin: center;
}
.phone-v-refresh[disabled] { opacity: .6; cursor: default; }
.phone-v-sk .phone-tl-name,
.phone-v-sk .phone-tl-meta { opacity: 0.5; }
/* 已生成过详情的曲目行：序号染主色。
   为什么只动序号不动整行：这个标记的用途是「点开不用再花钱」，
   属于附加信息，不该改变行的主视觉（歌名歌手才是主体）。
   序号本来是压到 0.6 透明度的灰字，染色后能看见但不抢眼。 */
.phone-disc-row-i.phone-v-row-done {
  color: var(--accent) !important;
  opacity: 1 !important;
  font-weight: 600;
}
/* ===== 虚拟伪播放页 ===== */
/* 伪播放页整页照搬真播放页（.phone-mdetail-*）—— 头部、240px 方封面、
   全屏歌词、进度条、五键控制条全部复用那边的类，这里一行样式都不重写。
   【为什么只剩 credits】制作人员那行是真播放页没有的东西（真歌的元数据里
   没有作曲/编曲）。它挂在歌手下面，对应真播放页主题曲徽章的位置。 */
.phone-vp-credits {
  font-size: 11px; color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 3px;
  line-height: 1.5;
}
/* ===== 虚拟单曲详情页 ===== */
/* 头部：封面 + 歌名歌手。左右布局而不是网易云那种大居中封面 ——
   这一页没有播放按钮，主体是下面的文字，头部只做身份标识，不该占掉半屏。 */
.phone-v-trk-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 14px;
}
.phone-v-trk-cover {
  width: 88px; height: 88px;
  border-radius: 10px;
  flex-shrink: 0;
}
.phone-v-trk-head-info { flex: 1; min-width: 0; }
.phone-v-trk-name {
  font-size: 17px; font-weight: 700; color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.phone-v-trk-artist {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 5px;
  word-break: break-word;
}
/* 幕后署名。比歌手名再小一档、再淡一档 —— 它是补充信息，
   跟列表行里那串 · 作词：××× 是同一件东西的展开。 */
.phone-v-trk-credits {
  font-size: 11px; color: var(--text-secondary);
  opacity: 0.75;
  margin-top: 4px;
  line-height: 1.5;
}
.phone-v-trk-sec { padding: 4px 16px 18px; }
.phone-v-trk-sec-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 8px;
}
/* 介绍是一整段散文（400-600 字），行高放宽到 1.85 ——
   手机窄屏下一段这么长的字，行距不够会糊成一片。
   pre-wrap 是为了保留模型偶尔打的段落换行。 */
.phone-v-trk-desc {
  font-size: 13px; line-height: 1.85;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
/* 歌词区。逐行居左、不居中 —— 居中是播放器里跟着滚的样子，
   这里是静态全文，居左更好读（跟真实平台的歌词页一致）。 */
.phone-v-trk-lrc { padding-bottom: 4px; }
.phone-v-lrc-line {
  font-size: 13px; line-height: 2;
  color: var(--text-secondary);
  word-break: break-word;
}
/* 生成中。占位不用骨架屏而用居中的转圈 + 一句「加载中…」：
   这一页只有一首歌，没有「同形状的多个块」可以骨架化。 */
.phone-v-trk-busy {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 36px 20px 44px;
  gap: 12px;
}
.phone-v-trk-busy-text { font-size: 13px; color: var(--text); }
/* 日推卡里的四行歌名占位。高度和行距跟 phone-disc-line 对齐，
   数据到了不会把卡的高度顶一下。 */
.phone-v-sk-line {
  height: 10px; border-radius: 999px;
  background: var(--bg-secondary);
  margin: 5px 0;
  animation: phoneRecPlPulse 1.4s ease-in-out infinite;
}
.phone-recpl-more-wrap { padding: 6px 16px 18px; text-align: center; }
.phone-recpl-more {
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px; cursor: pointer;
}
.phone-recpl-more:active { background: rgba(0,0,0,0.05); }
.phone-recpl-more[disabled] { opacity: 0.55; cursor: default; }
.phone-recpl-more-err {
  margin-top: 8px; font-size: 11px; line-height: 1.6;
  color: var(--danger);
}
.phone-music-pl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-music-pl-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  cursor: pointer;
}
.phone-music-pl-card:active { opacity: 0.75; }
.phone-music-pl-cover {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-music-pl-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phone-music-pl-info { flex: 1; min-width: 0; }
.phone-music-pl-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-music-pl-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ===== 歌单详情页：播放全部条 ===== */
.phone-music-pl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}
.phone-music-playall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.phone-music-playall:active { opacity: 0.8; }
.phone-music-playall svg { display: block; }
.phone-music-pl-barcount {
  font-size: 11.5px;
  color: var(--text-secondary);
}
/* ===== 迷你播放条 ===== */
/* slot 是页面 flex 里的一层，不是 fixed —— 迷你条只在音乐 app 内出现，
   做成全局固定定位会飘到论坛、邮箱这些页面上去。
   没歌时 slot 里是空的，:empty 让它不占高度。 */
.phone-music-mini-slot {
  flex-shrink: 0;
  padding: 0 10px 8px;
}
.phone-music-mini-slot:empty { display: none; padding: 0; }
.phone-music-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: 0 3px 12px rgba(0,0,0,0.10);
  cursor: pointer;
}
.phone-music-mini:active { background: var(--bg-tertiary); }
/* 封面故意不做旋转动画：一直转会持续占 GPU，列表本来就偏卡 */
.phone-music-mini-cover {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex; align-items: center; justify-content: center;
}
.phone-music-mini-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-music-mini-ph { color: var(--text-secondary); opacity: 0.45; }
.phone-music-mini-info { flex: 1; min-width: 0; }
.phone-music-mini-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-music-mini-artist {
  font-size: 10.5px; color: var(--text-secondary); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-music-mini-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  border: none; background: none; padding: 0;
  border-radius: 50%;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.phone-music-mini-btn:active { background: var(--bg-tertiary); }
.phone-music-mini-btn svg { display: block; width: 18px; height: 18px; }
/* ===== 歌单详情页：批量删除操作条 ===== */
.phone-music-selall,
.phone-music-seladd,
.phone-music-seldel {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.phone-music-selall:active,
.phone-music-seladd:active { background: rgba(0,0,0,0.05); }
/* 「加入歌单」靠右挤到删除旁边：auto 放在它身上，删除紧跟其后。
   放在 seldel 上的话两个按钮会被计数撑开分居两端。 */
.phone-music-seladd { margin-left: auto; }
.phone-music-seladd:disabled {
  opacity: 0.42;
  cursor: default;
  color: var(--text-secondary);
}
.phone-music-seldel {
  border-color: color-mix(in srgb, var(--danger, #e5484d) 45%, var(--border));
  color: var(--danger, #e5484d);
}
.phone-music-seldel:active { background: color-mix(in srgb, var(--danger, #e5484d) 10%, transparent); }
/* 一首都没选时删除不可点，但保留在原位 —— 隐藏会让操作条跳动 */
.phone-music-seldel:disabled {
  opacity: 0.42;
  cursor: default;
  border-color: var(--border);
  color: var(--text-secondary);
}
/* 勾选框。占位固定 20px，选中态只换颜色不改尺寸，避免行内文字左右抖 */
.phone-music-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent, #fff);
  box-sizing: border-box;
}
.phone-music-check.on {
  background: var(--accent);
  border-color: var(--accent);
}
.phone-music-check svg { display: block; }
.phone-mlib-row.checked { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ===== 芜行寂野世界观：隐藏论坛/音乐/阅读/视频的评论UI、论坛发帖入口、视频直播tab ===== */
.wv-wuxingjiye .phone-mcomment-input-bar,          /* 音乐评论输入栏 */
.wv-wuxingjiye .phone-video-cmt-write,             /* 视频评论输入栏 */
.wv-wuxingjiye .phone-reading-cmt-inputbar,        /* 阅读评论输入栏 */
.wv-wuxingjiye .phone-forum-detail-actions,        /* 论坛帖子详情评论区底栏 */
.wv-wuxingjiye .phone-forum-mine-posts,            /* 论坛「我的发帖」入口卡 */
.wv-wuxingjiye .phone-reading-add-btn,             /* 论坛「我的」页发帖加号按钮 */
.wv-wuxingjiye .phone-live-cat-tab {               /* 视频分类 tab 里的直播 tab */
  display: none !important;
}