/* ============================================================
   DualStar · 小手机主屏（v5xx 重做主屏幕）
   ─────────────────────────────────────────────────────────
   · 移动端（≤768px / 触摸设备）：iPhone 主屏观感
     - 状态栏：左侧加粗时间 + 右侧信号/WiFi/电池，白色文字
     - iOS 风格低饱和渐变壁纸（深浅色主题各一套）
     - 图标：iOS 圆角矩形（22% 圆角）+ 渐变底色 + 白色标签
     - 网格 4 列 · 毛玻璃 Dock（backdrop-filter）· Home Indicator
     - 编辑模式抖动（app 与 widget 同抖）
   · 桌面 / iPad（>768px）：iPad 主屏观感
     - 全屏模式：左侧 Today View 小组件列 + 右侧 app 网格
     - 手机壳模式：iPad 比例外壳（4:3）+ 细金属边框
   ============================================================ */

/* —— 视口 —— */
.phone-view {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  /* v466b：动态视口(100dvh)铺满当前可视区——地址栏展开/收起自动适配，Dock 不被挤出屏幕。
     仅 100% 会退化为「视觉视口」高度（URL 栏/安全区被排除），导致底部露出白边。 */
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* —— 外壳（默认：手机壳模式尺寸；全屏模式由下方 media 覆盖） —— */
.phone-shell {
  /* 主屏可调尺寸变量：图标大小 / 圆角 / 标签字号 / 网格间距 / 空位高度 */
  --icon-size: 62px;
  --icon-radius: 22%;
  --label-size: 11.5px;
  --grid-gap-x: 4px;
  --grid-gap-y: 18px;
  --slot-h: 84px;

  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  max-height: 100vh;
  background: var(--bg);
  border-radius: var(--phone-radius);
  box-shadow:
    0 0 0 12px var(--bg-elevated),
    0 0 0 13px var(--border-strong),
    var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-shell > * { flex-shrink: 0; }
.phone-shell > .phone-content { flex-shrink: 1; min-height: 0; overflow: hidden; }
/* v396：phone-content overflow:hidden —— 任何视口/浏览器/系统下，widgets/apps
   内容超出可用空间时被裁掉（而不是溢出到 dock 区域被遮挡）。
   renderApps 通过 ResizeObserver 实测高度决定每页行数，保证裁切可见。 */

/* —— 全屏模式：外壳铺满视口（默认由 theme.js 强制全屏） —— */
[data-display-mode="fullscreen"] .phone-content {
  flex: 1;
  min-height: 0;
}
[data-display-mode="fullscreen"] .phone-shell {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* —— 触摸设备 / 独立 PWA / 手机：手机壳一律满屏 ——
   不依赖 JS 的 displayMode，纯 CSS 强制铺满，根除「竖条窄壳」与「底部白边」。
   高度用 100%（填满 .phone-view=inset:0 的整屏，含安全区），
   而非 100dvh（比整屏矮一截，会在底部露出 html 背景形成白边）。 */
@media (max-width: 768px), (pointer: coarse), (any-pointer: coarse), (display-mode: standalone) {
  .phone-view { padding: 0 !important; }
  .phone-shell {
    width: 100% !important;
    /* 触摸/独立 PWA：动态视口铺满设备（地址栏展开时 Dock 依然可见） */
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  /* 内容底部不再预留安全区 —— Dock 直接贴底，彻底消除底部白边 */
  .phone-shell > .phone-content {
    padding-bottom: 0 !important;
  }
  /* v382：底部安全区（iOS home indicator 一带）铺玻璃色（浅灰/深灰），
     根除「dock 下方露出 --bg 白色条」。dock/indicator 位于玻璃层之上。 */
  .phone-shell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 10px);
    background: var(--bg-glass);
    z-index: 1;
    pointer-events: none;
  }
  /* Dock 与悬浮球(Home Indicator)贴底，去除底部白边（所有触摸/独立 PWA 通用） */
  .phone-dock { margin-bottom: 3px !important; z-index: 2; }
  .phone-home-indicator { margin-bottom: 0 !important; z-index: 2; }
}

/* ============================================================
   桌面端 · 手机壳模式 → iPad 观感
   （.phone-shell 用 --phone-w/--phone-h + 圆角 + 阴影；
    改为 iPad 比例外壳：4:3、细金属边框、更大圆角）
   ============================================================ */
@media (min-width: 769px) {
  :root[data-display-mode="phone-shell"] .phone-shell {
    --phone-w: 1080px;
    --phone-h: 800px;
    --phone-radius: 28px;
    /* iPad 主屏图标更大、网格更松 */
    --icon-size: 84px;
    --label-size: 14px;
    --grid-gap-x: 16px;
    --grid-gap-y: 28px;
    --slot-h: 112px;

    width: auto;
    height: min(var(--phone-h), calc(100dvh - 44px));
    aspect-ratio: 27 / 20;
    max-width: calc(100vw - 48px);
    border-radius: var(--phone-radius);
    background: transparent;
    border: none;
    /* 细金属边框：屏幕边缘高光 + 黑边 + 金属环 + 投影 */
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.16),
      0 0 0 7px rgba(30, 30, 34, 0.9),
      0 0 0 8px rgba(0, 0, 0, 0.32),
      0 48px 120px rgba(0, 0, 0, 0.45);
  }

  /* iPad 状态栏：时间在左靠边，右侧日期 + 信号/电池 */
  :root[data-display-mode="phone-shell"] .phone-statusbar {
    padding: 16px 34px 6px;
    /* v552：恢复原始间距（8px + safe） */
    padding-top: calc(8px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
    font-size: 15px;
  }
  :root[data-display-mode="phone-shell"] .statusbar-date { display: inline-block; }

  /* iPad Dock：更宽、圆角更高、悬浮观感 */
  :root[data-display-mode="phone-shell"] .phone-dock {
    margin: 12px 30px 22px;
    padding: 16px 26px;
    border-radius: 34px;
    gap: 16px;
    /* v561：中性白玻璃 */
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 18px 44px rgba(0, 0, 0, 0.14);
  }
  :root[data-display-mode="phone-shell"] .phone-dock .app-icon,
  :root[data-display-mode="phone-shell"] .phone-dock .app-icon-wrap { max-width: 76px; }
  :root[data-display-mode="phone-shell"] .phone-dock .app-icon { border-radius: 22%; }

  /* iPad 主屏网格更松 */
  :root[data-display-mode="phone-shell"] 
/* v581：小组件上移——统一网格中 widget 与下方应用拉开间距，不再视觉堆叠 */
.page-apps .grid-cell:has(.widget-unit) {
  padding-bottom: 10px;
}
.page-apps .widget-unit {
  margin-bottom: 10px;
}
.page-apps {
    gap: var(--grid-gap-y) var(--grid-gap-x);
    padding: 10px 8px 4px;
  }
  :root[data-display-mode="phone-shell"] .app-page {
    padding: 10px 14px 6px;
    gap: 14px;
  }

  /* iPad 无 Home Indicator（悬浮条隐藏） */
  :root[data-display-mode="phone-shell"] .phone-home-indicator { display: none; }

  /* 编辑栏随壳变宽，并抬到悬浮 Dock 上方 */
  :root[data-display-mode="phone-shell"] .phone-edit-bar {
    max-width: min(860px, calc(100vw - 48px));
    bottom: 140px;
  }
}

/* ============================================================
   桌面 / iPad 全屏 · Today View 布局（由 JS 在 .phone-shell 上加 .pad-layout）
   ============================================================ */
.phone-shell.pad-layout {
  --icon-size: 72px;
  --label-size: 13px;
  --grid-gap-x: 14px;
  --grid-gap-y: 26px;
  --slot-h: 100px;
}
/* 内容区：左 Today View 小组件列 + 右 app 网格 */
.phone-shell.pad-layout .phone-content {
  flex-direction: row;
  gap: 26px;
  padding: 20px 28px;
  padding-top: calc(14px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
/* 左侧：Today View 小组件列（可滚动） */
.phone-shell.pad-layout .phone-widgets-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 330px;
  width: 330px;
  max-width: 330px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-right: 2px;
}
.phone-shell.pad-layout .phone-widgets-left::-webkit-scrollbar { display: none; }
.phone-shell.pad-layout .phone-apps-right { flex: 1; min-width: 0; }

/* Today View 小组件：通栏大卡片 */
.phone-shell.pad-layout .phone-widgets-left .widget-unit { width: 100%; }
.phone-shell.pad-layout .phone-widgets-left .ws-large { min-height: 236px; }
.phone-shell.pad-layout .phone-widgets-left .ws-medium { min-height: 168px; }
.phone-shell.pad-layout .phone-widgets-left .ws-small { min-height: 124px; }
.phone-shell.pad-layout .phone-widgets-left .ws-square { min-height: 236px; }
.phone-shell.pad-layout .phone-widgets-left .widget-weather-hero,
.phone-shell.pad-layout .phone-widgets-left .widget-time,
.phone-shell.pad-layout .phone-widgets-left .widget-photo,
.phone-shell.pad-layout .phone-widgets-left .widget-anniv,
.phone-shell.pad-layout .phone-widgets-left .widget-custom,
.phone-shell.pad-layout .phone-widgets-left .widget-generic {
  border-radius: 24px;
}

/* iPad 状态栏（全屏）：日期显示 */
.phone-shell.pad-layout .phone-statusbar {
  padding: 14px 28px 6px;
  padding-top: calc(6px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
}
.phone-shell.pad-layout .statusbar-date { display: inline-block; }

/* iPad Dock（全屏）：更宽、悬浮、更圆（v561：中性白玻璃） */
.phone-shell.pad-layout .phone-dock {
  margin: 8px 26px 18px;
  padding: 12px 20px;
  border-radius: 28px;
  gap: 12px;
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 40px rgba(0, 0, 0, 0.14);
}
.phone-shell.pad-layout .phone-dock .app-icon,
.phone-shell.pad-layout .phone-dock .app-icon-wrap { max-width: 66px; }
.phone-shell.pad-layout .phone-dock .app-icon { border-radius: 22%; }

/* iPad 无 Home Indicator */
.phone-shell.pad-layout .phone-home-indicator { display: none; }

/* iPad 编辑栏更宽，并抬到悬浮 Dock 上方（编辑模式不遮挡 dock 图标） */
.phone-shell.pad-layout .phone-edit-bar {
  max-width: min(720px, calc(100vw - 48px));
  bottom: 128px;
}

/* ============================================================
   壁纸层 · v561 韩系低饱和黑白灰（燕麦米白 · 原创极简）
   暖米白基底 + 极淡灰雾光晕，无彩色、无图案装饰，克制留白
   ============================================================ */
.phone-wallpaper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* v561：韩系燕麦米白——顶部月白辉光 + 四角极淡灰雾，无彩色 */
  background:
    radial-gradient(130% 95% at 50% -14%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.2) 46%, transparent 64%),
    radial-gradient(58% 44% at 90% 4%, rgba(204, 204, 208, 0.32) 0%, transparent 62%),
    radial-gradient(46% 40% at 5% 10%, rgba(216, 214, 210, 0.30) 0%, transparent 60%),
    radial-gradient(72% 56% at 94% 97%, rgba(222, 219, 213, 0.36) 0%, transparent 62%),
    radial-gradient(56% 48% at 4% 88%, rgba(208, 210, 206, 0.28) 0%, transparent 58%),
    linear-gradient(172deg, #F6F5F3 0%, #F4F3F1 34%, #F1F0EE 62%, #ECEBE9 100%);
  z-index: 0;
  transition: background 0.4s ease;
}

/* 细腻噪点（极淡，模拟 iOS 壁纸质感） */
.phone-wallpaper::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* 深色模式壁纸：炭墨灰——暖黑基底 + 极淡冷灰微光 */
:root[data-theme="dark"] .phone-wallpaper {
  background:
    radial-gradient(130% 95% at 50% -14%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    radial-gradient(58% 44% at 90% 4%, rgba(120, 124, 132, 0.22) 0%, transparent 62%),
    radial-gradient(46% 40% at 5% 10%, rgba(140, 138, 134, 0.16) 0%, transparent 60%),
    radial-gradient(72% 56% at 94% 97%, rgba(110, 112, 116, 0.18) 0%, transparent 62%),
    linear-gradient(172deg, #1D1D21 0%, #212125 34%, #232327 62%, #1F1F23 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-wallpaper {
    background:
      radial-gradient(130% 95% at 50% -14%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
      radial-gradient(58% 44% at 90% 4%, rgba(120, 124, 132, 0.22) 0%, transparent 62%),
      radial-gradient(46% 40% at 5% 10%, rgba(140, 138, 134, 0.16) 0%, transparent 60%),
      radial-gradient(72% 56% at 94% 97%, rgba(110, 112, 116, 0.18) 0%, transparent 62%),
      linear-gradient(172deg, #1D1D21 0%, #212125 34%, #232327 62%, #1F1F23 100%);
  }
}

/* ============================================================
   状态栏 · iPhone 风格（白色加粗时间 + 右侧信号/WiFi/电池）
   ============================================================ */
.phone-statusbar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 26px 4px;
  /* v389：PWA 添加主屏（standalone）时系统状态栏盖在顶部，模拟状态栏下移避开。
     v552：恢复原始间距（4px + safe）——v550/v551 对顶部的改动让用户反馈「顶部栏被做得很低」，
     这里全部回退到用户「改底部之前」的原始状态。 */
  padding-top: calc(4px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  font-size: 15.5px;
  font-weight: 600;
  /* v541：浅色低饱和壁纸 → 深灰字；自定义壁纸/深色模式 → 白字（见下方变体）
     v561：墨灰 */
  color: rgba(52, 52, 52, 0.95);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

.phone-statusbar-right {
  display: flex;
  align-items: center;
  gap: 7px;
}

.statusbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 1.5px rgba(255, 255, 255, 0.6));
}

/* 自定义壁纸（不可预知深浅）→ 白字 + 深阴影，兼容任意图片 */
.phone-shell.has-custom-wallpaper .phone-statusbar {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.phone-shell.has-custom-wallpaper .statusbar-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
/* 深色模式：壁纸深 → 白字 */
:root[data-theme="dark"] .phone-statusbar {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .statusbar-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-statusbar {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  :root:not([data-theme="light"]) .statusbar-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  }
}
.statusbar-icon svg { display: block; }

/* iPad 状态栏日期（仅桌面显示） */
.statusbar-date {
  display: none;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
  letter-spacing: 0.3px;
  margin-right: 2px;
}

/* ============================================================
   主屏内容
   ============================================================ */
.phone-content {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: hidden; /* 真手机：主屏不可上下滚动，内容自适应，放不下的应用自动分页 */
  padding: 8px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
}
.phone-content::-webkit-scrollbar { display: none; }

/* 主屏布局：组件区（第一页顶部 grid）+ 应用区（分页） */
.phone-widgets-left {
  flex-shrink: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.phone-apps-right {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   小组件 · iOS 卡片风格（圆角大卡片、低饱和半透明玻璃）
   ============================================================ */
.widget-weather-hero,
.widget-time,
.widget-photo,
.widget-anniv,
.widget-custom,
.widget-generic,
.widget-char,
.widget-todo,
.widget-note,
.widget-mail,
.widget-diary {
  /* v561：亚克力白——克制冷灰影、细边框、哑光无果冻 */
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(250, 250, 250, 0.72) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
:root[data-theme="dark"] .widget-weather-hero,
:root[data-theme="dark"] .widget-time,
:root[data-theme="dark"] .widget-photo,
:root[data-theme="dark"] .widget-anniv,
:root[data-theme="dark"] .widget-custom,
:root[data-theme="dark"] .widget-generic,
:root[data-theme="dark"] .widget-char,
:root[data-theme="dark"] .widget-todo,
:root[data-theme="dark"] .widget-note,
:root[data-theme="dark"] .widget-mail,
:root[data-theme="dark"] .widget-diary {
  background:
    linear-gradient(180deg, rgba(44, 44, 50, 0.72) 0%, rgba(34, 34, 38, 0.6) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 6px 20px rgba(0, 0, 0, 0.30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .widget-weather-hero,
  :root:not([data-theme="light"]) .widget-time,
  :root:not([data-theme="light"]) .widget-photo,
  :root:not([data-theme="light"]) .widget-anniv,
  :root:not([data-theme="light"]) .widget-custom,
  :root:not([data-theme="light"]) .widget-generic,
  :root:not([data-theme="light"]) .widget-char,
  :root:not([data-theme="light"]) .widget-todo,
  :root:not([data-theme="light"]) .widget-note,
  :root:not([data-theme="light"]) .widget-mail,
  :root:not([data-theme="light"]) .widget-diary {
    background:
      linear-gradient(180deg, rgba(44, 44, 50, 0.72) 0%, rgba(34, 34, 38, 0.6) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 -1px 0 rgba(0, 0, 0, 0.25),
      0 6px 20px rgba(0, 0, 0, 0.30);
  }
}

/* —— 天气组件（hero + 24h 预报） —— */
.widget-weather-hero {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.widget-weather-hero:active { transform: scale(0.99); }

.weather-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  flex-shrink: 0;
}

.weather-hero-main {
  flex: 1;
  min-width: 0;
}

.weather-hero-temp {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}

.weather-hero-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.weather-hero-city {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.weather-hero-refresh {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.weather-hero-refresh:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  transform: rotate(90deg);
}
.weather-hero-refresh:active { transform: scale(0.9); }

/* 24h 预报条 */
.weather-hourly {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.weather-hourly::-webkit-scrollbar { display: none; }

.weather-hourly-item {
  flex: 1 0 auto;
  min-width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.weather-hourly-item:hover { background: var(--bg-soft); }

.weather-hourly-hour {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}

.weather-hourly-icon {
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.weather-hourly-icon svg { width: 18px; height: 18px; }

.weather-hourly-temp {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
}

.weather-hourly-rain {
  font-size: 8px;
  color: var(--accent);
  letter-spacing: 0.2px;
}

/* —— 时间小组件（v562：无边框、透明底、居中、大字，iOS 锁屏时间观感） —— */
.widget-time {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.widget-time-clock {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.widget-time-clock .colon {
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink {
  50% { opacity: 0.4; }
}

.widget-time-date {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin-top: 2px;
}
/* 方形(2×2) 与整行(大)时更大更居中 */
.ws-square .widget-time-clock { font-size: 72px; }
.ws-large .widget-time-clock { font-size: 64px; }

/* —— 照片 + 纪念日 横排 —— */
.widget-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* —— 照片小组件（单张大图；尺寸由 grid 行高控制，不用 aspect-ratio） —— */
.widget-photo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.widget-photo:active { transform: scale(0.97); }

/* v395：照片内容独立容器（编辑角标/尺寸控件在 widget-unit 层，不被照片内容覆盖） */
.widget-photo-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.widget-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-photo-empty {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  padding: 8px;
  text-align: center;
}

.widget-photo-label {
  /* v565：按用户要求移除左下角「相册」文字标签 */
  display: none;
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: var(--r-full);
  letter-spacing: 0.3px;
}

/* —— 自定义图片小组件（v429） —— */
.widget-custom {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.widget-custom:active { transform: scale(0.97); }
.widget-custom-img-content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
.widget-custom-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-custom-img-empty {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  padding: 8px;
  text-align: center;
}
.widget-custom-label {
  /* v565：按用户要求移除左下角文字标签 */
  display: none;
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: var(--r-full);
  letter-spacing: 0.3px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-small .widget-custom-label { display: none; }
.ws-small .widget-custom-img-empty span { display: none; }
.ws-small .widget-custom-img-empty svg { width: 26px; height: 26px; }

/* —— 纪念日小组件 —— */
.widget-anniv {
  padding: 14px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.widget-anniv:active { transform: scale(0.97); }
.widget-anniv:hover {
  box-shadow: var(--shadow-md);
}

.widget-anniv-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
}
.widget-anniv-header svg { width: 12px; height: 12px; opacity: 0.7; }

.widget-anniv-days {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.5px;
}

.widget-anniv-title {
  font-size: 11px;
  color: var(--text);
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.widget-anniv-date {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.3px;
}

/* 纪念日多卡片列表 */
.widget-anniv-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.widget-anniv-list::-webkit-scrollbar { display: none; }

/* —— 纪念日 widget 新版（v2，带图标 + 主题色） —— */
.widget-anniv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 6px;
  color: var(--text-tertiary);
}
.widget-anniv-empty-icon svg {
  width: 28px;
  height: 28px;
  opacity: 0.4;
}
.widget-anniv-empty-text {
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* 重写 anniv-card-mini：横向布局（图标 + 信息 + 倒数） */
.anniv-card-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border-left: 2px solid var(--card-accent, var(--border));
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  position: relative;
}
.anniv-card-mini:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(1px);
}
.anniv-card-mini.first {
  background: rgba(255, 255, 255, 0.6);
}
/* v541：卡片嵌在玻璃组件里，用半透明白更轻盈 */
.widget-anniv .anniv-card-mini {
  background: rgba(255, 255, 255, 0.55);
}
.widget-anniv .anniv-card-mini:hover {
  background: rgba(255, 255, 255, 0.8);
}
:root[data-theme="dark"] .widget-anniv .anniv-card-mini,
:root[data-theme="dark"] .anniv-card-mini.first {
  background: rgba(255, 255, 255, 0.07);
}
:root[data-theme="dark"] .anniv-card-mini:hover,
:root[data-theme="dark"] .widget-anniv .anniv-card-mini:hover {
  background: rgba(255, 255, 255, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .widget-anniv .anniv-card-mini,
  :root:not([data-theme="light"]) .anniv-card-mini.first {
    background: rgba(255, 255, 255, 0.07);
  }
  :root:not([data-theme="light"]) .anniv-card-mini:hover,
  :root:not([data-theme="light"]) .widget-anniv .anniv-card-mini:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}
.anniv-card-mini.is-today {
  background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 18%, transparent), var(--surface));
  border-left-width: 3px;
}
.anniv-card-mini.is-today::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-accent);
  margin: 6px;
  animation: widgetPulse 1.8s ease-in-out infinite;
}
@keyframes widgetPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.anniv-card-mini.is-past {
  opacity: 0.55;
}

.anniv-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--card-accent, var(--text-tertiary)) 12%, transparent);
  color: var(--card-accent, var(--text-tertiary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.anniv-card-info {
  flex: 1;
  min-width: 0;
}

.anniv-card-info .anniv-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.anniv-card-info .anniv-card-date {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 1px;
  letter-spacing: 0.2px;
}

.anniv-card-days-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1;
}

.anniv-card-days-block .anniv-card-days {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--card-accent, var(--text));
  letter-spacing: -0.3px;
}

.anniv-card-mini.is-past .anniv-card-days-block .anniv-card-days {
  color: var(--text-tertiary);
}

.anniv-card-days-block .anniv-card-unit {
  font-size: 8px;
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* SVG 容器在 widget 中 */
.widget-anniv .anniv-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-anniv .anniv-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* —— App 网格（分页结构：renderApps 实际使用 .app-page） —— */
.app-pages-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.app-pages-scroll {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden; /* 应用区只允许横向翻页，禁止纵向滚动 */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-pages-scroll::-webkit-scrollbar { display: none; }
.app-page {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%; /* 占满应用区高度 */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 4px 4px;
  box-sizing: border-box;
  overflow: hidden;
}
/* 页内 app 图标区（v562：自由摆放 2D 网格，行高固定，内容垂直居中不贴顶） */
.page-apps {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--app-grid-cols, 4), 1fr);
  /* v565：行高 = 列宽（正方形网格），由 JS 按容器宽度计算 */
  /* v587fix：不固定预留 rowsN 行——此前总预留整页行数，内容少时下面空出一大块、还因溢出裁切导致放不了应用；改为按内容自动生成行（显式 cell 定位仍生效），底部不再留空 */
  grid-template-rows: none;
  grid-auto-rows: var(--slot-h, 84px); /* v571：隐式行等高，方组件不会突出/悬空 */
  align-content: start; /* v583：iOS 式——内容从顶部排列，不满时留白在底部（此前 safe center 导致图标都挤在中间） */
  gap: var(--grid-gap-y) var(--grid-gap-x);
  padding: 4px 4px 2px;
}
/* 自由摆放单元格：元素按 grid-column/row 定位 */
.grid-cell {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.grid-cell > .widget-unit { overflow: hidden; }
/* v587fix：小组件整体上移一点点（仅小组件，不移动应用/整体）——顶部组件更贴近状态栏 */
.grid-cell:has(> .widget-unit) { transform: translateY(-4px); }
.grid-cell > .app-item,
.grid-cell > .widget-unit {
  width: 100%;
  height: 100%;
}
/* 兼容旧引用 */
.app-grid {
  display: grid;
  grid-template-columns: repeat(var(--app-grid-cols, 4), 1fr);
  gap: var(--grid-gap-y) var(--grid-gap-x);
  padding: 6px 4px 4px;
}

/* —— 小组件尺寸四档（v562：大=整行 / 方=2×2 正方形 / 中=半行 / 小=小格） —— */
/* v585fix：小组件高度跟随正方形网格行高（rowH = 列宽），不再写死 min-height——
   否则小手机主屏行仅约 84~100px，132px/112px 的组件被撑高溢出、与下一行堆叠、
   整个应用区被顶上去（「应用很往上、小组件很往下、和别的组件叠一起」根因）。
   内部内容改用弹性垂直居中，网格 cell 已约束 height:100%。 */
.widget-unit { min-height: 0; height: 100%; }
.ws-large { grid-column: 1 / -1; grid-row: span 2; min-height: 0; } /* v565：占 2 行（正方形网格） */
.ws-square { grid-column: span 2; grid-row: span 2; min-height: 0; }
.ws-medium { grid-column: span 2; grid-row: span 1; min-height: 0; }
.ws-small { grid-column: span 1; grid-row: span 1; min-height: 0; }

/* v571：方形(2×2)文字卡片内容垂直居中——与旁边上下两个应用对齐，
   不再「上面对齐、下面突出一块」 */
.ws-square.widget-anniv,
.ws-square.widget-char,
.ws-square.widget-todo,
.ws-square.widget-note,
.ws-square.widget-mail,
.ws-square.widget-diary {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 尺寸切换按钮（编辑模式显示，位于小组件底部） */
.widget-size-ctl {
  display: none;
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 6;
  gap: 3px;
  background: rgba(20, 20, 20, 0.62);
  border-radius: 999px;
  padding: 3px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.edit-mode .widget-size-ctl { display: flex; }
.widget-size-ctl .ws-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
  font-weight: 600;
  width: 22px;
  height: 20px;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  line-height: 20px;
}
.widget-size-ctl .ws-btn.active {
  background: rgba(255, 255, 255, 0.92);
  color: #222;
}

/* 天气：中尺寸隐藏逐小时，小尺寸只留温度 */
.ws-medium .weather-hourly { display: none; }
.ws-small .weather-hourly { display: none; }
.ws-small .weather-hero-desc { display: none; }
.ws-small .weather-hero-city { display: none; }
.ws-small .weather-hero-refresh { display: none; }
.ws-small .weather-hero-top { gap: 8px; }
.ws-small .weather-hero-icon { width: 36px; height: 36px; }
.ws-small .weather-hero-temp { font-size: 20px; }

/* 时钟：v562 无边框居中样式；各尺寸字号（方形 2×2 最大） */
.ws-medium .widget-time-clock { font-size: 40px; }
.ws-medium .widget-time-date { font-size: 12px; }
.ws-small .widget-time-clock { font-size: 26px; }
.ws-small .widget-time-date { display: none; }
.ws-large .widget-time-clock { font-size: 60px; }

/* 相册/纪念日：小尺寸紧凑 */
.ws-small .widget-photo-label { display: none; }
.ws-small .widget-photo-empty span { display: none; }
.ws-small .widget-photo-empty svg { width: 26px; height: 26px; }
.ws-small .widget-anniv-header { justify-content: center; }
.ws-small .widget-anniv-header span { display: none; }
.ws-small .widget-anniv-date { display: none; }

/* —— 翻页圆点（Dock 上方，iOS 风格白色点） —— */
.app-page-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 8px 0 4px;
  flex-shrink: 0;
}
.app-page-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  transition: opacity 0.25s ease, background 0.25s ease, width 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  cursor: pointer;
}
.app-page-dot:hover { transform: scale(1.25); }
.app-page-dot.active {
  opacity: 1;
  width: 18px; /* v561：选中态拉长成墨色胶囊 */
  background: rgba(0, 0, 0, 0.62);
}
.phone-shell.has-custom-wallpaper .app-page-dot {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.phone-shell.has-custom-wallpaper .app-page-dot.active {
  background: rgba(255, 255, 255, 0.96);
}
:root[data-theme="dark"] .app-page-dot {
  background: rgba(255, 255, 255, 0.30);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .app-page-dot.active {
  background: rgba(255, 255, 255, 0.92);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-page-dot {
    background: rgba(255, 255, 255, 0.32);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme="light"]) .app-page-dot.active {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ============================================================
   App 图标 · iOS 圆角矩形 + 渐变底色 + 白色标签
   ============================================================ */
.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* v565：收紧间距，保证正方形格内图标+标签完整可见 */
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  /* v458：未读徽章绝对定位锚点（徽章放按钮最外层，不被 .app-icon 的 overflow:hidden 裁剪） */
  position: relative;
}
.app-item:active { transform: scale(0.92); }
.app-item:hover .app-icon {
  transform: translateY(-2px);
}
.app-item .app-icon {
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.app-icon {
  /* 填满所在网格列（最多 var(--icon-size)），让图标更大、横向间隔更紧凑，贴近真手机 */
  width: 100%;
  max-width: var(--icon-size, 62px);
  aspect-ratio: 1 / 1;
  border-radius: var(--icon-radius, 22%);
  /* v398：overflow:hidden 保证自定义图片（idb/http）也被圆角裁剪，
     img 的 border-radius:inherit 作双保险；不加会导致方形图片溢出圆角 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* v562：浅色底 + 深灰细线字形（韩系清淡） */
  color: #4F4F4F;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}
.app-icon::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  /* v561：极简哑光——仅保留顶部 4% 微光，去果冻 */
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.app-icon > * { position: relative; z-index: 2; }
.app-icon svg, .dock-icon svg { width: 56%; height: 56%; }
/* idb 自定义图标占位（渲染后被 <img> 替换） */
.app-icon-idb-placeholder { position: relative; z-index: 2; }

/* v565：统一低饱和灰阶（韩系黑白灰）——所有应用同一套灰，自定义图标可完全覆盖 */
.app-icon.wechat,
.app-icon.mail,
.app-icon.sms,
.app-icon.anniv,
.app-icon.album,
.app-icon.settings,
.app-icon.worldbook,
.app-icon.mask,
.app-icon.switch-offline,
.phone-shell .app-icon.music,
.app-icon.rednote,
.app-icon.taobao,
.app-icon.regex,
.app-icon.moments,
.app-icon.wallet,
.app-icon.diary {
  background: linear-gradient(160deg, #E4E4E5 0%, #CCCCCD 100%);
}

/* 桌面/iPad 图标更大时 SVG 等比放大 */
.phone-shell.pad-layout .app-icon svg,
:root[data-display-mode="phone-shell"] .app-icon svg {
  width: 58%;
  height: 58%;
}

/* 图标下方小字标签（v541：浅色壁纸 → 深灰小字；v561：墨灰） */
.app-label {
  font-size: var(--label-size, 11px);
  font-weight: 400;
  color: rgba(52, 52, 52, 0.92);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  letter-spacing: 0.4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 自定义壁纸 → 白字；深色模式 → 白字 */
.phone-shell.has-custom-wallpaper .app-label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.97);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .app-label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-label {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
}

.app-icon-wrap {
  /* v475 修复：v472 加 inline-flex 让 .app-icon 的 width:100% 基准变成 wrap 内容（SVG ~30px），
     主屏图标实际只有 28×28px、20px 圆角 → 看起来"变圆了"。
     修复：wrap 占满 .app-item（最多 icon-size 正方形），app-icon 填满 wrap */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--icon-size, 62px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  margin: 0 auto;
}
/* app-icon 现在相对 wrap，wrap 有明确宽高 → app-icon 恢复方形 */
.app-icon-wrap > .app-icon {
  width: 100%;
  height: 100%;
}

/* 未读徽章（iOS 红点，白描边） */
.app-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  z-index: 10;
  box-shadow: 0 2px 6px rgba(220, 80, 80, 0.4);
  pointer-events: none;
}

/* ============================================================
   Dock · 毛玻璃（backdrop-filter）+ 4 图标（iOS 无标签）
   ============================================================ */
.phone-dock {
  position: relative;
  z-index: 2;
  margin: 8px 12px 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.46);
  -webkit-backdrop-filter: blur(36px) saturate(150%);
  backdrop-filter: blur(36px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(90, 84, 74, 0.14);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
/* iOS Dock：图标下方不显示文字标签 */
.phone-dock .app-label { display: none; }
.phone-dock .app-item { gap: 0; }
.phone-dock .app-icon,
.phone-dock .app-icon-wrap { max-width: 60px; }
.phone-dock .app-icon { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }

/* 深色主题 Dock
   （!important + 更高特异性：触屏端 ios-fix.css 的浅色 Dock 用 !important 覆盖，
     但它的暗色变体只认 [data-theme="dark"] 属性——系统深色（auto 模式）时漏网，
     这里用更高特异性压回去，保证暗色下 Dock 也是暗色毛玻璃） */
:root[data-theme="dark"] .phone-dock {
  background: rgba(28, 28, 32, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-dock {
    background: rgba(28, 28, 32, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-md);
  transition: transform var(--dur-fast) var(--ease-out);
}
.dock-item:active { transform: scale(0.92); }
.dock-item:hover .dock-icon {
  transform: translateY(-2px);
}
.dock-item .dock-icon {
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* 兼容旧引用（当前 JS 使用 .app-item 渲染 dock，.dock-icon 保留样式） */
.dock-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-md);
  position: relative;
}
.dock-icon::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
  z-index: 1;
}
.dock-icon > * { position: relative; z-index: 2; }

.dock-icon.settings  { background: linear-gradient(135deg, #A8A29E 0%, #C9C3B6 100%); }
.dock-icon.worldbook { background: linear-gradient(135deg, #8A7355 0%, #B89976 100%); }
.dock-icon.mask      { background: linear-gradient(135deg, #6B7B8A 0%, #95A5B5 100%); }
.dock-icon.switch-offline { background: linear-gradient(135deg, #5A7363 0%, #8FA89A 100%); }

.dock-label {
  font-size: 10px;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* —— Home indicator（浅色壁纸 → 深灰短条；自定义壁纸/深色 → 白色） —— */
.phone-home-indicator {
  position: relative;
  z-index: 2;
  width: 110px;
  height: 5px;
  /* v561：墨灰两端渐隐 */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
  border-radius: var(--r-full);
  margin: 0 auto calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 5px);
  /* v396：iOS safe-area 补偿——home indicator 下移到安全区上方，
     否则 dock 内容底部被 home indicator 区域（iOS 底部 34px）覆盖 */
  flex-shrink: 0;
}
.phone-shell.has-custom-wallpaper .phone-home-indicator {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .phone-home-indicator {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-home-indicator {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
}

/* —— 切换线下过渡 —— */
.phone-shell.switching {
  animation: phoneSwitchOut 0.5s var(--ease-in-out) forwards;
}

@keyframes phoneSwitchOut {
  to {
    transform: scale(0.9);
    opacity: 0;
    filter: blur(8px);
  }
}

/* —— char 切换浮层 —— */
.char-switcher {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.4);
  z-index: 800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}
.char-switcher.active {
  opacity: 1;
  pointer-events: auto;
}
.char-switcher-sheet {
  background: var(--bg-elevated);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px 16px 32px;
  width: 100%;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.char-switcher.active .char-switcher-sheet {
  transform: translateY(0);
}
.char-switcher-title {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.char-switcher-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.char-switcher-item:hover { background: var(--bg-soft); }
.char-switcher-item.selected {
  background: var(--accent-soft);
}
.char-switcher-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.char-switcher-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.char-switcher-item-name {
  flex: 1;
  font-size: 15px;
  color: var(--text);
}

/* —— 照片选择浮层 —— */
.photo-picker {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.4);
  z-index: 800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}
.photo-picker.active {
  opacity: 1;
  pointer-events: auto;
}
.photo-picker-sheet {
  background: var(--bg-elevated);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px 16px 32px;
  width: 100%;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.photo-picker.active .photo-picker-sheet {
  transform: translateY(0);
}
.photo-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.photo-picker-item {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 3px solid transparent;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast), transform var(--dur-fast);
}
.photo-picker-item.loading {
  background: var(--bg-soft);
  filter: none;
  animation: photoPickerPulse 1.2s ease-in-out infinite;
}
@keyframes photoPickerPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}
.photo-picker-item:hover { transform: scale(0.96); }
.photo-picker-item.selected {
  border-color: var(--accent);
}

/* ============================================================
   主屏编辑模式 · 长按进入 · app 拖拽排序
   ============================================================ */

/* 编辑模式：app 抖动（iOS jiggle） */
.phone-shell.edit-mode .app-item {
  animation: appShake 0.5s ease-in-out infinite;
  animation-delay: var(--shake-delay, 0s);
  will-change: transform;
}
.phone-shell.edit-mode .app-item:nth-child(2n)  { --shake-delay: 0.08s; }
.phone-shell.edit-mode .app-item:nth-child(3n)  { --shake-delay: 0.16s; }
.phone-shell.edit-mode .app-item:nth-child(4n)  { --shake-delay: 0.04s; }
.phone-shell.edit-mode .app-item:nth-child(5n)  { --shake-delay: 0.12s; }
/* Dock 图标同样抖动（iOS 行为） */
.phone-shell.edit-mode .phone-dock .app-item {
  animation: appShake 0.5s ease-in-out infinite;
  animation-delay: var(--shake-delay, 0s);
  will-change: transform;
}

@keyframes appShake {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-2deg); }
  40%      { transform: rotate(2deg); }
  60%      { transform: rotate(-1.4deg); }
  80%      { transform: rotate(1.4deg); }
}

/* 编辑模式下禁用 app-item 的 :active 缩放与 hover 上浮，避免与抖动冲突 */
.phone-shell.edit-mode .app-item:active { transform: none; }
.phone-shell.edit-mode .app-item:hover .app-icon {
  transform: none;
}

/* 移除角标（编辑模式下显示） */
.app-remove-badge {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  align-items: center;
  justify-content: center;
  z-index: 11;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: auto;
}
.app-remove-badge svg {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2.4;
}
.phone-shell.edit-mode .app-remove-badge {
  display: flex;
}

/* 编辑模式下 dock 也允许 wrap，避免 dock 太挤 */
.phone-shell.edit-mode .phone-dock {
  overflow: visible;
}

/* 拖拽中的 ghost（跟随指针；transform 定位走合成器，不触发重排） */
.dragging-ghost {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
  z-index: 99999;
  opacity: 0.94;
  will-change: transform;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.28));
  animation: none !important;
  margin: 0 !important;
  transition: none !important;
}
.dragging-ghost .app-remove-badge { display: none !important; }
.dragging-ghost .widget-size-ctl { display: none !important; }

/* 拖拽源（被拖动的原元素）半透明 */
.app-item.dragging-source {
  opacity: 0.25;
  animation: none !important;
  transform: none !important;
}

/* drop target 高亮（v562：整格呼吸描边，拖到组件/应用上直观可见） */
.grid-cell.drop-target .app-item,
.grid-cell.drop-target .widget-unit,
.app-item.drop-target,
.widget-unit.drop-target {
  outline: none;
  border-radius: 18px;
  animation: dropPulse 0.8s ease-in-out infinite !important;
}
@keyframes dropPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(0, 0, 0, 0.12);
  }
  50% {
    box-shadow: 0 0 0 3px var(--accent), 0 0 26px rgba(0, 0, 0, 0.20);
  }
}

/* —— Widget 编辑模式 / 拖拽 —— */
/* 编辑模式：widget 抖动 */
.phone-shell.edit-mode .widget-unit {
  animation: appShake 0.5s ease-in-out infinite;
  animation-delay: var(--shake-delay, 0s);
  will-change: transform;
}
.phone-shell.edit-mode .widget-unit:nth-child(2n) { --shake-delay: 0.08s; }
.phone-shell.edit-mode .widget-unit:nth-child(3n) { --shake-delay: 0.16s; }
.phone-shell.edit-mode .widget-unit:nth-child(4n) { --shake-delay: 0.04s; }
.phone-shell.edit-mode .widget-unit:nth-child(5n) { --shake-delay: 0.12s; }

/* widget 移除角标（编辑模式下显示） */
.widget-remove-badge {
  display: none;
  /* v397：z-index 提到 widget 内部所有 absolute 元素之上（photo img / sizeCtl 等），
     否则 badge 被覆盖 → 「看得见但点不到」即"小组件删除不了"。 */
  z-index: 40;
  /* v566：角标统一定位在组件【内部】右上角——组件外层有 overflow 裁切，
     悬在外部（top:-6px）会被切掉一半（删除键不完整、点不到） */
  top: 6px !important;
  right: 6px !important;
}
.phone-shell.edit-mode .widget-remove-badge {
  display: flex;
  pointer-events: auto; /* v397：强制确保可点击（被兄弟 absolute 元素遮挡时也响应） */
}

/* widget 拖拽中：source 半透明 */
.widget-unit.dragging-source {
  opacity: 0.25;
  animation: none !important;
  transform: none !important;
}

/* widget drop target 高亮（统一用圆环呼吸光，见 .widget-unit.drop-target 上方的 pulse 动画） */
.widget-unit.drop-target {
  box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(0, 0, 0, 0.12);
}

/* widget ghost（跟随指针） */
.dragging-ghost.widget-ghost {
  border-radius: var(--r-lg);
}

/* 编辑模式下禁用内部交互（点击由 JS 兜底，避免误触） */
.phone-shell.edit-mode .weather-hero-refresh,
.phone-shell.edit-mode .widget-photo img,
.phone-shell.edit-mode .widget-photo-empty,
.phone-shell.edit-mode .widget-anniv-list {
  pointer-events: none;
}

/* v559：编辑模式下图标/组件禁止浏览器接管触摸手势（否则拖到一半被系统滚动打断 = 拖不动）。
   touch-action:none 让 pointermove 全程归拖拽逻辑所有。 */
.phone-shell.edit-mode .app-item,
.phone-shell.edit-mode .widget-unit,
.phone-shell.edit-mode .phone-dock .app-item {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 编辑模式底部条（iOS 深色玻璃工具栏） */
.phone-edit-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.phone-edit-overlay.active {
  pointer-events: none;
  opacity: 1;
  background: transparent;
}
/* 编辑模式底部条单独接收事件（按钮可点） */
.phone-edit-overlay.active .phone-edit-bar {
  pointer-events: auto;
}

.phone-edit-bar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  max-width: calc(var(--phone-w, 100vw) - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  /* v541：浅色低饱和 → 奶白玻璃工具栏（深色模式还原为深色玻璃） */
  background: rgba(252, 251, 248, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 36px rgba(70, 64, 56, 0.20);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
:root[data-theme="dark"] .phone-edit-bar {
  background: rgba(28, 28, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-edit-bar {
    background: rgba(28, 28, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
}
.phone-edit-bar::-webkit-scrollbar { display: none; }
.phone-edit-overlay.active .phone-edit-bar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.phone-edit-bar-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(58, 56, 52, 0.8);
  padding-right: 8px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
:root[data-theme="dark"] .phone-edit-bar-title {
  color: rgba(255, 255, 255, 0.85);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-edit-bar-title {
    color: rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }
}

.phone-edit-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  /* v559：胶囊玻璃按钮，顶部受光 + 微投影 */
  background: rgba(255, 255, 255, 0.72);
  color: #3A3834;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(70, 64, 56, 0.10);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.phone-edit-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 12px rgba(70, 64, 56, 0.16);
}
.phone-edit-btn:active { transform: scale(0.94); }
.phone-edit-btn svg { width: 14px; height: 14px; }
.phone-edit-btn#editFinish {
  /* v561：完成 = 主操作，墨黑渐变 */
  background: linear-gradient(165deg, #3A3A3A 0%, #1C1C1C 100%);
  color: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.22);
}
.phone-edit-btn#editFinish:hover {
  background: linear-gradient(165deg, #2C2C2C 0%, #111111 100%);
}
:root[data-theme="dark"] .phone-edit-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.24);
}
:root[data-theme="dark"] .phone-edit-btn:hover { background: rgba(255, 255, 255, 0.22); }
:root[data-theme="dark"] .phone-edit-btn#editFinish {
  /* v561：深色模式主按钮 = 白，韩系极简 */
  background: linear-gradient(165deg, #FFFFFF 0%, #E6E6E6 100%);
  color: #111111;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .phone-edit-btn#editFinish:hover { background: linear-gradient(165deg, #F2F2F2 0%, #D4D4D4 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone-edit-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 2px 8px rgba(0, 0, 0, 0.24);
  }
  :root:not([data-theme="light"]) .phone-edit-btn:hover { background: rgba(255, 255, 255, 0.22); }
  :root:not([data-theme="light"]) .phone-edit-btn#editFinish {
    background: linear-gradient(165deg, #FFFFFF 0%, #E6E6E6 100%);
    color: #111111;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 4px 14px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme="light"]) .phone-edit-btn#editFinish:hover { background: linear-gradient(165deg, #F2F2F2 0%, #D4D4D4 100%); }
}

/* ============================================================
   手机端（≤768px）：iPhone 主屏紧凑化，把空间还给 App 网格
   ============================================================ */
@media (max-width: 768px) {
  /* v395：手机端 widget 尺寸压缩——把空间还给 App 网格。
     v562：square(2×2) 由网格行高决定，不设 min-height */
  .ws-large { min-height: 0; } /* v565：行高由正方形网格决定 */
  /* v585fix：手机端 widget 高度跟随正方形网格行高，不再写死 88px/76px——
     小屏行高可能不足 88px，写死会导致组件溢出、与下一行堆叠、应用区被顶上去 */
  .ws-medium { min-height: 0; }
  .ws-small { min-height: 0; }
  .ws-square { min-height: 0; }

  /* 状态栏 iPhone 化：时间靠左、紧凑 */
  .phone-statusbar {
    padding: 10px 20px 2px;
    padding-top: calc(2px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
    font-size: 15px;
  }

  /* 内容区更紧凑 */
  .phone-content {
    padding: 4px 14px 2px;
    gap: 8px;
  }

  /* 天气组件更紧凑 */
  .widget-weather-hero {
    padding: 8px 10px;
    gap: 6px;
  }
  .weather-hero-icon { width: 34px; height: 34px; }
  .weather-hero-temp { font-size: 20px; }
  .weather-hero-desc { font-size: 11px; }
  .weather-hero-refresh { width: 26px; height: 26px; }
  .weather-hourly { padding-top: 6px; }
  .weather-hourly-item { min-width: 32px; padding: 2px 1px; gap: 2px; }
  .weather-hourly-icon svg { width: 13px; height: 13px; }

  /* 时间组件：保持居中大字（v562 无边框样式，移动端不压缩回小字） */
  .widget-time { gap: 4px; }
  .widget-time-clock { font-size: 48px; }
  .ws-square .widget-time-clock { font-size: 64px; }
  .ws-large .widget-time-clock { font-size: 58px; }
  .widget-time-date { margin-top: 2px; font-size: 11px; }

  /* 照片 + 纪念日：均为正方形，与图片并排一致 */
  .widget-pair { gap: 8px; }
  .widget-pair .widget-photo { aspect-ratio: 1; }
  .widget-pair .widget-anniv { padding: 10px; aspect-ratio: 1; }
  .widget-anniv-header { margin-bottom: 6px; }
  .widget-anniv-days { font-size: 26px; }

  /* 应用网格：iPhone 4 列、图标 60px */
  .phone-shell { --icon-size: 60px; --slot-h: 78px; }
  .page-apps { gap: var(--grid-gap-y) 4px; padding: 2px 2px 2px; }
  .app-page { padding: 4px 2px 2px; }

  /* 应用区保底高度（至少能放 1 行图标） */
  .phone-apps-right { min-height: 120px; }

  /* v396：Dock 安全区补偿——padding-bottom 加 safe-area，
     让 dock 的图标/label 内容上移到 home indicator 上方 */
  .phone-dock {
    margin-bottom: 0;
    padding-bottom: calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 6px);
  }
  /* Dock 与悬浮球(Home Indicator)贴底，去除底部白边 */
  .phone-dock { margin-bottom: 0; }
  .phone-home-indicator { margin-bottom: 0; }

  /* Dock 图标略大于网格（iOS 视觉） */
  .phone-dock .app-icon,
  .phone-dock .app-icon-wrap { max-width: 58px; }

  /* 编辑模式工具栏抬到 Dock 上方（不遮挡 dock 图标，iOS 抖动模式观感） */
  .phone-edit-bar {
    bottom: calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 84px);
  }
}

/* ============================================================
   中屏（≤900px，含笔记本小窗口）：非 Today View 时压缩 widget 高度
   ============================================================ */
@media (max-width: 900px) and (min-width: 769px) {
  .phone-shell:not(.pad-layout) .ws-large { min-height: 0; }
  /* v585fix：跟随网格行高，避免写死高度导致小组件与下一行重叠 / 主屏整体偏移 */
  .phone-shell:not(.pad-layout) .ws-medium { min-height: 0; }
  .phone-shell:not(.pad-layout) .ws-small { min-height: 0; }
  .phone-shell:not(.pad-layout) .ws-square { min-height: 0; }
  .phone-shell:not(.pad-layout) .widget-time-clock { font-size: 36px; }
  .phone-shell:not(.pad-layout) .ws-square .widget-time-clock { font-size: 44px; }
  .phone-shell:not(.pad-layout) .ws-large .widget-time-clock { font-size: 40px; }
  .phone-shell:not(.pad-layout) .weather-hero-temp { font-size: 16px; }
  .phone-shell:not(.pad-layout) .weather-hero-icon { width: 28px; height: 28px; }
  .phone-shell:not(.pad-layout) .widget-weather-hero { padding: 6px 8px; gap: 4px; }
  .phone-shell:not(.pad-layout) .widget-time { padding: 6px 10px; gap: 2px; }
  .phone-shell:not(.pad-layout) .widget-anniv-days { font-size: 16px; }
  .phone-shell:not(.pad-layout) .widget-anniv-header { margin-bottom: 4px; }
  .phone-shell:not(.pad-layout) .widget-photo-label { font-size: 9px; padding: 2px 6px; }
}

/* ============================================================
   v425：固定占位网格 + 空态 + 翻页隐藏小组件（手机桌面原理）
   ============================================================ */
/* 应用网格固定占位：每页固定 cols×rows 格位，空位保留（真手机桌面原理，
   无论 4/5/6 列、应用多少个，位置恒定不跳动） */
.app-slot-empty {
  min-height: var(--slot-h, 78px); /* 与 .app-item（icon+label）等高，保证空位占住行高 */
}

/* 主屏空空（应用删光） */
.app-pages-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
  line-height: 1.8;
  padding: 24px;
}

/* 小组件只属于第一页：翻到第二页时手机端隐藏 widgets 区（回第一页恢复） */
@media (max-width: 768px) {
  .phone-shell.widgets-hidden .phone-widgets-left {
    display: none;
  }
}

/* ============================================================
   v534：补齐历史缺失样式
   ============================================================ */
.chat-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary, #888);
  font-size: 13px;
  line-height: 1.6;
}

/* ============================================================
   v541：韩系主屏 · 新小组件（角色 / 待办 / 便签 / 邮件 / 日记）
   ============================================================ */
/* —— 通用小组件头部（小图标 + 宽字距小标） —— */
.widget-mini-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 1.6px;
  flex-shrink: 0;
}
.widget-mini-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  flex-shrink: 0;
}
.widget-mini-glyph svg { width: 14px; height: 14px; }

/* —— 角色小组件：头像 + 名字 + 换人按钮 —— */
.widget-char {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.widget-char:active { transform: scale(0.98); }
.widget-char-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(90, 84, 74, 0.14);
}
.widget-char-avatar svg { width: 22px; height: 22px; opacity: 0.7; }
.widget-char-avatar img { width: 100%; height: 100%; object-fit: cover; }
.widget-char-info { flex: 1; min-width: 0; }
.widget-char-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-char-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 3px;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-char-switch {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.widget-char-switch:hover {
  transform: rotate(45deg);
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.widget-char-switch svg { width: 15px; height: 15px; }

/* —— 待办小组件 —— */
.widget-todo {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
}
.widget-todo-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.widget-todo-list::-webkit-scrollbar { display: none; }
.widget-todo-empty {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 8px 2px;
  letter-spacing: 0.5px;
}
.widget-todo-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  border-radius: 10px;
  transition: background var(--dur-fast);
}
.widget-todo-item:hover { background: rgba(0, 0, 0, 0.04); }
:root[data-theme="dark"] .widget-todo-item:hover { background: rgba(255, 255, 255, 0.06); }
.widget-todo-check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.widget-todo-item.done .widget-todo-check {
  background: #9AA68F;
  border-color: #9AA68F;
}
.widget-todo-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-todo-item.done .widget-todo-text {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}
.widget-todo-del {
  display: none;
  color: var(--text-tertiary);
  opacity: 0.7;
  cursor: pointer;
  flex-shrink: 0;
}
.widget-todo-del svg { width: 12px; height: 12px; }
.widget-todo-item:hover .widget-todo-del { display: inline-flex; }
.widget-todo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  border-radius: 12px;
  padding: 7px 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.widget-todo-add svg { width: 12px; height: 12px; }
.widget-todo-add:hover {
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.03);
}

/* —— 便签小组件：信纸横线 + 衬线手写感 —— */
.widget-note {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.widget-note:active { transform: scale(0.98); }
.widget-note-text {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 21px,
    rgba(120, 110, 95, 0.12) 21px,
    rgba(120, 110, 95, 0.12) 22px
  );
}
.widget-note-text.empty { color: var(--text-tertiary); }
:root[data-theme="dark"] .widget-note-text {
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 21px,
    rgba(255, 255, 255, 0.08) 21px,
    rgba(255, 255, 255, 0.08) 22px
  );
}

/* —— 邮件小组件 —— */
.widget-mail {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.widget-mail:active { transform: scale(0.98); }
.widget-mail-badge {
  margin-left: auto;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: #D08A80;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.widget-mail-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-mail-subject {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— 日记小组件 —— */
.widget-diary {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.widget-diary:active { transform: scale(0.99); }
.widget-diary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-diary-snippet {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* —— 新小组件 small 尺寸收窄 —— */
.ws-small .widget-char { padding: 8px; gap: 8px; }
.ws-small .widget-char-avatar { width: 34px; height: 34px; border-radius: 12px; }
.ws-small .widget-char-name { font-size: 12px; }
.ws-small .widget-char-sub { display: none; }
.ws-small .widget-char-switch { width: 24px; height: 24px; }
.ws-small .widget-mini-head span:last-child { display: none; }
.ws-small .widget-todo { padding: 8px; gap: 4px; }
.ws-small .widget-todo-add span { display: none; }
.ws-square .widget-todo-add span { display: inline; }
.ws-small .widget-todo-add { padding: 5px; }
.ws-small .widget-note { padding: 8px 10px; gap: 4px; }
.ws-small .widget-note-text { font-size: 11px; background: none; }
.ws-small .widget-mail { padding: 8px 10px; gap: 3px; }
.ws-small .widget-mail-subject { display: none; }
.ws-small .widget-mail-badge { display: none; }
.ws-small .widget-diary { padding: 10px 12px; gap: 4px; }
.ws-small .widget-diary-snippet { display: none; }

/* —— 弹层输入（待办 / 便签编辑器） —— */
.widget-sheet-input-wrap { padding: 4px 2px 14px; }
.widget-sheet-input,
.widget-sheet-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  font-family: var(--font-body);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.widget-sheet-input:focus,
.widget-sheet-textarea:focus {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
.widget-sheet-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
  letter-spacing: 0.3px;
}
.widget-sheet-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--r-md);
  background: #3A3834;
  color: #FBF9F5;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.widget-sheet-btn:hover { background: #2C2A27; }
.widget-sheet-btn:active { transform: scale(0.98); }

/* ============================================================
   v559 自定义排版 & 主屏质感增强
   ============================================================ */

/* —— 图标标签开关（设置 → 主屏排版 → 图标标签） —— */
.phone-shell.hide-labels .app-label { display: none; }
.phone-shell.hide-labels .app-item { gap: 4px; }

/* —— 主屏进场动画（每次回到主屏轻微淡入上浮，不喧宾夺主） —— */
.phone-view > .phone-shell {
  animation: phoneEntrance 0.4s var(--ease-out) both;
}
@keyframes phoneEntrance {
  from { opacity: 0.4; transform: scale(0.985) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* 编辑模式/拖拽时禁用进场动画，避免干扰抖动与拖拽 */
.phone-shell.edit-mode { animation: none !important; }

/* —— 桌面/iPad Dock 内高光（非触屏端；触屏端由 ios-fix 的 !important 接管） —— */
@media (min-width: 769px) {
  :root[data-display-mode="phone-shell"] .phone-dock,
  .phone-shell.pad-layout .phone-dock {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 18px 44px rgba(0, 0, 0, 0.16);
  }
}

/* —— 小组件悬停轻微上浮（桌面/iPad 有鼠标时） —— */
@media (hover: hover) {
  .phone-shell:not(.edit-mode) .widget-weather-hero:hover,
  .phone-shell:not(.edit-mode) .widget-time:hover,
  .phone-shell:not(.edit-mode) .widget-anniv:hover,
  .phone-shell:not(.edit-mode) .widget-char:hover,
  .phone-shell:not(.edit-mode) .widget-todo:hover,
  .phone-shell:not(.edit-mode) .widget-note:hover,
  .phone-shell:not(.edit-mode) .widget-mail:hover,
  .phone-shell:not(.edit-mode) .widget-diary:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 12px 28px rgba(0, 0, 0, 0.08);
  }
}

/* —— 主屏排版浮层（编辑模式 → 布局） —— */
.layout-group {
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
}
.layout-group:last-of-type { border-bottom: none; }
.layout-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 1.2px;
  margin-bottom: 9px;
}
.layout-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.layout-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 6px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.layout-opt:hover { background: var(--surface-hover); }
.layout-opt.active {
  /* v561：墨黑 */
  background: linear-gradient(165deg, #3A3A3A 0%, #1C1C1C 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.layout-sheet-footer {
  display: flex;
  gap: 10px;
  padding-top: 14px;
}
.layout-reset,
.layout-done {
  flex: 1;
  padding: 11px 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.layout-reset {
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.layout-reset:hover { background: var(--surface-hover); }
.layout-done {
  background: linear-gradient(165deg, #3A3A3A 0%, #1C1C1C 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.layout-reset:active, .layout-done:active { transform: scale(0.96); }

/* —— 拖拽 ghost 内文字保持不透明（克隆自 jiggle 网格，避免半透明叠影） —— */
.dragging-ghost .app-label,
.dragging-ghost .widget-mini-head,
.dragging-ghost .widget-time-clock { opacity: 1; }


/* ============================================================
   v581：全设备浏览器适配补充
   （小屏 320-340px / 横屏低高度 / 桌面窄窗口兜底）
   ============================================================ */
/* 超小屏：收紧网格与 Dock 间距，避免图标挤压 */
@media (max-width: 340px) {
  .page-apps { --grid-gap-x: 6px !important; --grid-gap-y: 6px !important; }
  .phone-dock { margin: 6px 8px 8px; padding: 6px; border-radius: 22px; gap: 4px; }
  .phone-widgets-left { gap: 6px; }
  .widget-unit { border-radius: 14px; }
  .app-icon, .app-icon-wrap { max-width: 54px; }
}

/* 横屏低高度（手机横持）：压缩顶部/底部留白，让网格拿到更多高度 */
@media (orientation: landscape) and (max-height: 480px) {
  .phone-dock { margin: 4px 10px 6px; padding: 6px; }
  .phone-content { padding-top: 2px !important; }
  .phone-widgets-left { gap: 6px; }
  .app-page-dots { margin-top: 2px !important; }
}

/* 桌面窄窗口（<769px 但非触屏）：网格间隙缩小，接近手机观感 */
@media (min-width: 480px) and (max-width: 768px) and (pointer: fine) {
  .page-apps { --grid-gap-x: 12px !important; --grid-gap-y: 12px !important; }
}