/* ================================
   Luna Phone — style.css
================================ */

:root {
  --status-h: 52px;
  --dock-h: 76px;
  --dock-bottom: 20px;
  --dock-gap: 12px;
  --content-bottom-pad: calc(var(--dock-h) + var(--dock-bottom) + var(--dock-gap));
  --dots-bottom: calc(var(--dock-h) + var(--dock-bottom) + 6px);
}

@media (max-height: 750px) {
  :root { --dock-h: 68px; --dock-bottom: 14px; --dock-gap: 10px; }
}
@media (max-height: 680px) {
  :root { --dock-h: 62px; --dock-bottom: 10px; --dock-gap: 8px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: block;
  background: #e8eaf0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overscroll-behavior: none;
}


/* ================================
   手机外框
================================ */
.luna-wrap {
  display: flex;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.luna-frame {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  /* 静态基底：比之前更有层次的浅灰渐变——顶部珍珠白、底部收到中灰，
     给上面的动态光斑留出足够的明暗反差舞台，不然光斑颜色和底色太接近，
     视觉上等于"没有效果"。 */
  background:
    radial-gradient(ellipse 75% 60% at 15% 6%, #ffffff 0%, transparent 58%),
    radial-gradient(ellipse 70% 55% at 90% 96%, #b8b9be 0%, transparent 58%),
    linear-gradient(160deg, #f6f6f7 0%, #dcdce0 48%, #c4c5ca 100%);
}

/* ---- 华丽壁纸：两层缓慢漂移的柔光 + 一层极慢旋转的丝绸光环 ----
   性能约束（移动端不发烫的关键）：
   1) 只对 background-position 和 transform 做动画——这两者是浏览器唯一能
      交给合成器（GPU）处理、不触发布局/重绘的属性，CPU 几乎零占用。
   2) 绝不对 filter / box-shadow / backdrop-filter 做逐帧动画——这几个
      属性即使只改一点点也会强制整层重新栅格化，是手机发烫卡顿的头号原因；
      本壁纸里唯一的 filter:blur() 是静态值，只计算一次。
   3) 动画时长拉长到 22~40 秒一个周期，且用 ease-in-out 而不是 linear，
      运动本身看起来仍然"华丽流动"，但每秒实际变化幅度很小，帧间差异小，
      对省电模式/低端设备也更友好。
   4) 图层数量克制在 3 层以内，每层都用大面积柔光（大半径、低对比度），
      避免小而多的高频动画元素（这类是安卓/iOS 上最容易导致 GPU 占用飙升的写法）。
*/
.luna-wallpaper-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.luna-wallpaper-fx::before,
.luna-wallpaper-fx::after {
  content: '';
  position: absolute;
  inset: -25%;
  will-change: background-position;
}
/* 图层一：亮白高光斑，在浅灰底上形成清晰可辨的"珍珠光泽"移动感，
   这次故意加大不透明度并保留清晰核心（不再整体过度模糊发灰）。 */
.luna-wallpaper-fx::before {
  background:
    radial-gradient(ellipse 40% 32% at 20% 25%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.3) 45%, transparent 68%),
    radial-gradient(ellipse 44% 36% at 78% 70%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 45%, transparent 66%);
  background-size: 150% 150%, 160% 160%;
  animation: lunaWpDriftA 30s ease-in-out infinite alternate;
  filter: blur(10px);
  opacity: 1;
}
/* 图层二：明显更深的炭灰光斑，制造真实的明暗层次交错——
   这是让整个壁纸"看起来在动"的关键层，去掉了 multiply 混合（之前会把它压得
   几乎看不见），改成 normal 混合 + 更高不透明度，直接、清晰地叠出流动的暗部。 */
.luna-wallpaper-fx::after {
  background:
    radial-gradient(ellipse 46% 38% at 84% 16%, rgba(120,122,130,0.65) 0%, transparent 62%),
    radial-gradient(ellipse 42% 34% at 10% 84%, rgba(100,102,112,0.55) 0%, transparent 60%);
  background-size: 155% 155%, 165% 165%;
  animation: lunaWpDriftB 36s ease-in-out infinite alternate;
  filter: blur(14px);
  opacity: 1;
}
@keyframes lunaWpDriftA {
  0%   { background-position: 0% 10%, 100% 90%; }
  50%  { background-position: 35% 45%, 65% 55%; }
  100% { background-position: 70% 15%, 30% 85%; }
}
@keyframes lunaWpDriftB {
  0%   { background-position: 100% 0%, 0% 100%; }
  50%  { background-position: 55% 40%, 45% 60%; }
  100% { background-position: 5% 85%, 95% 15%; }
}

/* 图层三：丝绸光环——用 conic-gradient 做一圈缓慢转动的高光带，
   只靠 transform:rotate 驱动（合成器专属属性，成本最低），
   转速放慢在一圈 46 秒，比之前更明显但依然不刺眼，
   是"华丽感"里流动光泽的主要来源之一。 */
.luna-wallpaper-sheen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  margin-left: -100vmax;
  margin-top: -100vmax;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255,255,255,0.16) 35deg,
    transparent 85deg,
    rgba(140,142,150,0.14) 165deg,
    transparent 225deg,
    rgba(255,255,255,0.13) 295deg,
    transparent 360deg
  );
  animation: lunaWpSheenSpin 46s linear infinite;
  will-change: transform;
}
@keyframes lunaWpSheenSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 极低性能设备 / 用户开启"减少动态效果"时：完全关闭动画，只留静态渐变，
   避免在这些设备上仍然强行播放动画造成负担。 */
@media (prefers-reduced-motion: reduce) {
  .luna-wallpaper-fx::before,
  .luna-wallpaper-fx::after,
  .luna-wallpaper-sheen,
  .luna-wp-moon,
  .luna-wp-orbit,
  .luna-wp-star,
  .luna-wp-constellation-line {
    animation: none !important;
  }
}

/* ================================
   Luna 主题元素层：呼应开机动画的月牙造型 + 星群 + 轨道环
   —— 这是让壁纸真正"有内容"而不只是抽象光斑的关键部分。
   动画依旧只碰 transform / opacity，性能开销和上面的柔光层同一量级。
================================ */
.luna-wp-elements {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- 大幅月牙水印：和开机动画同一条 SVG 轮廓，放大铺在屏幕右上角，
   半透明描边 + 极慢的呼吸缩放，是整个壁纸的视觉主角、也是"Luna"
   这个主题最直接的呼应。呼吸动画只用 transform:scale + opacity，成本极低。 ---- */
.luna-wp-moon {
  position: absolute;
  top: -6%;
  right: -10%;
  width: 68%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  opacity: 0.85;
  animation: lunaWpMoonBreathe 12s ease-in-out infinite;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 26px rgba(255,255,255,0.5));
}
.luna-wp-moon svg { width: 100%; height: 100%; display: block; }
@keyframes lunaWpMoonBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.78; }
  50%      { transform: scale(1.035) rotate(1.2deg); opacity: 0.92; }
}

/* 月牙内部的微光核心，呼应开机动画里的 core-glow，
   给月牙一个"发光源"而不是一条空描边。 */
.luna-wp-moon-core {
  position: absolute;
  top: 26%;
  left: 22%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 55%, transparent 75%);
  animation: lunaWpCoreGlow 8s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes lunaWpCoreGlow {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.22); opacity: 0.85; }
}

/* ---- 轨道环：一圈极细的虚线圆环围绕月牙缓慢公转，
   呼应"卫星轨道"意象，只用 transform:rotate 驱动。 ---- */
.luna-wp-orbit {
  position: absolute;
  top: -14%;
  right: -22%;
  width: 92%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px dashed rgba(90,90,100,0.22);
  animation: lunaWpOrbitSpin 90s linear infinite;
  will-change: transform;
}
.luna-wp-orbit::before {
  /* 轨道上的一颗"卫星"光点，随环一起转动 */
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0.3) 70%, transparent 100%);
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.55);
}
@keyframes lunaWpOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- 星群：大小不一、明暗错落的星点，各自独立的呼吸闪烁节奏，
   分布在屏幕中下段（避开月牙区域和图标区），填补"纯背景没有细节"的空白。
   每颗星只用 opacity + scale 做动画，单个元素成本极小，
   数量克制在个位数，避免"满屏粒子"式的高频重绘写法。 ---- */
.luna-wp-star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0.35) 60%, transparent 100%);
  will-change: opacity, transform;
}
.luna-wp-star-1 { width: 4px;   height: 4px;   top: 16%; left: 22%; box-shadow: 0 0 8px rgba(255,255,255,0.7);  animation: lunaWpTwinkle 4.2s ease-in-out infinite; }
.luna-wp-star-2 { width: 2.4px; height: 2.4px; top: 30%; left: 68%; box-shadow: 0 0 6px rgba(255,255,255,0.6);  animation: lunaWpTwinkle 3.4s ease-in-out infinite; animation-delay: 0.6s; }
.luna-wp-star-3 { width: 3px;   height: 3px;   top: 48%; left: 12%; box-shadow: 0 0 7px rgba(255,255,255,0.6);  animation: lunaWpTwinkle 5s ease-in-out infinite; animation-delay: 1.4s; }
.luna-wp-star-4 { width: 2px;   height: 2px;   top: 58%; left: 82%; box-shadow: 0 0 5px rgba(255,255,255,0.55); animation: lunaWpTwinkle 3.8s ease-in-out infinite; animation-delay: 2.1s; }
.luna-wp-star-5 { width: 3.6px; height: 3.6px; top: 68%; left: 40%; box-shadow: 0 0 8px rgba(255,255,255,0.65); animation: lunaWpTwinkle 4.6s ease-in-out infinite; animation-delay: 0.9s; }
.luna-wp-star-6 { width: 2.2px; height: 2.2px; top: 78%; left: 70%; box-shadow: 0 0 6px rgba(255,255,255,0.6);  animation: lunaWpTwinkle 3.6s ease-in-out infinite; animation-delay: 1.8s; }
.luna-wp-star-7 { width: 2.6px; height: 2.6px; top: 40%; left: 90%; box-shadow: 0 0 6px rgba(255,255,255,0.55); animation: lunaWpTwinkle 4.4s ease-in-out infinite; animation-delay: 2.6s; }
.luna-wp-star-8 { width: 3.2px; height: 3.2px; top: 86%; left: 20%; box-shadow: 0 0 7px rgba(255,255,255,0.6);  animation: lunaWpTwinkle 5.2s ease-in-out infinite; animation-delay: 0.3s; }
@keyframes lunaWpTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.75); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ---- 星座连线：两组极细的连接线，把部分星点串成"星座"的意象，
   静态不参与动画（连线本身跟着星星的呼吸节奏已经足够有生气，
   再对线条本身做动画会增加不必要的重绘成本，性价比不高，故意省略）。 ---- */
.luna-wp-constellation-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,120,130,0.28), transparent);
  transform-origin: 0 0;
}
.luna-wp-constellation-line-1 { top: 30%; left: 22%; width: 27%;  transform: rotate(9deg); }
.luna-wp-constellation-line-2 { top: 48%; left: 12%; width: 30.5%; transform: rotate(14deg); }
.luna-wp-constellation-line-3 { top: 68%; left: 40%; width: 29%;  transform: rotate(-8deg); }

#appTransMask {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.96);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.32s cubic-bezier(0.4,0,0.2,1);
}

#wallpaperLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#wallpaperLayer img,
#wallpaperLayer video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.luna-bg-glow {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  pointer-events: none;
  z-index: 0;
}

/* ================================
   状态栏
================================ */
.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 22px 9px;
  z-index: 50;
}

.status-time {
  font-size: 15px;
  font-weight: 600;
  color: #2a2a40;
  letter-spacing: 0.2px;
}

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

.signal { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.signal i { display: block; width: 2.5px; border-radius: 1px; background: #3a3a55; opacity: 0.85; }
.signal i:nth-child(1) { height: 4px; }
.signal i:nth-child(2) { height: 7px; }
.signal i:nth-child(3) { height: 10px; }
.signal i:nth-child(4) { height: 13px; }

.battery { display: flex; align-items: center; gap: 3px; }
.bat-pct { font-size: 14px; font-weight: 600; color: #3a3a55; opacity: 0.85; }
.bat-shell { width: 24px; height: 12px; border: 1.5px solid rgba(55,55,80,0.5); border-radius: 3.5px; padding: 1.5px; position: relative; }
.bat-inner { width: 76%; height: 100%; border-radius: 1.5px; background: linear-gradient(90deg, #6ee7b7, #34d399); }
.bat-nub { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 2.5px; height: 5px; background: rgba(55,55,80,0.4); border-radius: 0 2px 2px 0; }

/* ================================
   pages-wrap
   宽度不再写死百分比——页面数量现在是动态的（用户可新增/删除页面），
   固定 300% 只够 3 页，会把第 4 页及以后的页面挤压变形。
   改为由 home-edit.js 按实际页数以像素动态设置 width / 每页宽度，
   这里只保留基础布局属性。
================================ */
.pages-wrap {
  position: absolute;
  top: var(--status-h);
  bottom: var(--content-bottom-pad);
  left: 0;
  display: flex;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
}

/* ================================
   App 网格 — 通用
   width 同理交给 JS 按帧宽动态设置（每页 = 100% 帧宽），
   不再依赖固定百分比。
================================ */
.app-grid {
  position: relative;
  flex-shrink: 0;
  height: 100%;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(68px, 9svh, 88px);
  align-content: start;
  gap: clamp(4px, 1svh, 10px) 4px;
  padding: 6px 12px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 5;
}

/* ================================
   page-1：4行4列，组件占满
================================ */
.app-grid.page-1 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  align-content: stretch;
  overflow: hidden;
  padding: 10px 12px;
  gap: 8px;
  box-sizing: border-box;
}

/* ================================
   page-2
================================ */
.app-grid.page-2 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-auto-rows: unset;
  overflow: hidden;
  align-content: stretch;
  height: 100%;
  padding: 10px 12px;
  gap: 8px;
  box-sizing: border-box;
}

/* ================================
   page-3
================================ */
.app-grid.page-3 {
grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  align-content: stretch;
  overflow: hidden;
  padding: 10px 12px;
  gap: 8px;
  box-sizing: border-box;
}

/* ================================
   page-4
   之前这里完全没有定义，page-4 会退回去用最上面那条
   笼统的 .app-grid 规则（grid-auto-rows 自动高度、不是固定 6 行），
   这就是 page-4 图标比例和拖拽越往下越出问题的根本原因——
   它的网格行数其实不是真正的 6 行，第 6 行/甚至第 5 行往下
   已经超出了实际存在的行轨道，越往下拖当然会拖不动/顶住。
   现在补齐，和 page-1/2/3 保持完全一致的 6 行 4 列比例。
================================ */
.app-grid.page-4 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  align-content: stretch;
  overflow: hidden;
  padding: 10px 12px;
  gap: 8px;
  box-sizing: border-box;
}

/* ================================
   天气时间组件
================================ */
.widget-time-weather {
  grid-column: 1 / -1;
  grid-row: 1 / 5;
  border-radius: 20px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.9),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 8px rgba(140,150,200,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wtw-top {
  flex: 3;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wtw-left {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid rgba(255,255,255,0.5);
}

.wtw-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(180,190,240,0.55) 0%, rgba(220,200,240,0.45) 100%);
  border: 2px solid rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wtw-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.wtw-date {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(55,55,90,0.6);
  font-family: 'Space Mono', monospace, sans-serif;
  text-transform: uppercase;
}

.wtw-time {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(30,30,60,0.88);
  line-height: 1;
}

.wtw-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(55,55,90,0.62);
  font-size: 11px;
  font-weight: 500;
}

.wtw-temp {
  font-size: 11px;
  font-weight: 600;
  color: rgba(55,55,90,0.7);
  margin-left: 4px;
}

.wtw-right {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.wtw-photo {
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  background: rgba(200,210,240,0.32);
  border: 1px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wtw-bottom {
  flex: 1;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.wtw-prog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wtw-prog-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(55,55,90,0.5);
  font-family: 'Space Mono', monospace, sans-serif;
}

.wtw-prog-pct {
  font-size: 10px;
  font-weight: 700;
  color: rgba(55,55,90,0.5);
  font-family: 'Space Mono', monospace, sans-serif;
}

.wtw-prog-track {
  height: 5px;
  border-radius: 99px;
  background: rgba(180,185,220,0.25);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5);
}

.wtw-prog-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(130,150,230,0.6) 0%, rgba(180,140,220,0.55) 100%);
  transition: width 0.8s ease;
}

.wtw-ticks {
  display: flex;
  justify-content: space-between;
}

.wtw-ticks span {
  font-size: 9px;
  color: rgba(55,55,90,0.38);
  font-family: 'Space Mono', monospace, sans-serif;
}

/* ================================
   液体玻璃图标 — 通用
================================ */
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-face {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow:
    0 2px 12px rgba(0,0,0,0.07),
    0 1px 3px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,1);
}

.app-face::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  background: none;
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  z-index: 2;
}

.app-face::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14%; right: 14%;
  height: 30%;
  background: none;
  pointer-events: none;
  z-index: 2;
}

.app:active .app-face { transform: scale(0.87); }

.app-face svg {
  width: 32px; height: 32px;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.app-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(38,38,60,0.82);
  text-align: center;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 66px;
}

/* ================================
   页面指示点
================================ */
.page-dots {
  position: absolute;
  bottom: var(--dots-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  align-items: center;
  z-index: 5;
}

.dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(70,70,110,0.22);
  transition: all 0.3s ease;
}

.dot.on {
  width: 17px;
  border-radius: 3px;
  background: rgba(70,70,110,0.52);
}

/* ================================
   Dock
================================ */
.luna-dock {
  position: absolute;
  bottom: var(--dock-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px));
  height: var(--dock-h);
  background: rgba(255,255,255,0.42);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 10px rgba(140,150,200,0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 11px;
  z-index: 10;
}

.dock-app {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dock-face {
  width: 58px; height: 58px;
  border-radius: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: transparent;
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.28),
    0 4px 18px rgba(0,0,0,0.07),
    0 1px 4px rgba(0,0,0,0.04);
}

.dock-face::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.03) 100%);
  border-radius: 17px 17px 0 0;
  z-index: 2;
  pointer-events: none;
}

.dock-app:active .dock-face { transform: scale(0.87); }

.dock-face svg {
  width: 27px; height: 27px;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* ================================
   Home bar
================================ */
.home-bar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 4px;
  background: rgba(70,70,110,0.2);
  border-radius: 2px;
}

/* ================================
   好友组件 — 2×2
================================ */
.widget-friends {
  grid-column: 1 / 3;
  grid-row: 5 / 7;
  border-radius: 20px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 8px rgba(140,150,200,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.widget-friends::before {
  content: '';
  position: absolute;
  top: -32px; right: -32px;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(150,140,210,0.16);
  pointer-events: none;
}

.widget-friends::after {
  content: '';
  position: absolute;
  bottom: -24px; left: -24px;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(130,180,230,0.14);
  pointer-events: none;
}

.fw-avatars {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 10px;
}

.fw-avatar-wrap {
  flex: 1;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 3px 10px rgba(140,150,200,0.15);
  background: linear-gradient(135deg, rgba(180,190,240,0.4), rgba(220,200,240,0.35));
  display: flex;
  align-items: center;
  justify-content: center;
}

.fw-avatar-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.fw-divider {
  width: 55%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,150,220,0.25), transparent);
  margin-top: 14px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.fw-names {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.fw-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(30,30,60,0.82);
  letter-spacing: 0.02em;
}

.fw-heart {
  font-size: 15px;
  color: rgba(210,100,140,0.7);
  line-height: 1;
}

.fw-bio {
  font-size: 11px;
  font-weight: 400;
  color: rgba(55,55,90,0.52);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.8;
  font-family: 'Space Mono', monospace;
  padding: 0 14px;
}

.fw-bio-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-quote {
  font-size: 16px;
  line-height: 1;
  color: rgba(150,140,210,0.22);
  font-family: Georgia, serif;
  position: absolute;
  top: -3px;
}

.fw-quote.left { left: 4px; }
.fw-quote.right { right: 4px; top: auto; bottom: -4px; }

.fw-dots {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(120,120,180,0.2);
}

.fw-dot.active {
  width: 14px;
  border-radius: 2px;
  background: rgba(120,120,180,0.45);
}

/* ================================
   右下角四个小app — 第5~6行 第3~4列
================================ */
.app-grid.page-1 .app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.app-grid.page-1 .app .app-face {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 8px rgba(140,150,200,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.app-grid.page-1 .app .app-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(38,38,60,0.82);
}

/* ================================
   个人资料组件 — page2 第1~2行
================================ */
.widget-profile {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  border-radius: 22px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 8px rgba(140,150,200,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.widget-profile::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(150,140,210,0.14);
  pointer-events: none;
}

.pw-capsule {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.38);
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 999px;
  padding: 10px 22px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  flex-shrink: 0;
}

.pw-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(180,190,240,0.5), rgba(220,200,240,0.45));
  border: 2px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.pw-name {
  font-size: 18px;
  font-weight: 700;
  color: rgba(25,25,50,0.85);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-bio {
  font-size: 11px;
  color: rgba(80,80,120,0.52);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.pw-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.pw-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex-shrink: 0;
}

.pw-photo {
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(180,190,240,0.35), rgba(220,200,240,0.28));
  border: 1.5px solid rgba(255,255,255,0.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 3px 10px rgba(140,150,200,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pw-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.app-grid.page-2 .app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.app-grid.page-2 .app .app-face {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 8px rgba(140,150,200,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.app-grid.page-2 .app .app-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(38,38,60,0.82);
}

/* ================================
   通知条组件 — page2 第4行 全4列
================================ */
.widget-notif {
  grid-column: 1 / -1;
  grid-row: 4;
  border-radius: 20px;
  background: rgba(255,255,255,0.24);
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(120,130,200,0.18),
    0 2px 8px rgba(120,130,200,0.10);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.widget-notif::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.88), transparent);
  pointer-events: none;
}

.widget-notif::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
}

.wn-thumb {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  border: 1.5px solid rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wn-thumb-l {
  background: linear-gradient(135deg, rgba(160,145,230,0.48), rgba(200,180,248,0.38));
}

.wn-thumb-r {
  background: linear-gradient(135deg, rgba(100,185,185,0.45), rgba(140,220,210,0.35));
}

.wn-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.wn-tag {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(60,60,110,0.35);
  text-transform: uppercase;
}

.wn-connector {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(140,130,210,0.35), rgba(140,130,210,0.12));
}

.wn-line-r {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(140,130,210,0.12), rgba(100,180,175,0.35));
}

.wn-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(140,130,210,0.45);
  flex-shrink: 0;
}

.wn-dot-r {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(100,180,175,0.45);
  flex-shrink: 0;
}

.wn-diamond {
  width: 6px; height: 6px;
  background: rgba(140,130,210,0.35);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.wn-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(20,20,50,0.84);
  text-align: center;
}

.wn-sub {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  color: rgba(55,55,90,0.50);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ================================
   好友对话组件 — page2 第5~6行 第1~2列
================================ */
.widget-duo {
  grid-column: 1 / 3;
  grid-row: 5 / 7;
  border-radius: 24px;
  background: rgba(255,255,255,0.24);
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(120,130,200,0.18),
    0 2px 8px rgba(120,130,200,0.10);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.widget-duo::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  pointer-events: none;
}

.wd-arc-bl {
  position: absolute;
  bottom: -70px; left: -70px;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(150,140,220,0.14);
  pointer-events: none;
}

.wd-arc-bl2 {
  position: absolute;
  bottom: -48px; left: -48px;
  width: 105px; height: 105px;
  border-radius: 50%;
  border: 1px solid rgba(150,140,220,0.10);
  pointer-events: none;
}

.wd-dots {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5px;
  pointer-events: none;
}

.wd-dots span {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(100,100,180,0.2);
  display: block;
}

.wd-wm {
  position: absolute;
  bottom: 9px; left: 14px;
  font-family: 'Space Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.14em;
  color: rgba(80,80,140,0.22);
  text-transform: uppercase;
  pointer-events: none;
}

.wd-avatars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
}

.wd-av-labels {
  position: absolute;
  top: -2px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.wd-av-label {
  font-family: 'Space Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  color: rgba(60,60,110,0.38);
  text-transform: uppercase;
}

.wd-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 4px 14px rgba(120,110,200,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wd-avatar-l {
  background: linear-gradient(135deg, rgba(160,145,230,0.52), rgba(200,180,248,0.40));
  z-index: 2;
  transform: translateX(8px);
}

.wd-avatar-r {
  background: linear-gradient(135deg, rgba(100,185,185,0.48), rgba(140,220,210,0.38));
  z-index: 1;
  transform: translateX(-8px);
}

.wd-av-bars {
  position: absolute;
  bottom: -4px;
  display: flex;
  gap: 3px;
  align-items: flex-end;
}

.wd-av-bar {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: rgba(120,110,200,0.2);
}

.wd-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.wd-div-line-l {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,145,230,0.35));
}

.wd-div-line-r {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(100,185,185,0.35), transparent);
}

.wd-div-heart {
  font-size: 9px;
  color: rgba(200,100,140,0.55);
  line-height: 1;
  flex-shrink: 0;
}

.wd-chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.wd-bubble {
  max-width: 75%;
  padding: 6px 10px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
}

.wd-bubble-l {
  align-self: flex-start;
  background: rgba(160,145,230,0.26);
  border: 1px solid rgba(200,185,255,0.42);
  color: rgba(55,35,120,0.80);
  border-radius: 12px 12px 12px 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.wd-bubble-r {
  align-self: flex-end;
  background: rgba(100,185,185,0.26);
  border: 1px solid rgba(130,220,210,0.42);
  color: rgba(15,80,80,0.80);
  border-radius: 12px 12px 3px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

/* ================================
   聊天组件 — page3 第1~4行 全4列
================================ */
.widget-chat {
  grid-column: 1 / -1;
  grid-row: 1 / 5;
  border-radius: 22px;
  background: rgba(255,255,255,0.24);
  border: 1px solid rgba(210,215,245,0.62);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    0 8px 32px rgba(100,110,200,0.10),
    0 2px 8px rgba(100,110,200,0.07);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 12px 13px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.widget-chat::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  pointer-events: none;
}

/* 好友头像环 */
.wc-friends {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  flex-shrink: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(170,175,230,0.15);
}

.wc-friend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.wc-av-ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(130,125,210,0.32);
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wc-online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.92);
  z-index: 2;
}

.wc-dot-violet { background: rgba(120,105,210,0.88); }
.wc-dot-teal   { background: rgba(25,165,150,0.88); }
.wc-dot-rose   { background: rgba(200,75,115,0.88); }
.wc-dot-amber  { background: rgba(195,145,25,0.88); }

.wc-friend-name {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.07em;
  color: rgba(60,60,110,0.38);
  text-transform: uppercase;
}

/* 用户信息区 */
.wc-userinfo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.wc-uav {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(130,125,210,0.26);
  background: rgba(240,240,252,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wc-utext {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wc-uname {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(35,30,80,0.80);
  letter-spacing: 0.04em;
}

.wc-ubio {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  color: rgba(80,80,140,0.42);
}

/* 三张横向照片 — 1:1正方形 */
.wc-photos {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(170,175,230,0.13);
}

.wc-photo-item {
  flex: 1;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: rgba(200,198,240,0.25);
  border: 1px solid rgba(210,205,245,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 分割线 */
.wc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,140,220,0.20), transparent);
  flex-shrink: 0;
}

/* 对话区 */
.wc-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
  min-height: 0;
}

.wc-msg-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.wc-msg-row.wc-right {
  flex-direction: row-reverse;
}

.wc-msg-av {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(130,125,210,0.28);
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wc-msg-av-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-msg-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 68%;
}

.wc-right .wc-msg-content { align-items: flex-end; }

.wc-bubble-left {
  padding: 8px 13px;
  background: rgba(232,232,240,0.88);
  border: 1px solid rgba(210,210,230,0.42);
  border-radius: 14px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(22,22,45,0.80);
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.wc-bubble-right {
  padding: 8px 13px;
  background: rgba(42,38,68,0.80);
  border: 1px solid rgba(65,58,95,0.45);
  border-radius: 14px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
}

.wc-img-reply {
  width: 72px; height: 54px;
  border-radius: 10px;
  background: rgba(185,180,235,0.22);
  border: 1px solid rgba(200,195,245,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-timestamp {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  color: rgba(80,80,130,0.30);
  letter-spacing: 0.05em;
  padding: 0 2px;
}

/* 输入区 */
.wc-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wc-input-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(120,115,210,0.28);
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wc-input-av-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-input-box {
  flex: 1;
  height: 30px;
  border-radius: 99px;
  background: rgba(255,255,255,0.36);
  border: 1px solid rgba(200,198,240,0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.wc-input-placeholder {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  color: rgba(80,80,130,0.30);
}

.wc-send-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(62,52,145,0.78);
  border: 1px solid rgba(85,75,170,0.40);
  box-shadow: 0 2px 8px rgba(50,40,130,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ================================
   page-3 app 图标 — 液态玻璃
================================ */
.app-grid.page-3 .app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.app-grid.page-3 .app .app-face {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 8px rgba(140,150,200,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.app-grid.page-3 .app .app-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(38,38,60,0.82);
}

/* ================================
   page-4：与 page-2/page-3 完全统一的图标规格
   （68px 图标 + 12px 文字），不再各页各写一套。
================================ */
.app-grid.page-4 .app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.app-grid.page-4 .app .app-face {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.92),
    0 8px 32px rgba(140,150,200,0.18),
    0 2px 8px rgba(140,150,200,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.app-grid.page-4 .app .app-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(38,38,60,0.82);
}

/* ================================
   天气组件编辑弹窗
================================ */
#wtwEditOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#wtwEditModal {
  width: 88%;
  max-width: 360px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
  border: 1px solid rgba(220,220,230,0.6);
}

.wtw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wtw-modal-title {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(20,20,40,0.88);
}

.wtw-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(240,240,245,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(40,40,60,0.7);
  transition: background 0.15s;
}

.wtw-modal-close:hover {
  background: rgba(220,220,228,0.9);
}

.wtw-modal-section {
  padding: 14px 0;
}

.wtw-modal-label {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(80,80,120,0.45);
  margin-bottom: 10px;
}

.wtw-modal-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wtw-modal-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,180,210,0.25), transparent);
}

/* 头像预览 */
.wtw-preview-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(180,180,220,0.4);
  background: rgba(240,240,252,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.wtw-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 照片预览 */
.wtw-photo-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1;
}

.wtw-photo-preview {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  border: 1px solid rgba(180,180,220,0.35);
  background: rgba(240,240,252,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 头像预览强制正圆 */
.wtw-photo-preview[style*="border-radius:50%"] {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  align-self: center;
}

.wtw-preview-circle {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  align-self: center;
}

.wtw-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* 上传按钮 */
.wtw-upload-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(245,245,250,0.9);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(30,30,60,0.75);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.wtw-upload-btn:hover {
  background: rgba(230,230,240,0.9);
}

.wtw-photo-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 0;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(245,245,250,0.9);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(30,30,60,0.7);
  cursor: pointer;
  transition: background 0.15s;
}

.wtw-photo-upload-btn:hover {
  background: rgba(230,230,240,0.9);
}

/* 背景模式按钮 */
.wtw-bg-option {
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(245,245,250,0.9);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(50,50,80,0.65);
  cursor: pointer;
  transition: all 0.15s;
}

.wtw-bg-option:hover {
  background: rgba(230,230,240,0.9);
}

.wtw-bg-option.active {
  background: rgba(30,28,60,0.88);
  border-color: rgba(30,28,60,0.88);
  color: rgba(255,255,255,0.95);
}

/* 保存按钮 */
.wtw-modal-save {
  margin-top: 18px;
  width: 100%;
  align-self: stretch;
  height: 44px;
  border-radius: 14px;
  border: none;
  background: rgba(25,22,55,0.90);
  color: rgba(255,255,255,0.95);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s;
}

.wtw-modal-save:hover {
  background: rgba(40,35,80,0.95);
}

/* ================================
   好友组件编辑弹窗 — 输入框
================================ */
#fwEditOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#fwEditModal {
  width: 88%;
  max-width: 360px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
  border: 1px solid rgba(220,220,230,0.6);
  max-height: 88vh;
  overflow-y: auto;
}

.fw-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fw-input-hint {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: rgba(80,80,120,0.45);
  white-space: nowrap;
  width: 64px;
  flex-shrink: 0;
}

.fw-text-input {
  flex: 1;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(180,180,220,0.4);
  background: rgba(245,245,252,0.85);
  padding: 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: rgba(25,25,50,0.82);
  outline: none;
  transition: border-color 0.15s;
}

.fw-text-input:focus {
  border-color: rgba(100,90,200,0.45);
  background: rgba(248,247,255,0.95);
}

.fw-text-input::placeholder {
  color: rgba(120,120,160,0.38);
}

#pwEditOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#pwEditModal {
  width: 88%;
  max-width: 360px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
  border: 1px solid rgba(220,220,230,0.6);
  max-height: 88vh;
  overflow-y: auto;
}

#wdEditOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#wdEditModal {
  width: 88%;
  max-width: 360px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
  border: 1px solid rgba(220,220,230,0.6);
  max-height: 88vh;
  overflow-y: auto;
}

#wnEditOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#wnEditModal {
  width: 88%;
  max-width: 360px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
  border: 1px solid rgba(220,220,230,0.6);
  max-height: 88vh;
  overflow-y: auto;
}

#wcEditOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#wcEditModal {
  width: 88%;
  max-width: 360px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
  border: 1px solid rgba(220,220,230,0.6);
  max-height: 88vh;
}

.wc-scroll-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* 锁屏密码键盘 */
.lock-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.3);
  transition: background 0.15s, transform 0.15s;
}
.lock-dot.filled {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.4);
  transform: scale(1.1);
}
.lock-dot.error {
  border-color: #ff5a5a;
  background: #ff5a5a;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 2px 8px rgba(255,60,60,0.5);
}
.lock-key {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.7), 0 4px 12px rgba(120,100,200,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 0px;
  transition: background 0.1s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.lock-key:active {
  background: rgba(255,255,255,0.55);
  transform: scale(0.95);
}
.lock-key-del {
  background: transparent;
}
.lk-num {
  font-size: 26px;
  font-weight: 300;
  color: rgba(28,18,72,0.82);
  line-height: 1;
  font-family: -apple-system, 'Inter', sans-serif;
}
.lk-sub {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(60,50,120,0.4);
  margin-top: 1px;
  min-height: 10px;
}

/* ================================
   灵动岛
================================ */
.status-island {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 6px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.si-capsule {
  background: #000;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34,1.2,0.64,1);
}
.si-minimal .si-capsule { width: 110px; height: 32px; }
.si-glow    .si-capsule { width: 110px; height: 32px; box-shadow: 0 0 10px 4px rgba(255,255,255,0.45); animation: siGlow 2s ease-in-out infinite; }
.si-clock   .si-capsule { width: 130px; height: 32px; gap: 6px; padding: 0 10px; }
.si-pulse   .si-capsule { width: 72px;  height: 32px; gap: 12px; }
.si-ripple  .si-capsule { width: 110px; height: 32px; overflow: visible; }
.si-rainbow .si-capsule { width: 110px; height: 32px; }
.si-music   .si-capsule { width: 110px; height: 32px; gap: 3px; padding: 0 12px; align-items: flex-end; padding-bottom: 5px; }
.si-scan    .si-capsule { width: 110px; height: 32px; overflow: hidden; }
@keyframes siGlow {
  0%,100% { box-shadow: 0 0 10px 4px rgba(255,255,255,0.45); }
  50%      { box-shadow: 0 0 4px 1px rgba(255,255,255,0.15); }
}
.si-clock-text { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.3px; font-family: -apple-system, sans-serif; white-space: nowrap; }
.si-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.9; }
.si-dot-l { animation: siPulse 1.4s ease-in-out infinite; }
.si-dot-r { animation: siPulse 1.4s ease-in-out 0.7s infinite; }
@keyframes siPulse {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(0.4); opacity: 0.2; }
}
.si-ring { position: absolute; inset: -1px; border-radius: 20px; border: 1.5px solid rgba(255,255,255,0.6); animation: siRipple 1.8s ease-out infinite; pointer-events: none; }
@keyframes siRipple {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.si-rainbow .si-capsule { background: linear-gradient(90deg,#f43f5e,#f59e0b,#10b981,#3b82f6,#a78bfa,#f43f5e); background-size: 300% 100%; animation: siRainbow 2.5s linear infinite; }
@keyframes siRainbow {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}
.si-bar { width: 3px; background: #fff; border-radius: 2px; opacity: 0.9; }
.si-bar:nth-child(1) { animation: siBar 0.9s ease-in-out infinite; }
.si-bar:nth-child(2) { animation: siBar 0.9s ease-in-out 0.15s infinite; }
.si-bar:nth-child(3) { animation: siBar 0.9s ease-in-out 0.3s infinite; }
.si-bar:nth-child(4) { animation: siBar 0.9s ease-in-out 0.45s infinite; }
.si-bar:nth-child(5) { animation: siBar 0.9s ease-in-out 0.6s infinite; }
@keyframes siBar {
  0%,100% { height: 5px; }
  50%      { height: 20px; }
}
.si-scanline { position: absolute; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); animation: siScan 1.6s linear infinite; }
@keyframes siScan {
  0%   { top: 0; }
  100% { top: 100%; }
}