/* ============================================================
 * phone.css —— 手机外壳、状态栏、系统导航、桌面、锁屏主菜单
 *
 * 层次模型（从后到前）：
 *   .stage 舞台底色  →  .stage-glow 光斑  →  .phone 机身
 *      →  .home 桌面（会随手势 / 切换位移，露在下面的层才有"深度"）
 *      →  .app-layer App 页
 *      →  .navbar 玻璃导航栏
 *      →  .overlay 系统层
 *      →  .menu 锁屏（最前）
 * ============================================================ */

.stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #F2F1EE 0%, #E6E4DF 46%, #DAD8D2 100%);
}

/* 光斑：玻璃想要"糊"出东西，底下必须先有颜色在动 */
.stage-glow { position: absolute; inset: -10%; pointer-events: none; z-index: 0; }
.stage-glow .sg {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.sg-a { width: 460px; height: 460px; left: -6%; top: 2%; background: rgba(122, 158, 176, .52); animation: float1 19s ease-in-out infinite; }
.sg-b { width: 400px; height: 400px; right: -8%; top: 16%; background: rgba(214, 168, 110, .46); animation: float2 23s ease-in-out infinite; }
.sg-c { width: 520px; height: 520px; left: 22%; bottom: -14%; background: rgba(140, 168, 150, .40); animation: float3 27s ease-in-out infinite; }

.phone {
  width: 375px;
  height: 812px;
  flex: none;
  transform-origin: center center;
  position: relative;
  z-index: 1;
}

.phone-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FDFDFC;
  border-radius: 42px;
  padding: 9px;
  box-shadow:
    0 0 0 1px rgba(120, 118, 110, .28),
    0 0 0 9px #FFFDFB,
    0 0 0 10px rgba(150, 148, 140, .30),
    0 2px 4px rgba(70, 72, 68, .10),
    0 30px 60px rgba(58, 62, 58, .22),
    0 60px 120px rgba(58, 62, 58, .16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- 状态栏 ---------- */
/*
 * 状态栏是"浮在 AppBar 之上"的一条，所以它自己不画底色 —— 底色由下面的
 * AppBar 透上来。以前这里靠一个固定的浅色刘海块去猜 AppBar 的颜色，
 * 结果进任何彩色 App 时，顶部会露出"刘海一块色 + AppBar 另一块色"两道横带，
 * 是界面上最刺眼的接缝。
 */
.statusbar {
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 22px;
  color: #2C363C;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  position: relative;
  z-index: 30;
  background: var(--statusbar-bg, transparent);
  transition: color .28s var(--fast), background .28s var(--fast);
  pointer-events: none;
}
.statusbar.dark-icons { color: #2C363C; }
/* App 顶栏为深色时，状态栏图标转白，底色跟着顶栏走 */
.statusbar.on-dark { color: #FFFDFB; }
.sb-time { flex: none; }
/* 桌面/锁屏上的灵动岛：只有这时候状态栏底下是桌面，才需要它自己有形 */
.sb-notch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 148px;
  height: 26px;
  background: #FBFBFA;
  border-radius: 0 0 14px 14px;
  top: 0;
}
/* 进了 App、状态栏已有底色时，灵动岛交还给 AppBar，避免双层色块 */
.statusbar.on-dark .sb-notch { display: none; }
.sb-icons { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.sb-signal, .sb-wifi, .sb-bat { display: block; background: currentColor; }
.sb-signal { width: 16px; height: 11px; clip-path: polygon(0 100%, 18% 100%, 18% 60%, 0 60%, 0 100%, 40% 100%, 40% 35%, 22% 35%, 22% 100%, 62% 100%, 62% 10%, 44% 10%, 44% 100%, 84% 100%, 84% 0, 66% 0, 66% 100%, 100% 100%, 100% 0, 82% 0, 82% 100%); }
.sb-wifi { width: 14px; height: 11px; clip-path: polygon(50% 100%, 0 40%, 12% 28%, 50% 66%, 88% 28%, 100% 40%); }
.sb-bat { width: 22px; height: 11px; border-radius: 2px; opacity: .95; position: relative; }
.sb-bat::after {
  content: ''; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px;
  background: currentColor; border-radius: 0 1px 1px 0;
}

/* ---------- 屏幕 ---------- */
.screen {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--bg);
  border-radius: 30px;
}

/* ---------- 桌面（白天 / 窗外） ---------- */
.home {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .10) 40%, rgba(232, 230, 224, .58) 100%),
    radial-gradient(560px 330px at 78% 6%, rgba(190, 214, 226, .82) 0%, rgba(190, 214, 226, 0) 72%),
    radial-gradient(480px 300px at 12% 84%, rgba(226, 208, 178, .58) 0%, rgba(226, 208, 178, 0) 74%),
    linear-gradient(180deg, #ECEFF0 0%, #F1F0EC 46%, #E8E6E0 100%);
  overflow: hidden;
}
.home::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 14% 20%, rgba(120, 150, 160, .35), transparent),
    radial-gradient(2px 2px at 30% 15%, rgba(120, 150, 160, .22), transparent),
    radial-gradient(2px 2px at 66% 24%, rgba(120, 150, 160, .25), transparent),
    radial-gradient(2px 2px at 84% 13%, rgba(120, 150, 160, .18), transparent);
  pointer-events: none;
}

.home-clock { text-align: center; color: #33414A; padding-top: 26px; flex: none; animation: fadeDown .4s var(--spring); }
.home-clock .hc-t {
  font-family: "Outfit", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 62px; font-weight: 200; letter-spacing: -2.6px; line-height: .92;
}
.home-clock .hc-t .lt-mm { font-weight: 100; opacity: .72; }
.home-clock .hc-d { font-size: 12px; opacity: .7; margin-top: 9px; letter-spacing: .6px; }

/*
 * 桌面上的状态卡。
 *
 * 这里是**实心**的，不是玻璃 —— 它贴在桌面上，底下是静态渐变，
 * 模糊什么都糊不到，只白吃一层性能损耗，还让底色发灰发脏。
 * 用暖白实心 + 一道内高光，反而更有"纸"的质感。
 */
.home-status {
  margin: 18px 14px 0;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: 14px 15px 13px;
  color: #2C363C;
  flex: none;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255, 253, 251, .9);
  animation: fadeUp .45s var(--spring) .05s backwards;
}
/* 现金行和下面三行体检条之间，用一条空白断句 —— 它们是两类信息 */
.hs-row.hs-lead + .hs-row { margin-top: 13px; }
.hs-row { display: flex; align-items: center; gap: 9px; font-size: 12px; min-width: 0; }
.hs-row + .hs-row { margin-top: 7px; }
.hs-k {
  color: rgba(44, 54, 60, .58); flex: none; width: 46px;
  display: inline-flex; align-items: center; gap: 4px;
}
.hs-v { font-weight: 500; }
.hs-bar { flex: 1; min-width: 0; height: 4px; border-radius: 2px; background: rgba(90, 110, 115, .15); overflow: hidden; }
.hs-bar > i { display: block; height: 100%; border-radius: 2px; transition: width .45s var(--spring); }

/*
 * 现金是这张卡的主角：给到 30px、细字重、收紧字距，
 * 跟下面三行 12px 的状态条拉开整整一档。
 * 之前它 17px，和三行状态只差 5px —— 一张卡里五件事都在喊，
 * 结果就是没有一件事被看见。
 */
.hs-cash {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -1.1px;
  line-height: 1;
  color: #243038;
  white-space: nowrap;
}

/*
 * 首行：现金在左，客户数在右。
 * 客户数用 margin-left:auto 靠右，并且允许它被压缩 —— 否则现金位数一多，
 * 右边那串就被顶出卡片外，被 padding 裁掉。
 */
.hs-row.hs-lead { gap: 8px; align-items: flex-end; }
.hs-row.hs-lead .hs-k { width: auto; align-self: center; }
.hs-cust {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(44, 54, 60, .60);
  font-size: 11.5px;
  white-space: nowrap;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden;
  padding-bottom: 3px;
}
.hs-cust .ic-svg { opacity: .62; flex: none; }

/* 应用网格 */
.appgrid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 行高跟着列宽走，保证每一行的格子都是正方形 */
  grid-auto-rows: 1fr;
  align-content: start;
  gap: 2px;
  padding: 18px 10px 12px;
  overflow-y: auto;
}
.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 2px 12px;
  /*
   * 图标格必须是方的。
   *
   * 之前只有 padding，高度靠内容反推、宽度靠 repeat(4, 1fr) 决定，
   * 两者互不约束：宽屏量出来 84.6×97.9、窄屏 97×95.8 —— 格子自己
   * 就不方，里面 52px 的图标块一放，四周留白上窄下宽，看着就是"扁的"。
   *
   * 钉死宽高比，格子跟着列宽走，图标永远居中。
   */
  aspect-ratio: 1 / 1;
  /*
   * 这一层是"图标格"，是点击热区，不是视觉图形 —— 圆角要收得比里面的
   * 图标更小。它比 .ai-box 还圆的话，按下去会先显出一块比图标更圆的底色，
   * 一眼就看出来"这不是个图标，是个按钮"。
   * 现在 .ai-box 是 9px，热区收到 8px（--r-sm 档）。
   */
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  animation: pop .38s var(--spring) backwards;
  transition: background var(--fast);
}
.app-icon:active { background: rgba(120, 140, 145, .11); }
.app-grid-pad { flex: 1; }
.app-icon .ai-box {
  width: 52px;
  height: 52px;
  /*
   * flex 子项默认会被压缩。图标格钉成正方形之后，格子高度由列宽决定，
   * 一旦小于「52 图标 + 名字 + padding」，flex 就会把 .ai-box **压矮**
   * —— 高 43.2、宽 57.6，图标块自己变扁了。
   * 钉死 flex 尺寸，宁可溢出也不让图标变形。
   */
  flex: none;
  min-width: 52px;
  min-height: 52px;
  /* 17.3% ≈ 安卓应用图标的方正观感，见 material.css 里 --r-icon 的说明 */
  border-radius: var(--r-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFDFB;
  box-shadow: 0 1px 2px rgba(60, 70, 66, .14), 0 5px 14px rgba(60, 70, 66, .20);
  position: relative;
  transition: transform var(--spring), box-shadow var(--fast);
}
.app-icon:active .ai-box { transform: scale(.89); box-shadow: 0 1px 2px rgba(60,70,66,.18); }
.app-icon .ai-box::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 52%);
  pointer-events: none;
}
.app-icon .ai-name {
  margin-top: 8px;
  font-size: 11px;
  color: #3A464D;
  letter-spacing: -.05px;
  line-height: 1.25;
  text-align: center;
}
.app-icon .badge {
  position: absolute;
  top: 4px;
  right: 50%;
  margin-right: -32px;
  box-shadow: 0 1px 3px rgba(60, 70, 66, .22);
  z-index: 2;
  isolation: isolate;
}
.app-icon.dim .ai-box { filter: saturate(.5) brightness(1.06); }

/* 底部：今日剩余 + 结束今天 */
.home-foot {
  flex: none;
  padding: 8px 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-foot .hf-info {
  flex: 1;
  color: #3A464D;
  font-size: 12px;
  line-height: 1.4;
}
.home-foot .hf-info b { font-size: 15px; font-weight: 500; }

/* ---------- App 层 ---------- */
.app-layer { position: absolute; inset: 0; pointer-events: none; }
/*
 * App 页：从底部推入 + 淡入。
 * 用带回弹的曲线（而非线性），"打开一个应用"这件事才有分量，
 * 也让从桌面点图标到页面出现的过程有连续性。
 */
.app-page {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%) scale(.985);
  opacity: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.2, .9, .28, 1), opacity .26s ease;
  z-index: 10;
  will-change: transform, opacity;
  border-radius: 0;
}
.app-page.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.app-page .ap-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.app-page .ap-foot { flex: none; }

/* ---------- 系统导航栏（Android 三键） ---------- */
/*
 * 这个玻璃是**合理**的：导航栏浮在 App 内容之上，内容滚动时从它底下经过，
 * 模糊是能看见效果的。但底色要跟全局一起转暖（原来 G>R，是旧冷灰的残留）。
 */
.navbar {
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(246, 245, 242, .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(228, 226, 220, .9);
  padding-bottom: 4px;
  position: relative;
  z-index: 12;
}
/* 三键导航按 Android 原生长相做成胶囊，这里刻意不跟卡片体系 ——
   它是「系统」，不该看起来像页面里的一个控件 */
.nav-btn {
  width: 58px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 21px;
  color: #59686F;
  transition: background .16s cubic-bezier(.4, 0, .2, 1), color .16s;
}
.nav-btn:active { background: rgba(89, 104, 111, .10); color: #33424A; }
.nav-btn:active .ic-svg { transform: scale(.9); }
.nav-btn .ic-svg { transition: transform .16s cubic-bezier(.4, 0, .2, 1); }

/* ---------- 覆盖层 ---------- */
.overlay { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
.overlay > * { pointer-events: auto; }

/* ---------- 最近任务 ---------- */
/*
 * 全屏遮罩不需要模糊。它盖住了整屏、底下什么都看不见，
 * 22px 的 backdrop-filter 只会让低端机掉帧，而且底色发灰。
 * 改用近乎不透明的实心暖底，视觉上更干净，也更快。
 */
.recents {
  position: absolute;
  inset: 0;
  background: rgba(243, 242, 238, .96);
  display: flex;
  flex-direction: column;
  padding: 12px 0 20px;
  z-index: 88;
  animation: fade .2s;
}
.recents .r-title { color: #6B7A83; font-size: 12px; padding: 4px 16px 10px; letter-spacing: .4px; }
/* 空态不再用圆角方块装图标，直接一枚淡图标 + 一句说明 */
.rec-empty {
  color: #9AA6AB;
  opacity: .56;
  margin-bottom: 10px;
}
.recents .r-strip {
  flex: 1;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 22px 20px;
  align-items: center;
}
.r-card {
  width: 232px;
  height: 372px;
  flex: none;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--e8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.r-card .rc-head {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 500;
}
.r-card .rc-head .ai-box { width: 26px; height: 26px; border-radius: var(--r-icon-sm); font-size: 11px; box-shadow: none; }
.r-card .rc-body { flex: 1; padding: 10px 12px; font-size: 12px; color: var(--text-2); overflow: hidden; }
.r-card .rc-close { margin: 0 12px 12px; }

.stage-hint {
  color: #8A9490;
  font-size: 12px;
  letter-spacing: .2px;
  text-align: center;
  padding: 0 16px;
}

/* ---------- 主菜单（锁屏式） ---------- */
/*
 * 为什么做成锁屏：
 *   游戏的第一件事是"选存档"，本质上就是"用哪台手机重新亮屏"。
 *   所以用锁屏隐喻：大时间在上、雾化卡片在下，视线自然从上往下落到"继续"。
 */
.menu {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(680px 420px at 50% -8%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(520px 380px at 108% 22%, rgba(190, 214, 226, .70) 0%, rgba(190, 214, 226, 0) 70%),
    radial-gradient(460px 340px at -12% 78%, rgba(226, 208, 178, .62) 0%, rgba(226, 208, 178, 0) 72%),
    linear-gradient(178deg, #F5F4F1 0%, #EDECE8 44%, #E4E2DC 100%);
  animation: fade .34s var(--fast);
}

/* --- 锁屏头部：大时间 --- */
/*
 * 刻意不居中。
 * 居中的大字 + 居中的卡片 + 居中的按钮，是"对称到底"的排版，
 * 看完一行不知道该往哪看。改成左对齐之后，视线有一条明确的
 * 起落线：时间 → 日期 → 品牌 → 存档 → 底部行。
 * 时间本身也按字重分了两段（:00 比时数细一档），大数字才不至于糊成一坨。
 */
.lock-head {
  flex: none;
  padding: 70px 30px 2px;
  text-align: left;
  animation: fadeDown .5s var(--spring);
}
.lock-t {
  font-family: "Outfit", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 86px;
  font-weight: 200;
  line-height: .9;
  letter-spacing: -5.4px;
  color: #2F3A41;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  display: flex;
  align-items: baseline;
}
.lock-t .lt-hm { display: inline-block; }
/* 冒号后面的分钟部分细一档，时间就有"时 / 分"的层次 */
.lock-t .lt-mm { font-weight: 100; opacity: .72; letter-spacing: -4px; }
.lock-d {
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: .8px;
  margin-top: 14px;
  font-weight: 500;
}
.lock-greet {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 问候语前面一枚呼吸的小点：整块锁屏上"活着"的东西 */
.lock-greet .lg-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--md-accent);
  flex: none;
  animation: pulseSoft 2.4s ease-in-out infinite;
}

/* --- 品牌字标 --- */
/*
 * 不再在字标上方压一个圆角方块图标。
 * "每个标题上面放一个圆角方块"是被点名的模板化痕迹，这里换成
 * 一条 2px 的短竖线做视觉锚点 —— 它划出起点，但不抢字。
 */
.lock-brand {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 30px 6px;
  animation: fadeUp .5s var(--spring) .06s backwards;
}
.lock-mark {
  width: 2px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 2px;
  flex: none;
  background: linear-gradient(180deg, #6D8494 0%, #4E6472 100%);
  box-shadow: 0 0 0 0 transparent;
}
.lock-brandtxt { text-align: left; padding-top: 1px; }
.lock-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 3.4px;
  color: #2F3A41;
  line-height: 1.15;
}
.lock-sub {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 2.4px;
  margin-top: 6px;
  text-transform: uppercase;
}

/* --- 存档区 --- */
.menu-slots {
  flex: 1;
  padding: 20px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.slot-label {
  font-size: 10.5px;
  letter-spacing: 2.6px;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 0 6px 2px;
  font-weight: 500;
}
/*
 * 存档卡是**内容主体**，不是浮层 —— 它下面是锁屏的静态渐变，
 * 模糊没有可糊的对象。改实心暖白，纸感反而更实。
 */
.slot-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--divider);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255, 253, 251, .9);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform var(--spring), box-shadow var(--fast);
}
.slot-card:active { transform: scale(.985); box-shadow: var(--e1); }
/* 有存档的卡片左侧一条主色，区分"可继续"与"空位" */
.slot-card.has::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #6D8494, #4E6472);
}
/* 可继续的存档，主色条缓慢呼吸一小下 —— 一眼看出哪个是"接着玩" */
.slot-card.has::after {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: #8FA7B5;
  animation: breathe 3.4s ease-in-out infinite;
}
.slot-card:not(.has) { background: rgba(255, 255, 255, .42); border-style: dashed; border-color: rgba(150, 148, 140, .38); }

/* 空位：去掉那个 40px 的圆角方块，只留一枚加号 + 两行字 */
.sc-empty { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.se-ic {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--md-primary);
  opacity: .64;
  transition: opacity var(--fast), transform var(--mag);
}
.slot-card:not(.has):active .se-ic { opacity: 1; transform: rotate(90deg); }
.sc-etitle { font-size: 15px; font-weight: 500; color: var(--text); }
.sc-esub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* 有档 */
.sc-head { display: flex; align-items: center; }
.sc-title { flex: 1; font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.sc-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sc-st {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-2);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-sm); padding: 4px 9px;
  font-weight: 500;
}
.sc-st .ic { width: 14px; height: 14px; opacity: .62; }
.sc-time { font-size: 11px; color: var(--text-3); margin-top: 10px; letter-spacing: .2px; }
.sc-acts { display: flex; gap: 8px; margin-top: 13px; }
.sc-acts .btn { flex: 1; }

/* --- 底部：成就 / 清除 --- */
.menu-foot { flex: none; padding: 10px 18px 24px; }
/*
 * 底部两条不做成等宽等高的"两个胶囊"。
 * 成就那条是可点的入口，给它完整高度和实心底；
 * 清除是破坏性动作，压扁一点、去掉底色、只留文字 ——
 * 一高一矮、一实一虚，视线自然先落在上面那条。
 */
.menu-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--divider);
  box-shadow: var(--e1);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: transform var(--fast), background var(--fast);
}
.menu-row + .menu-row { margin-top: 6px; }
.menu-row:active { transform: scale(.985); background: rgba(255, 255, 255, .85); }
.menu-row .ic { width: 20px; height: 20px; color: var(--md-primary); }
.menu-row .mr-t { flex: 1; text-align: left; }
.menu-row .mr-v { font-size: 12px; color: var(--text-2); font-weight: 500; }
.menu-row .mr-arrow { width: 17px; height: 17px; color: var(--text-3); transition: transform var(--fast); }
.menu-row:active .mr-arrow { transform: translateX(2px); }
.menu-row.danger {
  color: var(--danger);
  height: 42px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-weight: 400;
  font-size: 13px;
}
.menu-row.danger:active { background: rgba(176, 85, 78, .07); }
.menu-row.danger .ic { color: var(--danger); opacity: .8; }
.menu-ver {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  text-align: center; font-size: 10.5px; color: var(--text-3);
  margin-top: 14px; letter-spacing: .3px;
}
.menu-ver .ic { width: 13px; height: 13px; opacity: .6; }

/* 成就面板：继承锁屏的同款底，切换时视觉不断裂 */
.menu-ach {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background:
    radial-gradient(620px 400px at 50% -6%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(178deg, #F4F3F0 0%, #EBEAE6 100%);
}

/* 小屏（真手机）时铺满，去掉外框 */
@media (max-width: 520px) {
  .stage { background: #F1F0ED; justify-content: flex-start; gap: 0; }
  .stage-glow { display: none; }
  /*
   * 窄屏不再用 100vw × 100vh —— 那会让机身的宽高各自撑开，
   * 375:812 的比例被破坏，里面的图标格跟着变扁。
   * 现在的做法：宽度铺满，高度按同一比例算，由 JS 里的 fit() 统一设。
   */
  .phone { width: 375px; height: 812px; transform-origin: top center; }
  .phone-frame { border-radius: 0; padding: 0; box-shadow: none; }
  .screen { border-radius: 0; }
  .statusbar { padding: 0 18px; height: 36px; }
  .sb-notch { display: none; }
  .stage-hint { display: none; }
  .navbar { height: 42px; }
  .lock-head { padding: 50px 24px 2px; }
  .lock-t { font-size: 68px; letter-spacing: -4.4px; }
  .lock-brand { padding-left: 24px; padding-right: 24px; }
  .menu-slots { padding-top: 14px; }
  .home-clock .hc-t { font-size: 54px; letter-spacing: -2.2px; }
}