/* ═══════════ DUI · 手机操作系统原型 ═══════════ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --ink: #111318; --ink-2: #3a3f49; --muted: #8b909c;
  --bg: #f2f3f7; --card: #ffffff; --line: rgba(17, 19, 24, .07);
  --blue: #0a84ff; --green: #34c759; --red: #ff3b30; --orange: #ff9f0a; --purple: #bf5af2;
  --shadow: 0 12px 32px rgba(20, 24, 40, .14);
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  color: var(--ink); overflow: hidden; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 700px at 18% 8%, #26344c 0%, transparent 55%),
              radial-gradient(1000px 640px at 88% 88%, #2c1f33 0%, transparent 52%),
              radial-gradient(700px 500px at 80% 10%, #123146 0%, transparent 50%), #0e1320;
}
::selection { background: rgba(10, 132, 255, .25); }

/* ── 桌面背景与标题 ── */
.desktop-bg { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.desktop-title { position: fixed; top: 26px; left: 34px; color: #e8ecf5; z-index: 3; display: flex; gap: 14px; align-items: center; max-width: 560px; }
.desktop-title h1 { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.desktop-title p { font-size: 12px; color: #9fb0c9; margin-top: 5px; line-height: 1.8; max-width: 500px; }
.dt-logo { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #6db9ff, #b18cff); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; color: #fff; box-shadow: 0 8px 24px rgba(120, 150, 255, .4); }

/* ── 手机外壳 ── */
.phone { position: relative; width: 390px; height: 844px; border-radius: 60px; padding: 9px; z-index: 1; transform-origin: center center;
  background: linear-gradient(155deg, #3a3f4a, #171a20 38%, #2b2f39);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 2px rgba(0, 0, 0, .35); }
.phone-frame { position: relative; width: 100%; height: 100%; border-radius: 52px; overflow: hidden; background: #000; }
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 122px; height: 34px; border-radius: 20px; background: #000; z-index: 90; }

/* ── 状态栏 ── */
.status-bar { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 0 30px; z-index: 80; color: #fff; transition: color .3s; }
.phone[data-theme="light"] .status-bar { color: var(--ink); }
.sb-left { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.sb-right { display: flex; align-items: center; gap: 5px; }
.sb-ico { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.sb-zone { position: absolute; top: 0; width: 46%; height: 44px; z-index: 85; cursor: pointer; }
.sb-zone-left { left: 0; } .sb-zone-right { right: 0; }

/* ── 屏幕容器 ── */
.screens { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .32s ease, transform .32s ease; }
.screen.active { opacity: 1; visibility: visible; transform: none; }
.app-screen { overflow: hidden; }

/* ── 壁纸（渐变 + DUI 字母） ── */
.wallpaper { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(160deg, #7ec8ff 0%, #c3a8ff 38%, #ffd3a5 72%, #ffb7c5 100%);
  background-size: 220% 220%; animation: flow 20s ease-in-out infinite; }
.wallpaper::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(340px 340px at 78% 20%, rgba(255, 255, 255, .55), transparent 70%),
              radial-gradient(300px 300px at 16% 80%, rgba(255, 255, 255, .4), transparent 70%); }
@keyframes flow { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.dui-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 148px; font-weight: 800; letter-spacing: 10px; color: rgba(255, 255, 255, .94); text-shadow: 0 6px 30px rgba(60, 80, 160, .28); opacity: .97; user-select: none; }
.dui-mark-sm { font-size: 108px; top: 42%; letter-spacing: 8px; }

/* ── 锁屏 ── */
.lock-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding-top: 148px; color: #fff; z-index: 2; transition: transform .25s ease; cursor: grab; }
.lock-time { font-size: 76px; font-weight: 200; letter-spacing: 2px; text-shadow: 0 4px 24px rgba(40, 50, 100, .3); }
.lock-date { font-size: 16px; font-weight: 600; margin-top: 2px; opacity: .95; }
.lock-notifs { margin-top: 34px; width: 100%; padding: 0 18px; display: flex; flex-direction: column; gap: 10px; }
.ncard { background: rgba(255, 255, 255, .16); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid rgba(255, 255, 255, .25); border-radius: 20px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 8px 24px rgba(40, 50, 100, .18); }
.ncard-app { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .3); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ncard-msg { flex: 1; font-size: 13px; line-height: 1.5; min-width: 0; }
.ncard-time { font-size: 11px; opacity: .75; align-self: flex-start; }
.lock-corner { position: absolute; bottom: 78px; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; color: #fff; z-index: 3; }
.lock-corner-left { left: 24px; } .lock-corner-right { right: 24px; }
.lock-hint { position: absolute; bottom: 36px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 600; z-index: 3; letter-spacing: 1.5px; }

/* ── 主屏幕 ── */
.home-content { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 62px 16px 0; z-index: 2; }
.home-search { background: rgba(255, 255, 255, .34); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-radius: 16px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(40, 50, 100, .12); }
.widget-clock { margin-top: 12px; background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .25); border-radius: 24px; padding: 14px 18px 16px; color: #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 30px rgba(40, 50, 100, .14); }
.wc-time { font-size: 44px; font-weight: 200; letter-spacing: 1px; }
.wc-date { font-size: 13px; font-weight: 600; opacity: .9; margin-top: 2px; }
.wc-weather { margin-top: 10px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .22); display: inline-flex; padding: 6px 12px; border-radius: 999px; align-items: center; gap: 6px; }
.widget-row { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-mini { background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .25); border-radius: 22px; padding: 12px 14px; color: #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 24px rgba(40, 50, 100, .12); }
.wm-top { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; opacity: .8; text-transform: uppercase; }
.wm-art { font-size: 22px; margin-top: 8px; display: block; }
.wm-title { font-size: 13px; font-weight: 700; margin-top: 6px; }
.wm-artist { font-size: 11px; opacity: .85; margin-top: 1px; }
.w-activity svg { display: block; margin-top: 6px; }
.app-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 18px; align-content: start; }
.app-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform .15s ease; }
.app-item:active { transform: scale(.88); }
.app-icon { width: 60px; height: 60px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 30px; position: relative; box-shadow: 0 8px 16px rgba(30, 40, 80, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
.app-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 42%); opacity: .5; }
.app-icon span { position: relative; z-index: 1; }
.app-label { font-size: 11.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(30, 40, 80, .5); }
.a-settings { background: linear-gradient(145deg, #c7ccd6, #8e95a3); }
.a-camera { background: linear-gradient(145deg, #4a4f58, #23262c); }
.a-photos { background: linear-gradient(145deg, #ffffff, #e3e9f4); }
.a-weather { background: linear-gradient(145deg, #7ed0ff, #2f9bff); }
.a-music { background: linear-gradient(145deg, #fb5c74, #fa233b); }
.a-calendar { background: linear-gradient(145deg, #ffffff, #eceff5); }
.a-notes { background: linear-gradient(145deg, #ffffff, #f4ecd8); }
.a-clock { background: linear-gradient(145deg, #2b2e36, #101217); }
.a-wechat { background: linear-gradient(145deg, #6ae381, #07c160); }
.a-douyin { background: linear-gradient(145deg, #27292f, #000); box-shadow: 0 8px 16px rgba(30, 40, 80, .28), 0 0 0 1px rgba(255, 255, 255, .12); }
.a-browser { background: linear-gradient(145deg, #ffffff, #d9e8ff); }
.a-appstore { background: linear-gradient(145deg, #6ed0ff, #0a84ff); }
.a-calculator { background: linear-gradient(145deg, #3a3d46, #181a20); }
.a-maps { background: linear-gradient(145deg, #f6faf7, #cfeadd); }
.a-phone { background: linear-gradient(145deg, #7fe0a0, #34c759); }
.a-messages { background: linear-gradient(145deg, #ffffff, #ddf4e3); }

/* ── Dock ── */
.dock { margin: 0 4px 16px; background: rgba(255, 255, 255, .28); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); border: 1px solid rgba(255, 255, 255, .3); border-radius: 28px; padding: 10px 8px; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; }
.dock .app-icon { width: 54px; height: 54px; font-size: 27px; border-radius: 13px; }
.dock .app-label { display: none; }
.page-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.dot.on { background: #fff; }

/* ── 应用通用导航与滚动 ── */
.app-nav { position: absolute; top: 0; left: 0; right: 0; height: 98px; padding: 58px 16px 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; background: rgba(242, 243, 247, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.nav-title { font-size: 32px; font-weight: 700; letter-spacing: .3px; }
.nav-search { background: #e9ebf1; border-radius: 10px; padding: 6px 12px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.scroll { position: absolute; inset: 0; overflow-y: auto; padding: 104px 0 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

/* ── 设置 ── */
.set-group { background: var(--card); border-radius: 14px; margin: 0 16px 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; position: relative; cursor: pointer; transition: background .12s; }
.row:active { background: #f0f2f7; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 58px; right: 14px; height: 1px; background: var(--line); }
.ri { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #eef0f5; flex-shrink: 0; }
.row span { flex: 1; font-size: 15px; font-weight: 500; }
.row .val { font-size: 13px; color: var(--muted); flex: none; }
.chev { color: #c6c9d2; font-size: 18px; font-weight: 600; font-style: normal; }
.dphone-card { margin: 16px 16px 14px; background: linear-gradient(135deg, #ffffff, #f1f4fa); border-radius: 18px; padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: var(--shadow); border: 1px solid var(--line); }
.dphone-card:active { transform: scale(.98); }
.dphone-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #8fb7ff, #a78bfa); color: #fff; font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(120, 140, 255, .35); flex-shrink: 0; }
.dphone-text { flex: 1; min-width: 0; }
.dphone-title { font-size: 16px; font-weight: 700; }
.dphone-sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* ── 微信 ── */
.screen-wechat .app-nav { background: #ededed; }
.wechat-nav { position: absolute; top: 0; left: 0; right: 0; height: 104px; padding: 58px 16px 6px; display: flex; align-items: center; justify-content: space-between; background: rgba(237, 237, 237, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 5; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.wechat-nav .nav-title { font-size: 17px; font-weight: 700; color: #191919; }
.wn-actions { display: flex; gap: 14px; font-size: 18px; color: #191919; }
.chat-list { padding-top: 104px; background: #fff; }
.chat-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #fff; cursor: pointer; }
.chat-item:active { background: #f3f3f3; }
.chat-item + .chat-item { border-top: 1px solid rgba(0, 0, 0, .045); }
.avatar { width: 48px; height: 48px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; flex-shrink: 0; }
.ci-main { flex: 1; min-width: 0; }
.ci-name { font-size: 16px; font-weight: 500; color: #191919; }
.ci-msg { font-size: 13px; color: #999; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-time { font-size: 11px; color: #bbb; align-self: flex-start; }
.wechat-tabs { position: absolute; bottom: 0; left: 0; right: 0; height: 66px; background: #f7f7f7; border-top: 1px solid rgba(0, 0, 0, .06); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; z-index: 6; }
.wechat-tab { text-align: center; font-size: 11px; color: #9a9a9a; display: flex; flex-direction: column; gap: 2px; align-items: center; cursor: pointer; }
.wechat-tab .ico { font-size: 20px; }
.wechat-tab.on { color: #07c160; font-weight: 600; }

/* ── 聊天 ── */
.chat-nav { position: absolute; top: 0; left: 0; right: 0; height: 96px; padding: 56px 12px 0; background: #ededed; display: flex; align-items: center; gap: 6px; z-index: 5; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.chat-nav .back { font-size: 15px; color: #191919; cursor: pointer; padding: 4px 10px 4px 4px; border: none; background: none; font-family: inherit; }
.chat-nav .ct { flex: 1; font-size: 16px; font-weight: 600; text-align: center; margin-right: 44px; }
.chat-nav .ct-more { font-size: 18px; color: #191919; }
.chat-body { position: absolute; inset: 0; padding: 104px 12px 74px; overflow-y: auto; background: #ededed; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 9px 12px; font-size: 15px; line-height: 1.45; border-radius: 8px; color: #191919; word-break: break-word; }
.bubble.in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.bubble.out { background: #95ec69; align-self: flex-end; border-top-right-radius: 2px; }
.chat-input { position: absolute; bottom: 0; left: 0; right: 0; height: 62px; background: #f7f7f7; border-top: 1px solid rgba(0, 0, 0, .05); display: flex; align-items: center; gap: 8px; padding: 0 10px; z-index: 6; }
.chat-input input { flex: 1; height: 36px; border: none; border-radius: 6px; background: #fff; padding: 0 12px; font-size: 15px; outline: none; font-family: inherit; }
.chat-input .ibtn { background: none; border: none; font-size: 22px; cursor: pointer; color: #191919; padding: 4px; }
/* ── 抖音 ── */
.dy-bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, #1e3c72, #2a5298 45%, #ff6a88 100%); transition: background 1s ease; }
.dy-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: floaty 9s ease-in-out infinite; }
.dy-blob.b1 { width: 220px; height: 220px; background: #ff6a88; top: 12%; right: -40px; }
.dy-blob.b2 { width: 260px; height: 260px; background: #3aa0ff; bottom: 18%; left: -60px; animation-delay: -3s; }
.dy-blob.b3 { width: 160px; height: 160px; background: #8a5cff; top: 42%; left: 30%; animation-delay: -6s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.08); } }
.dy-live { position: absolute; left: 14px; top: 58px; z-index: 5; background: #ff3040; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 5px; }
.dy-top { position: absolute; top: 56px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 26px; z-index: 5; color: #fff; padding: 0 50px; }
.dy-top .tg { font-size: 15px; font-weight: 600; opacity: .6; cursor: pointer; }
.dy-top .tg.on { opacity: 1; font-weight: 700; font-size: 17px; position: relative; }
.dy-top .tg.on::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 20px; height: 3px; border-radius: 2px; background: #fff; }
.dy-top .srch { position: absolute; right: 16px; font-size: 20px; }
.dy-info { position: absolute; left: 14px; bottom: 118px; z-index: 5; color: #fff; max-width: 70%; }
.dy-user { font-size: 15px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.dy-desc { font-size: 13px; line-height: 1.55; margin-top: 8px; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.dy-music { font-size: 12px; opacity: .9; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.dy-eq { display: flex; gap: 2.5px; align-items: flex-end; height: 12px; }
.dy-eq i { width: 3px; background: #fff; border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.dy-eq i:nth-child(2) { animation-delay: .15s; } .dy-eq i:nth-child(3) { animation-delay: .3s; } .dy-eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.dy-actions { position: absolute; right: 10px; bottom: 130px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; }
.dy-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ff7eb3, #ff758c); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; position: relative; }
.dy-avatar .plus { position: absolute; bottom: -7px; width: 16px; height: 16px; border-radius: 50%; background: #ff3040; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #111; }
.dy-act { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; cursor: pointer; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.dy-act .ai { font-size: 27px; transition: transform .2s; }
.dy-act .ai.liked { color: #ff3040; animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.dy-tabs { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: rgba(0, 0, 0, .28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; color: #fff; z-index: 6; border-top: 1px solid rgba(255, 255, 255, .08); }
.dy-tab { text-align: center; font-size: 10px; display: flex; flex-direction: column; gap: 3px; align-items: center; opacity: .7; cursor: pointer; }
.dy-tab.on { opacity: 1; font-weight: 700; }
.dy-tab .di { font-size: 20px; }
/* ── 天气 ── */
.screen-weather { background: linear-gradient(180deg, #3d7bd9, #7fb2ee 62%, #c3dcf8); }
.weather-scroll { padding-top: 0; }
.weather-main { padding: 108px 0 6px; text-align: center; color: #fff; }
.wm-city { font-size: 20px; font-weight: 600; }
.wm-temp { font-size: 92px; font-weight: 200; letter-spacing: 2px; }
.wm-hi { font-size: 14px; opacity: .92; }
.wm-rain { font-size: 12px; opacity: .8; margin-top: 4px; }
.weather-hour { margin: 14px 14px 0; background: rgba(255, 255, 255, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 20px; padding: 12px 8px; color: #fff; }
.wh-title { font-size: 12px; font-weight: 700; padding: 0 6px 8px; opacity: .85; }
.wh-row { display: flex; justify-content: space-between; overflow-x: auto; }
.wh-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 44px; font-size: 12px; }
.wh-i { font-size: 20px; }
.wh-d { font-weight: 600; }
.weather-days { margin: 12px 14px 0; background: rgba(255, 255, 255, .16); backdrop-filter: blur(16px); border-radius: 20px; padding: 6px 14px; color: #fff; }
.wday { display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 13px; }
.wday + .wday { border-top: 1px solid rgba(255, 255, 255, .18); }
.wday > span:first-child { width: 48px; }
.wd-hl { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wd-hl i { font-style: normal; opacity: .75; font-size: 13px; }
.wd-hl em { width: 56px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); position: relative; display: block; }
.wd-hl em i { position: absolute; left: 0; top: 0; bottom: 0; width: 70%; background: #ffd60a; border-radius: 2px; }
.wd-hl b { font-size: 13px; font-weight: 600; }
.weather-info { margin: 12px 14px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wi-box { background: rgba(255, 255, 255, .16); backdrop-filter: blur(16px); border-radius: 18px; padding: 14px; color: #fff; }
.wi-box b { display: block; font-size: 12px; opacity: .8; font-weight: 600; }
.wi-box span { display: block; font-size: 17px; font-weight: 700; margin-top: 6px; }

/* ── 相机 ── */
.cam-bg { position: absolute; inset: 0; background: linear-gradient(160deg, #5a7a9d, #2a3648 60%, #1b222e); }
.cam-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 320px at 30% 30%, rgba(255, 255, 255, .25), transparent 70%), radial-gradient(300px 220px at 75% 65%, rgba(120, 190, 255, .28), transparent 70%); }
.cam-top { position: absolute; top: 58px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 22px; color: #fff; font-size: 16px; z-index: 3; }
.cam-top .cam-hdr { font-size: 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; padding: 1px 5px; }
.cam-top .cam-switch { font-size: 20px; }
.cam-modes { position: absolute; bottom: 108px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; color: rgba(255, 255, 255, .7); font-size: 13px; z-index: 3; }
.cam-modes .on { color: #fff; font-weight: 700; font-size: 15px; }
.cam-shutter { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff; z-index: 3; cursor: pointer; }
.cam-shutter::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.cam-shutter:active::after { background: #ddd; }
.cam-grid { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, transparent 49.6%, rgba(255, 255, 255, .25) 50%, transparent 50.4%), linear-gradient(transparent 49.6%, rgba(255, 255, 255, .25) 50%, transparent 50.4%); pointer-events: none; }

/* ── 计算器 ── */
.calc { position: absolute; inset: 0; background: #000; padding: 100px 20px 26px; display: flex; flex-direction: column; }
.calc-display { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; font-size: 72px; font-weight: 200; color: #fff; padding: 0 8px 10px; overflow: hidden; white-space: nowrap; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cbtn { height: 70px; border-radius: 50%; font-size: 28px; font-weight: 400; color: #fff; display: flex; align-items: center; justify-content: center; background: #333; cursor: pointer; transition: filter .1s; user-select: none; }
.cbtn:active { filter: brightness(1.45); }
.cbtn.op { background: #ff9f0a; font-size: 34px; }
.cbtn.fn { background: #a5a5a5; color: #000; }
/* ── 相册 ── */
.photo-grid { position: absolute; inset: 0; padding: 104px 2px 2px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; align-content: start; overflow-y: auto; }
.ptile { aspect-ratio: 1; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 34px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

/* ── 音乐 ── */
.screen-music { background: linear-gradient(180deg, #ffe3ea 0%, #ffffff 60%); }
.music-nav { position: absolute; top: 0; left: 0; right: 0; height: 96px; padding: 58px 18px 0; display: flex; align-items: center; justify-content: space-between; color: #191919; font-size: 17px; z-index: 3; }
.music-nav .m-ttl { font-weight: 600; }
.music-body { position: absolute; inset: 0; padding: 150px 30px 90px; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.album { width: 260px; height: 260px; border-radius: 18px; background: linear-gradient(145deg, #ff7eb3, #ff758c 45%, #8a5cff); display: flex; align-items: center; justify-content: center; font-size: 110px; box-shadow: 0 30px 60px rgba(255, 117, 140, .4); }
.m-song { font-size: 22px; font-weight: 700; margin-top: 26px; color: #191919; }
.m-artist { font-size: 14px; color: var(--muted); margin-top: 5px; }
.m-progress { width: 100%; height: 4px; background: #e4e6ec; border-radius: 2px; margin-top: 26px; position: relative; }
.m-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); border-radius: 2px; }
.m-times { width: 100%; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 7px; }
.m-controls { display: flex; align-items: center; gap: 40px; margin-top: 18px; color: #191919; }
.m-controls .mc { font-size: 30px; cursor: pointer; }
.m-controls .play { width: 68px; height: 68px; border-radius: 50%; background: #191919; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 14px 30px rgba(25, 25, 25, .3); }
.m-more { display: flex; gap: 46px; margin-top: 26px; font-size: 20px; color: #191919; }
.m-tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(20px); display: flex; justify-content: space-around; align-items: center; font-size: 20px; color: #191919; z-index: 4; border-top: 1px solid var(--line); }

/* ── 时钟 ── */
.screen-clock { background: #000; }
.clock-nav { position: absolute; top: 56px; left: 0; right: 0; display: flex; justify-content: center; gap: 26px; color: rgba(255, 255, 255, .6); font-size: 14px; z-index: 3; }
.clock-nav span { cursor: pointer; padding-bottom: 6px; }
.clock-nav .on { color: #fff; font-weight: 700; border-bottom: 2px solid #ff9f0a; }
.clock-body { position: absolute; inset: 0; padding: 110px 24px 0; }
.clock-card { background: #16171c; border-radius: 22px; padding: 20px; text-align: center; color: #fff; }
.clock-time { font-size: 64px; font-weight: 200; letter-spacing: 2px; }
.clock-city { font-size: 13px; color: #8a8f99; margin-top: 4px; }
.alarm-title { color: #8a8f99; font-size: 12px; font-weight: 700; letter-spacing: 1px; margin: 22px 6px 6px; }
.alarm-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px; color: #fff; }
.alarm-row + .alarm-row { border-top: 1px solid rgba(255, 255, 255, .08); }
.alarm-row b { font-size: 30px; font-weight: 200; }
.alarm-row i { font-style: normal; font-size: 13px; color: #8a8f99; margin-left: 10px; }
.sw { width: 46px; height: 26px; border-radius: 13px; background: #393c44; position: relative; cursor: pointer; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw.on { background: #34c759; }
.sw.on::after { transform: translateX(20px); }
.sw.off { background: #393c44; }

/* ── 备忘录 ── */
.notes-list { background: #fff; }
.note { padding: 14px 18px; background: #fff; cursor: pointer; }
.note + .note { border-top: 1px solid rgba(0, 0, 0, .06); }
.note b { font-size: 16px; font-weight: 600; }
.note p { font-size: 13px; color: #666; margin-top: 4px; line-height: 1.5; }
.note i { display: block; font-style: normal; font-size: 11px; color: #bbb; margin-top: 6px; }

/* ── 日历 ── */
.cal-scroll { background: #fff; }
.cal-month { font-size: 18px; font-weight: 700; padding: 16px 18px 8px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--muted); padding: 4px 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 4px 8px; row-gap: 6px; }
.cal-day { width: 36px; height: 36px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; }
.cal-day.dim { color: #c4c8d0; }
.cal-day.today { background: var(--red); color: #fff; font-weight: 700; }
.cal-day.hot { background: #ffe9e7; color: var(--red); font-weight: 600; }
.cal-events { margin: 12px 14px; background: #f7f8fa; border-radius: 16px; padding: 4px 14px; }
.cal-ev { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.cal-ev + .cal-ev { border-top: 1px solid var(--line); }
.ce-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
/* ── 浏览器 ── */
.screen-browser { background: #fff; }
.browser-top { position: absolute; top: 0; left: 0; right: 0; height: 96px; padding: 56px 14px 0; display: flex; align-items: center; gap: 10px; background: rgba(247, 247, 249, .94); backdrop-filter: blur(20px); z-index: 5; border-bottom: 1px solid var(--line); }
.browser-url { flex: 1; background: #e9ebf1; border-radius: 10px; padding: 7px 14px; font-size: 13px; color: #3a3f49; }
.browser-body { position: absolute; inset: 0; padding: 104px 16px 70px; overflow-y: auto; }
.bw-hero { background: linear-gradient(135deg, #7ec8ff, #b18cff); border-radius: 22px; padding: 26px 22px; color: #fff; text-align: center; box-shadow: var(--shadow); }
.bw-logo { width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; margin: 0 auto 12px; }
.bw-hero h2 { font-size: 19px; font-weight: 700; }
.bw-hero p { font-size: 12px; opacity: .9; margin-top: 4px; }
.bw-favs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.bw-fav { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #555; }
.bw-fav span { width: 48px; height: 48px; border-radius: 14px; background: #f2f3f7; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.bw-card { margin-top: 16px; background: #f7f8fa; border-radius: 16px; padding: 14px 16px; }
.bw-card b { font-size: 15px; }
.bw-card p { font-size: 13px; color: #555; margin-top: 4px; line-height: 1.5; }
.bw-card i { font-style: normal; font-size: 11px; color: #999; display: block; margin-top: 8px; }
.browser-tabs { position: absolute; bottom: 0; left: 0; right: 0; height: 58px; background: #f7f7f9; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; font-size: 18px; color: #0a84ff; z-index: 4; }

/* ── App Store ── */
.as-scroll { background: #fff; }
.as-today { font-size: 15px; font-weight: 800; padding: 6px 18px 10px; color: var(--blue); }
.as-card { margin: 0 16px 14px; background: linear-gradient(150deg, #ffd3a5, #ffb7c5 55%, #c3a8ff); border-radius: 22px; padding: 16px; position: relative; overflow: hidden; min-height: 190px; box-shadow: var(--shadow); }
.as-card2 { background: linear-gradient(150deg, #a8e6cf, #8fdcf5 55%, #7ec8ff); }
.as-chip { position: absolute; top: 14px; left: 16px; font-size: 11px; font-weight: 700; color: rgba(0, 0, 0, .55); background: rgba(255, 255, 255, .5); padding: 4px 10px; border-radius: 999px; }
.as-art { position: absolute; right: -18px; bottom: -22px; font-size: 120px; opacity: .85; transform: rotate(-8deg); }
.as-art2 { font-size: 96px; right: -8px; bottom: -10px; }
.as-meta { position: absolute; left: 16px; bottom: 16px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .2); max-width: 65%; }
.as-meta b { font-size: 19px; font-weight: 800; display: block; }
.as-meta p { font-size: 12px; opacity: .95; margin-top: 3px; }
.as-meta span { font-size: 11px; opacity: .8; }
.as-get { position: absolute; right: 14px; bottom: 18px; border: none; background: rgba(255, 255, 255, .9); color: var(--blue); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 6px 18px; cursor: pointer; }
.as-row-title { font-size: 19px; font-weight: 700; padding: 8px 18px 10px; }
.as-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px 8px; }
.as-mini { background: #f7f8fa; border-radius: 16px; padding: 12px 8px; text-align: center; }
.as-mini .as-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 8px; }
/* ── 地图 ── */
.screen-maps { background: #e8eef5; }
.map-bg { position: absolute; inset: 0; overflow: hidden; }
.map-road { position: absolute; background: #fff; box-shadow: 0 0 0 1px #d8e0ea; }
.map-road.h1 { left: 0; right: 0; top: 34%; height: 34px; transform: rotate(-4deg); }
.map-road.h2 { left: 0; right: 0; top: 66%; height: 26px; transform: rotate(3deg); }
.map-road.v1 { top: 0; bottom: 0; left: 30%; width: 30px; transform: rotate(-6deg); }
.map-road.v2 { top: 0; bottom: 0; left: 72%; width: 24px; transform: rotate(5deg); }
.map-park { position: absolute; border-radius: 18px; background: #cdeed8; border: 2px dashed #9fcfae; }
.map-park.p1 { width: 120px; height: 90px; top: 12%; left: 8%; transform: rotate(-4deg); }
.map-park.p2 { width: 90px; height: 70px; bottom: 14%; right: 10%; transform: rotate(5deg); }
.map-pin { position: absolute; top: 38%; left: 56%; transform: translate(-50%, -100%); text-align: center; z-index: 2; }
.map-pin span { font-size: 34px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.map-pin b { display: block; font-size: 11px; background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: var(--shadow); margin-top: 2px; white-space: nowrap; }
.map-search { position: absolute; top: 58px; left: 14px; right: 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px); border-radius: 12px; height: 40px; display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: #666; gap: 8px; box-shadow: 0 8px 24px rgba(20, 40, 70, .18); z-index: 3; }
.map-card { position: absolute; bottom: 12px; left: 14px; right: 14px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(20px); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); z-index: 3; }
.map-card b { font-size: 16px; }
.map-card p { font-size: 13px; color: #e8930c; margin-top: 4px; }
.map-card > span { font-size: 12px; color: var(--muted); display: block; margin-top: 4px; }
.map-btns { display: flex; gap: 10px; margin-top: 12px; }
.mb { flex: 1; border: 1px solid #dde3ec; background: #fff; border-radius: 10px; padding: 9px 0; font-size: 14px; color: #0a84ff; cursor: pointer; }
.mb.main { background: #0a84ff; border-color: #0a84ff; color: #fff; }

/* ── 电话 ── */
.phone-seg { position: absolute; top: 98px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; background: rgba(242, 243, 247, .96); padding: 10px 0 12px; z-index: 4; font-size: 13px; color: #8a8f99; }
.phone-seg span { cursor: pointer; }
.phone-seg .on { color: #0a84ff; font-weight: 700; }
.phone-list { padding-top: 156px; background: #fff; }
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; }
.prow + .prow { border-top: 1px solid var(--line); }
.avatar.pa { border-radius: 50%; background: #34c759; width: 44px; height: 44px; font-size: 16px; }
.pname { flex: 1; font-size: 16px; font-weight: 500; }
.pname b { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.pact { font-size: 18px; color: #34c759; }
.phone-keypad { position: absolute; bottom: 0; left: 0; right: 0; background: #f2f3f7; padding: 10px 30px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.kp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kp-row button { height: 58px; border: none; border-radius: 50%; background: #e2e5ec; font-size: 26px; font-weight: 500; color: #111; cursor: pointer; position: relative; }
.kp-row button div { font-size: 10px; font-weight: 400; color: #666; }
/* ── 浮层通用 ── */
.overlay { position: absolute; inset: 0; z-index: 200; opacity: 0; visibility: hidden; transition: opacity .32s ease, transform .32s ease; }
.overlay.open { opacity: 1; visibility: visible; }

/* ── 控制中心 ── */
.control-center { background: rgba(16, 18, 24, .32); backdrop-filter: blur(34px) saturate(1.7); -webkit-backdrop-filter: blur(34px) saturate(1.7); transform: translateY(-26px); }
.control-center.open { transform: none; }
.cc { padding: 80px 18px 0; color: #fff; display: flex; flex-direction: column; gap: 14px; height: 100%; overflow-y: auto; }
.cc-header { display: flex; align-items: baseline; justify-content: space-between; }
.cc-time { font-size: 30px; font-weight: 300; }
.cc-date { font-size: 13px; opacity: .8; margin-top: 2px; }
.cc-icons { display: flex; align-items: center; gap: 5px; }
.cc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cc-btn { background: rgba(255, 255, 255, .14); border-radius: 20px; aspect-ratio: 1 / 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 10.5px; cursor: pointer; transition: background .2s; }
.cc-btn .ci { font-size: 22px; }
.cc-btn.on { background: rgba(10, 132, 255, .92); box-shadow: 0 8px 20px rgba(10, 132, 255, .4); }
.cc-btn.on2 { background: rgba(52, 199, 89, .92); box-shadow: 0 8px 20px rgba(52, 199, 89, .4); }
.cc-card { background: rgba(255, 255, 255, .14); border-radius: 22px; padding: 14px; }
.cc-music { display: flex; gap: 10px; align-items: center; }
.cc-art { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #ff7eb3, #8a5cff); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.cc-song { flex: 1; font-size: 12px; opacity: .85; }
.cc-song b { display: block; font-size: 14px; opacity: 1; }
.cc-fav { color: #ff2d55; font-size: 16px; }
.cc-progress { height: 3px; background: rgba(255, 255, 255, .25); border-radius: 2px; margin: 12px 0 8px; position: relative; }
.cc-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #fff; border-radius: 2px; }
.cc-controls { display: flex; justify-content: space-around; align-items: center; font-size: 20px; }
.cc-play { font-size: 30px; }
.cc-slider-card { display: flex; flex-direction: column; gap: 12px; background: rgba(255, 255, 255, .14); border-radius: 22px; padding: 14px; }
.cc-slider { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.slider { flex: 1; height: 6px; background: rgba(255, 255, 255, .25); border-radius: 3px; position: relative; }
.slider i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: 3px; }
.cc-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cc-mini { background: rgba(255, 255, 255, .14); border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; font-size: 10.5px; cursor: pointer; }
/* ── 通知中心 ── */
.notif-center { background: rgba(20, 22, 30, .42); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); transform: translateY(-26px); }
.notif-center.open { transform: none; }
.nc { padding: 66px 16px 0; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.nc-time { font-size: 54px; font-weight: 200; letter-spacing: 1px; }
.nc-date { font-size: 15px; opacity: .9; }
.nc-search { background: rgba(255, 255, 255, .2); border-radius: 12px; height: 36px; display: flex; align-items: center; padding: 0 14px; gap: 8px; font-size: 14px; }
.nc-section { font-size: 12px; font-weight: 700; letter-spacing: 1px; opacity: .8; margin-top: 6px; }

/* ── 应用切换器 ── */
.app-switcher { background: rgba(12, 14, 20, .55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transform: scale(.94); display: flex; align-items: center; }
.app-switcher.open { transform: none; }
.as-cards { display: flex; gap: 16px; padding: 0 22px; overflow-x: auto; width: 100%; scroll-snap-type: x mandatory; scrollbar-width: none; }
.as-cards::-webkit-scrollbar { display: none; }
.as-card { flex: 0 0 148px; height: 292px; border-radius: 22px; overflow: hidden; background: #fff; scroll-snap-align: center; position: relative; cursor: pointer; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.as-card .x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 3; }
.as-mini { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.as-mini .mi { font-size: 40px; text-shadow: none; }
.as-label { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); padding: 4px 0; border-radius: 999px; margin: 0 30px; }

/* ── DPhone ID 登录 ── */
.dphone-login { background: rgba(20, 22, 30, .5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; padding: 30px; }
.login-card { width: 100%; background: #fff; border-radius: 28px; padding: 30px 24px 22px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); max-height: 100%; overflow-y: auto; position: relative; }
.login-close { position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; border: none; border-radius: 50%; background: #eef0f5; color: #555; font-size: 14px; cursor: pointer; font-family: inherit; }
.login-logo { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, #7fb2ff, #a78bfa); color: #fff; font-size: 40px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(110, 140, 255, .4); }
.login-card h2 { font-size: 22px; font-weight: 700; margin-top: 16px; }
.login-sub { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 6px; line-height: 1.6; }
.login-input { width: 100%; margin-top: 16px; background: #f2f3f7; border: 1px solid transparent; border-radius: 12px; height: 46px; padding: 0 14px; font-size: 15px; outline: none; font-family: inherit; transition: border .2s; }
.login-input:focus { border-color: var(--blue); background: #fff; }
.login-btn { width: 100%; margin-top: 16px; height: 46px; border: none; border-radius: 12px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 8px 20px rgba(10, 132, 255, .35); }
.login-btn:active { filter: brightness(.92); }
.login-link { font-size: 13px; color: var(--blue); margin-top: 14px; cursor: pointer; }
.login-legal { font-size: 10.5px; color: #b6bac2; margin-top: 16px; text-align: center; line-height: 1.6; }

/* ── 信息 App 的蓝色气泡 ── */
.screen-chat.chat-blue .chat-nav { background: #f7f7f7; }
.screen-chat.chat-blue .bubble.out { background: #0a84ff; color: #fff; }
.screen-chat.chat-blue .chat-input .send { background: #0a84ff; }

/* ── 设置行内控件微调 ── */
.row em { font-style: normal; }

/* ── Home 指示条 ── */
.home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 132px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .92); z-index: 260; cursor: pointer; }
.phone[data-theme="light"] .home-indicator { background: rgba(17, 19, 24, .85); }

/* ═══ 主屏幕两页横滑 ═══ */
.home-pages { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 14px; -webkit-overflow-scrolling: touch; }
.home-pages::-webkit-scrollbar { display: none; }
.home-page { min-width: 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: min-content; row-gap: 20px; align-content: start; padding: 0 0 6px; }

/* ═══ 新增 14 个应用的图标色 ═══ */
.a-mail      { background: linear-gradient(145deg, #ffffff, #cfe6ff); }
.a-wallet    { background: linear-gradient(145deg, #2b2e36, #000); }
.a-health    { background: linear-gradient(145deg, #ffd6d9, #ff6b81); }
.a-fitness   { background: linear-gradient(145deg, #1e1f24, #000); }
.a-shortcuts { background: linear-gradient(145deg, #3a3d46, #1a1c22); }
.a-podcasts  { background: linear-gradient(145deg, #c45cff, #7a1fd0); }
.a-books     { background: linear-gradient(145deg, #ffffff, #f3d9a4); }
.a-homeapp   { background: linear-gradient(145deg, #ffffff, #ffe3b3); }
.a-translate { background: linear-gradient(145deg, #ffffff, #e6ecf5); }
.a-stocks    { background: linear-gradient(145deg, #1e1f24, #0a0b0e); }
.a-compass   { background: linear-gradient(145deg, #3a3d46, #111318); }
.a-voice     { background: linear-gradient(145deg, #f5f5f7, #d6d7db); }
.a-files     { background: linear-gradient(145deg, #ffffff, #cfe6ff); }
.a-reminders { background: linear-gradient(145deg, #ffffff, #ddf4e3); }

/* ═══ 邮件 ═══ */
.gen-list { background: #fff; }
.gen-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; cursor: pointer; position: relative; }
.gen-row + .gen-row { border-top: 1px solid var(--line); }
.gen-row.read { opacity: .55; }
.gen-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px; flex-shrink: 0; }
.gen-main { flex: 1; min-width: 0; }
.gen-main b { font-size: 15px; font-weight: 600; }
.gen-main p { font-size: 13px; color: #666; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-main i { display: block; font-style: normal; font-size: 11px; color: #bbb; margin-top: 3px; }

/* ═══ 钱包 ═══ */
.wallet-body { background: #f2f3f7; }
.wallet-card { margin: 14px 16px 0; border-radius: 20px; padding: 22px; background: linear-gradient(150deg, #3a3f4a, #101318 55%, #23262e); color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.wallet-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%); }
.wc-type { font-size: 11px; letter-spacing: 2px; opacity: .8; font-weight: 700; }
.wallet-card b { display: block; font-size: 22px; font-weight: 600; letter-spacing: 2px; margin-top: 22px; }
.wc-name { font-size: 12px; opacity: .85; display: block; margin-top: 18px; }
.wc-chip { position: absolute; right: 18px; bottom: 16px; font-size: 22px; }
.wallet-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 16px 0; }
.wact { background: #fff; border-radius: 16px; padding: 12px 4px; text-align: center; font-size: 11px; color: #555; box-shadow: 0 2px 8px rgba(20, 24, 40, .06); cursor: pointer; }
.wl-title { font-size: 14px; font-weight: 700; margin: 18px 18px 6px; }
.wallet-txn { display: flex; align-items: center; justify-content: space-between; background: #fff; margin: 0 16px; padding: 13px 16px; font-size: 14px; }
.wallet-txn + .wallet-txn { border-top: 1px solid var(--line); }
.wallet-txn b { font-weight: 600; color: #111; }
.wallet-txn .up { color: #34c759; }

/* ═══ 健康 ═══ */
.health-body { background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; }
.h-card { background: linear-gradient(150deg, #fff, #f6f8fc); border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
.hc-ic { font-size: 22px; }
.h-card b { display: block; font-size: 13px; color: #666; margin-top: 8px; font-weight: 600; }
.h-card em { font-style: normal; display: block; font-size: 30px; font-weight: 700; margin-top: 6px; }
.h-card i { font-style: normal; font-size: 11px; color: var(--muted); display: block; margin-top: 4px; }

/* ═══ 健身 ═══ */
.screen-fitness { background: linear-gradient(180deg, #17181d, #22242b); }
.fitness-body { padding-top: 120px; display: flex; flex-direction: column; align-items: center; color: #fff; }
.f-ring { position: relative; width: 170px; height: 170px; }
.f-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.f-ring-num b { font-size: 34px; font-weight: 300; }
.f-ring-num span { font-size: 12px; opacity: .7; margin-top: 2px; }
.f-goal { display: flex; align-items: center; gap: 10px; width: 80%; margin-top: 16px; background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 12px 14px; }
.fg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.f-goal b { font-size: 14px; flex: 1; }
.f-goal em { font-style: normal; font-size: 12px; opacity: .8; }
.f-workout { width: 80%; margin-top: 18px; background: rgba(255, 255, 255, .1); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.f-workout span { font-size: 12px; opacity: .75; }

/* ═══ 快捷指令 ═══ */
.sc-grid { background: #f2f3f7; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; }
.sc-item { background: #fff; border-radius: 16px; padding: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(20, 24, 40, .06); cursor: pointer; transition: transform .15s; }
.sc-item span { font-size: 20px; }
/* ═══ 播客 ═══ */
.pods-list { background: #fff; }
.pod { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.pod + .pod { border-top: 1px solid var(--line); }
.pod-art { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; box-shadow: 0 6px 14px rgba(20, 24, 40, .18); }
.pod > div { flex: 1; min-width: 0; }
.pod b { font-size: 15px; font-weight: 600; display: block; }
.pod p { font-size: 12px; color: #888; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-time { font-size: 11px; color: #bbb; }

/* ═══ 图书 ═══ */
.books-grid { background: #f2f3f7; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px 16px; }
.book { text-align: center; }
.book-cov { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: 0 10px 20px rgba(20, 24, 40, .22); }
.book b { display: block; font-size: 12px; margin-top: 8px; color: #444; }

/* ═══ 家庭 ═══ */
.home-body { background: #f2f3f7; }
.hm-room { font-size: 13px; color: var(--muted); font-weight: 600; padding: 12px 18px 6px; }
.hm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 6px 16px 12px; }
.hm-dev { background: #fff; border-radius: 18px; padding: 14px 10px; text-align: center; box-shadow: 0 2px 10px rgba(20, 24, 40, .06); cursor: pointer; transition: .15s; }
.hm-dev span { font-size: 24px; display: block; }
.hm-dev b { display: block; font-size: 12px; margin-top: 8px; color: #111; }
.hm-dev.off { opacity: .45; }
.hm-dev.off b { color: var(--muted); }
.hm-scene { margin: 4px 16px 12px; background: linear-gradient(135deg, #eaf4ff, #f6f0ff); border-radius: 16px; padding: 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.hm-scene.running { transform: scale(.98); background: #dfeaff; }

/* ═══ 翻译 ═══ */
.screen-translate .app-nav { background: #fff; }
.tr-body { background: #f2f3f7; padding: 14px 16px; display: flex; flex-direction: column; }
.tr-swap { text-align: center; font-size: 14px; font-weight: 600; color: #333; padding: 8px 0 12px; }
.tr-swap span { color: var(--blue); margin: 0 10px; }
.tr-input { min-height: 100px; border: none; border-radius: 16px; background: #fff; padding: 14px; font-size: 15px; font-family: inherit; resize: none; outline: none; box-shadow: 0 2px 10px rgba(20, 24, 40, .06); }
.tr-out { margin-top: 12px; background: #eaf4ff; border-radius: 16px; padding: 14px; font-size: 14px; color: #0a4d8c; min-height: 46px; }
.tr-btn { margin-top: 12px; border: none; background: var(--blue); color: #fff; border-radius: 12px; height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.tr-hist { font-size: 13px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }
.tr-row { background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 8px; color: #333; }

/* ═══ 股市 ═══ */
.stocks-body { background: #111318; padding-top: 116px; }
.stock-idx { background: linear-gradient(135deg, #1c1f28, #232733); margin: 12px 16px; border-radius: 18px; padding: 18px; display: flex; align-items: baseline; gap: 12px; color: #fff; }
.stock-idx b { font-size: 13px; opacity: .8; flex: 1; }
.stock-idx em { font-style: normal; font-size: 26px; font-weight: 300; }
.stock { display: flex; align-items: center; margin: 0 16px; padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.st-name { flex: 1; font-size: 14px; color: #fff; }
.stock b { font-size: 15px; color: #fff; font-weight: 500; width: 80px; text-align: right; }
.stock em { font-style: normal; font-size: 13px; font-weight: 600; width: 70px; text-align: right; }
.up { color: #34c759; }
.down { color: #ff453a; }

/* ═══ 指南针 ═══ */
.screen-compass { background: #101318; }
.compass-body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.compass-card { text-align: center; color: #fff; }
.compass-deg { font-size: 28px; font-weight: 300; margin-top: 14px; }
.compass-coord { font-size: 12px; opacity: .7; margin-top: 6px; letter-spacing: 1px; }

/* ═══ 语音备忘录 ═══ */
.voice-list { background: #fff; }
.vrow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.vrow + .vrow { border-top: 1px solid var(--line); }
.vplay { width: 40px; height: 40px; border-radius: 50%; border: none; background: #0a84ff; color: #fff; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.vplay.playing { background: #ff453a; }
.vrow b { font-size: 15px; font-weight: 600; display: block; }
.vrow p { font-size: 12px; color: #888; margin-top: 3px; }
.voice-rec { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #ff453a; color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; z-index: 5; display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 24px rgba(255, 69, 58, .4); }
.vr-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.voice-rec.rec .vr-dot { animation: blink 1s ease infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* ═══ 文件 ═══ */
.files-grid { background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px; }
.file { text-align: center; cursor: pointer; }
.file-ic { width: 100%; aspect-ratio: 1; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 12px rgba(20, 24, 40, .12); }
.file { font-size: 11px; color: #555; margin-top: 6px; }

/* ═══ 提醒事项 ═══ */
.rem-body { background: #fff; padding-top: 8px; }
.rem-item { display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-size: 15px; cursor: pointer; }
.rem-item + .rem-item { border-top: 1px solid var(--line); }
.rem-item i { font-style: normal; font-size: 11px; color: #bbb; margin-left: auto; }
.rem-item.done { text-decoration: line-through; color: #bbb; }

/* ═══ 深色界面下的导航适配 ═══ */
.screen-fitness .app-nav { background: rgba(28, 30, 36, .94); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.screen-fitness .nav-title { color: #fff; }
.screen-wallet .app-nav { background: #f2f3f7; }

/* ═══ 音乐播放按钮状态 ═══ */
.m-play.on { background: #0a84ff !important; }