:root {
  --wx-green: #07c160;
  --wx-bubble: #95ec69;
  --wx-bg: #ededed;
  --wx-line: #e5e5e5;
  --wx-link: #576b95;
  --ink: #111;
  --ink-2: #7f7f7f;
  --db-green: #007722;
  --glass: rgba(255, 255, 255, .55);
  --font: -apple-system, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --serif: "Songti SC", "Noto Serif SC", "STSong", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { background: #111; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }
img { display: block; }

/* ---------- iPhone 17 Pro 外框 ---------- */
.phone { position: relative; width: 100%; height: 100dvh; max-width: 440px; margin: 0 auto; overflow: hidden; background: #000; display: flex; flex-direction: column; }
@media (min-width: 640px) {
  body { display: grid; place-items: center; min-height: 100vh; background: radial-gradient(circle at 30% 20%, #3b4049, #15171b 70%); }
  .phone { width: 402px; height: min(874px, 94vh); border-radius: 62px; box-shadow: 0 0 0 11px #1b1c1f, 0 0 0 13px #5a5d63, 0 40px 90px rgba(0, 0, 0, .6); }
  .side-btn { position: absolute; right: -16px; top: 210px; width: 4px; height: 92px; border-radius: 0 3px 3px 0; background: #4a4d52; cursor: pointer; }
}
@media (max-width: 639px) { .side-btn { display: none; } }
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 124px; height: 36px; border-radius: 20px; background: #000; z-index: 60; transition: width .35s, height .35s; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: #fff; font-size: 12px; overflow: hidden; }
.island.wide { width: 300px; height: 52px; border-radius: 26px; }
.island .isl-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; }
.island .isl-t { flex: 1; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s .15s; }
.island.wide .isl-t { opacity: 1; }
.statusbar { position: absolute; top: 11px; left: 0; right: 0; height: 36px; padding: 0 30px 0 34px; display: flex; align-items: center; justify-content: space-between; font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; z-index: 50; pointer-events: none; color: #000; font-variant-numeric: tabular-nums; }
.statusbar > span:first-child { width: 72px; text-align: center; }
.statusbar.light { color: #fff; }
.sb-r { display: flex; gap: 5px; align-items: center; height: 13px; }
.sb-r svg { display: block; fill: currentColor; }
.sb-sig { width: 18px; height: 12px; }
.sb-wifi { width: 17px; height: 12px; }
.sb-bat { width: 27px; height: 13px; margin-left: 2px; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.home-ind { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 220px; height: 26px; z-index: 95; cursor: pointer; touch-action: none; }
.home-ind::after { content: ""; position: absolute; left: 42px; right: 42px; bottom: 8px; height: 5px; border-radius: 3px; background: #111; opacity: .85; transition: transform .15s; }
.home-ind.light::after { background: #fff; }
.home-ind:hover::after, .home-ind:active::after { transform: scaleX(1.08); }
.screen.shrink { transition: transform .2s ease-in, opacity .2s ease-in; transform: scale(.82) translateY(8%); opacity: 0; border-radius: 40px; }
.screen.grow { animation: grow .26s ease-out; }
@keyframes grow { from { transform: scale(1.06); opacity: .4; } }

/* ---------- 壁纸 ---------- */
.wall { background: radial-gradient(120% 80% at 20% 0%, #f6d9b8 0%, transparent 55%), radial-gradient(100% 70% at 100% 30%, #b7c8e8 0%, transparent 60%), linear-gradient(170deg, #e9b9a1 0%, #9fb2d6 55%, #4d5f86 100%); }

/* ---------- 锁屏 ---------- */
.lock { position: absolute; inset: 0; color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 74px; z-index: 40; transition: transform .45s cubic-bezier(.3, .8, .3, 1), opacity .45s; }
.lock.out { transform: translateY(-100%); opacity: 0; }
.lock-date { font-size: 19px; font-weight: 600; opacity: .92; }
.lock-time { font-size: 92px; font-weight: 700; letter-spacing: -2px; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgba(0, 0, 0, .1); }
.notes { width: 100%; padding: 26px 12px 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 22px; background: rgba(255, 255, 255, .42); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); color: #111; text-align: left; width: 100%; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .5); }
.note .app-mini { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.note b { display: flex; justify-content: space-between; font-size: 15px; }
.note b span { font-weight: 400; font-size: 13px; color: rgba(0, 0, 0, .5); }
.note p { font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; }
.note .more { font-size: 12.5px; color: rgba(0, 0, 0, .45); margin-top: 2px; }
.lock-foot { padding: 14px 0 36px; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.lock-btns { display: flex; justify-content: space-between; width: 100%; padding: 0 46px; }
.lock-btns span { width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, .25); backdrop-filter: blur(20px); display: grid; place-items: center; font-size: 20px; }
.unlock-hint { font-size: 14px; opacity: .85; padding: 8px 20px; }

/* ---------- 主屏幕 ---------- */
.home { position: absolute; inset: 0; padding: 70px 22px 0; display: flex; flex-direction: column; }
.widget { border-radius: 26px; padding: 15px 16px; background: rgba(255, 255, 255, .5); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 10px 30px rgba(20, 30, 60, .12); }
.w-top { display: flex; align-items: center; gap: 12px; }
.w-top .av { width: 44px; height: 44px; border-radius: 12px; }
.w-k { font-size: 12px; color: rgba(0, 0, 0, .55); }
.w-stage { font-family: var(--serif); font-size: 19px; font-weight: 700; margin-top: 2px; }
.meter { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .1); margin: 13px 0 9px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f1a28e, #d9645a); filter: blur(.6px); transition: width .8s; }
.w-ch { font-size: 13px; display: flex; justify-content: space-between; color: rgba(0, 0, 0, .7); }
.w-hint { font-size: 12px; color: rgba(0, 0, 0, .5); margin-top: 8px; text-align: center; line-height: 1.5; }
.w-btn { margin-top: 10px; width: 100%; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 14px; font-weight: 600; }
.grid-apps { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 22px; margin-top: 26px; }
.app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.ic { width: 62px; height: 62px; border-radius: 15px; display: grid; place-items: center; color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(255, 255, 255, .3); overflow: hidden; }
.ic svg { width: 34px; height: 34px; }
.ic-img { background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.ic-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); }
.ic-sms { background: linear-gradient(180deg, #6cf08a, #26c94a); }
.ic-sms svg { width: 42px; height: 42px; }
.ic-weather svg { width: 46px; height: 46px; }
.badge { position: absolute; top: -6px; right: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; text-align: center; text-shadow: none; }
.dock { margin-top: auto; margin-bottom: 26px; padding: 14px 16px; border-radius: 34px; background: rgba(255, 255, 255, .32); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5); display: grid; grid-template-columns: repeat(4, 1fr); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .5); }
.dock .app span.lb { display: none; }
.ic-wx { background: linear-gradient(180deg, #3ddc72, #08b84e); }
.ic-forum { background: linear-gradient(180deg, #2fae4f, #0a7a2c); font-family: var(--serif); font-size: 26px; font-weight: 700; }
.ic-music { background: linear-gradient(180deg, #ff6b81, #fa2d48); }
.ic-photos { background: #fff; }
.ic-notes { background: linear-gradient(180deg, #fff 0 32%, #fff 32%); position: relative; }
.ic-notes::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, #ffd84a, #f7c600); }
.ic-set { background: linear-gradient(180deg, #a3a8b0, #6b7079); }
.ic-cal { background: #fff; color: #111; flex-direction: column; display: flex; justify-content: center; line-height: 1; }
.ic-cal small { color: #ff3b30; font-size: 10px; font-weight: 600; }
.ic-cal b { font-size: 28px; font-weight: 400; }
.ic-weather { background: linear-gradient(180deg, #3d9bf5, #1b5fd1); }
.ic-cam { background: linear-gradient(180deg, #d9dce1, #a7abb3); }
.ic-clock { background: #111; }
.ic-phone { background: linear-gradient(180deg, #5df27a, #1fc546); }
.ic-maps { background: linear-gradient(135deg, #b9e6a4, #e9f3dc 60%, #cfe5c0); }
.ic-mail { background: linear-gradient(180deg, #4fb4ff, #1a73f0); }
.ic-calc { background: #111; }
.ic-store { background: linear-gradient(180deg, #3cc5ff, #1673f0); }
.grid-apps { row-gap: 18px; margin-top: 22px; }

/* ---------- 通知横幅 ---------- */
.banner { position: absolute; top: 12px; left: 10px; right: 10px; z-index: 70; display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 24px; background: rgba(245, 245, 245, .82); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); transform: translateY(calc(-100% - 40px)); visibility: hidden; transition: transform .4s cubic-bezier(.2, .9, .3, 1.1), visibility 0s .4s; cursor: pointer; text-align: left; }
.banner.show { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.2, .9, .3, 1.1); }
.banner .app-mini { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.banner div { min-width: 0; flex: 1; }
.banner b { display: flex; justify-content: space-between; font-size: 14.5px; }
.banner b span { font-weight: 400; color: #888; font-size: 12.5px; }
.banner p { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast { position: absolute; left: 50%; bottom: 120px; transform: translate(-50%, 16px); background: rgba(40, 40, 40, .88); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 80; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 通用顶栏 ---------- */
.nav { flex: none; padding-top: 50px; height: 94px; display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; background: var(--wx-bg); position: relative; z-index: 2; }
.nav .t { text-align: center; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .t small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-2); height: 13px; }
.nav .back { justify-self: start; padding: 0 12px; height: 44px; display: flex; align-items: center; gap: 2px; font-size: 16px; }
.nav .back svg { width: 12px; height: 20px; }
.nav .r { justify-self: end; padding: 0 16px; font-size: 22px; letter-spacing: 1px; }
.body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 头像 ---------- */
.av { flex: none; width: 40px; height: 40px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 16px; background: #ccc; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.gav { flex: none; width: 48px; height: 48px; border-radius: 5px; background: #ddd; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; overflow: hidden; }
.gav .av { width: 100%; height: 100%; border-radius: 2px; font-size: 10px; }

/* ---------- 微信：列表 ---------- */
.wx-list { background: #fff; }
.row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-align: left; position: relative; }
.row::after { content: ""; position: absolute; left: 76px; right: 0; bottom: 0; height: .5px; background: var(--wx-line); }
.row .av { width: 48px; height: 48px; font-size: 18px; }
.row-m { flex: 1; min-width: 0; }
.row-top { display: flex; justify-content: space-between; align-items: baseline; }
.row-n { font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-time { font-size: 12px; color: #b2b2b2; flex: none; margin-left: 8px; }
.row-p { font-size: 13.5px; color: #9b9b9b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.row-p em { color: #d33; font-style: normal; }
.row .dot-wrap { position: relative; }
.row .rbadge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #fa5151; color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; }
.row .rdot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fa5151; }
.tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: #f7f7f7; border-top: .5px solid #ddd; padding: 6px 0 26px; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: #181818; position: relative; }
.tab svg { width: 26px; height: 26px; }
.tab.on { color: var(--wx-green); }
.tab .tb { position: absolute; top: -2px; left: 54%; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #fa5151; color: #fff; font-size: 11px; line-height: 17px; }
.tab .td { position: absolute; top: 0; left: 58%; width: 9px; height: 9px; border-radius: 50%; background: #fa5151; }
.cell { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; text-align: left; font-size: 16px; position: relative; }
.cell + .cell::before { content: ""; position: absolute; left: 52px; right: 0; top: 0; height: .5px; background: var(--wx-line); }
.cell .ci { width: 24px; height: 24px; display: grid; place-items: center; }
.cell .cr { margin-left: auto; color: #b2b2b2; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.gap { height: 8px; }
.sec-h { padding: 8px 16px; font-size: 13px; color: var(--ink-2); background: var(--wx-bg); }
.me-head { background: #fff; padding: 30px 20px 30px; display: flex; gap: 16px; align-items: center; }
.me-head .av { width: 64px; height: 64px; border-radius: 8px; font-size: 26px; }
.me-head h2 { font-size: 21px; font-weight: 600; }
.me-head p { font-size: 14px; color: var(--ink-2); margin-top: 6px; }

/* ---------- 微信：聊天 ---------- */
.chat-body { background: var(--wx-bg); padding: 4px 12px 16px; }
.tm { text-align: center; font-size: 12px; color: #b2b2b2; margin: 16px 0 6px; }
.sy { text-align: center; font-size: 12.5px; color: #9b9b9b; margin: 10px auto; max-width: 82%; line-height: 1.5; }
.m { display: flex; gap: 10px; margin: 14px 0; align-items: flex-start; }
.m.me { flex-direction: row-reverse; }
.m .av { cursor: pointer; }
.mc { max-width: 68%; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.m.me .mc { align-items: flex-end; }
.nm { font-size: 12px; color: #999; margin: 0 0 3px 2px; }
.bb { position: relative; background: #fff; padding: 9px 12px; border-radius: 5px; font-size: 16px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.bb::before { content: ""; position: absolute; top: 13px; left: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #fff; }
.m.me .bb { background: var(--wx-bubble); }
.m.me .bb::before { left: auto; right: -5px; border: 5px solid transparent; border-right: 0; border-left-color: var(--wx-bubble); }
.new .bb, .new .ph, .new .vb, .new .rp, .new .stk { animation: pop .22s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(5px); } }
.vb { min-width: 80px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.vb svg { width: 16px; height: 16px; flex: none; }
.vdot { width: 8px; height: 8px; border-radius: 50%; background: #fa5151; margin-left: 6px; align-self: center; }
.stt { margin-top: 6px; background: #fff; border-radius: 5px; padding: 8px 11px; font-size: 15px; line-height: 1.5; color: #333; max-width: 100%; }
.stt small { display: block; font-size: 11px; color: #aaa; margin-bottom: 3px; }
.rp { width: 228px; border-radius: 6px; background: #fa9d3b; color: #fff; text-align: left; overflow: hidden; cursor: pointer; }
.rp.open { background: #fbd1a2; }
.rp .rp-t { display: flex; gap: 10px; align-items: center; padding: 13px 12px; }
.rp .rp-i { width: 32px; height: 40px; border-radius: 4px; background: #f25542; position: relative; flex: none; }
.rp .rp-i::after { content: ""; position: absolute; left: 50%; top: 13px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fcd36b; }
.rp .rp-f { font-size: 11px; padding: 4px 12px 6px; border-top: .5px solid rgba(255, 255, 255, .35); opacity: .85; }
.stk { font-size: 64px; line-height: 1; }
.ph { border-radius: 5px; overflow: hidden; max-width: 150px; background: #fff; cursor: pointer; }
.ph img, .ph svg { width: 150px; height: auto; display: block; }
.dock-in { flex: none; background: #f7f7f7; border-top: .5px solid #ddd; padding: 8px 8px 30px; }
.in-row { display: flex; gap: 8px; align-items: center; }
.in-row .ib { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: #181818; }
.in-row .ib svg { width: 28px; height: 28px; }
.in-row input { flex: 1; min-width: 0; height: 38px; border: 0; border-radius: 6px; background: #fff; padding: 0 10px; font-size: 16px; outline: none; }
.in-row input:disabled { background: #f2f2f2; color: #aaa; }
.send { background: var(--wx-green); color: #fff; border-radius: 5px; padding: 0 12px; height: 34px; font-size: 15px; }
.choices { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 10px; }
.choices button { background: #fff; border-radius: 8px; padding: 11px 14px; text-align: left; font-size: 15px; line-height: 1.45; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.choices button:active { background: #e8f7ee; }
.choices .ch-h { font-size: 12px; color: #999; padding: 0 4px; }
.plus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 0; padding: 18px 8px 8px; }
.plus button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #666; }
.plus span { width: 58px; height: 58px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 24px; }

/* ---------- 朋友圈 ---------- */
.mo-cover { position: relative; height: 300px; background: linear-gradient(160deg, #86a8c9, #3e5878); background-size: cover; background-position: center; margin-bottom: 46px; }
.mo-me { position: absolute; right: 16px; bottom: -30px; display: flex; align-items: flex-end; gap: 14px; }
.mo-me b { color: #fff; font-size: 18px; margin-bottom: 40px; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.mo-me .av { width: 70px; height: 70px; border-radius: 8px; border: 2px solid #fff; font-size: 26px; }
.mo-nav { position: absolute; top: 0; left: 0; right: 0; height: 94px; padding-top: 50px; display: flex; align-items: center; justify-content: space-between; z-index: 3; color: #fff; }
.mo-nav button { padding: 0 14px; height: 44px; display: flex; align-items: center; }
.mo-nav svg { width: 12px; height: 20px; }
.post { display: flex; gap: 10px; padding: 16px 16px 12px; border-bottom: .5px solid var(--wx-line); }
.post .av { width: 42px; height: 42px; }
.post-m { flex: 1; min-width: 0; }
.post-n { color: var(--wx-link); font-weight: 600; font-size: 15.5px; }
.post-t { font-size: 15.5px; line-height: 1.5; margin-top: 3px; white-space: pre-wrap; }
.post-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; max-width: 250px; }
.post-ph.one { grid-template-columns: 1fr; max-width: 190px; }
.post-ph > * { aspect-ratio: 1; overflow: hidden; background: #eee; }
.post-ph.one > * { aspect-ratio: auto; }
.post-ph img, .post-ph svg { width: 100%; height: 100%; object-fit: cover; }
.post-f { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12.5px; color: #b2b2b2; position: relative; }
.post-more { width: 32px; height: 20px; border-radius: 4px; background: #f7f7f7; color: var(--wx-link); font-weight: 700; letter-spacing: 1px; }
.post-pop { position: absolute; right: 40px; top: -9px; display: none; background: #4c4c4c; border-radius: 6px; overflow: hidden; }
.post-pop.on { display: flex; }
.post-pop button { color: #fff; padding: 9px 16px; font-size: 14px; }
.post-pop button + button { border-left: .5px solid #3a3a3a; }
.post-x { margin-top: 8px; background: #f7f7f7; border-radius: 4px; font-size: 14px; line-height: 1.55; }
.post-x .lk { padding: 6px 9px; color: var(--wx-link); border-bottom: .5px solid #e8e8e8; }
.post-x .lk:last-child { border-bottom: 0; }
.post-x .cm { padding: 3px 9px; }
.post-x .cm:first-of-type { padding-top: 6px; }
.post-x .cm:last-child { padding-bottom: 6px; }
.post-x .cm b { color: var(--wx-link); font-weight: 600; }
.cm-in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: none; }
.cm-in.on { display: block; }

/* ---------- 宜北小组（豆瓣风格） ---------- */
.db-nav { background: #fff; border-bottom: .5px solid #e8e8e8; }
.db-nav .t { color: var(--db-green); font-family: var(--serif); }
.db-head { padding: 16px; background: linear-gradient(180deg, #f3f9f3, #fff); border-bottom: .5px solid #eee; }
.db-head h1 { font-size: 20px; color: #111; }
.db-head p { font-size: 13px; color: #888; margin-top: 4px; }
.db-tabs { display: flex; gap: 18px; padding: 10px 16px; font-size: 14px; color: #888; border-bottom: .5px solid #eee; }
.db-tabs .on { color: var(--db-green); font-weight: 600; }
.topic { display: block; width: 100%; text-align: left; padding: 14px 16px; border-bottom: .5px solid #f0f0f0; }
.topic h3 { font-size: 16px; font-weight: 500; color: #3377aa; line-height: 1.45; }
.topic p { font-size: 12.5px; color: #aaa; margin-top: 6px; }
.tp { padding: 18px 16px; }
.tp h1 { font-size: 21px; line-height: 1.4; }
.tp .meta { display: flex; align-items: center; gap: 8px; margin: 12px 0 14px; font-size: 13px; color: #888; }
.tp .meta .dav { width: 26px; height: 26px; border-radius: 50%; background: #cfe3d3; display: grid; place-items: center; color: var(--db-green); font-size: 12px; }
.tp .txt { font-size: 16px; line-height: 1.85; white-space: pre-wrap; }
.tp .acts { display: flex; gap: 12px; margin: 18px 0 8px; }
.tp .acts button { border: 1px solid #d6e9d8; color: var(--db-green); border-radius: 15px; padding: 5px 14px; font-size: 13px; }
.tp .acts button.on { background: var(--db-green); color: #fff; }
.reply { padding: 12px 0; border-top: .5px solid #f0f0f0; }
.reply .rh { display: flex; justify-content: space-between; font-size: 13px; color: #3377aa; }
.reply .rh span { color: #bbb; }
.reply p { font-size: 15px; line-height: 1.7; margin-top: 5px; }

/* ---------- 音乐 ---------- */
.mu-body { background: linear-gradient(180deg, #2b1c25, #120d12); color: #fff; }
.mu-hero { padding: 20px 20px 10px; display: flex; gap: 16px; align-items: center; }
.mu-cover { width: 120px; height: 120px; border-radius: 10px; background: linear-gradient(135deg, #f6d6b8, #c9637a); display: grid; place-items: center; font-family: var(--serif); font-size: 18px; color: #fff; text-align: center; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.mu-hero h2 { font-size: 21px; }
.mu-hero p { font-size: 13px; opacity: .6; margin-top: 6px; }
.song { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 20px; text-align: left; color: #fff; }
.song .n { width: 18px; opacity: .5; font-size: 14px; }
.song .sm { flex: 1; min-width: 0; }
.song b { display: block; font-weight: 500; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song small { opacity: .55; font-size: 12.5px; }
.song.on b { color: #ff6b81; }
.mu-now { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px 30px; background: rgba(30, 22, 28, .96); color: #fff; }
.mu-now .bar { flex: 1; min-width: 0; }
.mu-now b { font-size: 14px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-now .pg { height: 3px; background: rgba(255, 255, 255, .2); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.mu-now .pg i { display: block; height: 100%; background: #ff6b81; width: 0; }
.mu-now .pg i.run { animation: prog 178s linear forwards; }
@keyframes prog { to { width: 100%; } }
.mu-now .pp { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 14px; }
.mu-note { font-size: 11px; opacity: .45; padding: 4px 20px 16px; }

/* ---------- 相册 / 备忘录 / 设置 ---------- */
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ph-grid button { aspect-ratio: 1; overflow: hidden; background: #eee; }
.ph-grid img, .ph-grid svg { width: 100%; height: 100%; object-fit: cover; }
.ios-nav { flex: none; padding: 54px 16px 8px; background: #f2f2f7; }
.ios-nav .back { color: #007aff; font-size: 17px; display: flex; align-items: center; gap: 4px; height: 32px; }
.ios-nav .back svg { width: 11px; height: 19px; }
.ios-nav h1 { font-size: 32px; font-weight: 700; margin-top: 4px; }
.ios-body { background: #f2f2f7; }
.notes-list { margin: 8px 16px; border-radius: 12px; background: #fff; overflow: hidden; }
.nt { padding: 14px 16px; border-bottom: .5px solid #e5e5ea; }
.nt:last-child { border-bottom: 0; }
.nt h3 { font-size: 16px; font-weight: 600; }
.nt p { font-family: var(--serif); font-size: 15.5px; line-height: 1.85; margin-top: 6px; color: #333; white-space: pre-wrap; }
.nt small { display: block; font-size: 12.5px; color: #8e8e93; margin-top: 6px; }
.set-group { margin: 14px 16px; border-radius: 12px; background: #fff; overflow: hidden; }
.set-group button, .set-group .si { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 16px; font-size: 16px; text-align: left; border-bottom: .5px solid #e5e5ea; }
.set-group > :last-child { border-bottom: 0; }
.set-group .blue { color: #007aff; }
.set-group .red { color: #ff3b30; }
.set-group span.v { color: #8e8e93; font-size: 15px; }
.set-foot { font-size: 12.5px; color: #8e8e93; padding: 4px 32px 20px; line-height: 1.6; }

/* ---------- 浮层 ---------- */
.ov { position: absolute; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 30px; background: rgba(0, 0, 0, .55); }
.ov.show { display: flex; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.rp-open { width: 280px; height: 420px; border-radius: 12px; background: #e9584a; color: #fff6dc; text-align: center; padding-top: 50px; position: relative; overflow: hidden; }
.rp-open .av { width: 46px; height: 46px; margin: 0 auto; border-radius: 6px; }
.rp-open h3 { font-size: 16px; margin-top: 12px; font-weight: 500; }
.rp-open p { font-size: 20px; margin-top: 16px; }
.rp-open .kai { position: absolute; left: 50%; bottom: 90px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; background: #ebcd99; color: #333; font-size: 38px; font-family: var(--serif); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.rp-open .amt { font-size: 44px; font-weight: 600; margin-top: 30px; color: #fff; }
.rp-open .amt small { font-size: 16px; }
.rp-open .x { position: absolute; top: 10px; left: 12px; color: #fff6dc; font-size: 22px; }
.card { color: #fff; text-align: center; width: 100%; }
.card .k { font-size: 13px; letter-spacing: .3em; opacity: .75; }
.card .t { font-family: var(--serif); font-size: 40px; font-weight: 700; margin: 14px 0 12px; letter-spacing: .08em; }
.card .s { font-size: 14.5px; line-height: 1.9; opacity: .85; margin-bottom: 28px; }
.card button { border: 1px solid rgba(255, 255, 255, .5); border-radius: 22px; padding: 10px 34px; color: #fff; }
.viewer { width: 100%; text-align: center; color: #fff; }
.viewer img, .viewer svg { width: 100%; height: auto; border-radius: 8px; }
.viewer p { margin: 12px 0; font-size: 14px; opacity: .8; }

/* ---------- 开始页 ---------- */
.start { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 34px 40px; color: #fff; }
.start .mk { font-size: 12px; letter-spacing: .25em; opacity: .85; margin-bottom: 14px; }
.start h1 { font-family: var(--serif); font-size: 46px; letter-spacing: .06em; text-shadow: 0 2px 20px rgba(0, 0, 0, .15); }
.start .sub { margin: 10px 0 36px; opacity: .9; }
.start input { width: 100%; padding: 14px 16px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .7); font-size: 16px; margin-bottom: 12px; outline: none; color: #111; }
.start .go { width: 100%; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 16px; font-weight: 600; }
.start .cont { width: 100%; padding: 13px; border-radius: 16px; margin-top: 10px; background: rgba(255, 255, 255, .3); color: #fff; }
.start .fine { margin-top: 26px; font-size: 11.5px; line-height: 1.7; opacity: .85; }

/* ---------- 开发者 ---------- */
.dev-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
.dev-row button { padding: 8px 12px; border-radius: 8px; background: #fff; border: 1px solid #ddd; font-size: 14px; }
.dev-row button.on { background: #111; color: #fff; }
.dev-kv { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; padding: 8px 16px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }