/* ==========================================================
   捡手机 —— iPhone 风格交互叙事原型
   ========================================================== */

:root {
  --ink: #000;
  --ink-2: rgba(60,60,67,.6);
  --ink-3: rgba(60,60,67,.3);
  --sep: rgba(60,60,67,.18);
  --bg: #f2f2f7;
  --card: #fff;
  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Songti SC", "Source Han Serif SC", Georgia, serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden 属性必须能覆盖各元素自身的 display，否则元素永远显示 */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0b0b0f;
  font-family: var(--font);
  color: var(--ink);
  overscroll-behavior: none;
}

body {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 700px at 18% -10%, #1d2140 0%, transparent 60%),
    radial-gradient(900px 600px at 88% 110%, #2a1730 0%, transparent 62%),
    #0b0b0f;
}

/* ---------------- 舞台 ---------------- */
.stage { display: flex; align-items: center; justify-content: center; }

/* ---------------- 设备外壳 ---------------- */
.device {
  position: relative;
  width: 393px; height: 852px;
  border-radius: 56px;
  padding: 11px;
  background: linear-gradient(160deg, #4a4a52, #17171c 30%, #101014 70%, #3c3c44);
  box-shadow:
    0 0 0 2px #0c0c10,
    0 40px 90px rgba(0,0,0,.65),
    0 8px 24px rgba(0,0,0,.5);
  flex: none;
}
.device::before, .device::after {
  content: ""; position: absolute; right: -3px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #2b2b33, #55555f);
}
.device::before { top: 150px; height: 60px; }
.device::after  { top: 235px; height: 60px; }

.screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 46px; overflow: hidden;
  background: #000; isolation: isolate;
}

/* ---------------- 状态栏 ---------------- */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px 0 34px;
  color: #fff; font-size: 15px; font-weight: 600;
  pointer-events: none; mix-blend-mode: normal;
}
.statusbar.dark { color: #000; }
.sb-time { letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sb-left { display: flex; align-items: center; gap: 6px; }
.sb-vpn {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .78;
}
.sb-island {
  position: absolute; left: 50%; transform: translateX(-50%); top: 11px;
  width: 124px; height: 34px; border-radius: 20px; background: #000;
}
.sb-right { display: flex; align-items: center; gap: 6px; }
.sb-ico { width: 18px; height: 12px; fill: currentColor; }
.sb-batt {
  width: 26px; height: 13px; border: 1.4px solid currentColor; border-radius: 4px;
  position: relative; opacity: .95;
}
.sb-batt::after {
  content: ""; position: absolute; right: -3.4px; top: 3.4px;
  width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: currentColor; opacity: .5;
}
.sb-batt i {
  position: absolute; inset: 1.6px; width: 62%; border-radius: 1.5px; background: currentColor;
}

/* ---------------- 通用层 ---------------- */
.layer { position: absolute; inset: 0; }
.layer[hidden] { display: none !important; }

/* ---------------- 开场 ---------------- */
.intro {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(170deg, #10121f, #08080c);
  color: #e8e8f0; padding: 0 34px; text-align: center;
}
.intro-inner { max-width: 300px; }
.intro-tag {
  font-size: 11px; letter-spacing: .34em; color: #7b7b95;
  text-transform: uppercase; margin: 0 0 20px;
}
.intro-title {
  font-family: var(--serif); font-size: 44px; font-weight: 600;
  margin: 0 0 26px; letter-spacing: .1em;
}
.intro-text { font-size: 14px; line-height: 2; color: #9a9ab0; margin: 0 0 14px; }

.ios-btn {
  display: block; width: 100%; margin-top: 24px; padding: 15px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: #fff; color: #000; font-family: var(--font);
  font-size: 16px; font-weight: 600; transition: .18s;
}
.ios-btn:hover { background: #e8e8ee; transform: translateY(-1px); }
.ios-btn:active { transform: scale(.985); }
.ios-btn.ghost {
  background: transparent; color: #8b8ba5; font-weight: 400;
  border: 1px solid #33334a; margin-top: 10px; font-size: 14px;
}
.ios-btn.ghost:hover { background: rgba(255,255,255,.05); color: #c9c9dc; }

/* ---------------- 锁屏 ---------------- */
.lockscreen {
  background:
    linear-gradient(175deg, rgba(20,24,48,.82), rgba(10,10,18,.94)),
    radial-gradient(700px 500px at 30% 18%, #2b3468, transparent 65%),
    radial-gradient(600px 500px at 80% 85%, #4a2350, transparent 60%),
    #0a0a12;
  color: #fff; display: flex; flex-direction: column;
}
.lock-clock { padding: 86px 0 0; text-align: center; }
.lock-time {
  font-size: 76px; font-weight: 250; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.lock-date { margin-top: 6px; font-size: 16px; opacity: .82; }

.lock-notif {
  margin: 26px 14px 0; padding: 12px 14px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(24px);
  border-radius: 20px; display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; animation: slideDown .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes slideDown { from { transform: translateY(-16px); opacity: 0 } to { transform: none; opacity: 1 } }
.lock-notif-ico { width: 34px; height: 34px; border-radius: 8px; flex: none; overflow: hidden; }
.lock-notif-ico svg { width: 100%; height: 100%; display: block; }
.lock-notif-body { flex: 1; min-width: 0; }
.lock-notif-app { font-size: 12px; opacity: .62; margin-bottom: 2px; }
.lock-notif-title { font-size: 14px; font-weight: 600; }
.lock-notif-text {
  font-size: 13.5px; opacity: .8; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lock-notif-time { font-size: 12px; opacity: .55; flex: none; }

.lock-bottom { margin-top: auto; text-align: center; padding-bottom: 42px; }
.lock-hint { font-size: 13.5px; opacity: .6; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .42 } 50% { opacity: .82 } }

/* ---------------- 密码盘 ---------------- */
.passcode {
  background: rgba(0,0,0,.92); backdrop-filter: blur(20px);
  color: #fff; display: flex; flex-direction: column;
  padding: 200px 30px 18px;
}
.pc-head { text-align: center; }
.pc-title { font-size: 19px; font-weight: 500; }
.pc-sub { font-size: 12.5px; opacity: .5; margin-top: 8px; }
.pc-dots {
  position: absolute; top: 33.333%; left: 0; right: 0; transform: translateY(-50%);
  display: flex; gap: 19px; justify-content: center; margin: 0;
}
.pc-dots i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.6px solid rgba(255,255,255,.55); transition: .15s;
}
.pc-dots i.on { background: #fff; border-color: #fff; transform: scale(1.05); }
.pc-dots.shake { animation: shake .4s; }
@keyframes shake {
  0%,100% { transform: translateX(0) } 25% { transform: translateX(-9px) }
  75% { transform: translateX(9px) }
}
.pc-keys {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 15px 26px; align-content: end; max-width: 290px; margin: 0 auto; width: 100%;
}
.pc-key {
  aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.13); color: #fff;
  font-size: 32px; font-weight: 300; font-family: var(--font);
  display: grid; place-items: center; transition: .12s;
}
.pc-key:hover { background: rgba(255,255,255,.24); }
.pc-key:active { background: rgba(255,255,255,.36); transform: scale(.94); }
.pc-key.blank { background: transparent; pointer-events: none; }
.pc-key.fn { background: transparent; font-size: 15px; font-weight: 400; }

/* ---------------- 桌面 ---------------- */
.home {
  background:
    linear-gradient(180deg, rgba(8,8,14,.5), rgba(8,8,14,.2) 40%, rgba(8,8,14,.75)),
    radial-gradient(760px 560px at 26% 12%, #34407e, transparent 62%),
    radial-gradient(680px 540px at 82% 78%, #52285c, transparent 62%),
    #0b0d18;
}
.home-pages { position: absolute; inset: 0; display: flex; }
.home-page {
  width: 100%; flex: none; padding: 96px 24px 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content; gap: 22px 16px; align-content: start;
}
.home-page[data-page="1"] { display: none; }
.home-pages.p2 .home-page[data-page="0"] { display: none; }
.home-pages.p2 .home-page[data-page="1"] { display: grid; }

.app-icon {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; position: relative;
}
.app-ico {
  width: 60px; height: 60px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  position: relative; transition: transform .14s;
}
.app-icon:active .app-ico { transform: scale(.9); }
.app-ico svg { width: 100%; height: 100%; display: block; }
.app-name {
  font-size: 11.5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  max-width: 70px; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.app-badge {
  position: absolute; top: -5px; right: 2px; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: #ff3b30; color: #fff;
  font-size: 12px; font-weight: 600; display: grid; place-items: center;
  border: 1.5px solid rgba(0,0,0,.15); box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.home-dots {
  position: absolute; bottom: 104px; left: 0; right: 0;
  display: flex; gap: 7px; justify-content: center;
}
.home-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); }
.home-dots i.on { background: rgba(255,255,255,.92); }

.home-dock {
  position: absolute; bottom: 22px; left: 12px; right: 12px; height: 88px;
  background: rgba(255,255,255,.13); backdrop-filter: blur(22px);
  border-radius: 30px; border: 1px solid rgba(255,255,255,.12);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  padding: 0 14px;
}

/* ---------------- App 容器 ---------------- */
/* App 容器必须绝对定位铺满屏幕，否则高度为 auto，flex 子项会塌陷成 0（黑屏） */
.app-layer {
  position: absolute; inset: 0;
  background: var(--bg); display: flex; flex-direction: column;
}
.appbar {
  height: 96px; padding: 54px 14px 0; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(242,242,247,.86); backdrop-filter: blur(20px);
  border-bottom: .5px solid var(--sep); position: relative; z-index: 5;
}
.appbar.plain { background: transparent; border-bottom: 0; }
.appbar-left { flex: none; min-width: 44px; display: flex; align-items: center; }
.appbar-back {
  display: flex; align-items: center; gap: 1px; border: 0; background: none;
  color: #181818; font-size: 16.5px; font-family: var(--font); cursor: pointer;
  padding: 6px 2px;
}
.appbar-back svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.appbar-title {
  font-size: 16px; font-weight: 600; margin: 0; position: absolute;
  left: 50%; transform: translateX(-50%); bottom: 12px; white-space: nowrap;
}
.appbar-right { flex: none; min-width: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.appbar-ico {
  width: 22px; height: 22px; cursor: pointer; display: block;
  fill: none; stroke: #181818; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.app-scroll {
  position: relative;
  flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
.app-fab {
  position: absolute; right: 18px; bottom: 108px; z-index: 8;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.tabbar {
  flex: none; height: 83px; padding-bottom: 22px;
  background: rgba(249,249,251,.94); backdrop-filter: blur(20px);
  border-top: .5px solid var(--sep);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.tabbar.three { grid-template-columns: repeat(3, 1fr); }
.tabbar.two { grid-template-columns: repeat(2, 1fr); }
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 10.5px; color: #7a7a7a; cursor: pointer; background: none;
  border: 0; font-family: var(--font); padding-top: 6px; position: relative;
}
.tab-item.on { color: var(--blue); }
.tab-item svg { width: 25px; height: 25px; fill: currentColor; }
.tab-badge {
  position: absolute; top: 0; left: 50%; margin-left: 3px;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: #fa5151; color: #fff; font-size: 11px; font-weight: 500;
  display: grid; place-items: center;
}

/* ================= 微信（参考 微信页面参考.jpg） ================= */
/* 参考图 720px 宽 ≈ 371px 屏宽，换算系数 0.5153 */
/* flush 模式：内容区变成 flex 容器，子元素用 flex:1 撑满，避免百分比高度失效 */
.app-scroll.flush {
  padding-bottom: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* 微信主页：自带头部，整屏铺满 */
.wx-page {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; background: #ededed;
}
.wx-nav {
  flex: none; padding: 58px 14px 0; height: 100px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  background: #ededed; border-bottom: .5px solid #dcdcdc;
}
.wx-nav-back {
  width: 40px; height: 40px; border: 0; background: none; padding: 0;
  cursor: pointer; display: grid; place-items: center; color: #181818;
}
.wx-nav-back svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.wx-nav-title { font-size: 17px; font-weight: 600; color: #181818; }
.wx-nav-right { display: flex; align-items: center; gap: 16px; }
.wx-nav-right svg {
  width: 22px; height: 22px; fill: none; stroke: #181818;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* 联系人列表区：白底，撑满剩余高度，内部可滚动；折叠栏固定在列表区底部 */
.wx-list {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: #fff;
}
.wx-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.wx-search {
  margin: 8px 12px 10px; background: #fff; border-radius: 9px;
  height: 38px; display: flex; align-items: center; gap: 7px;
  padding: 0 10px; color: #9a9a9a; font-size: 15px;
}
.wx-search svg { width: 16px; height: 16px; fill: none; stroke: #b6b6b6; stroke-width: 2; }
.wx-item {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 15px; background: #fff; cursor: pointer;
  border-bottom: .5px solid #e6e6e6; position: relative;
  min-height: 67px; box-sizing: border-box;
}
.wx-item:active { background: #d9d9d9; }
.wx-ava {
  width: 50px; height: 50px; border-radius: 5px; overflow: hidden;
  flex: none; background: #d4d4d4; position: relative;
}
.wx-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-ava .wx-ava-txt {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 18px; font-weight: 400;
}
.wx-mid { flex: 1; min-width: 0; }
.wx-name { font-size: 17px; color: #191919; line-height: 1.35; }
.wx-msg {
  font-size: 14px; color: #9a9a9a; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-right { flex: none; align-self: stretch; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between; padding: 3px 0; }
.wx-time { font-size: 12.5px; color: #b2b2b2; }
.wx-mute { width: 15px; height: 15px; fill: #c4c4c4; }
.wx-fold {
  flex: none;
  display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  background: #fff; border-top: .5px solid #e6e6e6; cursor: pointer;
  font-size: 15px; color: #576b95;
}
.wx-fold svg { width: 17px; height: 17px; fill: #576b95; }
.wx-fold .chev-up { margin-left: auto; fill: #c0c0c0; }

/* ================= 微信聊天页（参考 微信聊天页面参考.jpg） ================= */
/* 聊天页占满整屏：头部固定顶部，消息区滚动，输入栏固定底部 */
.wx-chat {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: #ededed;
}
.wx-chat-head {
  flex: none; padding: 58px 12px 0; height: 100px; box-sizing: border-box;
  background: #ededed;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: .5px solid #d6d6d6;
}
.wx-chat-back {
  display: flex; align-items: center; gap: 3px; border: 0; background: none;
  color: #181818; font-size: 16.5px; font-family: var(--font); cursor: pointer;
}
.wx-chat-back svg { width: 19px; height: 19px; fill: none; stroke: #181818; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.wx-chat-name { font-size: 16.5px; font-weight: 500; color: #181818; }
.wx-chat-more { font-size: 20px; color: #181818; letter-spacing: 2px; }
.wx-chat-more svg { width: 22px; height: 22px; display: block; fill: #181818; stroke: none; }
.wx-chat-body {
  flex: 1; overflow-y: auto; padding: 12px 12px 8px; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.wx-msg-row { display: flex; gap: 9px; align-items: flex-start; }
.wx-msg-row.me { flex-direction: row-reverse; }
.wx-msg-ava {
  width: 38px; height: 38px; border-radius: 4px; overflow: hidden;
  flex: none; background: #cfcfcf; position: relative;
}
.wx-msg-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-msg-ava .wx-ava-txt { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; }
.wx-bubble {
  max-width: 70%; padding: 10px 13px; background: #fff;
  border-radius: 6px; font-size: 16px; line-height: 1.5; color: #191919;
  position: relative; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.wx-bubble::before {
  content: ""; position: absolute; left: -5px; top: 12px;
  border: 5px solid transparent; border-right-color: #fff; border-left: 0;
}
.wx-msg-row.me .wx-bubble { background: #95ec69; }
.wx-msg-row.me .wx-bubble::before {
  left: auto; right: -5px; border-right: 0; border-left-color: #95ec69;
}
.wx-bubble.blurred { filter: blur(7px); cursor: pointer; }
.wx-time-center { text-align: center; font-size: 12px; color: #a0a0a0; }
.wx-image-msg {
  width: 168px; border-radius: 6px; overflow: hidden; background: #fff;
  cursor: pointer; font-size: 13px; color: #666; padding: 8px 10px;
}
.wx-input-bar {
  flex: none; background: #f7f7f7; border-top: .5px solid #d6d6d6;
  padding: 7px 8px; display: flex; align-items: center; gap: 8px;
}
.wx-input-bar input,
.wx-input-bar textarea {
  flex: 1; min-width: 0; border: 0; background: #fff; border-radius: 5px;
  padding: 8px 11px; font-size: 16px; font-family: var(--font); outline: none;
  line-height: 1.3; resize: none; overflow-y: auto;
  min-height: 35px; max-height: 84px;
}
.wx-input-ico { width: 27px; height: 27px; flex: none; fill: none; stroke: #565656; stroke-width: 1.7; }
.wx-input-extra { display: flex; gap: 7px; flex: none; }
.wx-send {
  flex: none; display: none; border: 0; border-radius: 5px; background: #07c160;
  color: #fff; height: 33px; padding: 0 15px;
  font-size: 15px; font-family: var(--font); cursor: pointer;
}
.wx-input-bar.filled .wx-input-extra { display: none; }
.wx-input-bar.filled .wx-send { display: block; }
.wx-send:active { background: #06ad56; }
/* 底部键盘 */
.wx-kbd {
  display: none; flex: none; background: #d1d4d9;
  padding: 6px 3px 10px; user-select: none;
}
.wx-kbd.open { display: block; }
.kbd-row { display: flex; justify-content: center; gap: 5px; margin-bottom: 7px; }
.kbd-row:last-child { margin-bottom: 0; gap: 7px; }
.kbd-key {
  flex: 1; max-width: 34px; height: 39px; border: 0; border-radius: 5px;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.28);
  font-family: var(--font); font-size: 19px; color: #111;
  cursor: pointer; padding: 0;
}
.kbd-key:active { background: #dfe1e5; }
.kbd-key.fn { background: #adb2ba; font-size: 15px; max-width: 44px; }
.kbd-key.space { flex: 4; max-width: none; font-size: 14px; }
.kbd-key.go { background: #07c160; color: #fff; font-size: 14px; max-width: 62px; }
.kbd-key.fn.wide { max-width: 50px; }
/* 内心 os：手机底部的灰色框 */
.wx-os {
  flex: none; margin: 0 12px 6px; padding: 9px 12px;
  background: rgba(120,120,128,.14); border-radius: 10px;
  color: #4a4a4a; font-size: 13.5px; line-height: 1.55;
}
.wx-os-label {
  display: block; font-size: 10.5px; letter-spacing: .06em;
  color: #9a9a9a; margin-bottom: 3px;
}
/* 剧情选项：出现在输入栏上方 */
.wx-choice-row {
  flex: none; background: #f7f7f7; border-top: .5px solid #e2e2e2;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 6px;
}
.wx-choice {
  border: 0; background: #fff; border-radius: 8px; padding: 10px 13px;
  text-align: left; font-size: 15px; color: #181818;
  font-family: var(--font); cursor: pointer;
}
.wx-choice:active { background: #ececec; }
/* 页面大对话框 */
.wx-dialog-mask {
  position: absolute; inset: 0; z-index: 92;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  padding: 0 30px;
}
.wx-dialog { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; }
.wx-dialog-text {
  padding: 26px 22px; font-size: 16px; line-height: 1.75;
  color: #191919; text-align: center;
}
.wx-dialog-ok {
  width: 100%; border: 0; border-top: .5px solid #e5e5e5; background: #fff;
  padding: 14px; font-size: 16.5px; color: #07c160;
  font-family: var(--font); cursor: pointer;
}
/* ---------------- Instagram ---------------- */
.ig-page {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: #fff; overflow: hidden;
}
.ig-top {
  flex: none; height: 104px; display: flex; align-items: flex-end;
  justify-content: center; padding-bottom: 8px;
}
.ig-logo {
  font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  font-size: 25px; color: #111;
}
.ig-back { top: 62px; left: 12px; width: 34px; height: 34px; background: transparent; backdrop-filter: none; }
.ig-back svg { width: 20px; height: 20px; fill: none; stroke: #111; stroke-width: 2; }
.ig-searchbar {
  flex: none; display: flex; align-items: center; gap: 8px;
  margin: 4px 14px 10px; padding: 0 10px; height: 38px;
  border-radius: 10px; background: #efefef;
}
.ig-search-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: #8a8a8e; stroke-width: 1.9; }
.ig-searchbar input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font); font-size: 15px; color: #111;
}
.ig-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 20px; }
.ig-row {
  width: 100%; border: 0; background: #fff; display: flex; align-items: center;
  gap: 12px; padding: 9px 16px; text-align: left; cursor: pointer;
  font-family: var(--font);
}
.ig-row:active { background: #fafafa; }
.ig-ava {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  flex: none; display: block; background: #ececec;
}
.ig-ava-sm { width: 46px; height: 46px; }
.ig-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ig-row-handle { font-size: 14px; font-weight: 600; color: #111; }
.ig-row-name { font-size: 13px; color: #8a8a8e; }
.ig-row-btn { flex: none; font-size: 14px; font-weight: 600; color: #0095f6; }
.ig-empty { padding: 60px 0; text-align: center; color: #8a8a8e; font-size: 14px; }
.ig-prof-top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 58px 14px 6px;
}
.ig-backbtn {
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent;
  color: #111; cursor: pointer; display: grid; place-items: center;
}
.ig-backbtn svg { width: 24px; height: 24px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; }
.ig-prof-handle { font-size: 16px; font-weight: 700; color: #111; }
.ig-prof-more { width: 22px; height: 22px; fill: #111; }
.ig-prof-head { flex: none; display: flex; align-items: center; gap: 20px; padding: 4px 18px 0; }
.ig-prof-head .ig-ava { width: 82px; height: 82px; }
.ig-stats { flex: 1; display: flex; justify-content: space-around; }
.ig-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ig-stat b { font-size: 16px; color: #111; }
.ig-stat span { font-size: 12.5px; color: #555; }
.ig-bio { flex: none; padding: 12px 18px 0; }
.ig-bio-name { font-size: 14px; font-weight: 600; color: #111; }
.ig-bio-text {
  font-size: 13.5px; color: #333; line-height: 1.55; margin-top: 3px;
  white-space: pre-line;
}
.ig-follow {
  flex: none; margin: 10px 18px 0; height: 32px; border: 0; border-radius: 8px;
  background: #efefef; color: #111; font-size: 14px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
}
.ig-follow.on { background: #0095f6; color: #fff; }
.ig-tabs {
  flex: none; margin-top: 14px; border-top: .5px solid #e5e5e5;
  border-bottom: .5px solid #e5e5e5; display: flex; justify-content: center;
}
.ig-tab {
  flex: 1 1 0; border: 0; background: transparent; padding: 11px 0;
  font-family: var(--font); font-size: 12px; letter-spacing: .1em;
  color: #8a8a8e; cursor: pointer;
}
.ig-tab.on { color: #111; box-shadow: inset 0 -1.5px 0 #111; }

/* 未连加速器时的空白页 */
.ig-blank {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; flex-direction: column; background: #fff;
}
.ig-blank-mid {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
.ig-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #e2e2e2; border-top-color: #9a9a9a;
  animation: igspin .9s linear infinite;
}
@keyframes igspin { to { transform: rotate(360deg); } }
.ig-blank-txt { font-size: 15px; color: #8a8a8e; letter-spacing: .04em; }
.ig-blank .wx-os { margin-bottom: 24px; }
.ig-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.ig-tile { padding: 0; border: 0; aspect-ratio: 1; background: #ececec; overflow: hidden; cursor: pointer; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-post-view {
  position: absolute; inset: 0; z-index: 60; background: #fff; overflow-y: auto;
}
.ig-post-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 58px 14px 8px;
}
.ig-post-img { width: 100%; background: #f2f2f7; }
.ig-post-img img { width: 100%; height: auto; display: block; }
.ig-post-cap { padding: 12px 16px 26px; font-size: 14px; line-height: 1.65; color: #222; }
.ig-post-cap b { font-weight: 600; }

/* 手机级内心 os 浮层（微信之外触发时使用） */
.phone-os {
  position: absolute; left: 14px; right: 14px; bottom: 34px; z-index: 80;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(118,118,128,.86); color: #fff;
  font-size: 13.5px; line-height: 1.55;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: osIn .3s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
}
.phone-os-label {
  display: block; font-size: 10.5px; letter-spacing: .06em;
  color: rgba(255,255,255,.62); margin-bottom: 3px;
}
@keyframes osIn { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }

/* 继续游戏 / 从头开始 */
.resume-mask {
  position: absolute; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18,18,20,.42);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.resume-card {
  width: 270px; padding: 22px 18px 16px; border-radius: 22px;
  background: rgba(250,250,252,.96); text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
  animation: osIn .32s cubic-bezier(.2,.9,.3,1);
}
.resume-title { font-size: 16.5px; font-weight: 600; color: #111; }
.resume-sub { font-size: 12.5px; color: #8a8a8e; margin: 7px 0 18px; line-height: 1.55; }
.resume-btn {
  display: block; width: 100%; margin-top: 9px; padding: 13px;
  border: 0; border-radius: 13px; cursor: pointer;
  background: #e9e9ee; color: #111;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  transition: transform .14s;
}
.resume-btn.primary { background: var(--blue); color: #fff; font-weight: 600; }
.resume-btn:active { transform: scale(.98); }
/* 主界面 / 信息流 */
.ig-tabbar {
  flex: none; display: flex; align-items: center; justify-content: space-around;
  height: 52px; border-top: .5px solid #e5e5e5; background: #fff;
}
.ig-tab-btn {
  width: 44px; height: 40px; border: 0; background: transparent; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: #8a8a8e;
}
.ig-tab-btn svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ig-tab-btn.on { color: #111; }
.ig-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fff; }
.ig-empty-feed {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 0 38px;
  text-align: center; color: #444;
}
.ig-empty-ico {
  width: 72px; height: 72px; border-radius: 50%; border: 1.6px solid #111;
  display: grid; place-items: center; margin-bottom: 6px;
}
.ig-empty-ico svg { width: 34px; height: 34px; }
.ig-empty-feed h3 { margin: 0; font-size: 17px; font-weight: 600; color: #111; }
.ig-empty-feed p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #8a8a8e; }
.ig-empty-btn {
  margin-top: 8px; border: 0; border-radius: 8px; background: #0095f6;
  color: #fff; font-family: var(--font); font-size: 14px; font-weight: 600;
  padding: 8px 22px; cursor: pointer;
}
.ig-card { border-bottom: .5px solid #efefef; padding-bottom: 6px; }
.ig-card-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 8px; }
.ig-ava-xs { width: 32px; height: 32px; }
.ig-card-user { flex: 1; font-size: 13.5px; font-weight: 600; color: #111; }
.ig-card-img { display: block; width: 100%; padding: 0; border: 0; background: #f2f2f7; cursor: pointer; }
.ig-card-img img { width: 100%; height: auto; display: block; }
.ig-card-actions { display: flex; align-items: center; gap: 15px; padding: 8px 12px 2px; }
.ig-act {
  width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
  cursor: pointer; color: #262626; display: grid; place-items: center;
}
.ig-act svg { width: 23px; height: 23px; fill: none; stroke: #262626; stroke-width: 1.7; }
.ig-act.on svg { fill: #ed4956; stroke: #ed4956; }
.ig-likes { padding: 2px 12px 0; font-size: 13.5px; font-weight: 600; color: #111; }
.ig-cap { padding: 3px 12px 10px; font-size: 13.5px; line-height: 1.55; color: #262626; }
.ig-cap b { font-weight: 600; }
.ig-post-head { display: flex; align-items: center; gap: 9px; padding: 2px 14px 8px; }
.ig-search-tip {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 0 30px; text-align: center; font-size: 13.5px; color: #8a8a8e;
}
.ig-row-btn {
  flex: none; border: 0; background: transparent; padding: 0 4px;
  font-family: var(--font); font-size: 14px; font-weight: 600; color: #0095f6;
  cursor: pointer;
}
.ig-row-btn.on { color: #8a8a8e; }
.ig-ava-lg { width: 82px; height: 82px; }
.ig-ava-me {
  display: grid; place-items: center; background: #111; color: #fff;
  font-size: 26px; font-weight: 600; border-radius: 50%;
}
.ig-me-head { flex: none; display: flex; align-items: center; gap: 20px; padding: 6px 18px 0; }
.ig-me-handle { flex: none; padding: 14px 18px 0; font-size: 15px; font-weight: 700; color: #111; }
.ig-me-sub { flex: none; padding: 4px 18px 0; font-size: 13px; color: #666; }
/* 分享面板 */
.ig-sheet-mask {
  position: absolute; inset: 0; z-index: 70; background: rgba(0,0,0,.42);
  display: flex; align-items: flex-end;
}
.ig-sheet {
  width: 100%; background: #fff; border-radius: 16px 16px 0 0;
  padding: 6px 0 22px; animation: sheetUp .24s ease-out;
}
@keyframes sheetUp { from { transform: translateY(100%) } to { transform: none } }
.ig-sheet-title {
  padding: 12px 18px 10px; font-size: 13px; color: #8a8a8e; text-align: center;
}
.ig-sheet-item {
  width: 100%; border: 0; background: transparent; padding: 15px 18px;
  font-family: var(--font); font-size: 16px; color: #111; text-align: center;
  cursor: pointer; border-top: .5px solid #efefef;
}
.ig-sheet-item:active { background: #f7f7f7; }
.ig-sheet-item.cancel { color: #8a8a8e; font-weight: 600; }
.ig-toast {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  z-index: 90; max-width: 280px; padding: 9px 16px; border-radius: 10px;
  background: rgba(0,0,0,.82); color: #fff; font-size: 13.5px; text-align: center;
  animation: toastIn .18s ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px) } to { opacity: 1; transform: translateX(-50%) } }
/* ---------------- 加速器 ---------------- */
.app-scroll .vpn-page,
.vpn-page {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(700px 460px at 50% -6%, #2f5bd0 0%, transparent 62%),
    linear-gradient(180deg, #16213f 0%, #0b1020 60%, #080b16 100%);
  color: #fff; padding-bottom: 26px;
}
.vpn-top {
  flex: none; display: flex; align-items: center; justify-content: center;
  position: relative; height: 104px; padding-top: 40px; box-sizing: border-box;
}
.vpn-brand { font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.vpn-back {
  top: 60px; left: 14px; background: rgba(255,255,255,.16); color: #fff;
}
.vpn-main {
  flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 26px 24px 10px;
}
.vpn-power {
  width: 132px; height: 132px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.28);
  background: radial-gradient(circle at 50% 30%, rgba(90,140,255,.55), rgba(30,60,150,.28) 70%);
  color: #fff; display: grid; place-items: center; transition: .2s;
}
.vpn-power svg { width: 46px; height: 46px; }
.vpn-power:active { transform: scale(.96); }
.vpn-power.on {
  border-color: #57e0a8;
  background: radial-gradient(circle at 50% 30%, rgba(70,220,150,.55), rgba(12,110,80,.35) 70%);
  box-shadow: 0 0 34px rgba(60,220,160,.35);
  color: #b9ffe2;
}
.vpn-status { font-size: 23px; font-weight: 600; letter-spacing: .02em; margin-top: 4px; }
.vpn-sub { font-size: 12.5px; color: rgba(255,255,255,.55); text-align: center; }
.vpn-node {
  margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 3px 12px;
}
.vpn-servers { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 0; }
.vpn-servers-title {
  font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.42);
  text-transform: uppercase; padding: 0 4px 8px;
}
.vpn-server {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; margin-bottom: 8px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07);
  color: #fff; font-family: var(--font); font-size: 14px; text-align: left;
}
.vpn-server.on { border-color: rgba(120,200,255,.55); background: rgba(90,150,255,.18); }
.vpn-srv-name { flex: 1; font-weight: 600; }
.vpn-srv-ping { font-size: 12px; color: rgba(255,255,255,.55); }
.vpn-srv-check { font-size: 11.5px; color: #7fd2ff; min-width: 36px; text-align: right; }
.wx-quick-row {
  flex: none; background: #f7f7f7; padding: 0 10px 8px;
  display: flex; gap: 7px; flex-wrap: wrap;
}
.wx-quick-row button {
  border: 0; background: #fff; border-radius: 14px; padding: 6px 12px;
  font-size: 13.5px; color: #181818; font-family: var(--font); cursor: pointer;
}

/* ================= 浮动返回键（无导航栏页面的返回入口） ================= */
.float-back {
  position: absolute; top: 60px; left: 14px; z-index: 20;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.float-back svg {
  width: 20px; height: 20px; fill: none; stroke: #181818;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ================= 备忘录（参考 备忘录.jpg） ================= */
.notes-page {
  flex: 1 1 auto; min-height: 0; position: relative;
  background: #f2f2f7; padding-bottom: 30px; overflow-y: auto;
}
.notes-root { background: #f2f2f7; min-height: 100%; padding-bottom: 30px; }
.notes-head { padding: 66px 20px 4px; }
.notes-title {
  font-size: 34px; font-weight: 700; color: #1c1c1e; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.notes-title .caret { width: 0; height: 0; border-left: 7px solid transparent;
  border-right: 7px solid transparent; border-top: 9px solid #1c1c1e; }
.notes-count { font-size: 14px; color: #8e8e93; margin: 8px 0 0; }
.notes-search {
  margin: 16px 20px 8px; background: #fff; border-radius: 12px; height: 40px;
  display: flex; align-items: center; gap: 8px; padding: 0 13px;
  color: #9a9a9a; font-size: 15.5px;
}
.notes-search svg { width: 17px; height: 17px; fill: none; stroke: #a5a5a5; stroke-width: 2; stroke-linecap: round; }
.note-card {
  background: #fff; border-radius: 14px; margin: 10px 20px; padding: 15px 16px;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.note-card:active { background: #ebebf0; }
.note-card-t { font-size: 16.5px; font-weight: 600; color: #1c1c1e; }
.note-card-p { font-size: 14px; color: #6e6e73; margin-top: 6px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.note-card-d { font-size: 12.5px; color: #aeaeb2; margin-top: 9px; }
.note-card.locked .note-card-p { filter: blur(5px); }
.notes-empty { text-align: center; color: #aeaeb2; font-size: 15px; padding: 60px 20px; }

/* ================= 浏览器（参考 浏览器.jpg） ================= */
.br-root {
  flex: 1 1 auto; min-height: 0; position: relative;
  background: #fff; overflow-y: auto;
}
.br-top {
  padding: 66px 16px 0; background: #fff;
}
.br-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.br-logo { font-size: 21px; font-weight: 800; color: #111; letter-spacing: .02em; }
.br-price { font-size: 12.5px; color: #333; }
.br-search {
  display: flex; align-items: center; gap: 9px; height: 42px;
  background: #f4f4f6; border-radius: 22px; padding: 0 14px;
}
.br-search svg { width: 18px; height: 18px; fill: none; stroke: #333; stroke-width: 2; stroke-linecap: round; }
.br-search-text { flex: 1; font-size: 15px; color: #333; }
.br-tabs {
  display: flex; align-items: center; gap: 17px; margin-top: 14px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.br-tabs::-webkit-scrollbar { display: none; }
.br-tab { font-size: 15.5px; color: #555; white-space: nowrap; cursor: pointer; padding-bottom: 6px; }
.br-tab.on { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--blue); }
.br-add { font-size: 21px; color: #aaa; cursor: pointer; }
.br-list { padding: 6px 16px 0; }
.br-news {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 0;
  font-size: 16px; line-height: 1.45; color: #1c1c1e; cursor: pointer;
}
.br-news .dot { color: #d0a25a; flex: none; font-size: 13px; line-height: 1.7; }
.br-card {
  margin: 14px 16px; border-radius: 12px; overflow: hidden;
  background: #1c1c1e; position: relative; height: 210px; cursor: pointer;
  display: flex; align-items: flex-end;
}
.br-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.br-card-body { position: relative; padding: 16px; color: #fff; width: 100%; }
.br-card-src { font-size: 12.5px; opacity: .82; margin-bottom: 7px; }
.br-card-t { font-size: 20px; font-weight: 700; line-height: 1.35; }
.br-headline {
  padding: 4px 16px 20px; font-size: 18px; line-height: 1.5; color: #1c1c1e; cursor: pointer;
}
.br-webpage { padding: 20px 18px; background: #fff; }
.br-webpage h2 { font-size: 22px; margin: 0 0 6px; color: #1c1c1e; }
.br-webpage .meta { font-size: 12px; color: #aeaeb2; margin-bottom: 16px; }
.br-webpage p { font-size: 15.5px; line-height: 1.85; margin: 0 0 13px; color: #1c1c1e; }
.br-urlbar {
  position: sticky; bottom: 0; background: #f7f7f9; border-top: .5px solid var(--sep);
  padding: 9px 14px; display: flex; align-items: center; gap: 9px;
}
.br-url {
  flex: 1; background: #fff; border-radius: 16px; height: 34px; padding: 0 14px;
  font-size: 13px; color: #666; display: flex; align-items: center;
}

/* ---------------- App 内部通用 ---------------- */
.list-group {
  background: var(--card); margin-top: 18px;
  border-top: .5px solid var(--sep); border-bottom: .5px solid var(--sep);
}
.list-group-title {
  font-size: 13px; color: var(--ink-2); padding: 18px 16px 7px; margin: 0;
}
.row {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  border-bottom: .5px solid var(--sep); cursor: pointer; position: relative;
}
.row:last-child { border-bottom: 0; }
.row:active { background: #e9e9ee; }
.row-ico { width: 40px; height: 40px; border-radius: 9px; overflow: hidden; flex: none; }
.row-ico svg { width: 100%; height: 100%; display: block; }
.row-main { flex: 1; min-width: 0; }
.row-title {
  font-size: 15.5px; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
  font-size: 13px; color: var(--ink-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-time { font-size: 13px; color: var(--ink-3); flex: none; }
.row-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none;
}
.chev { color: var(--ink-3); flex: none; }
.chev svg { width: 8px; height: 14px; display: block; }

.sec-label {
  font-size: 12.5px; color: var(--ink-2); padding: 22px 16px 7px; margin: 0;
}

/* 微信 */
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #ededf2; }
.chat-head .row-ico { width: 38px; height: 38px; border-radius: 6px; }
.chat-head-name { font-size: 15px; font-weight: 500; }
.chat-body { padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.bubble {
  max-width: 74%; padding: 9px 13px; border-radius: 17px;
  font-size: 15px; line-height: 1.55; position: relative;
  background: #fff; color: #000; align-self: flex-start;
  border: .5px solid rgba(0,0,0,.06); word-break: break-word;
}
.bubble.me { align-self: flex-end; background: #95ec69; border-color: transparent; }
.bubble-time { text-align: center; font-size: 11.5px; color: var(--ink-3); margin: 6px 0; }
.chat-input {
  position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center;
  padding: 9px 12px; background: #f7f7f9; border-top: .5px solid var(--sep);
}
.chat-input input {
  flex: 1; border: 0; background: #fff; border-radius: 18px; padding: 9px 13px;
  font-size: 15px; font-family: var(--font); outline: none;
}
.chat-send {
  border: 0; background: var(--green); color: #fff; border-radius: 18px;
  padding: 8px 15px; font-size: 14px; font-family: var(--font); cursor: pointer;
  opacity: .4; transition: .2s;
}
.chat-send.on { opacity: 1; }
.chat-quick { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 12px 10px; background: #f7f7f9; }
.chat-quick button {
  border: .5px solid var(--sep); background: #fff; border-radius: 15px;
  padding: 6px 12px; font-size: 13px; color: var(--ink); font-family: var(--font); cursor: pointer;
}

/* 相册 */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.photo-cell { aspect-ratio: 1; overflow: hidden; position: relative; cursor: pointer; background: #dcdce2; }
.photo-cell img, .photo-cell .ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ph { display: grid; place-items: center; font-size: 30px; color: rgba(0,0,0,.3); }
.photo-view { position: absolute; inset: 0; background: #000; z-index: 20; display: flex; flex-direction: column; }
.photo-view-img { flex: 1; display: grid; place-items: center; padding: 60px 0; }
.photo-view-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-view-cap {
  padding: 16px 20px 40px; color: #eee; font-size: 13.5px; text-align: center; line-height: 1.7;
}
.photo-view-cap b { display: block; font-size: 15px; margin-bottom: 6px; }

/* 备忘录 */
.note-item { padding: 13px 16px; border-bottom: .5px solid var(--sep); cursor: pointer; }
.note-item:active { background: #e9e9ee; }
.note-item-t { font-size: 16px; font-weight: 600; }
.note-item-p { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.55; }
.note-item-d { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.note-editor { padding: 16px; }
.note-editor input, .note-editor textarea {
  width: 100%; border: 0; outline: none; font-family: var(--font);
  background: transparent; color: var(--ink);
}
.note-editor input { font-size: 21px; font-weight: 600; margin-bottom: 12px; }
.note-editor textarea { font-size: 15.5px; line-height: 1.8; min-height: 300px; resize: none; }
.note-save {
  display: block; margin: 20px auto; border: 0; border-radius: 12px;
  background: var(--blue); color: #fff; padding: 11px 40px;
  font-size: 15px; font-family: var(--font); cursor: pointer;
}

/* 浏览器 */
.safari-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: rgba(249,249,251,.94); border-bottom: .5px solid var(--sep);
}
.safari-url {
  flex: 1; background: rgba(120,120,128,.12); border-radius: 10px;
  padding: 7px 12px; font-size: 13px; color: var(--ink-2);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.safari-page { padding: 26px 22px; background: #fff; min-height: 100%; }
.safari-page h2 { font-size: 24px; margin: 0 0 6px; }
.safari-page .meta { font-size: 12px; color: var(--ink-3); margin-bottom: 18px; }
.safari-page p { font-size: 15px; line-height: 1.85; margin: 0 0 14px; color: #1c1c1e; }
.safari-page .fake-hero {
  height: 150px; border-radius: 14px; margin-bottom: 18px;
  background: linear-gradient(135deg, #4b5bdb, #8f5fd0);
  display: grid; place-items: center; color: #fff; font-size: 13px; letter-spacing: .2em;
}

/* 邮箱 */
.mail-row-sub { display: flex; gap: 8px; align-items: baseline; }
.mail-row-sub .row-sub { flex: 1; }
.mail-read { padding: 20px 18px; }
.mail-read-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
.mail-read-t { font-size: 21px; font-weight: 700; margin: 0 0 18px; }
.mail-read-body { font-size: 15.5px; line-height: 1.9; white-space: pre-wrap; }
.mail-read-body p { margin: 0 0 14px; }
.mail-read-meta { font-size: 12px; color: var(--ink-3); margin-top: 24px; padding-top: 14px; border-top: .5px solid var(--sep); }

/* ---------------- 通知横幅 ---------------- */
.banner {
  position: absolute; top: 12px; left: 10px; right: 10px; z-index: 95;
  background: rgba(255,255,255,.82); backdrop-filter: blur(26px);
  border-radius: 20px; padding: 12px 14px; display: flex; gap: 11px;
  align-items: flex-start; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  border: .5px solid rgba(0,0,0,.06);
  animation: slideDown .45s cubic-bezier(.2,.9,.3,1);
}
.banner-ico { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex: none; }
.banner-ico svg { width: 100%; height: 100%; display: block; }
.banner-body { flex: 1; min-width: 0; }
.banner-app { font-size: 11.5px; color: var(--ink-2); }
.banner-title { font-size: 14px; font-weight: 600; margin-top: 1px; }
.banner-text { font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }

/* ---------------- 结局 ---------------- */
.ending {
  background: linear-gradient(170deg, #14162a, #06060a); color: #e9e9f2;
  display: flex; align-items: center; justify-content: center; padding: 0 34px;
}
.ending-inner { max-width: 300px; text-align: center; }
.ending-tag { font-size: 11px; letter-spacing: .3em; color: #7b7b95; margin: 0 0 18px; }
.ending-title {
  font-family: var(--serif); font-size: 32px; font-weight: 600; margin: 0 0 24px; line-height: 1.5;
}
.ending-body { font-size: 14.5px; line-height: 2.1; color: #a3a3b8; margin-bottom: 10px; }
.ending-body p { margin: 0 0 18px; }

/* ---------------- home indicator ---------------- */
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.4); z-index: 99; pointer-events: none;
}
.app-layer ~ .home-indicator, .intro ~ .home-indicator { background: rgba(255,255,255,.4); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 460px), (max-height: 900px) {
  body { display: block; }
  .device {
    width: 100vw; height: 100vh; border-radius: 0; padding: 0; box-shadow: none;
  }
  .device::before, .device::after { display: none; }
  .screen { border-radius: 0; }
  .sb-island { display: none; }
  .statusbar { padding: 0 20px; height: 26px; }
  .lock-clock { padding-top: 56px; }
  .lock-time { font-size: 62px; }
}

/* ================= 备忘录：搜索框 / 编辑器 / 删除 ================= */
.notes-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font); font-size: 15.5px; color: #1c1c1e;
}
.notes-search input::placeholder { color: #9a9a9a; }
.notes-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.float-trash {
  position: absolute; top: 60px; right: 14px; z-index: 20;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; cursor: pointer;
}
.float-trash:active { transform: scale(.94); }

.note-editor {
  background: #fff; min-height: 100%; padding: 74px 20px 44px;
}
.note-title-input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-family: var(--font); font-size: 24px; font-weight: 700; color: #1c1c1e;
}
.note-title-input::placeholder { color: #c3c3c7; }
.note-body-input {
  width: 100%; border: 0; outline: 0; resize: none; overflow: hidden;
  background: transparent; margin-top: 12px;
  font-family: var(--font); font-size: 16px; line-height: 1.85; color: #1c1c1e;
}
.note-body-input::placeholder { color: #c3c3c7; }
.note-date { font-size: 12.5px; color: #aeaeb2; margin-top: 10px; }

/* ================= 微信：通讯录 / 发现 / 我 / 朋友圈 ================= */
.wx-chev { display: flex; align-items: center; flex: none; }
.wx-chev svg { width: 17px; height: 17px; fill: none; stroke: #c7c7cc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wx-group-title {
  padding: 16px 16px 7px; font-size: 13px; color: #8a8a8e; background: #ededed;
}
.wx-contact { min-height: 62px; }
.wx-contact .wx-name { font-size: 17px; }

.wx-row {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 56px; background: #fff;
  border-bottom: .5px solid rgba(60,60,67,.12); cursor: pointer;
  flex: none;
}
.wx-row:active { background: #ececf0; }
.wx-row-t { flex: 1; font-size: 16.5px; color: #1c1c1e; }

.wx-disc-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.wx-disc-ico.moments { background: #07c160; }
.wx-disc-ico.fav { background: #f5a623; }
.wx-disc-ico.card { background: #4cd964; }
.wx-disc-ico.emoji { background: #f7ce46; }
.wx-disc-ico.settings { background: #8e8e93; }

.wx-me-head {
  display: flex; align-items: center; gap: 15px;
  padding: 118px 18px 20px; background: #fff; flex: none;
}
.wx-me-ava {
  width: 62px; height: 62px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #6f7fa8, #3c4664);
  color: #fff; font-size: 24px; font-weight: 600;
}
.wx-me-name { font-size: 20px; font-weight: 600; color: #1c1c1e; }
.wx-me-sub { font-size: 13px; color: #8a8a8e; margin-top: 5px; }
.wx-me-gap { height: 8px; background: #ededed; flex: none; }

.moments-cover {
  position: relative; height: 250px; flex: none;
  background: linear-gradient(160deg, #41516e, #2a3346 60%, #1e2534);
}
.moments-me {
  position: absolute; right: 16px; bottom: -18px;
  width: 54px; height: 54px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #6f7fa8, #3c4664);
  color: #fff; font-size: 20px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.moments-empty { text-align: center; color: #aeaeb2; font-size: 14px; padding: 56px 20px; }